Defining Form Specs

Form Specification Skill

フォームフィールドの仕様（バリデーションルール、エラー状態、送信動作）を定義するスキルです。

目次

1. 概要
2. 適用条件
3. クイックスタート
4. 詳細ガイド
5. 出力形式

概要

このスキルは以下のタスクをサポートします：

1. フィールド定義: 入力フィールドの型、必須/任意、制約
2. バリデーションルール: 形式、文字数、範囲等の検証ルール
3. エラーメッセージ: 各バリデーションエラー時のメッセージ
4. バリデーションタイミング: リアルタイム/onBlur/onSubmit
5. 送信動作: フォーム送信時の挙動

禁止事項

以下は絶対に行わないこと：

• 実装コードの生成（React Hook Form/Zod等）
• バリデーションライブラリの提案
• 技術スタック固有の実装詳細

このスキルの目的は「フォームの仕様」の情報整理のみです。

適用条件

このスキルは入力フォームがある画面にのみ適用します。

適用する画面の例

• ログイン/会員登録フォーム
• プロフィール編集
• 検索フォーム（複雑な条件入力）
• お問い合わせフォーム
• 設定画面（入力あり）
• データ入力/編集画面

適用しない画面の例

• 一覧表示のみの画面
• 詳細表示のみの画面
• ダッシュボード（入力なし）

入力フォームがない場合、spec.md のフォーム仕様セクションに「該当なし」と記載します。

出力先

このスキルは画面仕様書（spec.md）の「フォーム仕様」セクションを更新します。

.outputs/{screen-id}/
├── spec.md                 # ← このスキルが「フォーム仕様」セクションを更新
├── index.html              # 参照用HTML
└── assets/

クイックスタート

基本的な使い方

以下のFigma画面のフォーム仕様を定義してください：
https://figma.com/design/XXXXX/Project?node-id=1234-5678

エージェントは自動的に：

1. 入力フィールドを検出
2. フィールド属性を整理
3. バリデーションルールを推測/文書化
4. spec.md の「フォーム仕様」セクションを更新

詳細ガイド

詳細な情報は以下のファイルを参照してください：

• workflow.md: フォーム仕様定義のワークフロー
• validation-patterns.md: 一般的なバリデーションパターン
• section-template.md: セクション出力テンプレート

Workflow

フォーム仕様定義時にこのチェックリストをコピー：

Form Specification Progress:
- [ ] Step 0: spec.md の存在確認
- [ ] Step 1: 入力フィールドを検出
- [ ] Step 2: フィールド属性を整理
- [ ] Step 3: バリデーションルールを定義
- [ ] Step 4: エラーメッセージを定義
- [ ] Step 5: バリデーションタイミングを決定
- [ ] Step 6: 送信動作を定義
- [ ] Step 7: spec.md の「フォーム仕様」セクションを更新

Step 0: spec.md の存在確認

ls .outputs/{screen-id}/spec.md

Step 1: 入力フィールドを検出

HTMLまたはFigmaから以下を抽出：

• <input> 各種（text, email, password, number, tel, date等）
• <textarea>
• <select> / ドロップダウン
• チェックボックス / ラジオボタン
• トグルスイッチ
• ファイルアップロード
• カスタム入力コンポーネント

Step 2: フィールド属性を整理

各フィールドについて：

Step 3: バリデーションルールを定義

各フィールドのバリデーションルール：

• 形式: メール、URL、電話番号等
• 文字数: 最小/最大文字数
• 範囲: 数値の最小/最大値
• パターン: 正規表現
• 依存関係: 他フィールドとの関係
• カスタムルール: ビジネスロジック固有

Step 4: エラーメッセージを定義

各バリデーションエラーに対するメッセージ：

Step 5: バリデーションタイミングを決定

Step 6: 送信動作を定義

• 送信ボタンの活性/非活性条件
• 送信中の状態（loading）
• 成功時の挙動
• 失敗時の挙動
• 再送信の可否

Step 7: spec.md の「フォーム仕様」セクションを更新

1. セクションを特定（## フォーム仕様）
2. ステータスを「完了 ✓」に更新
3. {{FORM_SPECS_CONTENT}} を内容に置換
4. 完了チェックリストを更新
5. 変更履歴に追記

出力形式

spec.md「フォーム仕様」セクションの内容

## フォーム仕様

> **ステータス**: 完了 ✓  
> **生成スキル**: defining-form-specs  
> **更新日**: 2024-01-15

### フォーム概要

| 項目 | 値 |
|------|-----|
| フォーム名 | ユーザー登録フォーム |
| フィールド数 | 5 |
| 必須フィールド数 | 3 |

### フィールド一覧

| フィールド | 型 | 必須 | 最大文字数 | 備考 |
|-----------|-----|:----:|-----------|------|
| メールアドレス | email | ✓ | 254 | - |
| パスワード | password | ✓ | 128 | 8文字以上 |
| パスワード確認 | password | ✓ | 128 | パスワードと一致 |
| ニックネーム | text | - | 20 | - |
| 利用規約同意 | checkbox | ✓ | - | - |

### フィールド詳細

#### メールアドレス

| 項目 | 値 |
|------|-----|
| フィールドID | email |
| 入力タイプ | email |
| 必須 | ✓ |
| プレースホルダー | example@email.com |
| バリデーション | RFC 5322準拠、最大254文字 |
| エラーメッセージ | 有効なメールアドレスを入力してください |
| バリデーションタイミング | onBlur |

#### パスワード

| 項目 | 値 |
|------|-----|
| フィールドID | password |
| 入力タイプ | password |
| 必須 | ✓ |
| プレースホルダー | 8文字以上の英数字 |
| バリデーション | 8文字以上、英字と数字を含む |
| エラーメッセージ | パスワードは8文字以上で英数字を含めてください |
| バリデーションタイミング | onBlur |
| 追加機能 | パスワード表示トグル、強度インジケーター |

### バリデーションルール

| フィールド | ルール | 条件 | エラーメッセージ |
|-----------|--------|------|-----------------|
| メールアドレス | required | - | メールアドレスを入力してください |
| メールアドレス | format | RFC 5322 | 有効なメールアドレスを入力してください |
| メールアドレス | maxLength | 254 | メールアドレスは254文字以内で入力してください |
| パスワード | required | - | パスワードを入力してください |
| パスワード | minLength | 8 | パスワードは8文字以上で入力してください |
| パスワード | pattern | /^(?=.*[A-Za-z])(?=.*\d)/ | パスワードは英数字を含めてください |
| パスワード確認 | required | - | パスワード確認を入力してください |
| パスワード確認 | match | password | パスワードが一致しません |

### バリデーションタイミング

| タイミング | 対象フィールド |
|-----------|---------------|
| onChange | - |
| onBlur | メールアドレス、パスワード、パスワード確認、ニックネーム |
| onSubmit | 全フィールド |
| debounced (500ms) | メールアドレス（重複チェック） |

### 送信動作

| 項目 | 値 |
|------|-----|
| 送信ボタン | 登録する |
| 活性条件 | 必須フィールド入力済み & エラーなし |
| 送信中 | ボタン非活性 + ローディング表示 |
| 成功時 | 確認メール送信完了画面へ遷移 |
| 失敗時 | エラーメッセージ表示、フォーム維持 |
| 再送信 | エラー解消後に可能 |

### 特記事項

- メールアドレスの重複チェックはAPI経由で実行
- パスワード強度インジケーター: 弱/中/強の3段階
- 利用規約リンクは別タブで開く

完了チェックリスト

生成後、以下を確認：

- [ ] spec.md の「フォーム仕様」セクションが更新されている
- [ ] ステータスが「完了 ✓」になっている
- [ ] 全ての入力フィールドがリストされている
- [ ] バリデーションルールが明確
- [ ] エラーメッセージが定義されている
- [ ] バリデーションタイミングが決定されている
- [ ] 送信動作が定義されている
- [ ] 完了チェックリストが更新されている
- [ ] 変更履歴に記録が追加されている

フォームがない場合

入力フォームがない画面の場合、以下のように記載：

## フォーム仕様

> **ステータス**: 該当なし  
> **生成スキル**: defining-form-specs  
> **更新日**: 2024-01-15

この画面には入力フォームがありません。

注意事項

他のセクションを変更しない

このスキルは「フォーム仕様」セクションのみを更新します。

バリデーションルールの推測

Figmaデザインからバリデーションルールが明確でない場合：

1. フィールドタイプから一般的なルールを推測
2. 「要確認」として明示
3. 設計者/PMへの確認事項としてリスト

extracting-interactions との違い

フィールドのfocus/error状態は両方で扱いますが、観点が異なります。

参照

• workflow.md: 詳細なワークフロー
• validation-patterns.md: バリデーションパターン集
• section-template.md: セクション出力テンプレート
• managing-screen-specs: 仕様書管理スキル