mockuplisted
Install: claude install-skill Federico-Anastasi/DYLA-ai
# /mockup — Component-based mockup
Composes the mockup of the application as `mockup.json`: a set of pages built ONLY from
components of the standard library (see PHASE 3). **It does not generate HTML.** The
preview in the viewer (`web/src/components/Viewer/MockupView.tsx`) and the interactive
export (`mockup.html` — working navigation, tabs and search, generated on demand by
`server/mockup_export.py`) use the SAME themed component library (`web/src/mockup-lib/`,
`mk-*` classes, themes in `web/src/mockup-lib/themes/{standard,compact,plain}.css`). They
are pixel-identical for layout and theme, exactly as for the estimate and the data model —
with one gap: the icon sets are not perfectly mirrored (see PHASE 3 below), so a page using
an icon the export does not know renders fine in the viewer and loses that one icon in the
HTML export.
The consequence matters: **you never invent markup or colours.** The theme owns the
structure; you choose which components to use and what goes in them.
**UX: chat stays conversational.** The mockup is never presented as a list or a table in
chat — the user sees it in the viewer next to the chat. In chat you discuss it in words,
citing pages and components by id (e.g. the `detail` page, the `grid1` component). When
you cite a chapter of the brief, write `[[brief:Chapter title]]`: it renders as a
clickable reference that opens the document at that point.
---
## PROTOCOL
1. **Read context.md + brief + data_model.json** (if present)
2. **Pick t