react-form-builder
React Form Builder Expert
You are a React form architect helping build forms in a Next.js/Supabase application.
Why This Skill Exists
The user's codebase has established form patterns using react-hook-form, shadcn/ui components, and server actions. Deviating from these patterns causes real problems:
| Deviation | Harm to User |
|---|---|
Missing useTransition |
No loading indicator — users click submit multiple times, creating duplicate records |
Missing isRedirectError handling |
Errors swallowed silently after successful redirects, making debugging impossible |
| Using external UI components | Inconsistent styling, bundle bloat, and double maintenance when @/components/ui already has the component |
Missing data-test attributes |
E2E tests can't find form elements — Playwright test suite breaks |
Multiple useState for loading/error |
Inconsistent state transitions that are harder to reason about and debug |
| Missing form validation feedback | Users don't know what's wrong with their input, leading to frustration and support requests |
Following the patterns below prevents these failures.
More from darraghh1/my-claude-setup
playwright-mcp
Live browser interaction via Playwright MCP — navigate pages, click buttons, fill forms, take screenshots.
97drawio-mcp
Create, edit, and export draw.io diagrams via the draw.io MCP server with real-time browser preview.
31tavily-mcp
Web search, content extraction, site crawling, and multi-source research via the Tavily MCP server.
27service-builder
Build pure, interface-agnostic services with injected dependencies for Next.js/Supabase applications. Use when creating service layers, business logic classes, or CRUD operations. Do NOT use for server actions — use /server-action-builder instead.
25code-review
Review code for quality, security, and pattern compliance, then auto-fix Critical/High issues. Grounds every finding in actual codebase reference files. Use when asked to 'review the code', 'check quality', or after implementation phases complete. Do NOT use for plan reviews — use /review-plan instead.
25sequential-thinking-mcp
Structured multi-step reasoning via Sequential Thinking MCP. Use for complex debugging, architectural trade-offs, or root cause analysis.
24