Generic React Design System

A solid reference for spinning up React UIs with consistent patterns across Tailwind, Framer Motion, and accessibility. You get copy-paste components for buttons, inputs, cards, and modals, plus glassmorphism effects and dark mode setup with context. It extends a generic design system skill for the color and spacing fundamentals. Honestly most useful as a starting scaffold when you're tired of rewriting the same button variants and focus states for the hundredth time. The Framer Motion stagger patterns and GPU-accelerated animation examples are nice touches that save you from digging through docs mid-project.

skills.sh installs: 187
GitHub stars: 108
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add travisjneuman/.claude --skill generic-react-design-system --agent claude-code

Installs into .claude/skills of the current project.

Files

React Design System

Design system patterns for React/TypeScript applications.

Extends: Generic Design System - Read base skill for color theory, typography scale, spacing system, and component states.

Tailwind Configuration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "var(--primary)",
        secondary: "var(--secondary)",
        accent: "var(--accent)",
      },
      spacing: {
        18: "72px",
      },
      borderRadius: {
        xl: "16px",
      },
    },
  },
};

CSS Variables Setup

:root {
  /* Brand - customize per project */
  --primary: #3b82f6;
  --primary-rgb: 59, 130, 246;
  --secondary: #10b981;
  --accent: #8b5cf6;

  /* Surfaces */
  --background: #ffffff;
  --foreground: #000000;
  --muted: #64748b;
}

[data-theme="dark"] {
  --background: #121212;
  --foreground: #ffffff;
}

React Component Patterns

Button Variants

// Primary
<button className="px-6 py-3 bg-primary text-white rounded-lg shadow
  hover:shadow-lg hover:-translate-y-0.5 transition-all">
  Primary
</button>

SKILL.md on GitHub