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
Decision gist · record as of 2026-07-17
Generic React Design System provides Tailwind-based component patterns and tokens for building accessible, consistent React UIs. 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.
Use it when
- generic-react-design-system includes dark mode implementation patterns using CSS variables and theme switching.
- The skill integrates Framer Motion for smooth animations and visual effects, including staggered animations for children.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
travisjneuman/.claude/generic-react-design-system · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/generic-react-design-system/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build consistent, accessible React UI components with design tokens”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill extends core UX design principles into React-specific implementation, offering patterns for micro-interactions, loading states, optimistic UI, and keyboard navigation. It emphasizes accessibility through focus management, motion preferences, and semantic HTML, plus form handling with validation and error states.
A comprehensive design reference synthesized from industry sources like Refactoring UI and Tailwind CSS. Covers structure, visual systems, interaction, and polish across 16 topic areas—from semantic HTML and spacing scales to animations, component states, and defensive CSS. Use when building or reviewing any web interface.
This skill teaches how to build distinctive, memorable frontend experiences through intentional design and technical craft. It covers WebGL and shader techniques, animation frameworks from CSS to GSAP, and a philosophy centered on creating interfaces that feel alive—responsive, layered, and purposeful rather than generic.
Motion Design Patterns teaches you how to build polished React animations with Motion, covering springs, staggered lists, layout animations, exit effects, hover interactions, scroll-triggered reveals, and page transitions. Each pattern includes tuned spring configs and anti-patterns to avoid janky motion.
Motion React lets you build fluid animations and interactive effects in React applications using declarative components and hooks. Animate on gestures (drag, hover, tap), scroll events, and layout changes with spring physics, keyframes, and exit animations via AnimatePresence.
Create production-ready design systems and component libraries leveraging Tailwind CSS v4's CSS-first configuration, design tokens, and native theming. This skill covers token hierarchy, component architecture with CVA patterns, dark mode setup, and responsive design practices for standardizing UI across projects.
More skills Ui Builder (unlicensed) · generic-fullstack-design-system (MIT)