fe-component

What problem does it solve?

This Skill streamlines creating consistent, accessible React UI components for the Lety 2.0 frontend, eliminating guesswork about placement, variants, and accessibility patterns.

Core Features & Use Cases

• Atomic Design Guidance: Place components correctly as shared/ui atoms, shared/components composites, or feature-scoped components based on reuse.
• Variant & Styling Conventions: Enforce CVA for visual variants and cn() for conditional class merging to keep Tailwind usage consistent.
• Accessible Interactions: Recommend Radix UI primitives and Portal usage for interactive overlays and guidance on when to add the use client directive.
• Developer Ergonomics: Require className merging, OpenAPI types for domain shapes, and anti-pattern checks to prevent common mistakes.

Quick Start

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.