Build UIs with Tailwind CSS v4 and shadcn/ui using CSS-first configuration.
npx skills add https://github.com/tenequm/skills --skill shadcn-tailwind
Please help me install this Agent Skill. Skill: shadcn-tailwind Source: https://github.com/tenequm/skills/tree/main/skills/shadcn-tailwind Command: npx skills add https://github.com/tenequm/skills --skill shadcn-tailwind
This Skill streamlines the process of building modern, accessible, and responsive user interfaces using Tailwind CSS v4 and the shadcn/ui component library, ensuring consistency and best practices.
tailwind.config.js.class-variance-authority (CVA) and data-slot attributes.Use the shadcn-tailwind skill to set up a new project with Tailwind CSS v4 and shadcn/ui components.
High-intent search queries and answers about installing and using this skill.
Tailwind CSS v4 with shadcn/ui is configured using a CSS-first approach, migrating away from `tailwind.config.js`. This skill provides patterns for setting up your project, implementing semantic OKLCH colors, and theming for dark mode directly within your CSS.
The best way to create reusable shadcn/ui components is using `class-variance-authority` (CVA) and `data-slot` attributes. This approach ensures consistent component variants while maintaining Tailwind's utility-first styling and accessibility best practices.
Yes, Tailwind v4 supports OKLCH colors for theming, dark mode, and accessibility. This skill employs the OKLCH color space to establish a visually consistent and accessible design system within your shadcn/ui components.
Responsive design in Tailwind CSS v4 is implemented using mobile-first breakpoints and container queries. This skill demonstrates how to apply these v4.2 features to build adaptive user interfaces with shadcn/ui.
Yes, you can use shadcn/ui components without a JavaScript config file by adopting Tailwind v4's CSS-first configuration. This skill covers migrating away from `tailwind.config.js` to style components using utility-first CSS.
Tailwind v4 UI needs logical properties and accessibility states to ensure consistent layouts across different languages and support users relying on keyboard or screen reader interactions. This skill integrates focus visible states, screen reader only text, and disabled states.
DiegoHeerConfigure Tailwind CSS v4 with CSS-first setup and @theme directives.
mkhsu2002Apply modern web design principles to improve UI consistency across responsive layouts and accessibility.
fusengineCreate type-safe Next.js 16 forms with TanStack Form and Zod validation.
wshobsonDesign reusable web UI components with patterns and styling approaches.