component-spec について
component-spec は、デザイナーや開発者が実装可能なデザインシステムのコンポーネント仕様を作成するためのスキルです。構成、動作、アクセシビリティ、使用方法を扱います。
主な機能
- 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 対応