mcpField
H
handoff-spec

handoff-spec

github.com/infrasity-labsデザイン・UI15078 回インストール18 週間前に更新
リポジトリ

handoff-spec について

handoff-spec は、開発者がデザインを正確に実装するための仕様書を作成するスキルです。視覚的な詳細、操作状態、コンテンツ規則、アセット、例外ケース、実装メモを扱います。

主な機能

  1. 01サイズ、色、タイポグラフィの指定
  2. 02操作状態とキーボード動作の定義
  3. 03動的コンテンツとローカライズの記述
  4. 04画像、アイコン、フォントの一覧化
  5. 05例外ケースとアクセシビリティの網羅

活用シーン

  1. 01開発者への画面仕様の引き継ぎ
  2. 02レスポンシブレイアウトとブレークポイントの説明
  3. 03読み込み、エラー、空状態の定義
  4. 04複雑なレイアウトの実装要点の記録

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/infrasity-labs/dev-gtm-claude-skills --skill handoff-spec

インストール後、Claude Code で/handoff-specを入力して読み込まれたか確認します。

詳細

引き継ぎ仕様書

明確で完全な開発者向け引き継ぎ仕様書を作成するエキスパートです。

役割

デザインを正確に実装するために必要な情報をすべて開発者に提供する引き継ぎドキュメントを作成します。

引き継ぎ内容

ビジュアル仕様
  • 余白とサイズ(正確なピクセル値またはトークン参照)
  • 色の値(16 進数コードではなく、トークン名)
  • タイポグラフィ(スタイル名、サイズ、ウェイト、行の高さ)
  • 角丸、シャドウ、不透明度の値
  • レスポンシブブレークポイントの動作
インタラクション仕様
  • 状態の定義(デフォルト、ホバー、フォーカス、アクティブ、無効)
  • トランジションとアニメーション(時間、イージング、プロパティ)
  • ジェスチャーの動作(スワイプ、ドラッグ、ピンチ)
  • キーボード操作(タブ順序、ショートカット)
コンテンツ仕様
  • 文字数制限と省略時の動作
  • 動的コンテンツのルール(変更内容、最小値/最大値)
  • ローカライズに関する考慮事項(テキストの拡張、RTL)
  • 空、読み込み中、エラー状態のコンテンツ
アセットの提供
  • アイコン(SVG、命名規則に従った名前)
  • 画像(解像度、形式、レスポンシブ用のバリエーション)
  • フォント(ファイルまたはサービスへのリンク)
  • カスタムイラストやグラフィック
エッジケース
  • コンテンツの最小・最大ケース
  • 各ブレークポイントでのレスポンシブ動作
  • ブラウザー/デバイス固有の考慮事項
  • アクセシビリティ要件(ARIA、キーボード、スクリーンリーダー)
実装メモ
  • コンポーネントの再利用に関する提案
  • データ構造に関する前提
  • API 依存関係
  • パフォーマンスに関する考慮事項

ベストプラクティス

  • 生の値ではなく、デザイントークンを使用する
  • 見た目だけでなく、動作も注釈する
  • 望ましいケースだけでなく、すべての状態を含める
  • 複雑なレイアウトでは寸法注記を提供する
  • 開発者とともに引き継ぎ内容を確認する

コメント