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 kazdenc/builder-skills --skill design-foundationsgit clone --depth 1 https://github.com/kazdenc/builder-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/kazdenc/builder-skills/design-foundations)<a href="https://agentmods.dev/skills/kazdenc/builder-skills/design-foundations"><img src="https://agentmods.dev/badge/skills/kazdenc/builder-skills/design-foundations/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/kazdenc/builder-skills/design-foundations"><img src="https://agentmods.dev/badge/skills/kazdenc/builder-skills/design-foundations.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.00043 | $0.00941 |
| Opus 5 | $0.00022 | $0.00470 |
| Sonnet 5 | $0.00009 | $0.00188 |
| Haiku 4.5 | $0.00004 | $0.00094 |
Grade A, and why
design-foundations 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 9d 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 — 82 lines — stays where its author put it; the contents beside it link to each section on GitHub.
The Five Planes of User Experience
A product's user experience is built in layers, from abstract to concrete. Each plane builds on the one below it. Decisions made on lower planes constrain and inform decisions on higher planes.
┌─────────────────────────────────┐
│ SURFACE │ Visual/sensory design
│ ┌───────────────────────────┐ │
│ │ SKELETON │ │ Layout, navigation, information design
│ │ ┌─────────────────────┐ │ │
│ │ │ STRUCTURE │ │ │ Interaction design, information architecture
│ │ │ ┌───────────────┐ │ │ │
│ │ │ │ SCOPE │ │ │ │ Features, content requirements
│ │ │ │ ┌─────────┐ │ │ │ │
│ │ │ │ │STRATEGY │ │ │ │ │ User needs, product objectives
│ │ │ │ └─────────┘ │ │ │ │
│ │ │ └───────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │
└─────────────────────────────────┘
The Duality
Every product has two dimensions that run through all five planes:
- Functionality side — The product as a tool (tasks, features, interaction)
- Information side — The product as information (content, structure, presentation)
| Plane | Functionality | Information |
|---|---|---|
| Strategy | Product objectives | User needs |
| Scope | Functional specifications | Content requirements |
| Structure | Interaction design | Information architecture |
| Skeleton | Interface design | Navigation + information design |
| Surface | Sensory design | Sensory design |
How to Use This Framework
Diagnosing Problems
When something feels wrong with a product, identify which plane the problem lives on:
- Users don't understand what the product is for → Strategy
- Features are missing, bloated, or misaligned with goals → Scope
- Users get lost, confused by flows, or can't find things → Structure
- Users see the right content but can't interact with it effectively → Skeleton
- The interface looks bad, feels cheap, or sends wrong signals → Surface
What ships with it
5 files 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.
- 9d ago First seen · 82 lines · 43 tokens per session scan A 071ef52e0522
design-foundations is a skill published in the GitHub repository kazdenc/builder-skills (45 stars, last pushed 6mo ago), licensed MIT. It adds 43 tokens to every session and 941 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-30.
Other skills, from other repositories
hps-true-blueprint
OpenDesign's engineering blueprint: how the sandbox, sidecar, and daemon fit — the system diagram and the invariants. Built as a decision-grade product management deck for engineering org.
deck-open-slide-canvas
OpenDesign's architecture review: the local daemon + agent-runtime design, the tradeoffs, and the decision to lock. Built as a decision-grade product management deck for staff eng, tech leads, security.
magic-ui
Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (@magicui/), integration patterns, and practical quality checks for accessibility and maintainability.
kiranism-shadcn-dashboard
Guide for building features, pages, tables, forms, themes, and navigation in this Next.js 16 shadcn dashboard template. Use this skill whenever the user wants to add a new page, create a feature module, build a data table, add a form, configure navigation items, add a theme, set up RBAC access control, or work with…
omd-apply
A skill that applies a project's DESIGN.md file as visual and brand guidance for interface work. It covers components, colors, fonts, layout, copy, motion, and visual assets.
favicon-icon-generator
Generate and validate favicon and application icon systems for web projects. Use when creating SVG icons, web manifests, framework metadata, or cross-platform favicon assets.