Vendor shadcn/ui components into EOS SaaS repos with Radix and Tailwind.
npx skills add https://github.com/antonyfmunoz/OS --skill shadcn-ui-antonyfmunoz
Please help me install this Agent Skill. Skill: shadcn_ui Source: https://github.com/antonyfmunoz/OS/tree/main/skills/tools/shadcn_ui Command: npx skills add https://github.com/antonyfmunoz/OS --skill shadcn-ui-antonyfmunoz
shadcn_ui prevents UI drift and broken Radix/RHF integration by standardizing how your agents add and modify shadcn/ui components in the /opt/OS/saas codebase.
Use this skill to add a new UI component set by asking: “Initialize shadcn for my EOS Vite app with the new-york style, then add the button, dialog, and form primitives in /opt/OS/saas/my-app so the components are vendored and ready to use.”
High-intent search queries and answers about installing and using this skill.
You vendor shadcn/ui components by using the shadcn CLI to copy Radix-based React source code directly into your repository, allowing you to edit source code directly while maintaining consistent theming via Tailwind CSS variables.
You integrate React Hook Form with shadcn/ui by wiring shadcn Form primitives with zodResolver for validation, ensuring accessible UI components are correctly composed within your React application.
Using the Radix UI asChild prop prevents nested interactive elements and accessibility bugs by forwarding props to a single child element, allowing safe composition with triggers using cn() and tailwind-merge for class management.
Build a DataTable using TanStack Table and vendored shadcn/ui components by applying the standardized DataTable pattern, which provides accessible primitives and consistent theming for complex table features within your SaaS application.
Yes, you need Tailwind CSS theme configuration and the components.json file set up before vendoring shadcn/ui components, ensuring consistent theming via CSS variables and proper schema validation when integrating with React Hook Form.
Styling breaks when overriding Tailwind classes if you bypass the cn() and tailwind-merge class composition rules, which are required to safely merge conflicting classes and maintain consistent theming across vendored Radix primitives.
netprtonyAutomate shadcn/ui component setup and usage in React and Next.js projects.
dinogitBuild validated React forms with React Hook Form and Zod.
ricableBuild accessible shadcn/ui components with Radix UI and Tailwind CSS.
tranhieuttBuild accessible Radix UI design systems with headless primitives.
