Crazy 8s
Solo rapid ideation method based on Google Design Sprint Crazy 8's exercise. Generates 8 distinct solution ideas in 8 minutes through rapid-fire ideation or sketch documentation. Use when working alone and need to explore multiple solution directions quickly, push beyond first obvious ideas, or generate variety before converging. Includes creativity warm-up questions, built-in timer, optional cre…
Ai Ds Composer
Strategic guide for consuming design system metadata to compose components intelligently. Use when generating or modifying UI components and layouts to ensure component reuse, proper variant selection, and adherence to design system patterns. Helps Claude understand project structure, read hierarchical metadata indexes, apply anti-pattern rules, and flag when existing components don't fit a requi…
Figma Variables Generator
Generate JSON files for creating Figma variable collections from text descriptions or design token data. Use when designers need to create or convert design tokens (colors, spacing, typography, etc.) into Figma variables format. Supports multiple modes (Light/Dark), code syntax definitions, variable references/aliases, and hierarchical organization. Triggers include requests to "create Figma vari…
Codebase Index
Automatically generate relationship and dependency maps for any component-based codebase (React, Vue, Svelte, Astro, Next.js, Angular, Solid). Auto-detects framework. Supports TOON format for 30-60% token savings. Use when indexing codebases, mapping component relationships, documenting dependencies, or understanding unfamiliar projects. Generates JSON/TOON files mapping component usage, imports,…
Problem Mapping
Foundational problem framing for design sprints and product strategy. Based on Google Design Sprint "Understand" phase methodology. Use when teams need to establish shared understanding before ideation - defining problem statements, identifying users/stakeholders, setting success criteria, documenting constraints and assumptions, and capturing pain points. Works in solo, team synchronous, or team…
Figma Component Generator
Generate Figma component sets from source code using the figma-cli tool. This skill should be used when the user wants to create or update Figma components by reading React/CSS source files and generating matching component sets with variants, properties, and variable bindings. Invoked as a slash command with a Figma page URL or component name.
Ai Component Metadata
Generate AI-ready metadata for design system components to enable intelligent UI generation. Analyzes component structure and generates structured metadata that helps AI understand when and how to use components correctly. Useful for teams building AI-consumable design systems.