ui-design-system
This Claude Code skill provides a comprehensive design system toolkit for creating and maintaining scalable UI systems, including automated design token generation for colors, typography, and spacing, component documentation, responsive design calculations, and developer handoff materials. Use it when establishing or updating design systems, ensuring visual consistency across products, or preparing design specifications for developer implementation.
git clone --depth 1 https://github.com/maslennikov-ig/claude-code-orchestrator-kit /tmp/ui-design-system && cp -r /tmp/ui-design-system/.claude/skills/ui-design-system ~/.claude/skills/ui-design-systemSKILL.md
# UI Design System Professional toolkit for creating and maintaining scalable design systems. ## Core Capabilities - Design token generation (colors, typography, spacing) - Component system architecture - Responsive design calculations - Accessibility compliance - Developer handoff documentation ## Key Scripts ### design_token_generator.py Generates complete design system tokens from brand colors. **Usage**: `python scripts/design_token_generator.py [brand_color] [style] [format]` - Styles: modern, classic, playful - Formats: json, css, scss **Features**: - Complete color palette generation - Modular typography scale - 8pt spacing grid system - Shadow and animation tokens - Responsive breakpoints - Multiple export formats
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Initialize Beads issue tracking in your project with interactive configuration setup.
Calculate priority score for bugs, issues, or tasks based on severity, impact, and likelihood. Use for bug prioritization, task ordering, or risk assessment.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.
Inline orchestration workflow for dead code detection and removal with Beads integration. Provides step-by-step phases for dead-code-hunter detection, priority-based cleanup with dead-code-remover, and verification cycles.