Getting it into your agent
This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.
/plugin marketplace add bromso/metapowers/plugin install designWrote 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/bromso/metapowers/define-component)<a href="https://agentmods.dev/skills/bromso/metapowers/define-component"><img src="https://agentmods.dev/badge/skills/bromso/metapowers/define-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/bromso/metapowers/define-component"><img src="https://agentmods.dev/badge/skills/bromso/metapowers/define-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.00060 | $0.00792 |
| Opus 5.5 | $0.00024 | $0.00317 |
| Sonnet 5.5 | $0.00012 | $0.00158 |
| Haiku 4.5 | $0.00006 | $0.00079 |
Grade A, and why
define-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 3d 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 — 53 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Define Component
Produce a complete component contract for "$ARGUMENTS" that serves as the single source of truth for prototyping, implementation, and testing.
Arguments. $ARGUMENTS may contain the project name and optional flags. Take the first token as <project> and treat --skip-checks as a flag; never include flags in file paths. All paths below use <project>. If --skip-checks is present, skip the prerequisite check and, before writing any artifact, append one line to .metapowers/design/<project>/skip-log.md: - <ISO timestamp> — <skill name> skipped prerequisite check for <artifact file> — reason: <reason or "none given">.
Prerequisites
Read .metapowers/design/<project>/01-empathize.md. If this file does not exist, tell the user:
Phase 1 (Empathize) has not been completed for "". Run
/design:empathize <project>first, or use--skip-checksto bypass.
Process
-
Read context files:
- Read
${CLAUDE_PLUGIN_ROOT}/shared/component-contract-template.mdfor the output structure - Read
${CLAUDE_PLUGIN_ROOT}/shared/wcag-criteria.mdfor accessibility requirements - Read
.metapowers/design/<project>/01-empathize.mdfor user needs and existing patterns (if exists)
- Read
-
Read the design system via MCP tools
figma_get_design_systemandfigma_get_variables:- Existing components that overlap with this one
- Available design tokens (colors, spacing, typography, radii)
- Established patterns and conventions
-
Produce the component contract following the template structure. Every field must be filled — no placeholders, no TBDs. Specifically:
- Props: Complete with TypeScript types. Every prop has a default value rationale.
- Variant matrix: Enumerate all dimensions. Calculate total combinations. Flag any combinations that should be excluded and explain why.
- States: All of: default, hover, focus, active, disabled, error, loading. For each state, specify visual changes (which tokens change) and ARIA updates.
- Token references: Use only tokens from the design system. Never use raw color values, pixel values, or hardcoded strings. If a needed token doesn't exist, flag it as "MISSING TOKEN: [description]".
- Accessibility: Map each WCAG criterion from the reference file. Specify keyboard interaction model, ARIA role, all ARIA attributes, focus management strategy.
- i18n: Identify all translatable strings. Specify RTL behavior. State content expansion allowance (typically 30-50% for Western to CJK).
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.
- 3d ago First seen · 53 lines · 60 tokens per session scan A c4f9685c7a46
define-component is a skill published in the GitHub repository bromso/metapowers (2 stars, last pushed 3d ago), licensed MIT. It adds 60 tokens to every session and 792 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-10-21.
Other skills, from other repositories
design-method
Use when starting any design task — resolves register, sets the 3 dials, locks Gate 0, and routes to the right move and target skill.
design-webapp
Use when building or extending a dashboard, SaaS screen, or any authenticated app surface — use design-web instead for a marketing site.
design-web
Use when building or revising a marketing/landing/campaign page, register brand locked at Gate 0 — use design-webapp for app screens instead.
motion-art-direction
Use when a film needs a look before any scene code — ads, launch teasers, brand films, type-led films with no screenshots, or whenever a draft looks flat (white ground, small tiles, centered text, fades, slow camera drift, logo opener). Locks .motion/look.md at Gate 0 (3 text sketches → challenger locks the tone blind…
motion-craft
Use when deciding how a film beat looks and moves — motion density (a gesture in progress at every moment: 0.75 s gesture-free max, CTA still ≤ 1.2 s, beats every 0.5-1 s, ≥ 1 onset/s) with read time ≥ 0.25 s/word, one primary gesture with subordinate details, the two film types (cut-based edit, one continuous…
design-review
Use when a design deliverable is about to be reported done — the final quality gate after design-motion or a mobile mockup.