Skill262 estrellas del repoactualizado 7mo ago

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.

Ver fuente Repositorio: claude-code-orchestrator-kit

Instalar en Claude Code

Copiar

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-system

Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

Definición

SKILL.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

Del mismo repositorio

algorithmic-artSkill

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.

artifacts-builderSkill

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.

beadsSkill

beads-initSlash Command

Initialize Beads issue tracking in your project with interactive configuration setup.

calculate-priority-scoreSkill

Calculate priority score for bugs, issues, or tasks based on severity, impact, and likelihood. Use for bug prioritization, task ordering, or risk assessment.

canvas-designSkill

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.

changelog-generatorSkill

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.

cleanup-health-inlineSkill

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.