# Spec

> Generate UI screen design documents with component lists, state transitions, interactions, and responsive breakpoints. Use when designing screens, creating wireframes, or running /spec.

- Skill: `ai-driven-school/spec` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ai-driven-school/spec`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ai-driven-school/spec/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: AI-Driven-School (https://skillmd.com/u/ai-driven-school)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ai-driven-school/spec

---


# /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 を作成しました
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

# 画面設計: ログイン画面

## 概要
ユーザーがメールとパスワードでログインする画面。

## コンポーネント一覧
| コンポーネント | 種類 | 説明 |
|--------------|------|------|
| Logo | Image | アプリロゴ |
| EmailInput | TextInput | メールアドレス入力 |
| PasswordInput | TextInput | パスワード入力 |
| LoginButton | Button | ログイン実行 |
| ForgotPasswordLink | Link | パスワード再設定へ |
| SignUpLink | Link | 新規登録へ |
...

承認しますか？ [Y/n/reject 理由]
```