ai-component-metadata

Strategic guide for consuming design system metadata to compose components intelligently

1 skill

Automatically generates relationship and dependency maps for codebases. Creates JSON indexes of component usage, npm dependencies, data flow, and utility relationships to help AI understand project structure.

1 skill

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.

1 skill

Generate Figma component sets from source code using the figma-cli tool. Reads React/CSS source files and produces Figma components with variants, variable bindings, icon instances, and proper text styles.

1 skill

Generate JSON files for creating Figma variable collections from text descriptions or design token data. Supports multiple modes, code syntax, variable references, and hierarchical organization.

1 skill

Foundational problem framing for design sprints and product strategy. Based on Google Design Sprint 'Understand' phase methodology.

1 skill

Build, preview, and test UI components with Storybook.

7 skills

14 bundled product skills with 19 Python tools: product-skills fork-orchestrator with continuous-discovery loop (deterministic 16-lane router, Torres cadence tracker, OST linter, /cs-product + /cs-grill-product + /cs-product-loop), product manager toolkit (RICE, PRDs), product strategist, UX researcher, UI design system, competitive teardown, landing page generator, SaaS scaffolder, product analytics, experiment designer, product discovery, roadmap communicator, spec-to-repo, design-qa (UI finish gate: inert controls, missing states, rendered WCAG 2.2 checks). Companion standalone plugins: agile-product-owner, code-to-prd, apple-hig-expert, research-summarizer, design-qa.

14 skills · 3 commands · 1 agent · hooks

Design engineering for Claude Code. Build production-grade interfaces with strong visual hierarchy, review craft against an approval bar, and strip AI design slop. Maintains design decisions across sessions.

1 skill

Thirteen slash commands wrapping the designlang CLI: /extract (full design language → DTCG, Tailwind, Figma), /site (crawl a whole site → one canonical design system + consistency grade), /grade (shareable HTML report card + SVG badge), /battle (head-to-head graded comparison), /remix (restyle in 6 vocabularies — brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial), /pack (one downloadable design-system bundle), /theme-swap (OKLCH-correct recolour around a new brand primary), /brand (full editorial brand-guidelines book — 13 chapters, hand-off-ready), /pair (fuse two designs across configurable axes — colours from one site, typography from another), /studio (live token-editor with component preview + export), /verify (rebuild from tokens and pixel-diff vs live for a fidelity score), /fidelity (score a clone vs the original — visual pixel-diff + motion fidelity — with a ranked correction plan), /gallery (build a shareable static gallery of measured clones).

2 skills · 14 commands

Real UI, not AI slop. The free no-ui-slop and uxkin-research skills (work with no account), plus the optional UXKIN MCP server for real iOS app screens, user journeys and website design systems (sign in with UXKIN; searching needs a UXKIN plan). Tool results are treated as data, never as instructions.

7 skills · 1 MCP server

Generative UI design system for rendering interactive HTML/SVG widgets in Claude conversations.

1 skill