Build DaisyUI v5 forms in Svelte with validation and error handling.
npx skills add https://github.com/spences10/devhub-crm --skill form-patterns
Please help me install this Agent Skill. Skill: form-patterns Source: https://github.com/spences10/devhub-crm/tree/main/.claude/skills/form-patterns Command: npx skills add https://github.com/spences10/devhub-crm --skill form-patterns
This Skill provides a clear and consistent set of patterns for building forms using DaisyUI v5, addressing the significant changes from v4. It ensures forms are well-structured, accessible, visually appealing, and integrate seamlessly with SvelteKit's remote function error handling, saving development time and improving user experience.
fieldset/fieldset-legend and <label class="input"> patterns for inputs, ensuring correct styling and accessibility.validator class to provide instant visual feedback for input validation states, improving user guidance.space-y-4 for forms and w-full for inputs to maintain a uniform and responsive design across your application.Wrap form fields in <fieldset class="fieldset"> with a <legend class="fieldset-legend">.
For inputs, use <label class="input w-full"> as a wrapper, containing <input class="grow">.
Add the validator class to the <label> for automatic validation styling.
For selects and textareas, apply select w-full or textarea w-full directly to the element.
Display server errors using {#if my_form.error}.
High-intent search queries and answers about installing and using this skill.
DaisyUI v5 forms use fieldset with fieldset-legend wrappers and label class="input" containers for inputs, ensuring semantic structure and accessibility. Combine with the validator class for automatic validation styling and w-full for responsive sizing across your form fields.
Apply the validator class to label or input wrappers to enable instant visual feedback. Pair with SvelteKit remote function error handling to display server-side errors directly within the form, providing immediate user guidance on validation failures.
Wrap fields in fieldset class="fieldset" with a legend class="fieldset-legend". For inputs, use label class="input w-full" containing input class="grow". For selects and textareas, apply select w-full or textarea w-full directly, maintaining consistent spacing with space-y-4 between fields.
DaisyUI v5 forms work with direct class usage on controls. The Skill provides compatibility guidance for using Tailwind forms plugin alongside DaisyUI patterns, though the native DaisyUI structure is recommended for full consistency and validator-driven styling.
No. DaisyUI v5 handles styling through semantic classes like input, select, and textarea with w-full for responsive width. The validator class automates validation state styling, eliminating the need for custom Tailwind utility chains on individual controls.
Use conditional rendering like {#if my_form.error} to display server-side errors directly within the form structure. DaisyUI v5 patterns integrate seamlessly with SvelteKit's remote function error handling for immediate, contextual error feedback.
csim-sgBuild UI components with DaisyUI v5 and Tailwind CSS 4.
wraps-teamImplement Next.js server actions with TanStack Form and zod validation.
nounderCompose prebuilt UI components with Tailwind CSS utilities and DaisyUI themes.
bobmatnycAdd accessible React UI components styled with Tailwind CSS.