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 techygarg/lattice --skill design-firstgit clone --depth 1 https://github.com/techygarg/latticeWrote 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/techygarg/lattice/design-first)<a href="https://agentmods.dev/skills/techygarg/lattice/design-first"><img src="https://agentmods.dev/badge/skills/techygarg/lattice/design-first/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/techygarg/lattice/design-first"><img src="https://agentmods.dev/badge/skills/techygarg/lattice/design-first.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.00111 | $0.01913 |
| Opus 5.5 | $0.00044 | $0.00765 |
| Sonnet 5.5 | $0.00022 | $0.00383 |
| Haiku 4.5 | $0.00011 | $0.00191 |
Grade C, and why
design-first scanned grade C with 1 finding 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 1mo 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.
Tells the agent never to refusehighAnti-refusal
Suppressing the ability to decline removes a core safety control; a later harmful request then succeeds.
**Mid-level exit**: If the user says "skip to code" or "just implement it" before the design is complete, acknowledge the tradeoff before proceeding: "Skipping Level [N] means [what hasn't been aligned] — I'll flag any d How it starts
The opening of the file, as written. The whole thing — 116 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design-First (Progressive Design Facilitation)
The 5 Levels
Level 1: Capabilities (The "What")
Purpose: Confirm scope. Surface the user-facing outcomes the system must deliver. Shared vocabulary check — ensure the human and the AI are talking about the same feature with the same boundaries.
Output format: Numbered list of user-facing capabilities, max 5. Each capability is a plain-language outcome, not an implementation detail.
Boundary: No components, no architecture, no technical detail. If a capability mentions a specific technology, class, or data structure, it belongs at a later level. This level answers only "what does the user get?"
Checkpoint: "Does this Level 1 (Capabilities) look correct? Should I proceed to Level 2 (Components)?"
Level 2: Components (The "Who")
Purpose: Identify the building blocks. What major pieces does the system have, and what is each one responsible for?
Output format: 3-5 components, each with a single responsibility and a one-line description. Include an ASCII or Mermaid diagram showing how they relate. Note integration points with existing infrastructure.
Boundary: No data flow, no sequence of operations, no interaction detail. Describe each component by what it is and what it owns — not how it communicates with others. If you find yourself writing "A sends X to B", that belongs at Level 3.
Checkpoint: "Does this Level 2 (Components) look correct? Should I proceed to Level 3 (Interactions)?"
Level 3: Interactions (The "How They Talk")
Purpose: Define the data flow between components. How do the building blocks communicate to deliver the capabilities?
Output format: A sequence diagram (ASCII or Mermaid) or a numbered flow showing the order of operations. For each interaction, describe WHAT data passes between components. See ./references/methodology-detail.md for notation guidance.
Boundary: No function signatures, no type definitions, no implementation detail. Focus on what passes between components, not how each component processes internally. If you are defining method parameters or return types, that belongs at Level 4.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 1mo ago First seen · 116 lines · 111 tokens per session scan C 0b6259296b0b
design-first is a skill published in the GitHub repository techygarg/lattice (209 stars, last pushed 3d ago), licensed MIT. It adds 111 tokens to every session and 1,913 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it C with 1 finding (tells the agent never to refuse). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
repo-system-map
Analyze a software repository at the latest remote main commit and turn its implemented architecture into a citation-backed interactive isometric system map with a legend, selectable infrastructure buildings, dependency and payload flows, and plain-language learner explanations. For eligible public GitHub…
impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…
sxo
Search Experience Optimization (SXO), the bridge between SEO and UX/CRO. Audits the journey from the SERP click to the on-page goal: click-through factors (title, meta, rich results), then post-click signals that keep users and drive conversions: above-the-fold relevance and intent match, page speed / Core Web Vitals…
shiny-bslib-theming
Advanced theming for Shiny apps using bslib and Bootstrap 5. Use when customizing app appearance with bstheme(), Bootswatch themes, custom colors, typography, brand.yml integration, Bootstrap Sass variables, custom Sass/CSS rules, dark mode and color modes, dynamic theme switching, real-time theming, theme inspection…
shiny-bslib
Build modern Shiny dashboards and applications using bslib (Bootstrap 5). Use when creating new Shiny apps, modernizing legacy apps (fluidPage, fluidRow/column, tabsetPanel, wellPanel, shinythemes), or working with bslib page layouts, grid systems, cards, value boxes, navigation, sidebars, filling layouts, theming…
interface-craft
Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one. Use this when a screen works but looks unfinished or default, when a layout feels crowded or arbitrary, when a page has no clear focal point, or…