ワンクリックでManusで任意のスキルを実行

始める

uiux

スター58

フォーク10

更新日2026年3月18日 03:12

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

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

dlupiak

dlupiak/claude-session-dashboard

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

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

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

Heatmap Intensity Scale

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

Tooltip Styling

{ 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

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

このリポジトリの他の Skills

同じリポジトリ

dashboard

dlupiak/claude-session-dashboard

Open the Claude Session Dashboard in the browser. Starts it first if not already running. Checks for and installs updates before starting.

2026-03-1858

analyze-skills

dlupiak/claude-session-dashboard

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.

2026-03-1858

feature

dlupiak/claude-session-dashboard

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.

2026-03-1858

fix-ci

dlupiak/claude-session-dashboard

Investigate and fix the latest failing CI workflow

2026-03-1858

fix-issue

dlupiak/claude-session-dashboard

Fix a GitHub issue end-to-end

2026-03-1858

investigate

dlupiak/claude-session-dashboard

Investigate a URL or page using Playwright browser

2026-03-1858

name	uiux
description	Dashboard design system — colors, typography, spacing, components, and visual patterns for the session dashboard UI.
user-invocable	false

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

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

Heatmap Intensity Scale

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

Tooltip Styling

{ 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

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