Borrowing it
Nothing to install: this file belongs to brianmontanaweb/agentic-design-system. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/brianmontanaweb/agentic-design-system/main/.claude/skills/add-component/SKILL.mdgit clone --depth 1 https://github.com/brianmontanaweb/agentic-design-systemWrote 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/brianmontanaweb/agentic-design-system/add-component)<a href="https://agentmods.dev/skills/brianmontanaweb/agentic-design-system/add-component"><img src="https://agentmods.dev/badge/skills/brianmontanaweb/agentic-design-system/add-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/brianmontanaweb/agentic-design-system/add-component"><img src="https://agentmods.dev/badge/skills/brianmontanaweb/agentic-design-system/add-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.00086 | $0.01580 |
| Opus 5 | $0.00043 | $0.00790 |
| Sonnet 5 | $0.00017 | $0.00316 |
| Haiku 4.5 | $0.00009 | $0.00158 |
Grade A, and why
add-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 8d 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 — 123 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Add Component (Orchestrator)
Scaffold a new component given $ARGUMENTS in the format <ComponentName> [core|agents].
This skill creates no files itself. It guards against overwrites, plans, gets approval once, then invokes five sub-skills in order via the Skill tool. Each sub-skill declares context: fork, so every invocation runs in a fresh subagent with no access to this conversation — a sub-skill cannot see the plan, the Figma data, or earlier file reads. Everything it needs must be passed explicitly in its args.
Gotchas
- Figma is optional — if the user skips the link, mark "Figma: skipped" in output and proceed immediately; never block on it.
- Approval happens once, here — after the Step 3 plan is approved, run all five sub-skills without asking again. The sub-skills do not have their own approval gates.
- Package inference default — when ambiguous, lean
agentsfor status/streaming/tool-related names; leancorefor anything that reads like a generic UI primitive (full rules in the shared conventions reference). - Agent-specific ARIA is decided in the plan, not retrofitted — pick the ARIA pattern in Step 3 from
shared/references/aria-patterns.mdand pass it toadd-component-source. - Theming is decided in the plan too — light/dark support comes from semantic tokens (see the Theming section of the shared conventions reference). Decide in Step 3 whether existing semantic tokens cover the component or new ones are needed; new tokens require both
_darkand_lightvalues. - Invoke sub-skills in the listed order — story, tests, and spec doc all read the source file; source must exist first. Verification runs last.
Step 0 — Check for existing component
Before doing anything else, check whether the component already exists in either package:
ls packages/core/src/<ComponentName>/<ComponentName>.tsx packages/agents/src/<ComponentName>/<ComponentName>.tsx 2>/dev/null
If any output is produced, the component already exists. Stop immediately and respond:
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.
- 8d ago First seen · 123 lines · 86 tokens per session scan A af19dda1d895
add-component is a skill published in the GitHub repository brianmontanaweb/agentic-design-system (3 stars, last pushed 18d ago), licensed MIT. It adds 86 tokens to every session and 1,580 once invoked, about $0.0004 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 skills, from other repositories
ng-blatui
Use the ng-blatui Angular UI library in an app — install, import components (bui-prefixed, signal-based, zoneless, SSR-safe), theme with Tailwind v4 + oklch tokens, localize dates/numbers/labels, and discover the full catalog via the registry, api.json, llms.txt or the ng-blatui-mcp MCP server. Invoke when building…
vue-component-testing
Applies the three-tier test taxonomy for Vue 3 applications: writes unit tests for composables and Pinia stores with Vitest, component tests for behaviour and user interactions with @testing-library/vue, and acceptance tests for full user flows with Playwright. Ensures tests focus on observable behaviour, not…
vuetify0
Use when building Vue 3 UI in this repo or any v0 consumer — and when about to write a native , a homemade setTimeout timer, or a homemade overlay/dialog. Those are Button, useTimer, and Dialog/Popover/useStack; do not roll them. Also selection, forms, registries, virtual scroll, popovers, focus, snackbars, SSR…
angular-best-practices
Official Angular v22 coding best practices — signals, standalone, native control flow, zoneless, host bindings, Signal Forms, inject(), and accessibility (WCAG AA / AXE). Use whenever writing, generating, or reviewing Angular/TypeScript code in this repo.
visual-qa
Use when a website needs rendered screenshot review, Playwright visual regression, multi-viewport checks, horizontal overflow detection, console-error checks, focus/state inspection, or a repeatable visual QA evidence set.
a11y-performance
Use for release-level accessibility and performance review, including WCAG 2.2 AA, keyboard/focus, target size, reduced motion, semantic controls, Core Web Vitals, images/fonts/JavaScript, and animation or 3D performance budgets.