mcpField
D
design-systems

design-systems

github.com/dralgorhythmDesign & UI12960 installsUpdated 14w ago
Repository

About design-systems

A design systems skill for people building consistent applications from reusable UI components. It covers atomic component hierarchy, design tokens, component APIs, and documentation practices.

Key features

  1. 01Organize components with atomic design
  2. 02Define reusable design tokens
  3. 03Describe component APIs
  4. 04Document usage and accessibility

Use cases

  1. 01Plan a component library hierarchy
  2. 02Specify shared colors and component variants
  3. 03Document component props and usage guidance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill design-systems

After installing, type/design-systemsin Claude Code to confirm it loaded.

Details

From the project README

Design Systems

What is a Design System?

A collection of reusable components, guided by clear standards, that can be assembled to build applications.

Components

Atomic Design

Atoms: Basic building blocks

  • Buttons, inputs, labels, icons

Molecules: Simple combinations

  • Search bar (input + button)
  • Form field (label + input + error)

Organisms: Complex components

  • Header, sidebar, card

Templates: Page layouts

  • Dashboard, settings page

Pages: Specific instances

  • User dashboard, admin settings

Design Tokens

{
  "color": {
    "primary": {
      "50": "#f0f9ff",
      "500": "#0ea5e9",
      "900": "#0c4a6e"
    },
    "neutral": {
      "100": "#f5f5f5",
      "900": "#171717"
    }
  },
  "spacing": {
    "1": "0.25rem",
    "2": "0.5rem",
    "4": "1rem",
    "8": "2rem"
  },
  "font": {
    "family": {
      "sans": "Inter, sans-serif",
      "mono": "JetBrains Mono, monospace"
    },
    "size": {
      "sm": "0.875rem",
      "base": "1rem",
      "lg": "1.125rem"
    }
  },
  "radius": {
    "sm": "0.25rem",
    "md": "0.375rem",
    "lg": "0.5rem"
  }
}

Component API

interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost';
  size: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
  children: ReactNode;
  onClick?: () => void;
}

Documentation

Each component should document:

  • Usage: When to use
  • Props: Available options
  • Examples: Common patterns
  • Accessibility: A11y considerations
  • Do/Don't: Best practices

Resources

Comments

Markdown supported