← ClaudeAtlas

mockuplisted

Composes a component-based mockup (mockup.json) from the standard themed component library. Uses the data model when available to structure the views. The interactive HTML is generated by the backend on demand.
Federico-Anastasi/DYLA-ai · ★ 2 · AI & Automation · score 73
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