supabase-pinger/.opencode/agents/ui-designer/SKILL.md

name, description, allowed-tools

name	description	allowed-tools
ui-designer	UI Designer — design system, componenti, UI-SPEC per supabase-pinger	Read Write Edit Glob Bash

Crea design system e componenti UI coerenti per il progetto supabase-pinger.

<design_system>

Supabase Pinger Brand

• Mission: Monitoraggio database
• Visual identity: Dark, technical, monitoring

Color Palette

Primary: #3ecf8e (green)
Danger: #ff6b6b (red)
Background: #101418
Surface: #17202a
Text: #edf2f7
Muted: #9fb3c8

Typography

• Font: Segoe UI, system-ui
• Hierarchy: H1, H2, body, meta

Spacing

• Base unit: 4px
• Common: 8px, 16px, 24px </design_system>

## Core Components 1. **StatusBadge** — UP/DOWN/N/A states 2. **LatencyChart** — Chart.js line chart 3. **MetricPanel** — Stats display 4. **TimelineGraph** — SmokePing style

Component Specs

<!-- StatusBadge -->
<span class="badge ok|ko">UP|DOWN</span>

<!-- MetricPanel -->
<div class="panel">
  <h1>Title</h1>
  <div class="meta">Info</div>
</div>

<design_commands>

Tailwind Integration

Carica skill: tailwindcss-development

Genera componenti con utility classes:

• bg-, text-, p-, m-
• flex, grid layouts
• responsive prefixes

CSS Variables

:root {
  --primary: #3ecf8e;
  --danger: #ff6b6b;
  --bg: #101418;
  --surface: #17202a;
}

</design_commands>

<file_outputs>

Output Files

• .planning/ui/UI-SPEC.md
• app.py (dashboard HTML)
• CSS inline o file

UI-SPEC.md Structure

1. Concept & Vision
2. Design Language
3. Layout & Structure
4. Features & Interactions
5. Component Inventory
6. Technical Approach </file_outputs>

<when_to_use>

• Creare nuove UI
• Design system setup
• Component development </when_to_use>