What is the ui-craft-dense-dashboard skill?
The ui-craft-dense-dashboard skill is a SKILL.md in educlopez/ui-craft with knobs locked at CRAFT 7, MOTION 3 and DENSITY 9. It tells your agent to build compact tables on a 4/8px grid with tabular numerals, mono identifiers, semantic colors and sparklines.
The ui-craft-dense-dashboard skill is the data-heavy variant of UI Craft. It locks CRAFT at 7, MOTION at 3 and DENSITY at 9, and is meant for operator tools where people scan many rows and numbers.
Its folder holds only a SKILL.md. For references it reads dashboard.md, typography.md, the Rendering Performance part of motion.md, and responsive.md from the base skill, and it skips inspiration.md and sound.md.
Type and spacing
- A UI sans such as IBM Plex Sans or Inter, plus a mono such as IBM Plex Mono or Geist Mono for IDs, hashes and timestamps.
- tabular-nums on numeric columns so digits line up.
- A 4/8px grid: table cells px-3 py-2, toolbars gap-2 with h-9 controls.
- Body text at 13 to 14px and a sidebar of 200 to 240px.
Color and charts
Status colors are semantic OKLCH: success oklch(60% 0.12 150), warning oklch(72% 0.13 75), danger oklch(58% 0.15 25) and info oklch(62% 0.12 240). Lightness stays at 50 to 60 except warning at 72, with chroma at most 0.15.
Sparklines run 24 to 40px, categories use horizontal bars, and time series use area charts. Pie, donut and 3D charts are out. Deltas are plain text such as +12.5% in a semantic color, with no pill.
Interaction
Row hover takes 80ms, and selected rows get a 6% accent tint with a 2px left border. Loading uses skeleton rows that match the column structure, shortcuts are visible such as command K and J or K, and tables get no scroll reveals.
Who the ui-craft-dense-dashboard skill is for
Best for
- Admin panels, analytics views and operations tools with many rows.
- Teams that want data-first rules, with the rendering performance reference loaded from the base skill.
- Projects already on UI Craft that need a locked high-density style.
Not for
- Airy, whitespace-heavy layouts, where the minimal variant fits.
- Long-form reading, where the editorial variant fits.
- Dark-sidebar styling. The skill rules out a full-dark sidebar.
How to install UI Craft Dense Dashboard Skill: Compact Data Interfaces
curl -fsSL https://skills.smoothui.dev/install | bash
ui-craft installnpx skills add educlopez/ui-craft, which installs the skill only, without agents or MCP gates.Run the installer
On macOS or Linux run the curl command above. On Windows run
irm https://skills.smoothui.dev/install.ps1 | iex. The script downloads the ui-craft binary and verifies its checksum.Run ui-craft install
The installer detects Claude Code, Cursor, Codex, Gemini and OpenCode, and lets you pick components, either in an interactive TUI or with --yes.
Or use the Claude Code plugin
In Claude Code run
/plugin marketplace add educlopez/ui-craftand then/plugin install ui-craft. The README says the plugin installs the skill, 25 slash commands, 2 review agents and the MCP quality gates.Ask for a dense dashboard
The variant triggers on dashboard, admin panel, Bloomberg-like and Retool-like requests.
Check that it loaded
Ask for a users table. Expect mono IDs, tabular numbers, compact rows, plain-text deltas and skeleton rows while loading.
Key features
- Locked knobsCRAFT 7, MOTION 3 and DENSITY 9 give a compact, calm, information-first baseline, and the skill does not re-ask them in Discovery.
- Sans plus mono pairingIBM Plex Sans or Inter handles the UI, while IBM Plex Mono or Geist Mono sets IDs, hashes and timestamps.
- Tabular numeralstabular-nums is applied to numeric columns so figures line up vertically, and number columns are right-aligned.
- Compact gridA 4/8px grid with px-3 py-2 table cells, gap-2 toolbars, h-9 controls, 13 to 14px body text and a 200 to 240px sidebar.
- Semantic OKLCH paletteSuccess, warning, danger and info each have a defined OKLCH value, with one brand accent and chroma at most 0.15.
- Chart rulesSparklines at 24 to 40px, horizontal bars for categories, area charts for time series, and no pie, donut or 3D charts.
- Plain deltas and shortcutsChanges appear as text such as +12.5%, and shortcuts such as command K and J or K are visible in the interface.
- Quick, quiet statesRows hover in 80ms, selected rows get a 6% accent tint with a 2px left border, and loading shows skeleton rows.
- Dense chrome allowedBreadcrumbs, tabs, toolbars and outline filter chips together are expected, and row actions appear as inline icons on hover.
- Hard exclusionsNo scroll reveals in table areas, no serif fonts in chrome or data, and no full-dark sidebar.
Frequently asked questions
What is the ui-craft-dense-dashboard skill?
It is a style variant in the educlopez/ui-craft repository with knobs locked at CRAFT 7, MOTION 3 and DENSITY 9. It guides your agent toward compact data interfaces with tabular numbers, mono identifiers, semantic OKLCH colors and restrained motion.
How do I install ui-craft-dense-dashboard?
Use the ui-craft installer from the README: run the curl or PowerShell install script, then run ui-craft install and choose your components. In Claude Code you can instead run /plugin marketplace add educlopez/ui-craft followed by /plugin install ui-craft.
Which colors does ui-craft-dense-dashboard use for status?
Success is oklch(60% 0.12 150), warning oklch(72% 0.13 75), danger oklch(58% 0.15 25) and info oklch(62% 0.12 240). The rules keep lightness between 50 and 60, except warning at 72, and chroma at 0.15 or below.
What chart types does ui-craft-dense-dashboard allow?
Sparklines of 24 to 40px tall in a single color, horizontal bars for categories and area charts for time series. It excludes pie, donut and 3D charts. Deltas are written as plain text, such as +12.5%, in a semantic color.
What spacing does ui-craft-dense-dashboard use?
A 4/8px grid. Table cells use px-3 py-2, toolbars use gap-2 with h-9 controls, body text is 13 to 14px, and the sidebar is 200 to 240px wide. Numeric columns use tabular-nums and are right-aligned.
How does ui-craft-dense-dashboard handle hover and selection?
Row hover takes 80ms with a background shift. Selected rows get a brand accent tint at about 6% opacity plus a 2px accent left border. Loading uses skeleton rows that match the column structure. The skill avoids scroll reveals in tables and a full-dark sidebar.
Does ui-craft-dense-dashboard work with Claude Code?
Yes. The README says ui-craft install detects Claude Code, Cursor, Codex, Gemini and OpenCode, and it also offers a Claude Code plugin that installs the skill, slash commands, review agents and MCP quality gates with two commands.