← ClaudeAtlas

compose-preview-design-boardlisted

Assemble rendered Compose @Preview PNGs into a single self-contained HTML design board for Claude Design and other design-tool imports. Use when turning a set of rendered previews into one coherent design brief — grouped, captioned, and ordered — rather than handing over loose screenshots. Pairs with the compose-preview skill.
yschimke/skills · ★ 1 · Web & Frontend · score 72
Install: claude install-skill yschimke/skills
# Compose Preview — Design Board Assemble the PNGs produced by `compose-preview` into a single, self-contained HTML **design board** — categories, groups, captions, and layout — so a set of renders travels as one coherent brief instead of loose screenshots. The board is built for import into Claude Design (and similar design tools). This skill assumes the **compose-preview** skill is installed — it owns the renderer, CLI, and Gradle plugin that produce the PNGs this skill arranges. Check first with `compose-preview --version`; if it's missing, ask the user to run the bootstrap installer (which covers the compose-preview skills): ```sh curl -fsSL https://raw.githubusercontent.com/yschimke/compose-ai-tools/main/scripts/install.sh \ | bash ``` ## Source This skill is maintained at [github.com/yschimke/skills](https://github.com/yschimke/skills) under `skills/compose-preview-design-board/`. To check for updates, compare the installed copy against `main` (e.g. `git ls-remote https://github.com/yschimke/skills HEAD`). The renderer and CLI that produce the input PNGs ship from [github.com/yschimke/compose-ai-tools](https://github.com/yschimke/compose-ai-tools). ## When to use this skill - You have a set of rendered `@Preview` PNGs and want to hand them to a designer or to Claude Design as a structured brief — grouped by feature/screen, with captions and intent notes — not a flat folder of images. - You want one portable artifact (a single HTML file, images inlined) that