Generate React UI components with CVA variants and Radix UI primitives.
npx skills add https://github.com/lety-ai/lety-skill-hub --skill fe-component
Please help me install this Agent Skill. Skill: fe-component Source: https://github.com/lety-ai/lety-skill-hub/tree/main/plugins/ui-component/skills/ui-component Command: npx skills add https://github.com/lety-ai/lety-skill-hub --skill fe-component
This Skill streamlines creating consistent, accessible React UI components for the Lety 2.0 frontend, eliminating guesswork about placement, variants, and accessibility patterns.
Use the fe-component skill to scaffold a shared/ui Button atom with CVA variants for size and intent, accept and merge className with cn(), and use Radix primitives and a client directive only if the component is interactive.
High-intent search queries and answers about installing and using this skill.
Scaffold React UI components by applying CVA for visual variants and cn() for conditional class merging, keeping Tailwind CSS usage consistent across shared atoms and composites. This enforces variant-driven styling for accessible building blocks.
Mark a React component as a client component only when it uses browser hooks or events. Non-interactive UI building blocks remain server components by default, while interactive overlays utilizing Radix UI primitives require the use client directive.
Structure React components by placing shared atoms in a shared/ui directory, composites in shared/components, and feature-scoped components based on reuse. This atomic design guidance ensures consistent placement of accessible UI building blocks.
Yes, this approach works with Radix UI and TypeScript by recommending Radix primitives for accessible interactions and Portal usage. It enforces accepting className on every component and applying OpenAPI types for domain shapes.
The best way to manage className merging is to require every component to accept a className prop and use the cn() utility for conditional class merging. This developer ergonomics pattern prevents styling conflicts and ensures component composability.
netprtonyAutomate shadcn/ui component setup and usage in React and Next.js projects.
MovchanetsBuild scalable Tailwind CSS v4 design systems with semantic tokens and component variants.
pohlai88Builds accessible React components with Tailwind CVA or Stitches theming.
jorgeasaurusCreate accessible React interfaces with Radix UI components and Tailwind CSS.
