skills.rest
Hamzaoui-Louai
Hamzaoui-LouaiCOMMUNITY
Explore all skills by this author →
GitHub

ui-component

Generate React UI components following StyleSeed design conventions and Tailwind v4 tokens.

1|Updated Aug 4, 2026
Search Tags:#accessibility#react#code generation#design system#tailwind#ui component#cva
One-click install
npx skills add https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend --skill ui-component-hamzaoui-louai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-component
Source: https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend/tree/main/.opencode/skills/ui-component
Command: npx skills add https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend --skill ui-component-hamzaoui-louai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating new UI components that consistently follow a project's design system requires remembering many conventions—token usage, prop typing, accessibility rules, and file placement. This Skill encodes the StyleSeed design conventions so generated components match the existing codebase without manual style review. ## Core Features & Use Cases - Convention-Enforced Generation: Produces components using function declarations, data-slot attributes, cn() class merging, React.ComponentProps<> typing, and CVA variants. - Design Token Compliance: Applies semantic color tokens, spacing multiples, typography scales, and motion variables instead of hardcoded values. - Accessibility Built In: Enforces 44px touch targets, focus-visible rings, aria passthrough, and prefers-reduced-motion support. - Use Case: Ask for a new badge or card component, and receive a file placed in src/components/ui/ that matches the StyleSeed patterns used by button.tsx. ## Quick Start Generate a new UI component named 'badge' with variants for success, warning, and error states following the project design conventions.

Frequently Asked Questions about ui-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a new React component that matches my design system?▼

Provide the component name and description, and the Skill reads your CLAUDE.md, theme.css tokens, and an existing reference component like button.tsx. It then generates code using your conventions: function declarations, cn() merging, CVA variants, and semantic tokens.

What conventions does the generated component code follow?▼

Components use function declarations, data-slot attributes, React.ComponentProps<> typing, cn() from @/components/ui/utils for class merging, and named exports. Styling uses semantic tokens like bg-card and text-foreground rather than inline hex values.

Can I use this with projects that do not use Tailwind v4?▼

No, this Skill is designed for StyleSeed projects with a components/ui directory and Tailwind v4. For non-StyleSeed projects without these structures, the conventions and token references will not apply.

When should I not use this component generator?▼

Avoid it for full-page scaffolding, composed multi-component patterns, or small tweaks to existing components. Those cases call for page-level scaffolding, pattern generation, or direct file edits instead.

Does the generated component meet accessibility requirements?▼

Yes, generated components enforce a 44x44px minimum touch target, aria attribute passthrough, focus-visible ring styling for keyboard navigation, and respect for prefers-reduced-motion in animations.

Related Skills

Explore More Software Engineering Skills→
rmethodmrmethodm

ss-component

Generates React UI components following StyleSeed design conventions and Tailwind v4 tokens.

Community
Intermediate
endorphin-aiendorphin-ai
3

react-design-mean

Design React frontend architectures for MEAN stack applications.

Official
Advanced
oakossoakoss
14

storybook-stories

Generate and maintain Storybook stories and interaction tests using CSF3 format.

Official
Intermediate
nthplusionthplusio

shadcn-dev

Configures and scaffolds shadcn/ui in React projects with Tailwind CSS v4.

Official
Intermediate