← ClaudeAtlas

screen-deep-divelisted

Take ONE screen of the app apart and rebuild the case for it: measure how it lays out at phone, tablet, laptop and desktop widths over generated data, diagnose where the height and the width actually go, propose tiered improvements (layout only → structure → character) as live, clickable prototypes in a device-frame artifact, get the operator's decision, and file one implementable issue per agreed slice. Use when asked to rethink, redesign, improve or make "first-class" a specific screen or flow at all screen sizes, when a screen scrolls or wastes space on some device, or when a UX + layout proposal for one screen is wanted before any code. Not a whole-app audit (that is ui-audit / accessibility-audit); it writes no product code.
ChulioZ/spielwirbel · ★ 1 · Web & Frontend · score 57
Install: claude install-skill ChulioZ/spielwirbel
# Screen deep-dive One screen, all sizes, UX and layout and visuals together, ending in a decision and issues — not in code. The audits judge the whole app against criteria; this argues for one screen from measurements and shows the alternatives working. Product code ships afterwards through `create-issue` → `implement`. **The lever is frequency.** Every screen has controls used every time and controls used rarely. Most layout trouble is rare controls rendered at the size of common ones. Classify before you measure; it decides tier B below. ## The brief — what "better" means here The operator's standing brief for a deep-dive, first given for the session setup screen on 2026-09-11: **be bold and creative, aiming at a great, fresh, cool, fancy, lightweight experience — nothing on the screen is set in stone.** Every proposal has to pass all four readings of that sentence: - **Lightweight.** Fewer things on screen at once, fewer taps for the common case, no scrolling past the rare to reach the usual — and lightweight in the codebase: no dependency, no build step, no new stored state when an existing mechanism (tags, the vote, retire, the filters) already answers the need. The operator prefers the existing mechanism over a new field every time; "add a feature to fix a layout" defaults to no, and a proposal that adds a mechanism must argue why the existing one cannot carry it. - **Fresh and fancy.** At least one character moment per proposal — a scene, motion, th