ui-craft-dense-dashboard

Name: ui-craft-dense-dashboard
Author: educlopez

206stars8forks

How to install ui-craft-dense-dashboard?

educlopez/ui-craft/ui-craft-dense-dashboard

$npx -y skills add educlopez/ui-craft --skill ui-craft-dense-dashboard

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	# UI Craft — Dense Dashboard
4
5	Pre-committed dense style: data-first, keyboard-first, operator tools. Bloomberg, Retool, Linear issues view, admin panels. Every pixel earns its place.
6
7	## Knobs (locked)
8
9	- CRAFT_LEVEL = 7 — polished but not precious; operators value speed over sheen.
10	- MOTION_INTENSITY = 3 — micro-only. Row hover, row active tint, inline confirm. No scroll reveals in table areas.
11	- VISUAL_DENSITY = 9 — tight 4/8px grid; whitespace earns its place.
12
13	Do not re-ask these in Discovery. Confirm brand accent + dark/light preference only.
14
15	## Style anchors
16
17	- UI sans + mono pairing. Mono for every ID, hash, timestamp, code.
18	- Semantic palette required: success, warning, danger, info + one brand accent.
19	- `tabular-nums` on every numeric column; mono on identifiers.
20	- Tight 4/8px spacing grid. `px-3 py-2` table cells, `gap-2` toolbars.
21	- Sparklines everywhere; horizontal bars for categorical; area for time-series. No pie. No 3D.
22	- Keyboard shortcuts visible inline (`⌘K`, `J/K`, `E` to edit).
23	- Dense chrome: breadcrumbs + tabs + toolbars + filter chips are welcome.
24	- Micro-motion only. Row hover, row active, inline save. No entrance stagger.
25
26	## Base rules (inherited)
27
28	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.
29
30	## Style-specific overrides
31
32	Typography
33
34	- UI: IBM Plex Sans or Inter, 400 / 500.
35	- Mono: IBM Plex Mono or Geist Mono for IDs, hashes, timestamps, code, version numbers, kbd.
36	- Body size: 13-14px default; 12px in dense tables is fine.
37	- `tabular-nums` on every numeric column, metric card, timestamp, duration.
38	- `font-variant-numeric: tabular-nums slashed-zero` for IDs + codes.
39	- Headings: compact. Page title 18-20px, section 14-15px 500.
40
41	Color (semantic palette required)
42
43	- Brand accent: one — primary actions, active tab, selected row accent tint.
44	- Semantic, subdued OKLCH (lightness 50-60, chroma ≤ 0.15):
45	- success `oklch(60% 0.12 150)`
46	- warning `oklch(72% 0.13 75)`
47	- danger `oklch(58% 0.15 25)`
48	- info `oklch(62% 0.12 240)`
49	- Never saturated hues — dashboards live on screens for 8 hours.
50	- Status dots, badge text, chip text use semantic color; backgrounds stay neutral.
51
52	Spacing & layout
53
54	- 4/8px spacing scale — never 5, 7, 9, 10. Stick to 4 / 8 / 12 / 16 / 24.
55	- Table cells: `px-3 py-2` default; `px-2 py-1.5` for ultra-dense.
56	- Toolbar rows: `gap-2`, `h-9` controls, `text-sm`.
57	- Sidebar: narrow (200-240px), subtle bg tint, icon + label; never full dark.
58	- Cards: `p-4`, 8px radius; 1px border over shadow.
59
60	Data display
61
62	- Every number column: `tabular-nums` + right-aligned.
63	- Every ID / hash / commit / timestamp: monospace.
64	- Sparklines inline in rows for trend context. 24-40px tall, single color.
65	- Category charts: horizontal bars. Time-series: area with 15% → 0% fade. No pies.
66	- Deltas: plain text `+12.5%` in semantic color, no pill.
67	- Empty states: one-line hint + keyboard shortcut to create.
68
69	Chrome & navigation
70
71	- Breadcrumbs + tabs + sub-toolbar together is expected and fine.
72	- Filter chips: outline style, removable `×`, no pill fill.
73	- Global command palette: `⌘K` visible in header search affordance.
74	- Row actions: inline icons on hover; also available via keyboard.
75	- Pagination: text `Page 3 of 42` + `tabular-nums`, plus `J/K` navigation.
76
77	Motion
78
79	- Row hover: background shift to `oklch(96% 0.002 250)` light / `oklch(20% 0.005 250)` dark, 80ms.
80	- Active/selected row: brand accent tint at ~6% opacity + 2px accent left border.
81	- Inline save / confirm: 150ms fade + check icon swap.
82	- No scroll-triggered reveals in table areas — they stutter long lists.
83	- Sort arrow, filter open, column resize: instant or <100ms.
84
85	## Reference files to read first
86
87	Load these from `../ui-craft/references/`:
88
89	- `dashboard.md` — primary reference; metric cards, charts, sidebar, tables
90	- `typography.md` — tabular-nums, mono pairing, scale
91	- `motion.md` Rendering Performance — compositor pipeline, layer promotion, scroll-linked motion
92	- `responsive.md` — tablet + laptop breakpoints, toolbar collapse
93
94	Skip `inspiration.md` (landing-page focused), `sound.md`.
95
96	## Anti-patterns for THIS style
97
98	- Serif fonts anywhere in chrome or data. Editorial is a different variant.
99	- Proportional figures in numeric columns — always `tabular-nums`.
100	- Saturated hues — reads as consumer app, not operator t

People who liked this also viewed

6 picks

Type

ui-craft-dense-dashboard

206stars8forks

View on GitHub

How to install ui-craft-dense-dashboard?

educlopez/ui-craft/ui-craft-dense-dashboard

$npx -y skills add educlopez/ui-craft --skill ui-craft-dense-dashboard

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	# UI Craft — Dense Dashboard
4
5	Pre-committed dense style: data-first, keyboard-first, operator tools. Bloomberg, Retool, Linear issues view, admin panels. Every pixel earns its place.
6
7	## Knobs (locked)
8
9	- CRAFT_LEVEL = 7 — polished but not precious; operators value speed over sheen.
10	- MOTION_INTENSITY = 3 — micro-only. Row hover, row active tint, inline confirm. No scroll reveals in table areas.
11	- VISUAL_DENSITY = 9 — tight 4/8px grid; whitespace earns its place.
12
13	Do not re-ask these in Discovery. Confirm brand accent + dark/light preference only.
14
15	## Style anchors
16
17	- UI sans + mono pairing. Mono for every ID, hash, timestamp, code.
18	- Semantic palette required: success, warning, danger, info + one brand accent.
19	- `tabular-nums` on every numeric column; mono on identifiers.
20	- Tight 4/8px spacing grid. `px-3 py-2` table cells, `gap-2` toolbars.
21	- Sparklines everywhere; horizontal bars for categorical; area for time-series. No pie. No 3D.
22	- Keyboard shortcuts visible inline (`⌘K`, `J/K`, `E` to edit).
23	- Dense chrome: breadcrumbs + tabs + toolbars + filter chips are welcome.
24	- Micro-motion only. Row hover, row active, inline save. No entrance stagger.
25
26	## Base rules (inherited)
27
28	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.
29
30	## Style-specific overrides
31
32	Typography
33
34	- UI: IBM Plex Sans or Inter, 400 / 500.
35	- Mono: IBM Plex Mono or Geist Mono for IDs, hashes, timestamps, code, version numbers, kbd.
36	- Body size: 13-14px default; 12px in dense tables is fine.
37	- `tabular-nums` on every numeric column, metric card, timestamp, duration.
38	- `font-variant-numeric: tabular-nums slashed-zero` for IDs + codes.
39	- Headings: compact. Page title 18-20px, section 14-15px 500.
40
41	Color (semantic palette required)
42
43	- Brand accent: one — primary actions, active tab, selected row accent tint.
44	- Semantic, subdued OKLCH (lightness 50-60, chroma ≤ 0.15):
45	- success `oklch(60% 0.12 150)`
46	- warning `oklch(72% 0.13 75)`
47	- danger `oklch(58% 0.15 25)`
48	- info `oklch(62% 0.12 240)`
49	- Never saturated hues — dashboards live on screens for 8 hours.
50	- Status dots, badge text, chip text use semantic color; backgrounds stay neutral.
51
52	Spacing & layout
53
54	- 4/8px spacing scale — never 5, 7, 9, 10. Stick to 4 / 8 / 12 / 16 / 24.
55	- Table cells: `px-3 py-2` default; `px-2 py-1.5` for ultra-dense.
56	- Toolbar rows: `gap-2`, `h-9` controls, `text-sm`.
57	- Sidebar: narrow (200-240px), subtle bg tint, icon + label; never full dark.
58	- Cards: `p-4`, 8px radius; 1px border over shadow.
59
60	Data display
61
62	- Every number column: `tabular-nums` + right-aligned.
63	- Every ID / hash / commit / timestamp: monospace.
64	- Sparklines inline in rows for trend context. 24-40px tall, single color.
65	- Category charts: horizontal bars. Time-series: area with 15% → 0% fade. No pies.
66	- Deltas: plain text `+12.5%` in semantic color, no pill.
67	- Empty states: one-line hint + keyboard shortcut to create.
68
69	Chrome & navigation
70
71	- Breadcrumbs + tabs + sub-toolbar together is expected and fine.
72	- Filter chips: outline style, removable `×`, no pill fill.
73	- Global command palette: `⌘K` visible in header search affordance.
74	- Row actions: inline icons on hover; also available via keyboard.
75	- Pagination: text `Page 3 of 42` + `tabular-nums`, plus `J/K` navigation.
76
77	Motion
78
79	- Row hover: background shift to `oklch(96% 0.002 250)` light / `oklch(20% 0.005 250)` dark, 80ms.
80	- Active/selected row: brand accent tint at ~6% opacity + 2px accent left border.
81	- Inline save / confirm: 150ms fade + check icon swap.
82	- No scroll-triggered reveals in table areas — they stutter long lists.
83	- Sort arrow, filter open, column resize: instant or <100ms.
84
85	## Reference files to read first
86
87	Load these from `../ui-craft/references/`:
88
89	- `dashboard.md` — primary reference; metric cards, charts, sidebar, tables
90	- `typography.md` — tabular-nums, mono pairing, scale
91	- `motion.md` Rendering Performance — compositor pipeline, layer promotion, scroll-linked motion
92	- `responsive.md` — tablet + laptop breakpoints, toolbar collapse
93
94	Skip `inspiration.md` (landing-page focused), `sound.md`.
95
96	## Anti-patterns for THIS style
97
98	- Serif fonts anywhere in chrome or data. Editorial is a different variant.
99	- Proportional figures in numeric columns — always `tabular-nums`.
100	- Saturated hues — reads as consumer app, not operator t

People who liked this also viewed

6 picks

Type