Run any Skill in Manus with one click

Get Started

design-system-patterns

Stars2

Forks0

UpdatedJanuary 2, 2026 at 18:58

Best practices for building reusable UI components. Use when creating atoms, molecules, or updating the theme.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

michaellperry

michaellperry/aaad

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	design-system-patterns
description	Best practices for building reusable UI components. Use when creating atoms, molecules, or updating the theme.

Design System Patterns

Role & Responsibilities

The Design System Engineer acts as the bridge between design and code.

Input: Component Gap Analysis from the FTS.
Output: Reusable components in src/components/atoms and molecules.
Goal: Ensure visual consistency and accessibility.

Atomic Design

Atoms: Basic building blocks (Buttons, Inputs, Icons). No business logic.
Molecules: Groups of atoms (Form Fields, Cards). Minimal logic.
Organisms: Complex sections (Forms, Lists). Product Developer territory.

Styling (Tailwind CSS)

Tokens: Use values from src/theme/tokens.ts via Tailwind classes.
Utility Classes: Use clsx and tailwind-merge for conditional styling.
Dark Mode: Always implement dark: variants for every color.

Accessibility (a11y)

Interactive Elements: Must have focus states (focus-visible:ring).
Semantic HTML: Use <button>, <nav>, <main>, etc.
ARIA: Use aria-label or aria-describedby when text is insufficient.
Keyboard Navigation: Ensure all interactions work without a mouse.

Component Structure

import { cn } from '@/utils/cn';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
}

export const Button = ({ className, variant = 'primary', ...props }: ButtonProps) => {
  return (
    <button
      className={cn(
        'px-4 py-2 rounded-md transition-colors focus-visible:ring-2',
        variant === 'primary' && 'bg-blue-600 text-white',
        className
      )}
      {...props}
    />
  );
};

More from this repository

same repository

design-system-patterns

michaellperry/aaad

Design system patterns for reusable UI via atomic design, Tailwind tokens/variants, and accessibility. Use when creating atoms/molecules, theming, or hardening a11y.

2026-01-112

ef-core-patterns

michaellperry/aaad

Entity Framework Core best practices for configuration, queries, concurrency, and multi-tenancy.

2026-01-112

frontend-architecture-patterns

michaellperry/aaad

Frontend architecture patterns for React apps (React Router 7, TanStack Query). Use when planning features, defining routes, data strategies, and component gaps.

2026-01-112

infrastructure-standards

michaellperry/aaad

Infrastructure standards for Docker, scripts, middleware, and authentication in multi-tenant deployments.

2026-01-112

integration-testing-performance

michaellperry/aaad

Integration testing performance optimization, test parallelization, cleanup strategies, and CI/CD categorization patterns. Use when optimizing test execution speed, managing test data, or structuring tests for automated pipelines.

2026-01-112

minimal-api-patterns

michaellperry/aaad

ASP.NET Core Minimal APIs patterns for endpoints, DTOs, validation, and service integration. Use when implementing API endpoints, defining request/response contracts, or structuring API projects with clean separation of concerns.

2026-01-112

name	design-system-patterns
description	Best practices for building reusable UI components. Use when creating atoms, molecules, or updating the theme.

Design System Patterns

Role & Responsibilities

The Design System Engineer acts as the bridge between design and code.

Input: Component Gap Analysis from the FTS.
Output: Reusable components in src/components/atoms and molecules.
Goal: Ensure visual consistency and accessibility.

Atomic Design

Atoms: Basic building blocks (Buttons, Inputs, Icons). No business logic.
Molecules: Groups of atoms (Form Fields, Cards). Minimal logic.
Organisms: Complex sections (Forms, Lists). Product Developer territory.

Styling (Tailwind CSS)

Tokens: Use values from src/theme/tokens.ts via Tailwind classes.
Utility Classes: Use clsx and tailwind-merge for conditional styling.
Dark Mode: Always implement dark: variants for every color.

Accessibility (a11y)

Interactive Elements: Must have focus states (focus-visible:ring).
Semantic HTML: Use <button>, <nav>, <main>, etc.
ARIA: Use aria-label or aria-describedby when text is insufficient.
Keyboard Navigation: Ensure all interactions work without a mouse.

Component Structure

import { cn } from '@/utils/cn';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
}

export const Button = ({ className, variant = 'primary', ...props }: ButtonProps) => {
  return (
    <button
      className={cn(
        'px-4 py-2 rounded-md transition-colors focus-visible:ring-2',
        variant === 'primary' && 'bg-blue-600 text-white',
        className
      )}
      {...props}
    />
  );
};