mockup

Solid

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.

AI & Automation 2 stars 0 forks Updated 4 days ago MIT

Install

View on GitHub

Quality Score: 78/100

Stars 20%
16
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# /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...

Details

Author
Federico-Anastasi
Repository
Federico-Anastasi/DYLA-ai
Created
6 days ago
Last Updated
4 days ago
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category