w-form について
w-formは、既存のNextアプリにフォームを実装するスキルです。既存の送信方法を踏襲し、クライアントとサーバーでZodスキーマを共有して、アクセシビリティとフォーム状態を確認します。
主な機能
- 01周辺フォームの送信方法を確認して再利用
- 02Zodスキーマを共有したバリデーション
- 03アクセシブルなラベルとエラー状態
- 04処理中、空、成功状態への対応
- 05lintの実行と送信経路のテスト
活用シーン
- 01Nextアプリへのフォーム追加
- 02クライアントとサーバーでの入力検証
- 03キーボード操作によるフォーム送信の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/w-formを入力して読み込まれたか確認します。
詳細
現在の Next アプリにフォームを実装します。next-v16 と shadcn-v3 に従ってください。アプリがすでに API クライアント（Fastify + TanStack Query）を通じてデータを更新している場合、そのフローに Server Actions、useFormStatus、useOptimistic を導入しないでください。
- 近隣のフォームがどのように送信しているかを確認します。その方法を再利用してください。
- クライアント側の UX とサーバー側の検証で、1 つの Zod スキーマを共有します。
- 既存の UI プリミティブを使って、アクセシブルなラベル、エラー、処理中の状態、空・エラー・成功の各状態を連携させます。
- lint を実行し、送信、検証失敗、キーボード操作の経路を確認します。
- 動作やコマンドを変更した場合は、ドキュメントを
/w-docsで更新します。
コメント
Markdown 対応