io-figma

io-figma is a skill for Claude Code, Codex from gridaco/grida. It costs 118 tokens per session (2,213 once invoked), scanned A, original, Apache-2.0.

A guide for converting Figma files, clipboard data, or Figma REST API data into Grida's canvas format. It covers the parser, conversion steps, command-line tool, and test fixtures.

In plain words
What is it for?
Use it when adding Figma node types, fixing Figma-to-Grida conversion, changing the fig2grida command-line tool, or updating related tests.
Why use it?
It helps developers understand where input formats are detected and converted, reducing inconsistent behavior and conversion bugs.

Skill for Claude CodeCodex

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/gridaco/grida/io-figma
Any agent
npx skills add gridaco/grida --skill io-figma
Clone the repo
git clone --depth 1 https://github.com/gridaco/grida

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 io-figma

README.md
[![agentmods](https://agentmods.dev/badge/skills/gridaco/grida/io-figma.svg)](https://agentmods.dev/skills/gridaco/grida/io-figma)
Your own site
<a href="https://agentmods.dev/skills/gridaco/grida/io-figma"><img src="https://agentmods.dev/badge/skills/gridaco/grida/io-figma.svg" alt="Measured on agentmods" height="20"></a>
Per session 118 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,213 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found 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 $0.00118 $0.02213
Opus 5 $0.00059 $0.01107
Sonnet 5 $0.00024 $0.00443
Haiku 4.5 $0.00012 $0.00221

Measured 3d ago against content hash 5b11702fcb89, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

io-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 3d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (scripts/figma_archive.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

.agents/skills/io-figma/SKILL.md · 187 lines

How it starts

The opening of the file, as written. The whole thing — 187 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Figma I/O — @grida/io-figma

Package: packages/grida-canvas-io-figma/

Architecture

.fig bytes / HTML clipboard
  → fig-kiwi parser       (fig-kiwi/)          low-level, zero-opinion
  → NodeChange[]          (Kiwi schema types)
  → iofigma.fromKiwi*()   (lib.ts)              Kiwi → Grida node

Figma REST API JSON
  → iofigma.fromRest*()   (lib.ts)              REST → Grida node

Orchestration:
  fig2grida-core.ts       — browser-safe: input detection, page loop, pack
  fig2grida.ts            — CLI wrapper (Node.js only, uses fs + process.argv)

Key invariant: The Kiwi path converts to REST format first (Kiwi → REST → Grida). lib.ts is the single source of truth for node conversion; it does not know the input origin.

Output: Grida format (.grida ZIP — FlatBuffers + images). See io-grida skill for format details, Rust loading, and round-trip testing.

fig2grida Input Formats

fig2grida(input) in fig2grida-core.ts auto-detects the input:

Input Detection Path
.fig bytes ZIP without document.json, or raw Kiwi fig-kiwi parser
REST archive ZIP ZIP containing document.json (+ optional images/) REST JSON path
REST JSON bytes Starts with { REST JSON path
REST JSON object Non-Uint8Array object REST JSON path

The REST JSON path (extractCanvases) accepts multiple response shapes:

  • { document: { type: "DOCUMENT", children: [CANVAS, …] } } — full GET /v1/files/:key
  • { document: { type: "CANVAS", children: […] } } — single-page node fetch
  • { nodes: { "id": { document: … }, … } }GET /v1/files/:key/nodes?ids=…
  • { type: "DOCUMENT", children: … } — document node directly
  • { type: "CANVAS", children: … } — single CANVAS node
  • { children: […] } — bare object with children

Read the full file on GitHub · 187 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

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. 3d ago First seen · 187 lines · 118 tokens per session scan A 5b11702fcb89

Subscribe to this mod's changes

io-figma is a skill published in the GitHub repository gridaco/grida (2,629 stars, last pushed 13d ago), licensed Apache-2.0. It adds 118 tokens to every session and 2,213 once invoked, about $0.0006 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-30.

Related

Other skills, from other repositories

react-hook-form

Correct React Hook Form usage anywhere in the monorepo — data flow, subscriptions, reset, dirty state, number inputs, and controlled-input rules. Load this BEFORE writing or modifying ANY form code, adding a field to an existing form, touching watch/useWatch/formState/getValues/setValue/reset, wiring a form into a…

supabase/supabase · 123 tokens

safe-sql-execution

Use whenever code will build, return, fetch, or execute SQL that runs against a user's real Postgres database — even when the request reads like an ordinary feature or bug fix and never says "security," "injection," or "SafeSqlFragment." This covers: writing or editing any pg-meta function, query builder, or endpoint…

supabase/supabase · 221 tokens

studio-e2e-tests

Write and run Playwright E2E tests for Supabase Studio (e2e/studio). Use when asked to run e2e tests, write new E2E tests, or debug flaky or failing Playwright tests. Covers running commands, avoiding race conditions, waiting strategies, selectors, helper functions, and CI vs local differences.

supabase/supabase · 74 tokens

studio-mock-api-tests

Component tests for Supabase Studio that mock API requests at the network layer with MSW. Use when writing or reviewing a component test that exercises a React Query hook or mutation, or when migrating an existing test away from vi.mock('@/data/...'). Covers the customRender + addAPIMock template and the jsdom/MSW…

supabase/supabase · 79 tokens

ask-the-docs

Answer questions about the Supabase docs app (apps/docs) using documented architecture, build pipeline, and review-pattern notes, and apply feature-design principles (codebase reuse, coding minimalism) when proposing or critiquing changes. Use when the user asks "how does X work in the docs app?", "where does Y…

supabase/supabase · 129 tokens

clickhouse-logs-queries

Write, review, and migrate Supabase logs queries against the ClickHouse-backed logs table (the logs.all.otel analytics endpoint). Use this whenever a task involves Logs Explorer SQL, the logattributes map, querying a log source (edgelogs, postgreslogs, authlogs, etc.), translating an old BigQuery cross join…

supabase/supabase · 152 tokens