Borrowing it
Nothing to install: this file belongs to Federico-Anastasi/DYLA-ai. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/Federico-Anastasi/DYLA-ai/main/.agents/skills/mockup/SKILL.mdgit clone --depth 1 https://github.com/Federico-Anastasi/DYLA-aiWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/federico-anastasi/dyla-ai/mockup)<a href="https://agentmods.dev/skills/federico-anastasi/dyla-ai/mockup"><img src="https://agentmods.dev/badge/skills/federico-anastasi/dyla-ai/mockup/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/federico-anastasi/dyla-ai/mockup"><img src="https://agentmods.dev/badge/skills/federico-anastasi/dyla-ai/mockup.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00044 | $0.06026 |
| Opus 5.5 | $0.00018 | $0.02410 |
| Sonnet 5.5 | $0.00009 | $0.01205 |
| Haiku 4.5 | $0.00004 | $0.00603 |
Grade A, and why
mockup scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 373 lines — stays where its author put it; the contents beside it link to each section on GitHub.
/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
- Read context.md + brief + data_model.json (if present)
- Pick the theme — from context.md, or ask
- If
mockup.jsonexists: ask in aquestionsblock (same pattern as the theme question below) whether to regenerate it from scratch or edit it - Compose the pages from the library (PHASE 3)
- Write mockup.json straight away with
meta.status: "draft", and validate it - Present a conversational summary (pages and their main components, not the data row by row), then wait
- On confirmation: set
meta.status: "confirmed" - Update context.md
- Check consistency
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2mo ago First seen · 373 lines · 44 tokens per session scan A e2ce3f0207bf
mockup is a skill published in the GitHub repository Federico-Anastasi/DYLA-ai (1 stars, last pushed 2mo ago), licensed MIT. It adds 44 tokens to every session and 6,026 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
flame-harness-design
Phase 3 — define the Flutter designtokens.dart spec (palette, typography, spacing), the game's art/visual concept, and the asset/audio sourcing plan.
archify
Create architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as self-contained HTML with inline SVG, dark/light themes, and PNG/JPEG/WebP/SVG export.
forge-figma
Forge: design-to-code: figma, design to code, mockup, design tokens, pixel-perfect, responsive, breakpoints, style guide, dev mode, handoff, accessibility.
forge-website
Forge: websites, landing pages, and frontend UI: website, landing page, responsive, mobile layout, SEO, accessibility, Lighthouse, React, Vue, Tailwind.
visual-communication
Communicate systems and flows visually using Mermaid (flowchart, sequence, state, ER, class), the C4 model, and diagram-as-code. Use when the user asks to draw a flow, sequence diagram, state machine, ER diagram, C4 model, architecture diagram, or wants Mermaid code for a system, wants to pick a diagram type, or wants…
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design…