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/verify-component-figma/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/verify-component-figma)<a href="https://agentmods.dev/skills/brianmontanaweb/agentic-design-system/verify-component-figma"><img src="https://agentmods.dev/badge/skills/brianmontanaweb/agentic-design-system/verify-component-figma/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/verify-component-figma"><img src="https://agentmods.dev/badge/skills/brianmontanaweb/agentic-design-system/verify-component-figma.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.00119 | $0.01579 |
| Opus 5.5 | $0.00048 | $0.00632 |
| Sonnet 5.5 | $0.00024 | $0.00316 |
| Haiku 4.5 | $0.00012 | $0.00158 |
Grade A, and why
verify-component-figma scanned grade A 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 2mo 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.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
curl -s -H "X-Figma-Token: $FIGMA_TOKEN" \ How it starts
The opening of the file, as written. The whole thing — 119 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Verify Component Against Figma
Render a component's Figma design node to an image, screenshot the matching Storybook story, pixel-diff the two, and report the result. This is a visual check — it complements (does not replace) the data check in docs/best-practices.md section 8 (colors/spacing/typography extracted as values). A component can pass the data check and still fail this one if e.g. line-height or padding renders differently than the extracted values suggest.
Parse $ARGUMENTS as <ComponentName> <core|agents> <FigmaNodeURL> [storyExportName].
Gotchas
- A Figma render needs credentials one way or another. Either a connected Figma MCP server that exposes an image/render tool, or a personal access token in
FIGMA_TOKENfor the REST fallback in Step 2. If neither is available, stop and tell the user which one to set up — do not guess or skip this step silently. - The Figma node link is required, not optional, for this skill — unlike
/update-component's Figma step, there's nothing meaningful to compare without it. If the user hasn't provided one, ask for it before proceeding. storyExportNamedisambiguates which variant to compare. A Figma component node usually corresponds to one specific variant (e.g. "Solid / Medium"), not the whole component. If the user didn't say which story export matches the Figma node, ask — don't default to the first export in the file, since that's frequently the wrong visual state to compare.- Storybook must be running against
http://localhost:6006for the Playwright screenshot step. Check before assuming; start it if it's not up. - Dimension mismatches make the pixel diff meaningless.
scripts/figma-diff.tscompares only the overlapping region and flags a mismatch explicitly — always surface that flag in the report rather than only reporting the diff percentage. - This is exploratory tooling, not CI. Output images are gitignored scratch artifacts (
.figma-diff/), not committed baselines likeapps/storybook/__snapshots__. Don't try to wire this intotest:visual.
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.
- 2mo ago First seen · 119 lines · 119 tokens per session scan A 0a7409d54f32
verify-component-figma is a skill published in the GitHub repository brianmontanaweb/agentic-design-system (3 stars, last pushed 2mo ago), licensed MIT. It adds 119 tokens to every session and 1,579 once invoked, about $0.0005 per session on Opus 5.5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
critique
Adversarial design critique of the current work. Render it, look at it, and argue for rejection. Run after the gates are green, never instead of them.
design-qa
Set up or run design QA gates for token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when the user wants CI quality gates, to prevent design regressions, or to QA a component/screen before shipping.
gate
Run the one-command quality gate and report the real N/N result. Use before claiming any build/review is done.
design-qa-checklist
Build a QA checklist for verifying that a build matches the design. Use at implementation review. For the spec engineers build from, use handoff-spec.
shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for…
design-component
Design a UI component spec to the house quality bar (anatomy, variants, sizes, the 8 states, token mapping, and accessibility). Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework…