Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add joelbrilliant/agentic-delivery-skills --skill design-before-build-gategit clone --depth 1 https://github.com/joelbrilliant/agentic-delivery-skillsWrote 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/joelbrilliant/agentic-delivery-skills/design-before-build-gate)<a href="https://agentmods.dev/skills/joelbrilliant/agentic-delivery-skills/design-before-build-gate"><img src="https://agentmods.dev/badge/skills/joelbrilliant/agentic-delivery-skills/design-before-build-gate/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/joelbrilliant/agentic-delivery-skills/design-before-build-gate"><img src="https://agentmods.dev/badge/skills/joelbrilliant/agentic-delivery-skills/design-before-build-gate.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.00049 | $0.00546 |
| Opus 5 | $0.00024 | $0.00273 |
| Sonnet 5 | $0.00010 | $0.00109 |
| Haiku 4.5 | $0.00005 | $0.00055 |
Grade A, and why
design-before-build-gate 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 — 102 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Before Build Gate
Overview
Use this skill when design, product direction, or interface shape matters before implementation.
Prototype and spec work is not production build work. The gate exists to stop agents from turning half-approved ideas into shipped code.
When to Use
- UI or product surface changes.
- New user flow or information architecture.
- API or module interface is uncertain.
- Multiple design directions should be compared.
- A prototype exists and needs approval before build.
- The user changes design after signoff.
Roles
- Designer/spec agent: explores options, prototypes, and tradeoffs. Does not implement the production slice by default.
- Owner/user: signs off direction.
- Builder: implements only the approved direction.
- Orchestrator: enforces the gate and resolves scope drift.
Gate Workflow
1. Define design question
State what must be decided:
- layout;
- interaction;
- content hierarchy;
- API contract;
- data model shape;
- user behaviour.
2. Produce options
Prefer 2 to 3 distinct options when uncertainty is real.
For each option, include:
- intent;
- tradeoffs;
- implementation complexity;
- risks;
- what would make it fail.
3. Get explicit signoff
Before production build, capture:
Approved direction:
Rejected alternatives:
Required changes:
Non-goals:
Evidence/reference:
No ambiguous "looks good" if material decisions remain.
4. Build only approved scope
Builder must not reinterpret design. If implementation reveals a design flaw, stop and request re-approval.
5. Re-approval triggers
Re-approval is required when:
- visual hierarchy changes materially;
- interaction changes;
- API contract changes;
- design tokens or brand direction change;
- data shown to users changes;
- implementation chooses a rejected alternative.
Verification
Final signoff should compare:
- approved design/spec;
- production implementation;
- screenshots or runtime surface;
- accessibility/usability basics;
- responsive states if relevant;
- data states: empty, loading, error, populated.
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 · 102 lines · 49 tokens per session scan A a9f2a6549867
design-before-build-gate is a skill published in the GitHub repository joelbrilliant/agentic-delivery-skills (2 stars, last pushed 3mo ago), licensed MIT. It adds 49 tokens to every session and 546 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
architecture-diagram
Generate architecture diagrams as fully editable SVG with native AWS, Azure, and GCP icons for cloud diagrams, or hand-drawn generic icons for everything else. Optionally deliver a self-contained editable draw.io mxGraph companion. Deterministic layout computes zone nesting and orthogonal routing instead of…
concept-to-image
Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG. Triggers on: "create an image of", "export as PNG", "save as SVG", "concept to image", "screenshot this HTML". NOT for interactive HTML, use static-web-artifacts-builder.
tldraw
Generate hand-drawn whiteboard-style diagrams (.tldr) from natural language and export to PNG/SVG via tldraw-cli, with vision-based self-check and an iterative review loop. Covers flowcharts, sequence diagrams, ERDs, UML sketches, and ML model diagrams. Triggers on: "whiteboard diagram", "sketch this out", "tldraw…
ux-expert
UX design expert for auditing and redesigning pages, dashboards, and data-dense interfaces via 4-phase collaborative reviews across 8 UX dimensions. Triggers on: "review UX", "audit this page", "redesign the dashboard", "UX review", "improve the layout", "dashboard UX audit", "component recommendations".
static-web-artifacts-builder
Build self-contained static HTML artifacts opened in a browser: interactive diagrams, dashboards, infographics. Pure HTML5+CSS3+inline SVG, zero toolchain. Triggers on: "interactive HTML", "open in browser", "HTML artifact", "visual dashboard", "HTML infographic". NOT for PNG/SVG output, use concept-to-image.
design-it
A skill for turning a requirement or feature description into a single, self-contained HTML technical design document. The document follows a fixed layout with diagrams, code examples, decisions, tests, and a code index.