#claude-code (5)

概要

frontend-design@claude-code-plugins はAnthropic公式のClaude Codeプラグイン。AIが生成しがちな汎用的なUI（AIスロップ）を防ぎ、洗練されたフロントエンドコードを出力させるスキル。

主な効果

• 大胆な配色・タイポグラフィの選択
• インパクトのあるアニメーション
• コンテキストに応じたビジュアルディテール
• デフォルトスタイルではなく意図的なデザイン

インストール

# Claude Code内で /plugin → マーケットプレイス → anthropics/claude-code → frontend-design

インストール後は「ダッシュボード作って」等の指示で自動適用される。

参考

• GitHub
• プラグインドキュメント

概要

Claude CodeのTask toolで4つの思考スタイル（性格）のエージェントを並列起動し、設計判断の質を高める手法。役割ベース（フロント担当・バック担当）ではなく、認知的多様性で盲点を減らす。

4つの性格

性格	問い	視点
Pragmatist	最短経路は？	実用性・コスト・速度
Skeptic	何が壊れる？	リスク・前提・失敗モード
Idealist	半年後も誇れる？	品質・拡張性・長期ビジョン
Connector	既存との整合は？	パターン認識・文脈・一貫性

導入のポイント

• 全タスクに使わない。重要な設計判断（DB選定、認証方式、SSR/SPA等）の時だけ
• --quick モード（Pragmatist + Skepticの2体）でコスト削減可能
• 理論的背景: デボノの Six Thinking Hats、アンサンブル学習の多様性原理
• 認知的多様性は条件次第で逆効果（統合基準が曖昧だと矛盾が増えるだけ）

実装

/design-review スキルとして構築。ファシリテーターが4体を並列起動→合意点・対立点・鋭い問いを統合して提示。

/plan → /design-review（技術判断が要る時だけ）→ /tdd-workflow

参考

• 元記事

新しいfrontmatterフィールド

フィールド	説明
context: fork	サブエージェント分離実行
agent	forkのエージェントタイプ（Explore, Plan等）
hooks	PreToolUse/PostToolUse/Stopフック

動的コンテキスト注入

## Context
- Current branch: !`git branch --show-current`

!command“ でスキル送信前にコマンド出力を埋め込める。

descriptionのベストプラクティス

Triggers: キーワードで自動起動条件を明記する。これがClaude自動起動の唯一の判断材料。

"PRをレビューする。Triggers: user says 'レビューして', or when a PR number is mentioned."

Progressive Disclosure

• Level 1: メタデータ（常時ロード、~100トークン）
• Level 2: SKILL.md本文（起動時、<5000トークン推奨）
• Level 3: references/（必要時にRead）

肥大化の犯人

• projects/ — 会話履歴。最大（数百MB〜GB級）
• debug/ — デバッグログ。数百MBになる
• file-history/ — ファイル変更履歴。300GB到達の報告あり

対策

settings.json に追加:

{
  "cleanupPeriodDays": 20
}

サイズ確認エイリアス:

alias claude-size='du -sh ~/.claude/ && du -sh ~/.claude/* 2>/dev/null | sort -h'

削除可能なディレクトリ

debug/, projects/*, file-history/, stats-cache.json, statsig/

削除不可: settings.json, commands/, skills/, rules/

3つの実装形態

形態	構成	使い分け
A: スキル単体	SKILL.md	対話的 + 軽量処理
B: サブエージェント単体	agent.md	非対話、他から呼ばれる
C: ラッパーパターン	SKILL.md + agent.md	/command起動 + 重い処理は別コンテキスト

判断フロー

対話が必要？
├─ Yes → 処理重い？ → Yes: C / No: A
└─ No  → /command起動したい？ → Yes: C / No: B

ポイント

• disable-model-invocation: true は使わない。descriptionのトリガー条件で起動制御する方が柔軟
• ラッパーパターンでは SKILL.md は薄く（委譲のみ）、実処理は agent.md に書く
• 軽量処理のagentは model: haiku でコスト3倍削減