一键在 Manus 中运行任何 Skill

ui-craft-dense-dashboard

星标207

分支8

更新时间2026年5月4日 07:04

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.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

educlopez

educlopez/ui-craft

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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.

同仓库更多 Skills

同仓库

ui-craft

educlopez/ui-craft

Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, landing pages, theming, and polish. Trigger when editing UI code or reviewing and refining components, pages, screens, layouts, animations, responsive behavior, or design systems.

2026-07-15207

bolder

educlopez/ui-craft

"Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe, flat, or "template-y", or when the user says "bolder", "more personality", "more creative", or "make it pop" (still professional). Invoke when the user asks for bolder on their UI, or mentions 'bolder' alongside design / UI / frontend work."

2026-07-05207

brief

educlopez/ui-craft

Write or update the project's durable design brief at .ui-craft/brief.md. Invoke when the user asks for brief on their UI, or mentions 'brief' alongside design / UI / frontend work.

2026-07-05207

craft

educlopez/ui-craft

"One-shot build pipeline for a complete surface from an outcome recipe — inputs (or defaults) → composition → theme → build order → acceptance bar. Use when the user asks for a whole surface ("build me a dashboard", "hazme un dashboard") and expects a shippable result, not component-level help. Invoke when the user asks for craft on their UI, or mentions 'craft' alongside design / UI / frontend work."

2026-07-05207

finalize

educlopez/ui-craft

Pre-ship gate — runs detector, verifies brief and tokens, applies the 10-pass finish bar, ranks findings by feedback hierarchy. Use when the user wants to ship, merge, or finalize a surface and needs a verdict (READY / NOT READY / BLOCKED) before committing. Invoke when the user asks for finalize on their UI, or mentions 'finalize' alongside design / UI / frontend work.

2026-07-05207

polish

educlopez/ui-craft

"Final craft pass applying the compound details from the polish checklist — micro-typography, spacing rhythm, hover states, and a signature detail — directly to code. Use when the surface is functionally complete but feels unfinished, or when the user says "polish this" / "it looks generic" / "add the final touches". Invoke when the user asks for polish on their UI, or mentions 'polish' alongside design / UI / frontend work."

2026-07-05207

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]

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.