---
name: defining-form-specs
description: Defines form field specifications including validation rules, error states, and submission behavior. Updates the "フォーム仕様" section in screen spec.md.
allowed-tools: [Read, Write, Glob, mcp__figma__get_screenshot, mcp__figma__get_design_context, mcp__figma__get_metadata]
---
# 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](references/workflow.md)**: フォーム仕様定義のワークフロー
- **[validation-patterns.md](references/validation-patterns.md)**: 一般的なバリデーションパターン
- **[section-template.md](references/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 の存在確認
```bash
ls .outputs/{screen-id}/spec.md
```
### Step 1: 入力フィールドを検出
HTMLまたはFigmaから以下を抽出：
- `` 各種（text, email, password, number, tel, date等）
- `