Dashboard UI Spec File and Drift Control
Writes a short system.md of locked UI decisions for your SaaS or admin app, wires it to load every session, and audits screens for drift.
Before & after
Same prompt, same agent — the only difference is the skill.
A system.md file is helpful for maintaining consistency across long product builds. You'd document spacing rules, color assignments, typography scales, and component patterns. For an admin dashboard, you're probably looking at dense layouts, so clarity on data density and visual hierarchy matters. I'd need to know: what's the user's primary workflow? Are they doing data entry, monitoring, or analysis? What's your brand color palette? How many sessions have you already built before the drift started?
PRODUCT UI SPEC MEMORY: Admin Dashboard System FILE: system.md (auto-loaded each session) INTENT BRIEF Who: Finance operations team managing 500+ monthly transactions Doing: Reviewing account reconciliation, approval workflows, dispute resolution Feeling: Confident, organized, never lost in the data Goal: Complete month-end close 40% faster than spreadsheet-based process VISUAL HIERARCHY PRIORITY 1 (Commands, high-stakes data) → Color: Brand blue #0052CC (action buttons, alert badges) → Weight: 600 (bold for critical actions: Approve, Reject, Export) → Size: 16px minimum for click targets PRIORITY 2 (Secondary actions, readable content) → Color: Neutral gray #5E6C84 (data labels, descriptions) → Weight: 400 (regular text) → Size: 14px for table content PRIORITY 3 (Supporting, supplemental info) → Color: Gray #738496 (timestamps, helper text) → Weight: 400 → Size: 12px for metadata SPACING GRID → Base unit: 4px → Safe spacing: 8px (padding within components) → Card spacing: 16px (gap between card and content) → Section spacing: 24px (vertical gap between major sections) → Gutter: 20px (left/right margin on container) TYPOGRAPHY SCALE Page Title: 28px / bold / leading 32px Section Header: 18px / 600 / leading 24px Card Title: 14px / 600 / leading 20px Body Text: 14px / 400 / leading 20px Small Label: 12px / 500 / leading 16px Font Stack: Inter for UI (system sans-serif fallback) DEPTH STRATEGY (Shadows) → Level 0 (Base): No shadow → Level 1 (Card): 0 1px 3px rgba(0,0,0,0.12) → Level 2 (Elevated panel): 0 4px 8px rgba(0,0,0,0.15) → Level 3 (Modal/popover): 0 10px 20px rgba(0,0,0,0.20) COLOR ROLE ASSIGNMENTS Status indicators: → Approved: Green #36B37E → Pending: Amber #FFAB00 → Rejected: Red #DE350B → Neutral/Draft: Gray #626F86 Data visualization: → Series A (Revenue): #0052CC → Series B (Costs): #DE350B → Series C (Profit): #36B37E → Neutral: #626F86 COMPONENT LIBRARY Table: → Row height: 40px → Header bg: #F7F8F9 (very light gray) → Striping: Alternate rows at 2% opacity (visual break) → Hover: +3% opacity, 100ms transition → Sortable header: Blue caret on hover Input Fields: → Border: 1px solid #DCDFE4 → Focus border: 2px solid #0052CC → Height: 32px (matches density) → Padding: 8px horizontal → Label: Bold, 14px, 12px above field Buttons: → Primary: Blue bg (#0052CC), white text, 32px height → Secondary: Gray bg (#F1F2F4), dark text → Disabled: Gray bg (#DCDFE4), 50% opacity → Hover: Darken bg by 10% → Transition: 100ms DATA DENSITY → Compact mode: 8px vertical padding in cells (max data per screen) → Comfortable mode: 12px vertical padding (default) → Toggle in settings: survives session SPECIAL RULES → Modals must not exceed 600px width (prevents overwhelming) → Forms max 2 columns (single column preferred) → Tooltips max 120 characters (enforce brevity) → Charts max 4 series (visual noise threshold) → Page load animations: 300ms ease-out (never jarring) CHANGE LOG Session 1 (2026-07-31): System created, 8 component patterns locked Session 2: Added data density toggle after user feedback IMPLEMENTATION → Copy system.md to project root → Load at start of each Claude session via CLAUDE.md reference → Tag breaking changes with BREAKING in changelog → Approve changes only via Slack proposal (async design review)
About this skill
Session 3 used 16px card padding. Session 11 used 20px. Session 19 added a drop shadow nobody asked for. Now your dashboard looks like it came from three different teams. This skill turns your product's UI decisions into a short system.md with real numbers in it. It makes sure the file actually loads every session and treats each deviation as either a bug or a logged change.
What it does
- Turns "who uses this, doing what, how often" into concrete choices: density, row heights, how much color to use, and the type scale
- Locks a closed spacing scale, color roles (not raw hues), a depth ladder, and a radius scale, plus a "Never" list that's easy to check
- Writes recipes for repeated patterns with numbers: data tables, page headers, forms, modals versus drawers, and empty states
- Audits pasted code for drift: counts every distinct spacing, color, font size, and shadow value, then maps each one to a canonical token
- Avoids keeping two copies of the same values: if your tokens already live in Tailwind or CSS variables, system.md points to them and holds only the rules
- Shows how to load the file in Claude Code (CLAUDE.md import) or Claude Projects, and adds a change protocol so updates are deliberate
What you get
A system.md you can drop in, usually under 150 lines, containing intent, tokens, patterns, a Never list, and a changelog. You also get the one line that wires it into your sessions, or a drift report with consolidation targets when you paste existing screens.
Best for
Product designers and solo builders making dashboards, admin panels, and internal tools with Claude over weeks of sessions, where consistency across 30+ screens matters more than any single screen.
SKILL.md preview
---
name: dashboard-ui-spec-drift-control
description: Captures a dashboard, admin panel, or SaaS product's UI decisions (intent, spacing scale, density, type, color roles, depth, component patterns) in a short system.md that loads every session, then enforces it, audits drift, and logs deliberate changes so screens built weeks apart stay consistent. Use when the user says "set up a design system file for my dashboard", "Claude keeps changing my spacing and colors", "every new screen looks slightly different", "write a system.md for this app", "audit these screens for inconsistency", "lock in our UI decisions before we build more pages", "my admin panel looks like three different apps".
---
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.