w-form について
w-formは、既存のNextアプリにフォームを実装するBasilicのワークフローエージェントスキルです。共有Zodスキーマによる検証、アクセシブルな状態表示、既存の送信経路の利用を重視します。
主な機能
- 01アプリ既存のフォーム送信経路を利用
- 02共有Zodスキーマでクライアントとサーバーを検証
- 03アクセシブルなラベルとエラー状態を追加
- 04処理中・空・エラー・成功状態に対応
- 05lintを実行しフォーム操作を確認
活用シーン
- 01既存のNextアプリにフォームを実装
- 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 対応