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 skills add librefang/librefang-registry --skill figma-expertgit clone --depth 1 https://github.com/librefang/librefang-registryWrote 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/librefang/librefang-registry/figma-expert)<a href="https://agentmods.dev/skills/librefang/librefang-registry/figma-expert"><img src="https://agentmods.dev/badge/skills/librefang/librefang-registry/figma-expert/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/librefang/librefang-registry/figma-expert"><img src="https://agentmods.dev/badge/skills/librefang/librefang-registry/figma-expert.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.00022 | $0.00728 |
| Opus 5.5 | $0.00009 | $0.00291 |
| Sonnet 5.5 | $0.00004 | $0.00146 |
| Haiku 4.5 | $0.00002 | $0.00073 |
Grade A, and why
figma-expert 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 1mo 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.
This is a copy
97% identical to figma-expert — 3 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
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 Expert
A product designer and design systems architect with deep expertise in Figma's component system, auto-layout, prototyping, and developer handoff workflows. This skill provides guidance for building scalable design systems, creating maintainable component libraries, and ensuring smooth collaboration between designers and engineers through precise specifications and token-driven design.
Key Principles
- Build components with auto-layout from the start; it ensures consistent spacing, responsive resizing, and alignment with how CSS flexbox renders in production
- Use variants and component properties to reduce component sprawl; a single button component with size, state, and icon properties replaces dozens of separate frames
- Establish design tokens (colors, typography, spacing, radii) as Figma variables and reference them everywhere instead of hardcoding values
- Separate styles (visual appearance) from variables (semantic tokens); variables enable theming and mode switching (light/dark, brand A/brand B)
- Design with real content and edge cases; placeholder text hides layout issues that surface when actual data varies in length and complexity
Techniques
- Configure auto-layout with padding (top, right, bottom, left), gap between items, and primary axis alignment (packed, space-between) for flexible container behavior
- Create component variants using the variant property panel: define axes like Size (sm, md, lg), State (default, hover, disabled), and Type (primary, secondary)
- Define a type scale using Figma text styles with consistent size, weight, and line-height ratios; map them to semantic names (heading-lg, body-md, caption)
- Build interactive prototypes with smart animate transitions between component variants for micro-interaction demonstrations
- Use the Figma Plugin API to automate repetitive tasks: batch-renaming layers, generating color palettes, or exporting design tokens to JSON
- Leverage Dev Mode for handoff: inspect spacing, export assets, and copy CSS/iOS/Android code snippets directly from the design
- Structure design system files with a cover page, a changelog page, and dedicated pages per component category (buttons, inputs, navigation, feedback)
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.
- 1mo ago First seen · 43 lines · 22 tokens per session scan A d3e8f4d4533b
figma-expert is a skill published in the GitHub repository librefang/librefang-registry (11 stars, last pushed 1mo ago), licensed MIT. It adds 22 tokens to every session and 728 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 97% identical to figma-expert, differing in 3 lines, and is treated as a copy.
Other skills, from other repositories
dashboard
Update the agent's Control Center. Use when the user says "update my Control Center", "update my dashboard", "redesign my home", or "/dashboard".
html-artifacts
Author the HTML for a plan artifact, dashboard iframe, or Slack attachment — structure, design plan, available runtime, theming, and craft. Read this before writing HTML for publishartifact, outputiframe, or slackattachhtml.
browserwing-executor
Control browser automation through HTTP API. Supports page navigation, element interaction (click, type, select), data extraction, accessibility snapshot analysis, screenshot, JavaScript execution, and batch operations.
tmux
Remote-control tmux sessions for interactive CLIs by sending keystrokes and scraping pane output. Use when: (1) monitoring Claude/Codex sessions running in tmux, (2) sending input to interactive terminal applications, (3) scraping output from long-running processes inside tmux, (4) navigating tmux panes/windows…
a2ui
Make a reply easier to read and act on with rich blocks inside ordinary Markdown — a choice the user picks from, a form that collects several answers, a procedure as steps with warnings in place, a callout, a Mermaid diagram, a weather card, a live clock or countdown, a dashboard of gauges for a quota, a budget or a…
agent-initialization
Initialize or extend an Agent from a user requirement - write AGENTS.md, set identity metadata, and create, install or import Skills and hook packages (scripts the harness runs on every prompt, before tool calls, or after a task). For an Agent with an in-app workbench, pair with penguin-plugin; for a standalone…