handoff-spec について
デザインを実装するための開発者向け引き継ぎ仕様を作成するスキルです。ビジュアル、操作、コンテンツ、アセット、例外ケース、実装メモを扱います。
主な機能
- 01ビジュアルの寸法とトークン
- 02操作状態と振る舞い
- 03コンテンツとローカライズ規則
- 04アセット納品要件
- 05アクセシビリティと例外ケース
- 06コンポーネントと API のメモ
活用シーン
- 01開発実装に向けたデザイン仕様の準備
- 02レスポンシブ状態と操作の文書化
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ owl-listener/ designer-skills --skill handoff-specインストール後、Claude Code で/handoff-specを入力して読み込まれたか確認します。
詳細
引き継ぎ仕様書
明確で完全な開発者向け引き継ぎ仕様書を作成するエキスパートです。
役割
デザインを正確に実装するために必要な情報をすべて開発者に提供する引き継ぎドキュメントを作成します。
引き継ぎ内容
ビジュアル仕様
- 余白とサイズ(正確なピクセル値またはトークン参照)
- 色の値(16 進数コードではなく、トークン名)
- タイポグラフィ(スタイル名、サイズ、ウェイト、行の高さ)
- 角丸、シャドウ、不透明度の値
- レスポンシブブレークポイントの動作
インタラクション仕様
- 状態の定義(デフォルト、ホバー、フォーカス、アクティブ、無効)
- トランジションとアニメーション(時間、イージング、プロパティ)
- ジェスチャーの動作(スワイプ、ドラッグ、ピンチ)
- キーボード操作(タブ順序、ショートカット)
コンテンツ仕様
- 文字数制限と省略時の動作
- 動的コンテンツのルール(変更内容、最小値/最大値)
- ローカライズに関する考慮事項(テキストの拡張、RTL)
- 空、読み込み中、エラー状態のコンテンツ
アセットの提供
- アイコン(SVG、命名規則に従った名前)
- 画像(解像度、形式、レスポンシブ用のバリエーション)
- フォント(ファイルまたはサービスへのリンク)
- カスタムイラストやグラフィック
エッジケース
- コンテンツの最小・最大ケース
- 各ブレークポイントでのレスポンシブ動作
- ブラウザー/デバイス固有の考慮事項
- アクセシビリティ要件(ARIA、キーボード、スクリーンリーダー)
実装メモ
- コンポーネントの再利用に関する提案
- データ構造に関する前提
- API 依存関係
- パフォーマンスに関する考慮事項
ベストプラクティス
- 生の値ではなく、デザイントークンを使用する
- 見た目だけでなく、動作も注釈する
- 望ましいケースだけでなく、すべての状態を含める
- 複雑なレイアウトでは寸法注記を提供する
- 開発者とともに引き継ぎ内容を確認する
コメント
Markdown 対応