Menu
Dashboard design system — colors, typography, spacing, components, and visual patterns for the session dashboard UI.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
Open the Claude Session Dashboard in the browser. Starts it first if not already running. Checks for and installs updates before starting.
Analyze ~/.claude session files to find unused agent skills and reduce context token waste. Scans subagent JSONL files for injected skills and cross-references with agent responses.
Full SDLC pipeline: design → plan → implement → review → test → ship. Use this skill when the user wants to BUILD A NEW FEATURE that spans multiple files across scanner, server functions, and UI layers — anything requiring architecture design, an implementation plan, and coordinated changes across a vertical slice. Trigger on: /feature command, 'build/implement/add [feature]' requests involving new server functions + UI components, multi-step feature work needing TDD and code review. Do NOT trigger for: bug fixes, refactors, small UI tweaks, single-file changes, CI fixes, test runs, or PR reviews.
Investigate and fix the latest failing CI workflow
Fix a GitHub issue end-to-end
Investigate a URL or page using Playwright browser
| name | uiux |
| description | Dashboard design system — colors, typography, spacing, components, and visual patterns for the session dashboard UI. |
| user-invocable | false |
Dark theme dashboard with warm gray tones and terracotta brand accent, optimized for developer tooling and data visualization.
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.
| 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 |
| 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 |
| 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 |
| 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 |
const COLORS = ['#d97757', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#b07cc5']
const INTENSITY_COLORS = ['#2a2926', '#3d2a1e', '#a8512eb3', '#d97757cc', '#e09070']
{ backgroundColor: '#1c1c1a', border: '1px solid #3d3b36' }
#2a2926#7a7668| 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 |
md: breakpoint for stat panelsgap-4 between grid itemsmt-6 between major page sectionsspace-y-2 for list items within panels<span className="text-brand-500">Claude</span> Dashboardtext-gray-500 hover:text-gray-300public/favicon.svg#d97757#141413 (matches gray-950)font-boldfont-mono for numeric values, IDs, model names29.5K, 8.3M)border-gray-800 only, no shadowsrounded-xl for cards, rounded-full for bars/badgesopacity-60text-xs, text-[10px]), tight spacingbg-gray-800), no grid lines, subtle reference linesbrand-* (terracotta) instead of blue-* for all interactive/accent elements