component-patterns

Component-Patterns

Modern UI component patterns for web applications. Component selection, composition, theming, and token systems following current standards (21st.dev SDK, Tailwind, Radix UI).

Scope

Use this skill when:

• You are designing or selecting UI components
• You are building a design token system
• You are implementing theming (dark/light/custom)
• You are planning compound components or variant systems
• You are designing form architectures
• You are defining responsive component strategies

Principles

1. Composition over Inheritance

Build components by assembling small, specialized parts. Props for configuration, children for content, slots for variation.

2. Server-First, Client Where Needed

Server Components as the default. Client Components only for interactivity (state, event handlers, browser APIs).

3. Token-Based Theming

Design tokens (CSS Custom Properties) control all visual aspects. No hardcoding of colors, spacing, or font sizes.

4. Accessibility as Architecture

ARIA roles, keyboard navigation, and focus management are part of the component definition, not an afterthought.

5. Composable Primitives

Base primitives (Button, Input, Text, Box) are unstyled and maximally flexible. Design system components build on top of them.

Rules

Component Structure

• DO: Each component as a single file with a clear export. One component = one responsibility.
• DO: Explicitly type the props interface (TypeScript). Zod schemas for validated inputs.
• DO: Compound components for complex UI elements:

  <Card>
    <Card.Header />
    <Card.Body />
    <Card.Footer />
  </Card>
  

• DO: Variants with class-variance-authority (cva) instead of conditional classes.
• DON'T: Components with more than 10 props. Split when responsibilities grow too many.
• DON'T: Runtime CSS-in-JS. Tailwind CSS or CSS Modules for static styles.
• DON'T: Div soup. Use semantic HTML elements (section, article, nav, header, footer, main).