generic-react-design-system
CommunityReact UI design system
Authortravisjneuman
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a comprehensive and reusable design system for React applications, ensuring brand consistency, accessibility, and efficient UI development.
Core Features & Use Cases
- Design Tokens: Defines colors, typography, and spacing.
- Component Patterns: Provides ready-to-use React component examples (Buttons, Inputs, Cards, Modals).
- Visual Effects: Includes styles for glassmorphism and shadows.
- Animations: Demonstrates Framer Motion patterns for UI interactions.
- Dark Mode: Offers implementation strategies for dark mode.
- Accessibility: Incorporates focus states and skip links.
- Use Case: Implement a consistent and accessible user interface across a React project by leveraging these pre-defined styles and patterns.
Quick Start
Apply the 'glass' CSS class to an element to give it a glassmorphism effect.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 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-react-design-system Download link: https://github.com/travisjneuman/.claude/archive/main.zip#generic-react-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 223,000+ vetted skills library on demand.