agentsclimarketplace
Sign in

Ui craft dense dashboard

Skill educlopez/ui-craft/skills/ui-craft-dense-dashboard

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.From its SKILL.md

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

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

5.3 KB, ~1.4k tokens by cl100k_base, as published. Nobody here has run it

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 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.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most design frontend skills give in ~1.4k tokens

Counted across 1,179 of the 2,086 authors here whose files we hold, read 2026-09-06

  • Commit to a bold aesthetic directionin 31 of 1179, across 24 files
  • Prefer component composition over inheritancein 28 of 1179, across 14 files
  • Animate only transform and opacity propertiesin 27 of 1179, across 22 files
  • Memoize expensive computations with useMemoin 26 of 1179, across 13 files
  • Use semantic HTML elementsin 24 of 1179, across 23 files
  • Virtualize long lists for performancein 21 of 1179, across 10 files
  • Use CSS variables for design tokensin 20 of 1179, across 14 files
  • Implement loading, empty, and error statesin 20 of 1179
  • Lazy load heavy components with Suspensein 19 of 1179, across 8 files
  • Respect prefers-reduced-motion media queriesin 18 of 1179, across 10 files
  • Prioritize CSS-only animations for HTMLin 18 of 1179, across 16 files
  • Use compound components for related UI elementsin 18 of 1179, across 7 files

Said here and by no other author read

  • use IBM Plex Sans and Mono fonts
  • use sparklines for trend context
  • surface keyboard shortcuts inline
  • limit motion to micro-interactions
  • use 1px borders instead of shadows for cards

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.