Agent skill

uiux

Dashboard design system — colors, typography, spacing, components, and visual patterns for the session dashboard UI.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/uiux

SKILL.md

Dashboard Design System

Theme

Dark theme dashboard with warm gray tones and terracotta brand accent, optimized for developer tooling and data visualization.

Tailwind Theme

Uses Tailwind CSS v4 with CSS-first config (@import 'tailwindcss' in app.css).

Custom @theme block overrides default cool grays with warm grays and adds a brand-* terracotta accent scale.

Colors

Warm Gray Scale (overrides Tailwind defaults)

Token Hex Usage
gray-950 #141413 Body/page background
gray-900 #1c1c1a Card/panel background (with /50 opacity)
gray-800 #2a2926 Borders, dividers
gray-700 #3d3b36 Subtle fills, inactive bars
gray-600 #565349 Disabled states
gray-500 #7a7668 Muted text, timestamps, labels
gray-400 #a39e90 Secondary text, descriptions
gray-300 #cdc8b8 Headings, panel titles
gray-100 #eae6dc Primary text
white Emphasis text, hero numbers

Brand Accent (terracotta)

Token Hex Usage
brand-300 #f0b8a0 Light accent text
brand-400 #e09070 Links, input tokens, active elements
brand-500 #d97757 Primary accent, tab indicators, logo highlight
brand-600 #c4643f Buttons, toggles
brand-700 #a8512e Dark accent

Semantic Colors (unchanged)

Token Usage
emerald-400 Success / output tokens
amber-400 / amber-500 Warning / cache tokens
purple-400 / purple-500 Cache creation, system overhead
red-400 Error messages, limits

Data Visualization Colors

Category Color
Primary / Messages brand-500 (#d97757)
Input tokens brand-400 (#e09070)
Output tokens emerald-400
Cache read amber-400
Cache creation purple-400
System overhead purple-500
Free space gray-700

Chart COLORS Array

ts
const COLORS = ['#d97757', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#b07cc5']

Heatmap Intensity Scale

ts
const INTENSITY_COLORS = ['#2a2926', '#3d2a1e', '#a8512eb3', '#d97757cc', '#e09070']

Tooltip Styling

ts
{ backgroundColor: '#1c1c1a', border: '1px solid #3d3b36' }

Grid/Tick Colors

  • Grid stroke: #2a2926
  • Tick fill: #7a7668

Component Patterns

Component Classes
Panel/Card rounded-xl border border-gray-800 bg-gray-900/50 p-4
Panel title text-sm font-semibold text-gray-300
Hero number text-2xl font-bold text-white
Subtitle text-[10px] text-gray-500
Label text-xs text-gray-400
Mono value text-xs font-mono text-gray-300
Badge rounded bg-gray-800 px-1.5 py-0.5 text-[10px] font-mono text-gray-400
Bar track h-2 rounded-full bg-gray-800 overflow-hidden
Link text-sm text-brand-400 hover:underline
Muted link text-xs text-gray-500 hover:text-gray-300
Active button bg-brand-600 text-white hover:bg-brand-500
Focus ring focus:border-brand-500 focus:ring-brand-500
Active tab border-brand-500 text-white
Toggle on bg-brand-600

Layout

  • 2-column grid at md: breakpoint for stat panels
  • Full-width panels for timeline, agents, tasks
  • Consistent gap-4 between grid items
  • mt-6 between major page sections
  • space-y-2 for list items within panels

Header & Navigation

  • Logo: <span className="text-brand-500">Claude</span> Dashboard
  • Nav icons: inline SVG icons (16x16) instead of ASCII characters
  • Footer: GitHub + npm icon links with text-gray-500 hover:text-gray-300

Favicon

  • SVG terminal prompt icon at public/favicon.svg
  • Uses brand color #d97757
  • Meta theme-color: #141413 (matches gray-950)

Typography

  • Font: system monospace for values, default sans for labels
  • Never use font weights heavier than font-bold
  • Use font-mono for numeric values, IDs, model names
  • Token counts formatted with K/M suffixes (e.g., 29.5K, 8.3M)

Visual Rules

  1. Dark-first -- all backgrounds are dark warm gray, text is light
  2. Subtle borders -- border-gray-800 only, no shadows
  3. Rounded panels -- rounded-xl for cards, rounded-full for bars/badges
  4. Opacity for bars -- colored bar segments use opacity-60
  5. Compact density -- small text sizes (text-xs, text-[10px]), tight spacing
  6. Recharts styling -- dark tooltips (bg-gray-800), no grid lines, subtle reference lines
  7. Brand accent -- use brand-* (terracotta) instead of blue-* for all interactive/accent elements

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results