Menú
Use when constructing forms, inputs, submit behaviors, validation displays, and feedback toast alerts.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Use when adding a brand-new CRUD resource beyond the core entity (e.g. a second model the PS requires).
Use when building or restyling any page or component.
Use when creating new Next.js route handlers using the custom helper wrapper.
Use whenever the Prisma schema changes and a migration is needed.
Use when integrating third-party APIs (e.g. SMTP emails, SMS notification gateways, payment checkout gates, or OCR parsers).
Use when adapting the template's placeholder Item entity to a hackathon problem statement's actual domain entity.
| name | build-interactive-forms |
| description | Use when constructing forms, inputs, submit behaviors, validation displays, and feedback toast alerts. |
Ensure all input grids and form components are clear, accessible, and provide immediate interactive user feedback:
Primitive Form Fields:
<FormField> component. It wraps label, input element, and validation warning messages:
<FormField
label="Diamond Weight (Carats)"
name="carat"
type="number"
step="0.01"
placeholder="e.g. 1.25"
value={formData.carat}
onChange={handleChange}
error={errors.carat}
disabled={submitting}
/>
Loading / Submitting States:
submitting state).Validation & Toast Alerts:
toast("Diamond record created successfully!", "success");
toast(error.message || "Failed to create record", "error");