Skip to content
ui-craft-dense-dashboard · ui-craft · Flowy
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,
One skill from ui-craft .
$ npx -y skills add educlopez/ui-craft --skill ui-craft-dense-dashboard --agent claude-codeInstalls just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itself Claude auto-loads it when your prompt matches the work. You can call it Invoke it directly when you want it. Slash command /ui-craft-dense-dashboard👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
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, </> SKILL.md
ui-craft-dense-dashboard.SKILL.md
---
name : ui-craft-dense-dashboard
description : "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."
argument-hint: "[action: build|review|polish] [target]"
---
<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
# 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.
Flowy AI Flows that just work. Hand-picked Claude Code plugins that fire the right skill as you prompt.
- 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 apply in full.
## Style-specific overrides
**Typography**
- UI: IBM Plex Sans or Inter, 400 / 500.
- Mono: IBM Plex Mono or Geist Mono for IDs, hashes, timestamps, code, version numbers, kbd.
- Body size: 13-14px default; 12px in dense tables is fine.
- `tabular-nums` on every numeric column, metric card, timestamp, duration.
- `font-variant-numeric: tabular-nums slashed-zero` for IDs + codes.
- Headings: compact. Page title 18-20px, section 14-15px 500.
**Color (semantic palette required)**
- Brand accent: one — primary actions, active tab, selected row accent tint.
- Semantic, subdued OKLCH (lightness 50-60, chroma ≤ 0.15):
- success `oklch(60% 0.12 150)`
- warning `oklch(72% 0.13 75)`
- danger `oklch(58% 0.15 25)`
- info `oklch(62% 0.12 240)`
- Never saturated hues — dashboards live on screens for 8 hours.
- Status dots, badge text, chip text use semantic color; backgrounds stay neutral.
**Spacing & layout**
- 4/8px spacing scale — never 5, 7, 9, 10. Stick to 4 / 8 / 12 / 16 / 24.
- Table cells: `px-3 py-2` default; `px-2 py-1.5` for ultra-dense.
- Toolbar rows: `gap-2`, `h-9` controls, `text-sm`.
- Sidebar: narrow (200-240px), subtle bg tint, icon + label; never full dark.
- Cards: `p-4`, 8px radius; 1px border over shadow.
**Data display**
- Every number column: `tabular-nums` + right-aligned.
- Every ID / hash / commit / timestamp: monospace.
- Sparklines inline in rows for trend context. 24-40px tall, single color.
- Category charts: horizontal bars. Time-series: area with 15% → 0% fade. No pies.
- Deltas: plain text `+12.5%` in semantic color, no pill.
- Empty states: one-line hint + keyboard shortcut to create.
**Chrome & navigation**
- Breadcrumbs + tabs + sub-toolbar together is expected and fine.
- Filter chips: outline style, removable `×`, no pill fill.
- Global command palette: `⌘K` visible in header search affordance.
- Row actions: inline icons on hover; also available via keyboard.
- Pagination: text `Page 3 of 42` + `tabular-nums`, plus `J/K` navigation.
**Motion**
- Row hover: background shift to `oklch(96% 0.002 250)` light / `oklch(20% 0.005 250)` dark, 80ms.
- Active/selected row: brand accent tint at ~6% opacity + 2px accent left border.
- Inline save / confirm: 150ms fade + check icon swap.
- No scroll-triggered reveals in table areas — they stutter long lists.
- Sort arrow, filter open, column resize: instant or <100ms.
## Reference files to read first
Load these from `../ui-craft/references/`:
- `dashboard.md` — primary reference; metric cards, charts, sidebar, tables
- `typography.md` — tabular-nums, mono pairing, scale
- `motion.md` Rendering Performance — compositor pipeline, layer promotion, scroll-linked motion
- `responsive.md` — tablet + laptop breakpoints, toolbar collapse
Skip `inspiration.md` (landing-page focused), `sound.md`.
## Anti-patterns for THIS style
- Serif fonts anywhere in chrome or data. Editorial is a different variant.
- Proportional figures in numeric columns — always `tabular-nums`.
- Saturated hues — reads as consumer app, not operator tool.
- Colored pills on every delta — plain text in semantic color.
- Pie charts, donut charts, 3D charts. Ever.
- Vertical bar chart for time-series — use area/line.
- Uniform colored top borders on metric cards.
- Card grids with heavy whitespace — if it feels airy, wrong variant.
- Full-dark sidebar (common AI pattern) — subtle tint only.
- Scroll-triggered reveals or stagger animations in table areas.
- Hidden keyboard shortcuts — always surface `⌘K`, row shortcuts, help trigger.
- Vague loading states — show skeleton rows matching column structure, not generic spinner.
© 2026 Flowy · Free and open source
Built for Claude Code · Not affiliated with Anthropic
