← ClaudeAtlas

ui-craft-dense-dashboardlisted

Dense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9. IBM Plex + mono numbers, semantic palette, 4/8px grid, sparklines, tabular-nums. Trigger on: dashboard, admin panel, data-dense, analytics, Bloomberg-like, Retool-like.
educlopez/ui-craft · ★ 39 · Web & Frontend · score 86
Install: claude install-skill educlopez/ui-craft
<!-- AUTO-GENERATED. Do not edit here. Source: skills/ui-craft/ + commands/*.md. Regenerate with `node scripts/sync-harnesses.mjs`. --> # UI Craft — Dense Dashboard Pre-committed dense style: data-first, keyboard-first, operator tools. Bloomberg, Retool, Linear issues view, admin panels. Every pixel earns its place. ## Knobs (locked) - **CRAFT_LEVEL = 7** — polished but not precious; operators value speed over sheen. - **MOTION_INTENSITY = 3** — micro-only. Row hover, row active tint, inline confirm. No scroll reveals in table areas. - **VISUAL_DENSITY = 9** — tight 4/8px grid; whitespace earns its place. Do not re-ask these in Discovery. Confirm brand accent + dark/light preference only. ## Style anchors - UI sans + mono pairing. Mono for every ID, hash, timestamp, code. - Semantic palette required: success, warning, danger, info + one brand accent. - `tabular-nums` on every numeric column; mono on identifiers. - Tight 4/8px spacing grid. `px-3 py-2` table cells, `gap-2` toolbars. - Sparklines everywhere; horizontal bars for categorical; area for time-series. No pie. No 3D. - Keyboard shortcuts visible inline (`⌘K`, `J/K`, `E` to edit). - Dense chrome: breadcrumbs + tabs + toolbars + filter chips are welcome. - Micro-motion only. Row hover, row active, inline save. No entrance stagger. ## Base rules (inherited) All rules in `../ui-craft/SKILL.md` apply. This file overrides knob defaults and adds style-specific guidance below. The anti-slop and craft tests still appl