ui-components

narehart's avatarfrom narehart

Create React components with CSS Modules and design tokens

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 8, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill automates the creation of standardized React UI components using CSS Modules and design tokens. It streamlines front-end development by enforcing strict architectural patterns, BEM naming conventions, and the use of design system variables to ensure a consistent, scalable, and maintainable codebase.

Use Cases

  • Rapidly scaffolding new React components with pre-configured CSS Modules and PascalCase file structures to maintain project organization.
  • Enforcing design system consistency by automatically applying design tokens for spacing, typography, and colors instead of hardcoded CSS values.
  • Implementing complex UI elements using BEM methodology and 'classnames/bind' for clean, scoped, and conditional styling.
  • Standardizing component architecture by separating UI presentation from business logic through hooks and utility delegation.
  • Ensuring new UI development adheres to a 'primitive-first' philosophy by composing elements from existing base components like Box, Flex, and Text.
nameui-components
descriptionCreate React components with CSS Modules and design tokens

UI Components

Write React components in src/ui/ following the project's component philosophy.

Requirements

  • File naming: PascalCase (e.g., ItemCell.tsx)
  • CSS file: Paired .module.css file (e.g., ItemCell.module.css)
  • Delegate logic to hooks and utils

Pattern

import classNames from 'classnames/bind';
import type { ReactNode } from 'react';

import styles from './ComponentName.module.css';

const cx = classNames.bind(styles);

interface ComponentNameProps {
  children: ReactNode;
  variant?: 'primary' | 'secondary' | undefined;
  isActive?: boolean | undefined;
}

export function ComponentName(props: ComponentNameProps): ReactNode {
  const { children, variant = 'primary', isActive = false } = props;

  return (
    <div className={cx('component', `component--${variant}`, { 'component--active': isActive })}>
      {children}
    </div>
  );
}

CSS Module Pattern

/* ComponentName.module.css */
.component {
  padding: var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
}

.component--primary {
  color: var(--text-primary);
}

.component--secondary {
  color: var(--text-secondary);
}

.component--active {
  border-color: var(--accent-primary);
}

Rules

  1. Check existing components first - Look for Button, Panel, Text, Flex, Icon before creating new ones
  2. Use primitive components - Compose with Box, Flex, Text, Button, Panel, Icon
  3. CSS variables only - Use design tokens, not hardcoded values
  4. BEM naming - .block-element--modifier in CSS
  5. Delegate logic - Complex logic goes in hooks/utils, not components
  6. No helper functions - Extract to utils if needed

classnames Binding

Always use classnames/bind for conditional classes:

import classNames from 'classnames/bind';
const cx = classNames.bind(styles);

// Good
<div className={cx('cell', { 'cell--selected': isSelected })} />

// Bad - plain string literals forbidden
<div className="cell" />
<div className={styles.cell} />

Design Token Prefixes

Prefix Usage
font- Typography
space- Spacing/padding/margins
z- Z-index layers
shadow- Box shadows
size- Fixed sizes
bg- Background colors
text- Text colors
border- Border colors
accent- Accent/highlight colors