speclisted

# /spec スキル 画面名から画面設計書を生成します。 ## 使用方法 ``` /spec ログイン画面 /spec ダッシュボード /spec 商品詳細ページ ``` ## 出力テンプレート `docs/specs/{screen}.md` に出力: ```markdown # 画面設計: {画面名} ## 概要 {画面の目的と概要} ## 画面構成 ### レイアウト ``` ┌─────────────────────────────┐ │ Header │ ├─────────────────────────────┤ │ │ │ Main Content │ │ │ ├─────────────────────────────┤ │ Footer/TabBar │ └─────────────────────────────┘ ``` ### コンポーネント一覧 | コンポーネント | 種類 | 説明 | 必須 | |--------------|------|------|:----:| | {名前} | {種類} | {説明} | ✓/- | ## 状態 | 状態名 | トリガー | 表示内容 | |--------|---------|---------| | 初期表示 | ページロード | {内容} | | ローディング | API呼び出し中 | スピナー表示 | | 空状態 | データ0件 | 空状態メッセージ | | エラー | API失敗 | エラーメッセージ | ## インタラクション ### ユーザーアクション | アクション | 動作 | 遷移先 | |-----------|------|--------| | {ボタン}クリック | {処理} | {画面/状態} | ### キーボードショートカット | キー | アクション | |------|----------| | Enter | {動作} | | Escape | {動作} | ### アニメーション - {要素}: {アニメーション種別}（{タイミング}） ## レスポンシブ対応 | ブレークポイント | レイアウト変更 | |-----------------|---------------| | < 768px (mobile) | {変更内容} | | < 1024px (tablet) | {変更内容} | | >= 1024px (desktop) | {変更内容} | ## アクセシビリティ - [ ] 適切なaria-label - [ ] キーボードナビゲーション対応 - [ ] 色のコントラスト比 4.5:1以上 - [ ] フォーカス状態の視覚的表示 ## 関連画面 - 遷移元: {画面名} - 遷移先: {画面名} ``` ## 出力例 ``` > /spec ログイン画面 📐 画面設計を生成中... (Claude) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📄 docs/specs/login.md を作成しました ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━