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.
npx agentmods add skills/stuartshields/claude-setup/figmanpx skills add stuartshields/claude-setup --skill figmagit clone --depth 1 https://github.com/stuartshields/claude-setupWhat 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 | $0.00028 | $0.02082 |
| Opus 5 | $0.00014 | $0.01041 |
| Sonnet 5 | $0.00006 | $0.00416 |
| Haiku 4.5 | $0.00003 | $0.00208 |
Grade A, and why
figma 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 2d 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 — 117 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Skill: figma
When to Use
Use this skill when implementing UI from a Figma design. Invoke with /figma [URL] where the URL is a Figma design link, or /figma to start without a specific URL.
Use $ARGUMENTS as the Figma URL or file key. If empty, ask the user for the Figma URL.
Do NOT use this skill for general frontend work that doesn't involve a Figma design.
Method
MCP Tools Are Mandatory
If you have a Figma URL or file key, you MUST call these tools before writing any code. Never implement from memory, verbal description alone, or assumptions about what a design "probably" looks like.
Required sequence:
get_design_context- Fetch structured design representation (layout, spacing, colors, typography). This is your primary source of truth.get_screenshot- Get a visual reference of the target design. Always do this alongsideget_design_context.get_metadata- Ifget_design_contextreturns too much data, use this first to get a lightweight structural outline, then re-fetch only the nodes you need.get_variable_defs- When the design uses Figma variables/tokens, fetch them. Map to CSS custom properties or Tailwind theme values instead of hardcoding.
Only after you have both design context AND a screenshot should you start implementation.
If any tool call fails or returns incomplete data: Tell the user. Do not fill in the gaps from assumptions.
Responsive Gate - Fetch All Breakpoints First
If the design has mobile and desktop variants (separate frames, component variants with Size/Breakpoint properties, or sibling frames named "Mobile"/"Desktop"):
- Identify all breakpoint variants before writing any code. Use
get_metadataon the parent frame or component set to find all variants (e.g.,Size=Large, State=Default,Card / Mobile,Card / Desktop). - Fetch
get_design_contextfor EVERY breakpoint variant. Do not fetch desktop and guess mobile, or vice versa. Each breakpoint is a separate MCP call. - Build a comparison table of the values that differ between breakpoints (spacing, padding, font sizes, border-radius, image heights, etc.) and the values that are the same. This table is your responsive spec.
- If you cannot find a mobile/desktop variant, ask the user for the node URL. Do not invent "smaller-looking" values. Mobile values that look reasonable to you are still guesses — and guesses are wrong.
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.
- 2d ago First seen · 117 lines · 28 tokens per session scan A 67703c4eeaf8
figma is a skill published in the GitHub repository stuartshields/claude-setup (2 stars, last pushed 3mo ago), licensed MIT. It adds 28 tokens to every session and 2,082 once invoked, about $0.0001 per session on Opus 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 skills, from other repositories
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
design-system-builder
Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.
code-to-diagram
Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts. Uses AST parsing to map import dependencies for Python, JS/TS, Go, and Java, outputting Mermaid or SVG files. Triggered when users ask to visualize code architecture, understand dependencies, draw a flowchart, or create a…
a11y-audit
../../../engineering-team/a11y-audit/skills/a11y-audit/SKILL.md.
apple-hig-expert
../../../product-team/apple-hig-expert/skills/apple-hig-expert/SKILL.md.
brand-guidelines
../../../marketing-skill/skills/brand-guidelines/SKILL.md.