How does it handle form validation?

It utilizes Zod schemas to define validation rules, which are integrated into the form via the @hookform/resolvers/zod package.

Does the code follow accessibility best practices?

Yes, all patterns include proper ARIA attributes, label associations, and error state handling to ensure WCAG compliance.

Does this skill support all shadcn/ui components?

Yes, it provides implementation patterns for core components including Input, Textarea, Select, Checkbox, RadioGroup, Switch, and more.

Can I create dynamic forms with this skill?

Absolutely. The skill includes specific patterns for using useFieldArray to manage repeatable field groups like dynamic lists.

Shadcn Form Builder

Name: Shadcn Form Builder
Author: xyqyear

byxyqyear

0•

デザインツール

Builds validated, accessible forms using shadcn/ui components, React Hook Form, and Zod schemas.

The shadcn-form skill provides specialized guidance for implementing production-grade web forms within the shadcn/ui ecosystem. It streamlines the integration of React Hook Form for state management and Zod for schema-based validation, offering standardized implementation patterns for various input types including text inputs, selects, checkboxes, and complex field arrays. By using this skill, developers can ensure consistent styling, accessibility standards, and robust error handling across their entire application with minimal manual boilerplate.

主な機能

010 GitHub stars

02Accessible UI component implementations for Select, Radio, and Switch

03Responsive field layout patterns including horizontal and grid views

04Standardized React Hook Form integration with useForm

05Automatic Zod schema generation and validation patterns

06Support for dynamic field arrays and repeatable groups

ユースケース

01Creating complex user registration and onboarding flows

02Building comprehensive settings and profile management pages

03Implementing dynamic forms with repeatable field groups

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xyqyear/my-claude-skills shadcn-form

For use in Claude.ai and ChatGPT

主な機能

010 GitHub stars

02Accessible UI component implementations for Select, Radio, and Switch

03Responsive field layout patterns including horizontal and grid views

04Standardized React Hook Form integration with useForm

05Automatic Zod schema generation and validation patterns

06Support for dynamic field arrays and repeatable groups

ユースケース

01Creating complex user registration and onboarding flows

02Building comprehensive settings and profile management pages

03Implementing dynamic forms with repeatable field groups

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xyqyear/my-claude-skills shadcn-form

For use in Claude.ai and ChatGPT