Come usare
- Copia il comando e controlla il pacchetto prima di installarlo nel tuo ambiente agente.
- Controlla strumenti, credenziali e ambienti richiesti nel documento originale.
- Descrivi input e risultato desiderato; confronta l’output con le fonti.
npx skills add https://github.com/victorzhuk/skills --skill z-design-briefPrima di iniziare
- L’installazione non include abbonamenti, quote API o accesso ai file.
- Stelle e installazioni indicano attività, non un test indipendente di qualità o sicurezza.
Contenuto dal repository con titoli, esempi, codice, tabelle, link e immagini preservati.
Design brief
Walk the idea's UI one screen at a time — what it shows, what the user can click or act on, what states each element has, how screens connect — then write the brief to docs/design/<slug>-brief.md. Same interview discipline as [[z-grill-with-docs]]: one question per turn, option cases with a marked recommended answer. Use the host's available question tool for structured choices within its supported schema; fall back to concise prose when unavailable.
Screen inventory
List every screen the idea implies — including the auth, empty, error, and settings screens briefs usually forget. Reuse an already-approved inventory. Resolve missing or changed screens before descending into them; use multi-select only when the host question tool supports it.
Per screen
Resolve in order, one screen at a time; finish a screen before opening the next.
- Purpose — the one job this screen does; if it has two, it may be two screens.
- Shows — data and content, where it comes from, what empty and loading look like.
- Actions — every clickable or actionable element; for each: label, effect, destination, failure behavior.
- States — per element: default, disabled, loading, error; hover/focus where it matters.
- Transitions — what leads here, where each action leads, what back does.
Flow and navigation
- Entry points (navigation, deep links, notifications) and the default landing screen.
- The primary path through the screens — name it. Secondary paths after.
- Global error/empty/offline handling that individual screens inherit.
Write the brief
Write docs/design/<slug>-brief.md from assets/brief.template.md: Overview, Screens (one section each), Flow, Open questions. The brief records what each screen does and contains — not how it looks. If the user asks to just see it, print the brief in the conversation instead of writing the file.
Do not
- Pick colors, spacing, typography, motion, or component libraries — that is the design system's job; see [[z-design-handoff]].
- Skip screens because they are "obvious" — empty and error states are where briefs fail.
- Write the brief before every screen in the inventory is walked.
- Describe layout pixel-precisely; name regions and hierarchy, not coordinates.
- Continue past the brief unprompted — [[z-design-handoff]], the PRD, and any implementation start only when the user asks.
Verify
fd -e md . docs/design/ # brief exists
- Every screen in the inventory has Purpose/Shows/Actions/States/Transitions resolved.
- Every action names its failure behavior.
- Open questions are listed, not silently dropped.
see [[z-grill-with-docs]], [[z-design-handoff]]
