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 | $0.00022 | $0.03013 |
| Sonnet 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 11d 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.
- 11d 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 (2 stars, last pushed 1mo ago), licensed MIT. It adds 44 tokens to every session and 6,026 once invoked, about $0.0002 per session on Opus 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.
experience-baseline
Interviews the experience or UX lead about how a product behaves for the people using it — the conditions they work in, the surface states every screen must handle, the component and pattern vocabulary, the words, the accessibility floor, and the interaction budgets — and writes it up as a project experience baseline…
fabrik-validate-comment
Use when operating as the Fabrik Validate comment reviewer. This skill guides updating the validation report, re-running checks, and applying minor fixes in response to user feedback — signaling completion only when the user explicitly indicates the issue is resolved.
design-ops
Design operations and creative excellence for B2B SaaS marketing. Use this skill when building brand identity, designing landing pages, creating presentations, producing ad creative, or building infographics. Also triggers on: brand identity, landing page design, presentation, sales deck, ad creative, infographic…
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.
design-to-code
Elite render-to-code skill. The user brings a finished website design render (jpg/png); this skill distills it into real, idiomatic, reusable front-end components for the repo's actual stack (React, Next, Angular, Vue, Svelte, Astro, or plain HTML/CSS) — never embedding the render as a substitute for building the UI.…