# Article Writer

> 禁止事項

- Skill: `tmaru-eng/article-writer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add tmaru-eng/article-writer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tmaru-eng/article-writer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tmaru-eng (https://skillmd.com/u/tmaru-eng)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tmaru-eng/article-writer

---

## 禁止事項

AI が生成したと分かるような没個性的なデザインや、
文脈に合っていない汎用 UI を避ける。

- 汎用フォント（Inter、Roboto、Arial、システムフォントなど）
- 白背景に薄い紫グラデーション
- テンプレートにあるような予測可能なカードレイアウト
- 意図のないコンポーネントの羅列
- 方向性が曖昧で、統一感のないデザイン

また、常に同じフォントや構成に収束することは避け、
各デザインはそれぞれ異なる美しさと個性を持つべきである。

# タイポグラフィガイドライン

## 避けるべきフォント

絶対に使わないこと: Inter, Roboto, Open Sans

## 推奨フォント

- 見出し: Playfair Display, Merriweather
- 本文: JetBrains Mono, Source Serif Pro
- UI 要素: Space Grotesk, DM Sans

## 原則

- コントラストの高いフォントの組み合わせを使う
- 汎用的なサンセリフより編集的なタイポグラフィを優先する
- 可読性も考慮するが、個性を優先する
# テーマガイドライン

## 全体的な美学
- ダークファンタジー RPG テーマ
- 中世とサイバーパンクの融合
- 豊かで雰囲気のあるカラーパレット

## 配色
- プライマリ: ディープパープル (#2D1B4E)
- アクセント: ゴールド (#D4AF37)
- 背景: ほぼ黒 (#0A0A0A)

## ビジュアルスタイル
- テクスチャのある背景
- 装飾的なボーダー
- ドラマチックな影
# モーションガイドライン

## アニメーションの原則
- マイクロインタラクションには CSS トランジションを使う
- ページロード時はアニメーションを段階的に実行する
- ease-out のタイミング関数を優先する

## 具体例
- スクロール時のフェードイン + スライドアップ
- ボタンのホバー時の拡大 (1.05倍)
- スムーズな色の変化 (300ms)

## 避けるべきこと
- 過度なバウンスエフェクト
- 唐突な状態変化
- 500ms を超えるアニメーション
# 背景ガイドライン

AI っぽくない、自然でクリーンな背景デザインを実装するためのガイドライン。
グラデーションや紫色を避け、ノイズテクスチャやパターンで深みを追加する。
Web デザインやコーディング時に背景スタイルを決定する際に使用する。

## パターン

- グラデーションを使わない
- 紫色は使わない
- 深みを出すためにノイズテクスチャを検討する
- 視覚的な面白さのために控えめなパターン（ドット、ライン）を使う

## 具体例

- 背景には幾何学パターン

## 実装

- Tailwind のユーティリティを使う
- コントラストを読みやすく保つ