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 aaronbassett/agent-foundry --skill specimengit clone --depth 1 https://github.com/aaronbassett/agent-foundryWrote 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/aaronbassett/agent-foundry/specimen)<a href="https://agentmods.dev/skills/aaronbassett/agent-foundry/specimen"><img src="https://agentmods.dev/badge/skills/aaronbassett/agent-foundry/specimen.svg" alt="Measured on agentmods" 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.00073 | $0.01557 |
| Opus 5 | $0.00036 | $0.00779 |
| Sonnet 5 | $0.00015 | $0.00311 |
| Haiku 4.5 | $0.00007 | $0.00156 |
Grade C, and why
design-systems:specimen 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 6d 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.
Hidden instructionshighPrompt injection
Directives inside HTML comments, invisible characters or bidirectional overrides are read by the model and not by the person reviewing the file.
<!-- A sample card with the system's surface, radius, shadow, spacing treatment --> How it starts
The opening of the file, as written. The whole thing — 185 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design System Specimen
Generate a self-contained HTML page that renders the design system live.
DESIGN.md Discovery
Find DESIGN.md using this search order:
- Check CLAUDE.md in cwd for a reference to DESIGN.md
- Look for DESIGN.md in cwd
- Search upward from cwd
- Search common locations: project root,
src/,packages/*/ - If not found, tell the user: "No DESIGN.md found. Run
/design-systems:createfirst."
Generation Flow
Step 1: Parse DESIGN.md
Extract everything needed to render the specimen:
- System name from the title
- Creative North Star name and first paragraph
- Full color palette with token names and hex values
- Surface hierarchy layering rules
- Type scale with font families, sizes, weights
- Spacing scale with all token values
- Shadow definitions with exact CSS values
- Component specs for buttons, cards, inputs
- Core Prohibitions for the "What NOT to do" section
Step 2: Generate HTML
Produce a single HTML file. Requirements:
- Self-contained: All CSS inline in a
<style>block. No external CSS files. - Fonts: Load from Google Fonts CDN via
<link>tags. These are the ONLY external dependencies. - Minimal JS: Only for interactive state demonstrations (hover simulation on touch devices, focus state toggling). No frameworks, no build step.
- Semantic HTML: Use
<header>,<main>,<section>,<article>,<button>, etc. - Accessible: Include
aria-labelon sections, proper heading hierarchy.
Page structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Specimen: [Name]</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=[fonts]&display=swap" rel="stylesheet">
<style>
:root {
/* ALL design tokens as CSS custom properties */
/* Copy every token from DESIGN.md */
}
/* Page layout */
/* Section styles */
/* Component demonstrations */
</style>
</head>
<body style="background: var(--surface); color: var(--on-surface); font-family: var(--font-body);">
<header>
<h1 style="font-family: var(--font-display);">Design System Specimen</h1>
<p>[Creative North Star name]: [First paragraph of north star description]</p>
</header>
<main>
<section id="palette" aria-label="Color Palette">
<h2>Colors</h2>
<!-- For each color token: a swatch div showing the color,
with the token name and hex value as labels -->
<!-- Group by: Surface tokens, Primary, Secondary, Tertiary,
Outline, On-Surface -->
<!-- Surface Hierarchy: nested boxes showing base → section →
component → interactive layering -->
</section>
<section id="typography" aria-label="Typography">
<h2>Typography</h2>
<!-- For each type scale level: render sample text at the
actual size, weight, and font family -->
<!-- Show: level name, token, font family, size, weight -->
<!-- Include a paragraph demonstrating body text at body-md -->
<!-- Include a data sample demonstrating mono/label text -->
</section>
<section id="spacing" aria-label="Spacing Scale">
<h2>Spacing</h2>
<!-- Visual ruler: horizontal bars at each spacing value -->
<!-- Label each bar with: token name, rem value, px value -->
</section>
<section id="elevation" aria-label="Elevation & Depth">
<h2>Elevation</h2>
<!-- Cards at different elevation levels using the shadow tokens -->
<!-- If no shadows: demonstrate tonal layering with nested surfaces -->
<!-- Show the surface hierarchy nesting in practice -->
</section>
<section id="components" aria-label="Components">
<h2>Components</h2>
<article>
<h3>Buttons</h3>
<!-- Primary, Secondary, Tertiary buttons -->
<!-- Each in default, hover (simulated with class), focus,
disabled states -->
</article>
<article>
<h3>Cards</h3>
<!-- A sample card with the system's surface, radius,
shadow, spacing treatment -->
<!-- If hover behavior is defined, include a
:hover demonstration -->
</article>
<article>
<h3>Input Fields</h3>
<!-- Default state input -->
<!-- Focused state input (simulated with class) -->
<!-- With label in the specified treatment -->
</article>
<article>
<h3>Specialized Components</h3>
<!-- Any specialized components from DESIGN.md Section 6 -->
<!-- Or "None defined for this system" -->
</article>
</section>
<section id="prohibitions" aria-label="What NOT To Do">
<h2>Prohibitions</h2>
<!-- For each Core Prohibition: show a visual example of
the VIOLATION with a red overlay/border/indicator -->
<!-- Label each: "PROHIBITED: [prohibition text]" -->
<!-- This makes violations viscerally recognizable -->
</section>
</main>
<script>
// Minimal JS for interactive demonstrations
// Toggle .hover class on buttons/cards for touch devices
// Toggle .focus class on inputs
document.querySelectorAll('[data-interactive]').forEach(el => {
el.addEventListener('click', () => {
el.classList.toggle('demo-active');
});
});
</script>
</body>
</html>
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.
- 6d ago First seen · 185 lines · 73 tokens per session scan C c66e6057b365
design-systems:specimen is a skill published in the GitHub repository aaronbassett/agent-foundry (4 stars, last pushed 21d ago), licensed MIT. It adds 73 tokens to every session and 1,557 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it C with 1 finding (hidden instructions). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
reveal-hover-effect
Build cursor-following spotlight reveals that expose a second aligned image through a soft radial mask. Use for hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects where a desaturated or embossed base image should remain visible while another treatment follows an…
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
better-colors
Helps you build a color system and answer anything about color in your project. You can generate palettes, use semantic tokens, convert between formats, check contrast and more.
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.