generic-react-design-system
This skill provides a complete design system for React applications, featuring Tailwind configuration, reusable component patterns, and dark mode support. It covers visual effects like glassmorphism and GPU-accelerated animations via Framer Motion, plus accessibility patterns including focus states and skip links.
Generic React Design System provides Tailwind-based component patterns and tokens for building accessible, consistent React UIs.
AI-generated summary based on this skill's SKILL.md
Install
travisjneuman/.claude/generic-react-design-system · repository language: JavaScript
git clone https://github.com/travisjneuman/.claude
cp -r .claude/skills/generic-react-design-system ~/.claude/skills/generic-react-design-systemnpx skillfed install travisjneuman/.claude/generic-react-design-systemFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I build React UI components with this design system?
generic-react-design-system provides reusable component patterns built on Tailwind CSS and design tokens for consistent styling across your React app. The skill covers button variants, form inputs, cards, modals, and other common UI elements with built-in accessibility support including focus states and keyboard navigation.
How can I implement dark mode in my React application?
generic-react-design-system includes dark mode implementation patterns using CSS variables and theme switching. You can toggle between light and dark themes while maintaining brand consistency through centralized design tokens, ensuring all components automatically adapt to the selected theme.
What animation capabilities does generic-react-design-system offer?
The skill integrates Framer Motion for smooth animations and visual effects, including staggered animations for children, skeleton loading states, and GPU-accelerated animations. It covers glassmorphism effects and modal transitions, enabling performant, visually polished interactions in your React components.
How do I configure Tailwind CSS and CSS variables for brand consistency?
generic-react-design-system provides Tailwind configuration guidance and CSS variables setup for establishing a cohesive color system and spacing scale. This approach ensures brand consistency across all components while enabling easy theme switching and design token management throughout your application.
Does generic-react-design-system support WCAG accessibility standards?
Yes, the skill ensures WCAG AA accessibility in React component design through patterns for focus states, keyboard navigation, skip links, and semantic HTML. Each component includes accessibility best practices to help you build inclusive interfaces that work for all users.
What license does generic-react-design-system use?
generic-react-design-system is released under the MIT license, allowing you to freely use, modify, and distribute it in both personal and commercial projects with minimal restrictions.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
```css :root { / Brand - customize per project / --primary: #3b82f6; --primary-rgb: 59, 130, 246; --secondary: #10b981; --accent: #8b5cf6;
/ Surfaces / --background: #ffffff; --foreground: #000000;
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/generic-react-design-system/SKILL.md