compose-design-cataloglisted

Generate an importable design-artifact sticker sheet for a whole Compose component system (Compose M3, Wear Compose M3, Glimmer, Glance/Wear widgets). Use when you want a code-derived component catalog — each component in its primary modes, in two variants (ideal render + bordered layout), with extracted design tokens and accessibility greenlines — laid out for import into Figma, Google Stitch, or Claude Design. Pairs with the compose-preview and compose-preview-design-board skills.
yschimke/skills · ★ 2 · Web & Frontend · score 66

Install: claude install-skill yschimke/skills

# Compose Design Catalog Render a Compose **component system** and export it as an importable **sticker sheet**: every component in its primary modes, in two variants (the `ideal` render and a `layout` render that borders every composable), with the system's design tokens and an accessibility **greenline** layer extracted automatically from the render — not transcribed from a spec. This skill is the system-wide, sticker-sheet sibling of **compose-preview-design-board** (which arranges an arbitrary set of renders into one HTML brief). It assumes the **compose-preview** skill is installed — that skill owns the renderer, CLI, and Gradle plugin. Check first with `compose-preview --version`; if missing: 1. Run the stub bundled with the compose-preview skill, if it's on disk: `bash ~/.agents/skills/compose-preview/scripts/compose-preview --version` (first run installs the CLI and puts it on `PATH`). 2. Otherwise `npx skills add yschimke/skills --global --yes --skill compose-preview --skill compose-design-catalog`, then run that stub. Update later with `compose-preview update` (CLI) and `npx skills update` (skills). 3. No Node? `curl -fsSL https://raw.githubusercontent.com/yschimke/skills/main/scripts/install.sh | bash` ## Code is the source of truth This pipeline is **code-led**. Every value on the sheet — padding, corner radius, type, colour, touch-target size, `maxLines` / overflow — comes from the renderer's own data products, so the catalog is correct by construct