Skills
.Work. You
Rest

generic-fullstack-design-system

Community

Unified design system for full-stack apps.

Design & Creative#accessibility#full-stack#frontend#design system#ui/ux#component library
Authortravisjneuman
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a comprehensive and unified design system for full-stack applications, ensuring consistency in UI elements, branding, and accessibility across the entire application.

Core Features & Use Cases

  • Centralized Theme: Defines colors, typography, and spacing in a single source of truth (lib/theme.ts).
  • Component Library Integration: Demonstrates integration with shadcn/ui for common components like buttons and forms.
  • Visual Effects: Includes examples for glassmorphism and gradient backgrounds.
  • Accessibility & Theming: Covers WCAG AA accessibility and dark mode implementation using next-themes.
  • Use Case: Implement a consistent and accessible user interface for a new web application by leveraging the defined design tokens and component patterns.

Quick Start

Apply the primary color defined in the design system to a button component.

Dependency Matrix

Required Modules

None required

Components

references

💻 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-fullstack-design-system
Download link: https://github.com/travisjneuman/.claude/archive/main.zip#generic-fullstack-design-system

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.