Quartz 4

SKILL

3 min read

Workflow

When triggered, always:

  1. Read DESIGN.md in this skill directory.

  2. Default surface: dark mode terminal aesthetic. ALL outputs are dark — no light mode variant. Violet is the only accent color (semantic dots can be green/yellow/red but UI accent stays violet).

  3. Component priorities (default lineup):

    • Agent status tile (per-agent: name, status dot, uptime, last-run, error count)
    • Log stream panel (mono font, timestamp + level + message, color-coded levels)
    • Metric gauge (sparkline + current value + delta)
    • Alert banner (severity dot + message + acknowledge button)
    • Job queue table (id, type, status, queued-at, started-at, retries)
    • Real-time tile (counter that animates as values change)

  4. For React surfaces — use 21st.dev Magic MCP compound workflow:

    • Step 0: Read DESIGN.md §2 → extract bg, surface, accent, text-primary, text-muted, border tokens
    • Step 1: Compose token string → "bg=#0a0a0a surface=#13131a accent=#7c3aed text=#ededed border=#1f1f1f" + note “DARK MODE — invert default light tokens”
    • Step 2: /ui "<component description> — DARK mode, respect tokens: {token string}"
    • Step 3: ui-expert-mcp analyze_ui → catch any light-mode leaks
    • Step 4: Playwright MCP screenshot to confirm dark consistency

  5. Quality gates before delivering output:

    • Pure dark bg (#0a0a0a or close)
    • Single accent color (violet) — no rainbow palettes
    • All data in mono font with font-feature-settings: 'tnum'
    • Status indicators use semantic dots: green (ok), yellow (warn), red (error), gray (idle)
    • Real-time counters animate via native requestAnimationFrame, no CountUp/GSAP
    • Border-based separation (NOT shadow-based) — dark mode shadows are weak
    • No rounded corners > 8px (terminal aesthetic = sharper)
    • Mono everywhere except UI labels (and even labels can be sans Inter)

  6. Real-time considerations:

    • Status dots pulse subtly (2s ease-in-out, opacity 1→.5→1) when “live”
    • Counters update via WebSocket/SSE in production — design assumes change happens
    • Log stream auto-scrolls to bottom; pin button to lock position
    • Alert banners slide in from top (translateY -100% → 0)

Anti-Slop Reminders for Dark Mode

  • ❌ Don’t use #1a1a2e purple-tinted dark — pure neutral #0a0a0a only
  • ❌ Don’t use 4 equal-width metric tiles in white-on-black — vary tile sizes by data importance
  • ❌ Don’t apply glass blur effects in dark mode — defeats the terminal aesthetic
  • ❌ Don’t use box-shadow with white alpha for “glow” everywhere — reserve for real-time pulses
  • ✅ Use border 1px solid #1f1f1f for separation, not shadows
  • ✅ Single accent color discipline — violet only, semantic dots only

Trigger Examples

  • “Build the Aurora Portal dashboard with agent status grid, recent activity log, and alerts” → full dashboard layout
  • “Component: AgentStatusTile React” → 21st.dev compound workflow with ops tokens
  • “Broadcast audit page showing successful blasts vs failures over 14 days” → metric gauge + table layout

Reference Materials

  • DESIGN.md (this directory) — full token system
  • VoltAgent/awesome-claude-design PostHog.md — for “data-dense dark” patterns
  • VoltAgent/awesome-claude-design Sentry.md — for alert/severity patterns
  • rohitg00 terminal family DESIGN.md files (Vercel, Railway, Fly.io)

Graph View