skills.rest
travisjneuman
travisjneumanCOMMUNITY
Explore all skills by this author →
Website𝕏@travisjneumanGitHub

generic-react-design-system

Provide design tokens, component patterns, and glassmorphism styles for React/TypeScript applications.

88|22|Updated Dec 17, 2025
Search Tags:#typescript#ui#accessibility#frontend#react#design system#css
One-click install
npx skills add https://github.com/travisjneuman/.claude --skill generic-react-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generic-react-design-system
Source: https://github.com/travisjneuman/.claude/tree/main/skills/generic-react-design-system
Command: npx skills add https://github.com/travisjneuman/.claude --skill generic-react-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about generic-react-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement a consistent React design system with TypeScript?▼

A React design system provides reusable component patterns like Buttons, Inputs, and Cards alongside predefined design tokens for colors and spacing to ensure brand consistency across your TypeScript application.

What's the best way to add glassmorphism effects to React components?▼

To add glassmorphism effects to React components, apply the predefined 'glass' CSS class to your target element, which provides the visual styling for shadows and transparency.

Does this React UI design system support WCAG AA accessibility?▼

Yes, this React UI design system supports WCAG AA accessibility by incorporating built-in focus states and skip links to ensure your user interface remains navigable and compliant.

Can I use Framer Motion animations with this React UI design system?▼

Yes, you can use Framer Motion animations because the system provides ready-to-use GPU-accelerated animation patterns designed specifically for smooth UI interactions within your React application.

How do I set up dark mode in a TypeScript React application?▼

To set up dark mode in a TypeScript React application, apply the implementation strategies included in the design system to switch UI colors and maintain visual accessibility automatically.

Related Skills

Explore More Design & Creative Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
ayesha-aziz123ayesha-aziz123
2

framer-motion

Automate Framer Motion animations for React and Next.js components.

Community
Intermediate
12valor12valor
1

frontend-ui-dark-ts

Generate dark-themed React UIs with glassmorphism effects using Tailwind CSS and Framer Motion.

Community
Intermediate
mohamed-g-shoaibmohamed-g-shoaib

tailwind-css-patterns

Apply Tailwind CSS utility patterns for consistent responsive interfaces.

Community
Intermediate