← ClaudeAtlas

design-composition-checklisted

Falsify a new or unfamiliar design system by rendering its hardest UI compositions before other features build on it. Use when a freshly researched, extracted, or ingested design system or token set is about to be used by more than one feature and no prior screen has exercised it yet.
wakqasahmed/ai-engineering-workflow-skills · ★ 2 · Web & Frontend · score 68
Install: claude install-skill wakqasahmed/ai-engineering-workflow-skills
# Design Composition Check Use this before a second feature starts building against a new or unfamiliar design system — after the system exists (tokens, components, or an extracted style guide), before it becomes a shared dependency. ## Trigger Run this when all of the following hold: - The design system or token set is new or unfamiliar: freshly researched, extracted from a reference, or ingested from a non-technical source — not something already proven across features in this project. - More than one feature is about to depend on it. - No prior screen in this project has exercised it yet. ## Skip conditions - An established, framework-driven UI (Material, Ant, shadcn/ui, or similar) already proven elsewhere in this project or organization. - A routine styling change to an existing, already-validated system. - No candidate screen in scope scores on any of the three hardness signals (information density, state variety, or primary/critical flow) — state which signal each candidate screen failed before skipping on this ground. State the skip condition in one line and stop. Do not select screens or render a verdict. ## Workflow 1. From the features already in scope, list every screen the design system will need to support. 2. Pick 1-2 of the *hardest* compositions from that list — never the easiest. See [Selecting the hardest compositions](references/screen-selection-guide.md) for what "hardest" means and how to find it fast. 3. Render each selected screen against the