mcpField
F
forms-router

forms-router

github.com/bbeierle12開発955 回インストール1 日前に更新
リポジトリ

forms-router について

forms-router は、要件に応じてフォーム開発タスクを 7 つの専門スキルに振り分けます。実装ガイドを組み合わせる開発者向けに、フレームワーク、フォームの種類、複雑さからスキルを選び、読み込み順と一般的な組み合わせを示します。

主な機能

  1. 01フレームワークとフォーム種別を判定
  2. 02タスクのシグナルから専門スキルを選択
  3. 03本番用フォーム向けにスキルを組み合わせ
  4. 04一般的な構成と判断表を提示
  5. 05情報不足時のフォールバック規則を定義

活用シーン

  1. 01React フォーム向けのスキルを選ぶ
  2. 02複数ステップのフォームウィザードを計画
  3. 03ログインフォームのセキュリティとアクセシビリティを組み合わせる

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill forms-router

インストール後、Claude Code で/forms-routerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

_meta.json
references/
accessibility.md
integration-guide.md
react.md
security.md
ux-patterns.md
validation.md
vanilla.md
vue.md

詳細

フォームルーター

タスクの要件に基づいて、7 つの専門スキルにルーティングします。

ルーティングプロトコル

  1. 分類 — フレームワークとフォームの種類を特定します
  2. 照合 — 以下のシグナル照合ルールを適用します
  3. 組み合わせ — 本番用フォームでは最低 3～4 個のスキルを組み合わせます
  4. 読み込み — コーディングの前に、該当する SKILL.md ファイルを読みます

クイックルート

Tier 1：コア（常に含める）
必要な機能スキルシグナル
WCAG 準拠、ARIAform-accessibilityaccessible、ARIA、スクリーンリーダー、キーボード、フォーカス、a11y
Zod スキーマ、タイミングform-validationvalidate、Zod、スキーマ、エラー、必須、パターン
自動補完、CSRF、XSSform-security自動補完、パスワードマネージャー、CSRF、XSS、サニタイズ
Tier 2：フレームワーク
必要な機能スキルシグナル
React Hook Form / TanStackform-reactReact、useForm、RHF、TanStack、formState
VeeValidate / Vuelidateform-vueVue、VeeValidate、Vuelidate、v-model
フレームワークなしform-vanillavanilla、プレーン JS、ネイティブ、制約検証
Tier 3：UX の強化
必要な機能スキルシグナル
ウィザード、分割、条件分岐form-ux-patterns複数ステップ、ウィザード、段階的、条件付き、ステッパー

シグナルの優先順位

複数のシグナルがある場合：

  1. フレームワークの明示 — React／Vue／vanilla によって Tier 2 の選択が決まります
  2. 認証コンテキスト — ログイン／登録では form-security を優先します
  3. 複雑さ — ウィザード／複数ステップでは form-ux-patterns を使用します
  4. デフォルト — Tier 1 のスキルを常にすべて含めます

よくある組み合わせ

標準的な本番用フォーム（4 スキル）
form-accessibility → WCAG, ARIA binding
form-validation → Zod schemas, timing
form-react → RHF integration
form-security → autocomplete attributes
セキュアな認証フォーム（4 スキル）
form-security → autocomplete, CSRF (priority)
form-accessibility → focus, error announcements
form-validation → auth schema
form-react → controlled submission
複数ステップのウィザード（4 スキル）
form-ux-patterns → chunking, navigation
form-validation → per-step validation
form-accessibility → focus on step change
form-react → FormProvider context
フレームワークを使わないフォーム（3 スキル）
form-vanilla → Constraint Validation API
form-accessibility → manual ARIA
form-security → autocomplete

判断表

フレームワークフォームの種類スキル
React標準アクセシビリティ + 検証 + セキュリティ + React
React認証セキュリティ + アクセシビリティ + 検証 + React
ReactウィザードUX パターン + 検証 + アクセシビリティ + React
Vue標準アクセシビリティ + 検証 + セキュリティ + Vue
Vue複雑アクセシビリティ + 検証 + UX パターン + Vue
なし任意vanilla + アクセシビリティ + セキュリティ

コア原則（すべてのスキル）

スキーマ優先：Zod スキーマを定義 → TypeScript の型を推論
タイミング：早めに評価（有効なら ✓）、遅めにエラーを示す（blur 時のみ ✗）
自動補完：認証フォームでは常に有効にします
分割：論理的なグループあたり最大 5～7 フィールド

フォールバック

  • フレームワークが明示されていない → 「React、Vue、vanilla JS のどれですか？」と尋ねます
  • 複雑さが曖昧 → Tier 1 とフレームワークのスキルから始めます
  • コンテキストが不足 → デフォルトで form-react を使用します（最も一般的です）

参考資料

完全な配線パターンとコード例については、references/integration-guide.md を参照してください。

コメント

Markdown 対応