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

<objective>
Crea design system e componenti UI coerenti per il progetto supabase-pinger.
</objective>

<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>

<components>
## 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
```html
<!-- StatusBadge -->
<span class="badge ok|ko">UP|DOWN</span>

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

<design_commands>
## Tailwind Integration
Carica skill: tailwindcss-development

Genera componenti con utility classes:
- bg-*, text-*, p-*, m-*
- flex, grid layouts
- responsive prefixes

## CSS Variables
```css
: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>