SkillsAdd

travisjneuman/.claude

generic-design-system

Complete design system reference for any project - colors, typography, spacing, components, animations.

First seen Jan 24, 2026

Installation

$ npx skills add travisjneuman/.claude --skill generic-design-system
View on skills.sh ↗ GitHub repository ↗

Summary

  • Complete design system reference for any project - colors, typography, spacing, components, animations.
  • Adapts to project theme and tech stack.
  • Use when implementing UI, choosing colors, creating animations, or ensuring brand consistency.
  • For new design systems, use ui-research skill first.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from travisjneuman/.claude · top by installs.

npx skills add travisjneuman/.claude
document-skills 3.2K brand-identity 1.6K travel-planner 488 business-strategy 485 graphic-design 453 real-estate-analyzer 373 course-material-creator 373 finance 373 legal-compliance 365 supply-chain-optimizer 331

Browse all from travisjneuman/.claude

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Also listed on

Alternate registries and mirrors of this skill.

Repository health

Stars 97
License LICENSE
Default branch master
Open issues 2
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Declared agents claude-code

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 5,768 B
  • docs SUMMARY.md 320 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 135 installs

SKILL.md

Generic Design System

Design system reference adapting to any project's visual language.

Research First for New Systems

When creating a NEW design system (not following an existing one):

Skill(ui-research)  # Research modern patterns first

References:

  • [UI Inspiration Sources](../shared/UIINSPIRATION_SOURCES.md) - Research sources
  • [Design Patterns](../shared/DESIGNPATTERNS.md) - Visual tokens

When to Use This Skill

Use for:

  • Implementing UI components
  • Choosing colors or typography
  • Creating animations or transitions
  • Ensuring visual consistency
  • Setting up design tokens
  • Reviewing design system compliance

Don't use when:

  • UX flow design → use generic-ux-designer
  • Feature architecture → use generic-feature-developer
  • Code quality review → use generic-code-reviewer

Design System Architecture

When to Build vs Reference

Situation Action
Existing design system Follow it strictly
No design system Use this skill to establish foundations
Partial system Identify gaps, extend consistently

Token Organization

Layer Example Purpose
Primitive --color-blue-500 Raw values
Semantic --color-primary Meaning
Component --button-background Context

Decision: Use semantic tokens in code, primitive tokens as foundation only.

Consistency Decision Tree

  1. Component exists? → Use existing pattern
  2. Similar exists? → Adapt existing (don't create competing pattern)
  3. New category? → Propose to user, document reasoning

Color System

Every project should define:

  • Primary, Secondary, Accent
  • Background, Foreground, Muted
  • Destructive, Success, Warning

Contrast Requirements

Use Case Minimum
Body text 4.5:1 (AA)
Large text 3:1 (AA)
UI components 3:1 (AA)

Typography

Font Stack

--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "SF Mono", Monaco, "Courier New", monospace;

Type Scale

Name Size Use
sm 14px Secondary text
base 16px Body text
lg 18px Lead paragraphs
xl 20px Section headers
2xl 24px Page headers

Spacing System

Base unit: 4px or 8px

Token 4px Base Use
1 4px Tight spacing
2 8px Default gap
4 16px Card padding
6 24px Page margins

Animation

GPU-Accelerated Only

DO animate: transform, opacity AVOID: width, height, top, left, margin, padding

Duration

Token Duration Use
fast 100ms Micro-interactions
DEFAULT 200ms Most transitions
slow 300ms Complex animations

Timing

--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

Components

Component States

State Visual Treatment Example
Default Base styling Normal button
Hover Subtle feedback Lighter/darker bg
Active Pressed state Scaled down slightly
Focus Visible outline 2px ring, offset
Disabled Reduced opacity 50% opacity, no pointer
Loading Spinner/skeleton Button with spinner
Error Destructive color Red border/text

Touch Targets

  • Minimum: 44x44px (WCAG 2.1 AAA)
  • Spacing: 8px between adjacent targets
  • Mobile: Consider 48x48px for primary actions

Buttons

Variant Use Min Size
Primary Main actions 44x44px
Secondary Alternative actions 44x44px
Ghost Subtle actions 44x44px
Destructive Delete actions 44x44px

Form Inputs

  • Clear focus states (2px visible ring)
  • Error states with messages
  • Label always visible
  • Required indicator

Modals

  • Focus trapped inside
  • Escape to close
  • Dark overlay (50-70% opacity)

Responsive Breakpoints

Token Min Width
sm 640px
md 768px
lg 1024px
xl 1280px

Dark Mode

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

See Also

  • [Design Patterns](./../shared/DESIGNPATTERNS.md) - Atomic Design, tokens, component docs
  • [Code Review Standards](./../shared/CODEREVIEW_STANDARDS.md) - Accessibility checks
  • generic-ux-designer - For UX flow and research decisions
  • Project CLAUDE.md - Project-specific design constraints

READ references when:

  • Setting up new design system → DESIGN_PATTERNS.md (full structure)
  • Complex component patterns → DESIGN_PATTERNS.md (Atomic Design section)