Luca Sacchi Ricciardi
6c8c05b13b
- Buffer locale samples[] per aggiornamenti real-time - Poll /api/status ogni 10 secondi - Aggiunge nuovi campioni senza ricaricare history - Aggiunge AGENTS.md per istruzioni agenti OpenCode - Aggiunge team agenti in .opencode/agents/
99 lines
1.7 KiB
Markdown
99 lines
1.7 KiB
Markdown
---
|
|
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> |