Spec

Skill AI-Driven-School/aiki/.claude/skills/spec

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

Install

npx -y skills add AI-Driven-School/aiki --skill spec

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.5 KB, ~1.0k tokens by cl100k_base, as published. Nobody here has run it

/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 理由]

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.