figma-expert

figma-expert is a skill for Claude Code, Codex from ginkida/rustyhand. It costs 22 tokens per session (705 once invoked), scanned A, a copy of figma-expert, MIT.

A guide for using Figma, a collaborative design application, to build components, layouts, prototypes, and design systems. It explains how design decisions can be organized for later implementation in code.

In plain words
What is it for?
Use it to design reusable components, responsive auto-layouts, variants, design tokens, themes, prototypes, and developer handoff specifications.
Why use it?
It helps prevent duplicated components, inconsistent spacing and colors, and layouts that fail with real content. It also makes the handoff from design to development clearer.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Install

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.

agentmods
npx agentmods add skills/ginkida/rustyhand/figma-expert
Any agent
npx skills add ginkida/rustyhand --skill figma-expert
Clone the repo
git clone --depth 1 https://github.com/ginkida/rustyhand

Made for: Claude Code, Codex.

Wrote 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.

agentmods badge for figma-expert

README.md
[![agentmods](https://agentmods.dev/badge/skills/ginkida/rustyhand/figma-expert.svg)](https://agentmods.dev/skills/ginkida/rustyhand/figma-expert)
Your own site
<a href="https://agentmods.dev/skills/ginkida/rustyhand/figma-expert"><img src="https://agentmods.dev/badge/skills/ginkida/rustyhand/figma-expert.svg" alt="Measured on agentmods" height="20"></a>
Per session 22 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 705 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin 100% copy Near-identical to another mod in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00022 $0.00705
Opus 5 $0.00011 $0.00352
Sonnet 5 $0.00004 $0.00141
Haiku 4.5 $0.00002 $0.00071

Measured 6d ago against content hash 8ea757cd7eac, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

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 6d 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.

Origin

This is a copy

100% identical to figma-expert — 0 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.

crates/rusty-hand-skills/bundled/figma-expert/SKILL.md · 40 lines

How it starts

The opening of the file, as written. The whole thing — 40 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)

Read the full file on GitHub · 40 lines

Changes

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.

  1. 6d ago First seen · 40 lines · 22 tokens per session scan A 8ea757cd7eac

Subscribe to this mod's changes

figma-expert is a skill published in the GitHub repository ginkida/rustyhand (20 stars, last pushed 25d ago), licensed MIT. It adds 22 tokens to every session and 705 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to figma-expert, differing in 0 lines, and is treated as a copy.

Related

Other skills, from other repositories

hive.browser-automation

Required before any hive-browser CLI command. The browser is driven from the terminal by running hive-browser ... --json via terminalexec — not via MCP tools. Teaches the browser lifecycle rules (the bridge attaches to the USER'S running Chrome — never kill or launch browser processes; timeouts are transport issues…

aden-hive/hive · 142 tokens

hive.linkedin-automation

Read before automating LinkedIn with browser tools. LinkedIn combines shadow DOM (#interop-outlet), strict Trusted Types CSP that silently drops innerHTML, Lexical composer, native beforeunload dialogs that hang the bridge, and aggressive spam filters — each has bitten us at least once. Verified flows for profile…

aden-hive/hive · 99 tokens

hive.worker-delegation

Concrete patterns for breaking colony work into parallel worker jobs via runplaybook — when fan-out helps, how to model the goal as a tracker table, write the worker skill, author the playbook, pilot, and let convergence retry/resume the gap.

aden-hive/hive · 58 tokens

hive.x-automation

Read before automating X / Twitter with browser tools. Verified flows for post, reply, delete, search-and-engage, plus the Draft.js compose quirks that silently disable the send button. Includes the daily-reply and job-market-reply playbooks. Requires hive.browser-automation for the underlying screenshot + coordinate…

aden-hive/hive · 81 tokens

hive.slack-notifications-setup

Set up a Slack notification channel (Sentinel) for a colony by driving the browser — reuse or create the "Hive Sentinel" Slack app from a JSON manifest, install it, capture the bot + app tokens, create/select the channel via the Slack API, and turn Sentinel on so the colony can ping the user on Slack and accept…

aden-hive/hive · 136 tokens

hive.writing-hive-skills

Author a new Agent Skill for a Hive agent that conforms to the Agent Skills specification (SKILL.md with YAML frontmatter, optional scripts/references/assets directories). Use when the user asks to create, scaffold, add, or package a new skill for a Hive agent.

aden-hive/hive · 63 tokens