design-system-generator
Create design systems with tokens, components, and documentation. Use when building design systems, creating component libraries, or establishing design tokens.
git clone --depth 1 https://github.com/OneWave-AI/claude-skills /tmp/design-system-generator && cp -r /tmp/design-system-generator/design-system-generator ~/.claude/skills/design-system-generatorSKILL.md
# Design System Generator Generate a token-driven design system: tokens, base components, build config, and documentation. ## Contents - `references/design-tokens.md` — color, typography, spacing, shadow, and radius token files plus CSS variable setup. - `references/components.md` — Button, Input, Card implementations and the component barrel index. - `references/config-and-utilities.md` — Tailwind config and the `cn` class-merge helper. ## Workflow 1. Define design tokens. Create `tokens/` with colors, typography, spacing, and effects (shadows, radii) per `references/design-tokens.md`. Replace the reference values with the project brand palette. 2. Add CSS variables. Set up `:root` and `.dark` custom properties in `globals.css` using the variable block in `references/design-tokens.md`. 3. Wire the build. Add the `cn` helper and extend the Tailwind theme from the token files following `references/config-and-utilities.md`. 4. Build base components. Implement Button, Input, and Card from `references/components.md`, then extend the set as the product requires. 5. Export a barrel. Re-export every shipped component from `components/ui/index.ts` (see `references/components.md`). 6. Document usage and variants. For each component, note its variants, sizes, props, and accessibility behavior so consumers apply it consistently.
Audit websites for accessibility issues and WCAG compliance. Use when checking accessibility, fixing a11y issues, or ensuring WCAG compliance.
Deploy a 2-layer parallel agent hierarchy for large, parallelizable work — big refactors, multi-file migrations, codebase-wide audits, bulk generation. Layer 1 is 3-50+ specialist agents, each with its own full context window; Layer 2 is 2+ sub-agents per member. Includes git safety, tiered sizing, a pre-deploy gate, phantom-completion checks, and multi-wave follow-up.
Deploys swarms of sub-agents for massive parallel data processing tasks. Unlike agent-army (which is for code changes), this is for DATA tasks -- processing 1000 documents, analyzing datasets, bulk content generation. Configurable swarm size, task distribution, result aggregation, progress tracking, and error recovery.
Designs and deploys custom agent teams for specific business workflows. Interactive discovery of business processes, then generates complete team configurations with specialized agent roles, tool access, communication protocols, and handoff rules.
Agent-to-Agent (A2A) communication protocol. Connect two or more Claude agents that pass messages, share context, delegate tasks, and collaborate. Implements structured handoffs, shared memory, and multi-agent conversations.
Assesses how ready a business is for AI adoption across six dimensions. Evaluates data maturity, tech stack, team skills, process documentation, budget, and culture. Generates a comprehensive ai-readiness-report.md with scores, gap analysis, and recommended starting points. Aligned with OneWave AI's audit methodology.
Generate animated videos and motion graphics from natural language descriptions. Creates a standalone Vite + React project with Framer Motion scenes that auto-play in the browser. Use when the user wants to create animations, motion graphics, video intros, animated presentations, or product demos.
Generate comprehensive API documentation including endpoint descriptions, request/response examples, authentication guides, error codes, and SDKs. Creates OpenAPI/Swagger specs, REST API docs, and developer-friendly reference materials. Use when users need to document APIs, create technical references, or write developer documentation.