jpskill.com
💬 コミュニケーション コミュニティ

forms-router

Router for web form development. Use when creating forms, handling validation, user input, or data entry across React, Vue, or vanilla JavaScript. Routes to 7 specialized skills for accessibility, validation, security, UX patterns, and framework-specific implementations. Start here for form projects.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o forms-router.zip https://jpskill.com/download/23484.zip && unzip -o forms-router.zip && rm forms-router.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/23484.zip -OutFile "$d\forms-router.zip"; Expand-Archive "$d\forms-router.zip" -DestinationPath $d -Force; ri "$d\forms-router.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して forms-router.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → forms-router フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
9
📖 Claude が読む原文 SKILL.md(中身を展開)

この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。

Forms Router

Routes to 7 specialized skills based on task requirements.

Routing Protocol

  1. Classify — Identify framework + form type
  2. Match — Apply signal matching rules below
  3. Combine — Production forms need 3-4 skills minimum
  4. Load — Read matched SKILL.md files before coding

Quick Route

Tier 1: Core (Always Include)

Need Skill Signals
WCAG compliance, ARIA form-accessibility accessible, ARIA, screen reader, keyboard, focus, a11y
Zod schemas, timing form-validation validate, Zod, schema, error, required, pattern
Autocomplete, CSRF, XSS form-security autocomplete, password manager, CSRF, XSS, sanitize

Tier 2: Framework

Need Skill Signals
React Hook Form / TanStack form-react React, useForm, RHF, TanStack, formState
VeeValidate / Vuelidate form-vue Vue, VeeValidate, Vuelidate, v-model
No framework form-vanilla vanilla, plain JS, native, constraint validation

Tier 3: Enhanced UX

Need Skill Signals
Wizards, chunking, conditionals form-ux-patterns multi-step, wizard, progressive, conditional, stepper

Signal Priority

When multiple signals present:

  1. Framework explicit — React/Vue/vanilla determines Tier 2 choice
  2. Auth context — Login/registration triggers form-security priority
  3. Complexity — Wizard/multi-step triggers form-ux-patterns
  4. Default — Always include all Tier 1 skills

Common Combinations

Standard Production Form (4 skills)

form-accessibility → WCAG, ARIA binding
form-validation → Zod schemas, timing
form-react → RHF integration
form-security → autocomplete attributes

Secure Auth Form (4 skills)

form-security → autocomplete, CSRF (priority)
form-accessibility → focus, error announcements
form-validation → auth schema
form-react → controlled submission

Multi-Step Wizard (4 skills)

form-ux-patterns → chunking, navigation
form-validation → per-step validation
form-accessibility → focus on step change
form-react → FormProvider context

Framework-Free Form (3 skills)

form-vanilla → Constraint Validation API
form-accessibility → manual ARIA
form-security → autocomplete

Decision Table

Framework Form Type Skills
React Standard accessibility + validation + security + react
React Auth security + accessibility + validation + react
React Wizard ux-patterns + validation + accessibility + react
Vue Standard accessibility + validation + security + vue
Vue Complex accessibility + validation + ux-patterns + vue
None Any vanilla + accessibility + security

Core Principles (All Skills)

Schema-first: Define Zod schema → infer TypeScript types
Timing: Reward early (✓ on valid), punish late (✗ on blur only)
Autocomplete: Never optional for auth forms
Chunking: Max 5-7 fields per logical group

Fallback

  • No framework stated → Ask: "React, Vue, or vanilla JS?"
  • Ambiguous complexity → Start with Tier 1 + framework skill
  • Missing context → Default to form-react (most common)

Reference

See references/integration-guide.md for complete wiring patterns and code examples.

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。