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.
git clone --depth 1 https://github.com/vanessamarely/ai-playbook-repositoWrote 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/commands/vanessamarely/ai-playbook-reposito/figma-component-builder)<a href="https://agentmods.dev/commands/vanessamarely/ai-playbook-reposito/figma-component-builder"><img src="https://agentmods.dev/badge/commands/vanessamarely/ai-playbook-reposito/figma-component-builder/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/commands/vanessamarely/ai-playbook-reposito/figma-component-builder"><img src="https://agentmods.dev/badge/commands/vanessamarely/ai-playbook-reposito/figma-component-builder.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.00000 | $0.00843 |
| Opus 5 | $0.00000 | $0.00421 |
| Sonnet 5 | $0.00000 | $0.00169 |
| Haiku 4.5 | $0.00000 | $0.00084 |
Grade A, and why
figma-component-builder 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 10d 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 — 43 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Figma Component Builder
Automate conversion of Figma designs into React/TypeScript components and supporting artifacts for a selected project scope. Uses a Figma MCP server (or connector) to fetch design context and a browser automation tool to verify produced components against a running dev server. Follows the conventions described in the figma-component rule.
Required Input
The request must include:
scope(required): target project folder under the workspace root.destination_folder(required): exact destination folder for generated component files.component_library(required): preferred reusable UI/component library for this scope (noneif there isn't one).client_context(required): project-specific coding conventions (naming, tokens, styling approach, export rules).figma_urlor{fileKey, nodeId}(required), ORscreenshot_image(fallback) if Figma access is unavailable.- Optional:
dev_url(local dev server for testing),create_mode(preview|apply),preferences.
Operational Rules
- Scope isolation — treat each top-level folder as an independent project; confirm
scopebefore editing. Detect project type frompackage.json,tsconfig.json,index.html, ornest-cli.json. - Safety & exclusions — never edit
node_modules/,dist/,build/,.next/,target/,.venv/,venv/,__pycache__/,coverage/,.nyc_output/,.git/,.github/workflows/. Ask for explicit confirmation before cross-project changes or edits to public APIs consumed elsewhere. - Minimal diffs — prefer 1-3 focused files per change; group related file changes together.
- Reuse first — search the target repo for existing components in
component_libraryand prefer adapters/composition over new UI primitives. Never hardcode client or library names — use only values supplied in the request. - Tests & stories — only create
.test.tsxif a test runner (Jest/Vitest) is inpackage.jsondevDependencies; only create.stories.tsxif@storybook/*packages are present. Skip both if neither is configured. - Accessibility checks (mandatory) — after creating/modifying a component, run browser-based accessibility checks (axe-core) against a dev server or Storybook instance. Report violations by impact level (critical/serious/moderate/minor), affected element count, CSS selectors/HTML snippets, and links to WCAG guidance. Produce a JSON report
{ violations: [], passes: number, incomplete: number }. Do not mark the component complete until violations are fixed or explicitly deferred with the user's agreement. - Verification — provide typecheck, lint, test, and Storybook commands for the target scope using its
package.jsonscripts. - Figma fallback handling — if Figma access is unavailable, unauthorized, or incomplete, use the provided
screenshot_image; if none is attached, ask for one (full component/frame plus key states) before proceeding. State clearly in the output whether the implementation came from Figma context or a screenshot fallback.
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.
- 10d ago First seen · 43 lines · 0 tokens per session scan A 89f692d48ef6
figma-component-builder is a command published in the GitHub repository vanessamarely/ai-playbook-reposito (2 stars, last pushed 1mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 843 tokens. 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 commands, from other repositories
design-import
Scaffolds React components from a Claude Design handoff bundle and stops at files on disk: no stories, no tests, no pull request. Use when handed a claude.ai/design URL or a local bundle file; when that same scaffold should carry on through test generation, browser verification and an opened PR, run /ork:design-ship…
setup
Add Tailwind CSS v4 and shadcn/ui to an existing React/Vite project.
visual
Frontend and UI specialist. Use for React/Vue/Svelte components, CSS/Tailwind styling, accessibility, responsive design, and visual implementation tasks.
to-code
A command that converts a selected design node into React and Tailwind code. React is a JavaScript interface library, and Tailwind is a CSS styling toolkit.
checklist
Generate a custom checklist for the current feature based on user requirements.
clarify
Identify underspecified areas in the current feature spec by asking up to 5 highly targeted clarification questions and encoding answers back into the spec.