Enforce shadcn/ui component best practices in React applications.
npx skills add https://github.com/Dynokostya/just-works --skill shadcn-ui-coding
Please help me install this Agent Skill. Skill: shadcn-ui-coding Source: https://github.com/Dynokostya/just-works/tree/main/.claude/skills/shadcn-ui-coding Command: npx skills add https://github.com/Dynokostya/just-works --skill shadcn-ui-coding
This Skill ensures that developers correctly implement shadcn/ui components, avoiding common pitfalls that lead to broken accessibility, runtime errors, and inconsistent theming.
cn().field.onChange for Select components and avoid spreading {...field} directly.Apply the shadcn-ui-coding skill when generating code for shadcn/ui components.
High-intent search queries and answers about installing and using this skill.
Spreading {...field} breaks the shadcn/ui Form component because it passes incompatible props to underlying elements, causing runtime errors. You must explicitly wire up field.onChange for inputs like Select components to ensure proper integration.
You should use CSS variables for theming shadcn/ui components and compose classes using the cn() utility. This enforces visual consistency and prevents styling mismatches across your React application.
To avoid accessibility issues in shadcn/ui modals and forms, prevent nested buttons and ensure all required ARIA attributes are present. Adhering to specific component composition patterns maintains proper screen reader support.
Yes, shadcn/ui requires adherence to specific import paths and CLI conventions for its component architecture. Following these standards ensures components integrate correctly without breaking accessibility or runtime behavior.
Spreading {...field} breaks the shadcn/ui Form component because it passes incompatible props to underlying elements, causing runtime errors. You must explicitly wire up field.onChange for inputs like Select components to ensure proper integration.
wredzioConfigure Tailwind v4 theming with shadcn/ui in React + Vite projects.
jinwoonghongImplement shadcn/ui components in React with Tailwind CSS.
litestar-orgDevelop React frontends with Inertia.js and shadcn/ui components.
wilfriedagoIntegrate shadcn/ui components with installation and customization guidance.