원클릭으로 Manus에서 모든 스킬 실행

ui-craft-dense-dashboard

스타207

포크8

업데이트2026년 7월 4일 21:55

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 저장소 열기 Creator 저장소 보기

다운로드

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.