Skip to content
mcp/skillhub

Agent Skill

Figma Code Connect skill

figma-code-connectDevin-AXIS/iPolloWorkexamples/plugin-packages/figma/skills/figma-code-connect/SKILL.md

Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.

7.1k

always on

57 tokname + description

once used

6,171 tokSKILL.md body

bundled files

233 KB

repo stars

7.1kGitHub

Install the Figma Code Connect skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/Devin-AXIS/iPolloWork --skill figma-code-connect

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/Devin-AXIS/iPolloWork.git /tmp/iPolloWork
mkdir -p ~/.claude/skills
cp -R /tmp/iPolloWork/examples/plugin-packages/figma/skills/figma-code-connect ~/.claude/skills/figma-code-connect

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description57 tok
When the agent uses itThe SKILL.md instructions6,171 tok
Only if opened2 bundled files (33 KB)varies

Until it is used, figma-code-connect costs about 24× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 102 skills from Devin-AXIS/iPolloWork would load 4,966 tokens of descriptions. Skills vs MCP study

Checks

  • The instructions are over 5,000 tokens, the Agent Skills specification's guideline for SKILL.md.
  • The instructions are over 500 lines; the specification suggests moving detail into reference files.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Code Connect
  • Overview
  • Prerequisites
  • Step 1: Parse the Figma URL
  • Step 2: Discover Unmapped Components
  • Step 3: Fetch Component Properties
  • Step 4: Identify the Code Component
  • Step 5: Create the Template File (.figma.ts)
  • File location
  • Template structure
  • Property mapping
  • Exhaustive variant handling
  • Interpolation in tagged templates
  • Finding descendant layers
  • Nested configurable instances
  • Nested component example
  • Conditional props
  • Step 6: Validate
  • Inline Quick Reference
  • instance. Methods
  • InstanceHandle Methods
  • TextHandle Properties
  • SelectorOptions
  • Export Structure

More skills from Devin-AXIS/iPolloWork

All skills in this repo
  1. acme-researchDevin-AXIS/iPolloWork

    Search and summarize material from the Acme research service.

    7.1k16 tok idle · 126 in use
  2. agent-first-screenshotsDevin-AXIS/iPolloWork

    Agent-first screenshots — an agent drives the real app via CDP and produces clean, defect-free product screenshots (newsletters, landing pages, social, decks, PR). Dual-channel verification (DOM + pixels + vision) in a capture loop. Use for any "take/redo screenshots of the app" task.

    7.1k269 tok idle · 1,128 in use
  3. context7-docs-researchDevin-AXIS/iPolloWork

    Resolve the correct library and retrieve a small, relevant set of version-aware official documentation before answering a technical question.

    7.1k29 tok idle · 99 in use
  4. context7-version-aware-implementationDevin-AXIS/iPolloWork

    Use the current project dependency versions and Context7 documentation to implement or upgrade code without importing APIs from a different release line.

    7.1k31 tok idle · 106 in use
  5. create-pluginDevin-AXIS/iPolloWork

    Create an OpenCode plugin for iPolloWork. Scaffolds the plugin file with the correct API shape, tool definitions, and hook registration. Use when the user asks to 'create a plugin', 'write a plugin', or 'make a plugin that does X'.

    7.1k58 tok idle · 1,227 in use
  6. daytona-chrome-cdpDevin-AXIS/iPolloWork

    Launch and control standalone Chrome in a Daytona sandbox via CDP. Use for web sign-in, OAuth, Den Web setup, browser-only flows, or when the app should not be driven through Electron CDP.

    7.1k49 tok idle · 556 in use
  7. daytona-cloud-serverDevin-AXIS/iPolloWork

    Daytona cloud server, Den sandbox, desktop plus cloud e2e, marketplace server, worker proxy, cloud auth, org policies, connect Electron to Den. Use for server-side setup in validated flows.

    7.1k45 tok idle · 598 in use
  8. daytona-devDevin-AXIS/iPolloWork

    Daytona development environment overview. Use when the user asks about Daytona setup, Daytona toolbox, dev environment, noVNC, CDP, server sandbox, secrets volume, Electron sandbox, standalone Chrome, validation, or artifacts volume.

    7.1k49 tok idle · 1,455 in use