generic-design-system
CommunityYour project's visual language, defined.
Authortravisjneuman
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a comprehensive and adaptable design system reference, ensuring visual consistency and efficient UI implementation across any project.
Core Features & Use Cases
- Color Palettes: Defines primary, secondary, accent, and semantic color tokens with contrast ratio guidelines.
- Typography: Establishes font stacks, type scales, and usage guidelines.
- Spacing & Layout: Provides a consistent spacing system and responsive breakpoints.
- Components: Outlines states, touch targets, and best practices for common UI elements like buttons and inputs.
- Animation: Specifies GPU-accelerated properties, durations, and easing functions.
- Use Case: When starting a new UI feature, consult this Skill to ensure all colors, typography, and spacing align with established design principles, or to quickly implement a standard button component with correct states and touch targets.
Quick Start
Use the generic-design-system skill to define the color palette for a new web application.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: generic-design-system Download link: https://github.com/travisjneuman/.claude/archive/main.zip#generic-design-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.