AI-Driven-School /spec スキル
画面名から画面設計書を生成します。
使用方法
/spec ログイン画面
/spec ダッシュボード
/spec 商品詳細ページ
出力テンプレート
docs/specs/{screen}.md に出力:
# 画面設計: {画面名}
## 概要
{画面の目的と概要}
## 画面構成
### レイアウト
┌─────────────────────────────┐ │ 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 を作成しました
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
# 画面設計: ログイン画面
## 概要
ユーザーがメールとパスワードでログインする画面。
## コンポーネント一覧
| コンポーネント | 種類 | 説明 |
|--------------|------|------|
| Logo | Image | アプリロゴ |
| EmailInput | TextInput | メールアドレス入力 |
| PasswordInput | TextInput | パスワード入力 |
| LoginButton | Button | ログイン実行 |
| ForgotPasswordLink | Link | パスワード再設定へ |
| SignUpLink | Link | 新規登録へ |
...
承認しますか？ [Y/n/reject 理由]