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 | $0.00060 | $0.00790 |
| Sonnet 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 9d 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.
- 9d 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 19d ago), licensed MIT. It adds 119 tokens to every session and 1,579 once invoked, about $0.0006 per session on Opus 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
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.
design-qa
Set up or run design QA gates — 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.
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…
seed-verify-figma-mcp-transports
A verification tool for Figma MCP tools that runs the same request through REST and WebSocket connections and compares the answers. MCP is a way for an AI agent to call external tools; REST and WebSocket are two ways to communicate with a service.
conversational-ux
Design voice and conversational interfaces — dialog flows, error recovery, and persona. Use when the interface speaks and listens rather than being tapped. For graphical input collection, use form-design.
platform-conventions
Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify. Use when shipping native apps. For breakpoint adaptation use responsive-design; for matching competitor patterns use jakobs-law (interaction-design).