메뉴
Dashboard design system — colors, typography, spacing, components, and visual patterns for the session dashboard UI.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
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