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/rules/vanessamarely/ai-playbook-reposito/figma-component)<a href="https://agentmods.dev/rules/vanessamarely/ai-playbook-reposito/figma-component"><img src="https://agentmods.dev/badge/rules/vanessamarely/ai-playbook-reposito/figma-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/rules/vanessamarely/ai-playbook-reposito/figma-component"><img src="https://agentmods.dev/badge/rules/vanessamarely/ai-playbook-reposito/figma-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.00066 | $0.00760 |
| Opus 5.5 | $0.00026 | $0.00304 |
| Sonnet 5.5 | $0.00013 | $0.00152 |
| Haiku 4.5 | $0.00007 | $0.00076 |
Grade A, and why
figma-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 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.
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 — 41 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Figma Component Conversion
Provide reusable, project-agnostic rules for converting Figma designs into code. Do not assume any fixed client name, repository name, or component-library name — those come from the request.
For a fully automated conversion with Chrome-based visual/a11y verification, run /figma-component-builder.
Required Input Contract
The request must supply:
scope: target top-level project folder.destination_folder: exact folder where generated files should be created/updated.component_library: preferred reusable component library, ornone.client_context: concise project conventions (tokens, styling model, naming, export rules, test expectations).figma_urlor{fileKey, nodeId}— or, if Figma is inaccessible, an attachedscreenshot_image.
Optional: dev_url (for browser-based validation), create_mode (preview or apply), preferences (request-level overrides).
If required input is missing, stop and ask for it before generating code. If Figma access fails and no screenshot is provided, ask for a screenshot before generating code.
Core Rules
- Reuse existing components first — search
scopefor existing components/wrappers before creating new primitives; prioritize composition/adapters aroundcomponent_librarywhen available; ifcomponent_libraryisnone, follow local component patterns inscope. - Scope isolation — edit only files under
scope; never modify sibling projects or root-level shared exports without explicit confirmation. - Minimal patch strategy — prefer focused diffs (usually 1-3 files); only add
.test.tsx/.stories.tsxwhen the corresponding tooling (Jest/Vitest, Storybook) is present inscope/package.json. - File layout for a new component
Xyz(adjust toclient_context):<destination_folder>/Xyz.tsx, optionallyXyz.styles.ts,Xyz.test.tsx(if test runner configured),Xyz.stories.tsx(if Storybook configured). - TypeScript/React standards — functional components, strict typing (avoid
anyunless unavoidable), naming consistent withclient_context. - Accessibility baseline — meet WCAG 2.2 AA: semantic markup, keyboard support, appropriate ARIA (see the
react-componentsanda11y-automationrules for the detailed patterns and checklist). - Figma fallback workflow — try Figma design context first; if unavailable/incomplete, fall back to the provided screenshot(s) to infer structure, spacing, typography, states, and interactions; ask for more screenshots if states or responsive behavior are missing; always state in the output whether the source was Figma 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.
- 2mo ago First seen · 41 lines · 66 tokens per session scan A 8b24673297cd
figma-component is a cursor rule published in the GitHub repository vanessamarely/ai-playbook-reposito (2 stars, last pushed 3mo ago), licensed MIT. It adds 66 tokens to every session and 760 once invoked, about $0.0003 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-08-31.
Other cursor rules, from other repositories
general
Wonder Blocks design system conventions, component patterns, and coding standards.
react-chakra-ui-cursorrules-prompt-file
Cursor rules for React development with Chakra UI integration.
react-styled-components-cursorrules-prompt-file
Cursor rules for React development with Styled Components integration.
react-chakra-ui---folder-structure
A standard folder layout for React and Chakra UI projects, including separate locations for components, pages, themes, hooks, utilities, and assets. It also defines how Chakra UI theme files are grouped.
ant-design
Definitive guidelines for building consistent, performant, and maintainable UIs with Ant Design v6.x, focusing on design tokens, layout, and component usage.
815-reactflow-diagrams
Conventions for narrative @xyflow/react canvases: custom nodes and edges, semantic stroke colors, Cloudflare orange shell grouping, readability inside tinted frames, handles, and verification before merge.