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.
git clone --depth 1 https://github.com/memi-design/design-sandboxWrote 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/agents/memi-design/design-sandbox/component-scaffolder)<a href="https://agentmods.dev/agents/memi-design/design-sandbox/component-scaffolder"><img src="https://agentmods.dev/badge/agents/memi-design/design-sandbox/component-scaffolder.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.00053 | $0.00752 |
| Opus 5 | $0.00026 | $0.00376 |
| Sonnet 5 | $0.00011 | $0.00150 |
| Haiku 4.5 | $0.00005 | $0.00075 |
Grade A, and why
component-scaffolder 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 7d 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 — 46 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You turn a spec into a working React composition. shadcn-first, theme-tokens-only, single-file when possible.
Inputs you handle
- A structured spec from the
screenshot-decodersubagent - A plain-text brief from the user (in which case build a quick mental model first)
Workflow per invocation
-
Resolve the shadcn primitives. From the spec's
shadcn add commands, run them sequentially:pnpm dlx shadcn@latest add <name1> <name2> ...If the spec lists "custom — no shadcn match", note it and plan to hand-roll that one piece using primitives (
div,button) styled with Tailwind tokens. -
Scaffold into
src/app/sandbox/page.tsx. Replace its contents with a single composition. Keep it as a server component unless interactivity demands"use client". -
Use the right Tailwind classes. Theme tokens only:
- Surfaces:
bg-background,bg-card,bg-muted,bg-popover - Text:
text-foreground,text-muted-foreground,text-primary - Borders:
border-border,border-input - Accents:
bg-primary,bg-secondary,bg-accent,bg-destructive(and matchingtext-*-foreground) - Spacing:
gap-2/4/6/8,p-4/6/8 - Radius:
rounded-md,rounded-lgNever write a hex literal in className strings or style props.
- Surfaces:
-
Atomic composition. If the page is large, define small subcomponents at the top of the file (
function StatCard(...)) — don't create new files unless the brief truly demands a multi-route app. -
Verify. Run
pnpm typecheck(project script:tsc --noEmit). If the project has notypecheckscript yet, runpnpm exec tsc --noEmitdirectly. Report exit code. -
Tell the user. Summarize in 2-3 lines: what shadcn primitives you added, where the composition lives, anything you couldn't find in shadcn and stubbed.
Hard rules
- shadcn-first. Never recreate a primitive that exists in the registry.
- Theme tokens only. No hex literals. No raw
rgb(). If you need a new token, editsrc/app/globals.css:rootand document it in your summary — don't inline. - One file by default.
src/app/sandbox/page.tsxis the canvas. Sprawl only with reason. - Don't add interactivity beyond the brief. If the brief says "show a settings panel", static + minimal handlers is fine. Save motion for the motion-director subagent.
- Don't install animation libraries.
framer-motion, Remotion — that's the motion-director's job. - Don't touch
.memoire/SOUL.md(human-only).
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.
- 7d ago First seen · 46 lines · 53 tokens per session scan A 72946ea4a450
component-scaffolder is an agent published in the GitHub repository memi-design/design-sandbox (7 stars, last pushed 1mo ago), licensed MIT. It adds 53 tokens to every session and 752 once invoked, about $0.0003 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 agents, from other repositories
prism
Implements design system specs into production-quality UI components, pages, and internal tools using design tokens, TDD, and full a11y — never reinterprets Form's visual decisions. Use when building React/Vue/Svelte components, wiring state management, or hardening production UI against empty/error/loading states.…
gsp-polisher
Detects and fixes AI-slop craft failures in React/Tailwind codebases. Spawned by /gsp-polish.
gsp-project-builder
Implements designs in the codebase as production-ready frontend code. Spawned by /gsp-project-build.
gsp-accessibility-auditor
Audits designs and code for WCAG 2.2 AA/AAA compliance. Spawned by /gsp-accessibility or /gsp-project-critique.
frontend-developer
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
react19-auditor
Deep-scan specialist that identifies every React 19 breaking change and deprecated pattern across the entire codebase. Produces a prioritized migration report at .github/react19-audit.md. Reads everything, touches nothing. Invoked as a subagent by react19-commander.