{"enrichment":{"faq":[{"a":"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.","q":"How do I build React UI components with this design system?"},{"a":"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.","q":"How can I implement dark mode in my React application?"},{"a":"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.","q":"What animation capabilities does generic-react-design-system offer?"},{"a":"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.","q":"How do I configure Tailwind CSS and CSS variables for brand consistency?"},{"a":"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.","q":"Does generic-react-design-system support WCAG accessibility standards?"},{"a":"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.","q":"What license does generic-react-design-system use?"}],"shadow_tags":["component-library","motion-graphics","theme-management","wcag-compliance","visual-effects","ui-patterns","token-system","interaction-design"],"summary_rewrite":"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."},"files":[{"bytes":5518,"path":"skills/generic-react-design-system/SKILL.md","sha256":"3a8e6d6cfbec5f356f0e6bc8eb5fd7972851876d40187682b6a34f97c90fc630","url":"https://skillfed.io/files/travisjneuman/.claude/generic-react-design-system/4c92250f/SKILL.md"}],"id":"travisjneuman/.claude/generic-react-design-system","links":{"html":"https://skillfed.io/travisjneuman/.claude/generic-react-design-system","md":"https://skillfed.io/travisjneuman/.claude/generic-react-design-system.md","repo":"https://github.com/travisjneuman/.claude"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":20,"language":"JavaScript","last_updated":"2026-07-17","license":"MIT","name":"generic-react-design-system","publisher":"travisjneuman","stars":85},"relations":{"similar":[{"id":"travisjneuman/.claude/generic-react-ux-designer"},{"id":"kv0906/cc-skills/advanced-frontend-skill"},{"id":"dylanfeltus/skills/motion-design-patterns"},{"id":"pedronauck/skills/motion-react"},{"id":"calesthio/OpenMontage/tailwind-design-system"},{"id":"gluestack/agent-skills/styling"},{"id":"hairyf/skills/uniwind"},{"id":"pascalorg/skills/web-design"},{"id":"wshobson/agents/interaction-design"},{"id":"jmsktm/claude-settings/ui-builder"}]},"slug":{"owner":"travisjneuman","repo":".claude","skill":"generic-react-design-system"},"version":"4c92250f"}