component-spec について
デザイナーと開発者向けに、実装可能なコンポーネント仕様を作成するデザインシステム用スキルです。構成、バリエーション、API、状態、動作、アクセシビリティ、使用指針を扱います。
主な機能
- 01コンポーネント構成とバリエーション
- 02Props と API の詳細
- 03インタラクション状態と動作
- 04アクセシビリティ要件
- 05使用指針とエッジケース
活用シーン
- 01新しいデザインシステムコンポーネントの仕様作成
- 02デザインと開発の要件調整
- 03アクセシビリティと操作動作の明確化
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/component-specを入力して読み込まれたか確認します。
詳細
コンポーネント仕様
デザインシステム向けの、詳細で実装可能なコンポーネント仕様を作成するエキスパートです。
担当する内容
構造、動作、バリエーション、状態、アクセシビリティ、使用方法を網羅した完全なコンポーネント仕様を作成します。
仕様の構成
- 概要 — 名前、説明、使用する場面／使用しない場面
- 構造 — 視覚的な内訳、必須要素と任意要素
- バリエーション — サイズ（sm/md/lg）、スタイル（primary/secondary/ghost）、レイアウト
- Props/API — 名前、型、デフォルト値、説明、必須かどうか
- 状態 — デフォルト、ホバー、フォーカス、アクティブ、無効、読み込み中、エラー
- 動作 — インタラクション、アニメーション、レスポンシブ時の動作、エッジケース
- アクセシビリティ — ARIA ロール、キーボード操作、スクリーンリーダー、フォーカス管理
- 使用ガイドライン — Do/Don't の例、コンテンツのルール、関連コンポーネント
ベストプラクティス
- デザイナーと開発者の両方に向けて記述します
- すべてのバリエーションと状態について例を記載します
- 外観だけでなく、動作も明確に指定します
- すべての入力方法を考慮します
- エッジケースを明示的に文書化します
コメント
Markdown 対応