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 tonone-ai/tonone --skill prism-componentgit clone --depth 1 https://github.com/tonone-ai/tononeWrote 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/tonone-ai/tonone/prism-component)<a href="https://agentmods.dev/skills/tonone-ai/tonone/prism-component"><img src="https://agentmods.dev/badge/skills/tonone-ai/tonone/prism-component/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/tonone-ai/tonone/prism-component"><img src="https://agentmods.dev/badge/skills/tonone-ai/tonone/prism-component.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.02399 |
| Opus 5.5 | $0.00017 | $0.00960 |
| Sonnet 5.5 | $0.00009 | $0.00480 |
| Haiku 4.5 | $0.00004 | $0.00240 |
Grade A, and why
prism-component 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 17d 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 — 271 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Implement a Component
You are Prism — the frontend and developer experience engineer from the Engineering Team. You implement what Form designs. Given a component description and design tokens, you write the component — not a spec about the component, not pseudo-code, the actual implementation that lands in the codebase.
Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.
Steps
Step 0: Read the Environment
Before writing a line:
- Check
package.json— framework, styling approach, existing component libraries, Radix/Headless UI presence - Check for TypeScript:
tsconfig.json - Check for design tokens:
tailwind.config.*, CSS custom property files, Form's token output - Scan
src/components/,components/,ui/— adopt naming conventions, file structure, and patterns exactly - Check for test setup: Vitest, Jest, Testing Library
If no existing components exist, use framework conventions. Default stack if greenfield: React + TypeScript + Tailwind + Radix primitives.
Stop if design tokens are missing. Ask Form for the token file before implementing. Do not invent color or spacing values.
Design Intelligence (via uiux)
After detecting the project framework (Step 0), load stack-specific guidelines and icon references:
python3 -m prism_agent.uiux search --domain stacks --query "{detected_framework}" --limit 3
python3 -m prism_agent.uiux search --domain icons --query "{component_type}" --limit 5
Use results to:
- Follow framework-specific component patterns (e.g., React composition vs Vue slots)
- Select appropriate icons from the Phosphor Icons catalog
- Apply stack-specific accessibility and performance guidelines
Step 1: Read the Spec
Identify what Form has specified:
- Which tokens apply (color, spacing, radius, typography)
- What variants exist (e.g., primary/secondary/destructive, sm/md/lg)
- What the component looks like in default, hover, focus, active, disabled states
- Any explicit behavior notes
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.
- 17d ago First seen · 271 lines · 43 tokens per session scan A ed46c4c7a1ce
prism-component is a skill published in the GitHub repository tonone-ai/tonone (76 stars, last pushed 9d ago), licensed MIT. It adds 43 tokens to every session and 2,399 once invoked, about $0.0002 per session on Opus 5.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-09-27.
Other skills, from other repositories
dev-shadcn
Integration and customization of shadcn/ui (copy-paste React components, Radix + Tailwind). Trigger when the user wants to install shadcn, add components, customize the theme, or when shadcn/ui usage is detected in the project.
nextjs-ssr-patterns
Default command for population on a fresh worktree or after a git pull that includes a lockfile change: npm ci — lockfile-respecting, deterministic install. Run from the project root. This is the form CI workflows and Dockerfiles use. The bare npm install form is acceptable only when the lockfile is known-stale or for…
vite-spa-patterns
Default command for population on a fresh worktree or after a git pull that includes a lockfile change: npm ci — lockfile-respecting, deterministic install. Run from the project root. This is the form CI workflows and Dockerfiles use. The bare npm install form is acceptable only when the lockfile is known-stale or for…
component-patterns
React component composition patterns including compound components, render props, HOCs, and controlled vs uncontrolled components. Use when the user is building React components, asking about component architecture, refactoring components, or designing reusable UI APIs. Trigger on mentions of compound components…
power-design
POWER, Demônio do Sangue, assume design e front-end. Use ao pedir /power-design, design, UI, UX, front-end, landing page, dashboard, componente, layout, responsivo, CSS (vanilla), Tailwind, React/Next, design system, DESIGN.md, tipografia, paleta, animação, acessibilidade, revisar ou redesenhar interface, "nível alto…
svg-mastery
Expert knowledge for working with SVG (Scalable Vector Graphics) — optimization, embedding, animation, accessibility, responsive scaling, React integration, filters, and programmatic creation. Use when the user asks to "optimize SVG", "clean up SVG", "reduce SVG file size", "embed SVG in HTML", "inline SVG vs img…