Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Code Connect · devin-axis | DecimalAI

Frontendby devin-axis

Code Connect

Creates and maintains Figma Code Connect template files that map Figma components to code snippets.

Maintained

SkillScore

SkillScore83/100

Test results 83

Safety

3/3 safety checks passed

Code scan
Intent
Content

What it changes

29%83%of test cases passed +54 pts

Without skill7 of 24

With skill20 of 24

13 fixed7 passed either way4 still failing0 broke

Measured on gemini-3.6-flash9/9/2026v121 comparable

Track record

Agent runs: 0; All time

See one task, with and without the skill

One test taskWe want to check for unmapped components in node `4185:3778` using the `get_code_connect_suggestions` MCP tool. We only want a lightweight list of component IDs without generating full mapping text. Which parameter must be included in the tool call?

Without the skillMissed

With the skillPassed

Same model, same task. Answers are capped and redacted.

Use this skill

Your agent runs on

Adds every file the skill has, pinned so you can update it. No account needed.

pip install "decimalai>=0.15"
decimalai skills add devin-axis-figma-code-connect
claude --plugin-dir "$(git rev-parse --show-toplevel 2>/dev/null || pwd)/.agents"

The same install from Python, for a notebook or a setup script.

Install

pip install "decimalai>=0.15"

Add the skill

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("devin-axis-figma-code-connect")
if result.exit_code:
    raise SystemExit(result.problems)

print("Added. Start Claude Code with the command below.")

Start Claude Code with it

claude --plugin-dir "$(git rev-parse --show-toplevel 2>/dev/null || pwd)/.agents"

Type these in a Claude Code session. No account or API key. It writes the skill and any files it bundles, and asks first when its safety rating isn't Passed.

Add the DecimalAI plugin, once

/plugin marketplace add decimal-labs/decimalai-claude-plugins
/plugin install decimalai@decimalai

Install this skill

/decimalai:install devin-axis-figma-code-connect

The plugin needs python3 and curl on your machine.

No Python or account. Claude Code picks it up in its next session.

Save it into your project

curl -fsSL --create-dirs -o .claude/skills/devin-axis-figma-code-connect/SKILL.md https://app.decimal.ai/s/devin-axis-figma-code-connect/SKILL.md

Copy SKILL.md

Save it in your project, as

.claude/skills/devin-axis-figma-code-connect/SKILL.md

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

Claude Code docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[claude-agent-sdk]"
decimalai skills add devin-axis-figma-code-connect

Add it to your agent

import asyncio

from claude_agent_sdk import ClaudeAgentOptions
from decimalai.claude_agent_sdk import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

async def main():
    question = "Hello!"
    async with support.run(question) as run:  # one user message, one run
        async for message in run.query(options=ClaudeAgentOptions(max_turns=6)):
            print(message)

# In a notebook or async code: await main()
asyncio.run(main())

Prefer its own loader? ClaudeAgentOptions(plugins=[skills_plugin()], skills="all") reads the same folder. Use one or the other: a skill delivered both ways reaches the prompt twice.

The same install from Python, for a notebook or a setup script. agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[claude-agent-sdk]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("devin-axis-figma-code-connect")
if result.exit_code:
    raise SystemExit(result.problems)

import asyncio

from claude_agent_sdk import ClaudeAgentOptions
from decimalai.claude_agent_sdk import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

async def main():
    question = "Hello!"
    async with support.run(question) as run:  # one user message, one run
        async for message in run.query(options=ClaudeAgentOptions(max_turns=6)):
            print(message)

# In a notebook or async code: await main()
asyncio.run(main())

Prefer its own loader? ClaudeAgentOptions(plugins=[skills_plugin()], skills="all") reads the same folder. Use one or the other: a skill delivered both ways reaches the prompt twice.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/devin-axis-figma-code-connect/SKILL.md

Give it to your agent

import asyncio
from pathlib import Path
from claude_agent_sdk import ClaudeAgentOptions, query

skill = Path(".agents/skills/devin-axis-figma-code-connect/SKILL.md").read_text()
options = ClaudeAgentOptions(system_prompt=f"You are a helpful agent.\n\n{skill}", max_turns=6)

async def main():
    async for message in query(prompt="Hello!", options=options):
        print(message)

# In a notebook or async code: await main()
asyncio.run(main())

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

Claude Agent SDK docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[openai-agents]"
decimalai skills add devin-axis-figma-code-connect

Add it to your agent

from agents import Agent, Runner
from decimalai.openai_agents import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = Agent(
    name=support.name,
    instructions=support.instructions,  # your prompt, then the skill list
    tools=[*support.tools],             # your tools, then load_skill
)
# In a notebook or async code: result = await Runner.run(agent, "Hello!")
result = Runner.run_sync(agent, "Hello!")

Using SandboxAgent? capabilities=[Shell(), decimalai.openai_agents.sandbox_skills()] points its own loader at the same folder.

Install

pip install "decimalai[openai-agents]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("devin-axis-figma-code-connect")
if result.exit_code:
    raise SystemExit(result.problems)

from agents import Agent, Runner
from decimalai.openai_agents import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = Agent(
    name=support.name,
    instructions=support.instructions,  # your prompt, then the skill list
    tools=[*support.tools],             # your tools, then load_skill
)
# In a notebook or async code: result = await Runner.run(agent, "Hello!")
result = Runner.run_sync(agent, "Hello!")

Using SandboxAgent? capabilities=[Shell(), decimalai.openai_agents.sandbox_skills()] points its own loader at the same folder.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/devin-axis-figma-code-connect/SKILL.md

Give it to your agent

from pathlib import Path
from agents import Agent, Runner

skill = Path(".agents/skills/devin-axis-figma-code-connect/SKILL.md").read_text()
agent = Agent(name="support", instructions=f"You are a helpful agent.\n\n{skill}")
# In a notebook or async code: result = await Runner.run(agent, "Hello!")
result = Runner.run_sync(agent, "Hello!")

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

OpenAI Agents docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[openai]"
decimalai skills add devin-axis-figma-code-connect

Add it to your agent

import json

from openai import OpenAI
from decimalai.openai import agent_config

client = OpenAI()
# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")


def lookup_order(order_id: str) -> str:
    return f"Order {order_id} shipped yesterday."


# Your tools, as Chat Completions takes them, and what answers each.
TOOLS = [{"type": "function", "function": {
    "name": "lookup_order",
    "description": "Look up the status of an order.",
    "parameters": {"type": "object", "properties": {"order_id": {"type": "string"}},
                   "required": ["order_id"]},
}}]
FUNCTIONS = {"lookup_order": lookup_order}

question = "Where is order A1001?"
with support.run(question) as run:  # one user message, one run
    # run.system is your prompt, then the skill list.
    messages = [{"role": "system", "content": run.system}, run.message]
    while True:
        reply = client.chat.completions.create(
            model="gpt-5.4-mini",
            messages=messages,
            tools=[*TOOLS, *run.tools],  # your tools, then load_skill
        ).choices[0].message
        messages.append(reply)
        if not reply.tool_calls:
            break
        for call in reply.tool_calls:
            # load_skill is answered by the run; your own tools by FUNCTIONS.
            function = FUNCTIONS.get(call.function.name)
            messages.append(run.tool_result(call) or {
                "role": "tool", "tool_call_id": call.id,
                "content": function(**json.loads(call.function.arguments)) if function
                else f"There is no tool named {call.function.name!r}.",
            })
print(reply.content)

# The Responses API takes run.response_tools instead of run.tools.

Install

pip install "decimalai[openai]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("devin-axis-figma-code-connect")
if result.exit_code:
    raise SystemExit(result.problems)

import json

from openai import OpenAI
from decimalai.openai import agent_config

client = OpenAI()
# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")


def lookup_order(order_id: str) -> str:
    return f"Order {order_id} shipped yesterday."


# Your tools, as Chat Completions takes them, and what answers each.
TOOLS = [{"type": "function", "function": {
    "name": "lookup_order",
    "description": "Look up the status of an order.",
    "parameters": {"type": "object", "properties": {"order_id": {"type": "string"}},
                   "required": ["order_id"]},
}}]
FUNCTIONS = {"lookup_order": lookup_order}

question = "Where is order A1001?"
with support.run(question) as run:  # one user message, one run
    # run.system is your prompt, then the skill list.
    messages = [{"role": "system", "content": run.system}, run.message]
    while True:
        reply = client.chat.completions.create(
            model="gpt-5.4-mini",
            messages=messages,
            tools=[*TOOLS, *run.tools],  # your tools, then load_skill
        ).choices[0].message
        messages.append(reply)
        if not reply.tool_calls:
            break
        for call in reply.tool_calls:
            # load_skill is answered by the run; your own tools by FUNCTIONS.
            function = FUNCTIONS.get(call.function.name)
            messages.append(run.tool_result(call) or {
                "role": "tool", "tool_call_id": call.id,
                "content": function(**json.loads(call.function.arguments)) if function
                else f"There is no tool named {call.function.name!r}.",
            })
print(reply.content)

# The Responses API takes run.response_tools instead of run.tools.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/devin-axis-figma-code-connect/SKILL.md

Give it to your agent

from pathlib import Path
from openai import OpenAI

client = OpenAI()
skill = Path(".agents/skills/devin-axis-figma-code-connect/SKILL.md").read_text()
reply = client.chat.completions.create(
    model="gpt-5.4-mini",
    messages=[
        {"role": "system", "content": f"You are a helpful agent.\n\n{skill}"},
        {"role": "user", "content": "Hello!"},
    ],
).choices[0].message

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

OpenAI SDK docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[anthropic]"
decimalai skills add devin-axis-figma-code-connect

Add it to your agent

import anthropic
from decimalai.anthropic import agent_config

client = anthropic.Anthropic()
# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

question = "Hello!"
with support.run(question) as run:  # one user message, one run
    answer = client.beta.messages.tool_runner(
        model="claude-haiku-5-5",
        max_tokens=4096,
        system=run.system,     # your prompt, then the skill list
        tools=[*run.tools],    # your tools, then load_skill
        messages=[{"role": "user", "content": question}],
    ).until_done()

Install

pip install "decimalai[anthropic]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("devin-axis-figma-code-connect")
if result.exit_code:
    raise SystemExit(result.problems)

import anthropic
from decimalai.anthropic import agent_config

client = anthropic.Anthropic()
# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

question = "Hello!"
with support.run(question) as run:  # one user message, one run
    answer = client.beta.messages.tool_runner(
        model="claude-haiku-5-5",
        max_tokens=4096,
        system=run.system,     # your prompt, then the skill list
        tools=[*run.tools],    # your tools, then load_skill
        messages=[{"role": "user", "content": question}],
    ).until_done()

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/devin-axis-figma-code-connect/SKILL.md

Give it to your agent

from pathlib import Path
import anthropic

client = anthropic.Anthropic()
skill = Path(".agents/skills/devin-axis-figma-code-connect/SKILL.md").read_text()
reply = client.messages.create(
    model="claude-haiku-5-5",
    max_tokens=4096,
    system=f"You are a helpful agent.\n\n{skill}",
    messages=[{"role": "user", "content": "Hello!"}],
)

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

Anthropic docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[google-genai]"
decimalai skills add devin-axis-figma-code-connect

Add it to your agent

from google import genai
from google.genai import types
from decimalai.google_genai import agent_config

client = genai.Client()
# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")


def lookup_order(order_id: str) -> str:
    return f"Order {order_id} shipped yesterday."


# Your functions, as declarations for the model, and what answers each.
TOOLS = [{"function_declarations": [{
    "name": "lookup_order",
    "description": "Look up the status of an order.",
    "parameters_json_schema": {"type": "object", "properties": {"order_id": {"type": "string"}},
                               "required": ["order_id"]},
}]}]
FUNCTIONS = {"lookup_order": lookup_order}

question = "Where is order A1001?"
with support.run(question) as run:  # one user message, one run
    config = types.GenerateContentConfig(
        system_instruction=run.system,     # your prompt, then the skill list
        tools=[*TOOLS, *run.tool_params],  # your functions, then load_skill
    )
    contents = [{"role": "user", "parts": [{"text": run.message}]}]
    while True:
        response = client.models.generate_content(
            model="gemini-3.5-flash", contents=contents, config=config,
        )
        if not response.function_calls:
            break
        contents.append(response.candidates[0].content)
        parts = []
        for call in response.function_calls:
            # load_skill is answered by the run; your own functions by FUNCTIONS.
            # A loop of your own rather than automatic function calling, which
            # raises KeyError when the model asks for a function you did not pass.
            function = FUNCTIONS.get(call.name)
            parts.append(run.tool_result(call) or {"function_response": {
                "name": call.name, "id": call.id,
                "response": {"result": function(**(call.args or {})) if function
                             else f"There is no function named {call.name!r}."},
            }})
        contents.append({"role": "user", "parts": parts})
print(response.text)

Install

pip install "decimalai[google-genai]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("devin-axis-figma-code-connect")
if result.exit_code:
    raise SystemExit(result.problems)

from google import genai
from google.genai import types
from decimalai.google_genai import agent_config

client = genai.Client()
# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")


def lookup_order(order_id: str) -> str:
    return f"Order {order_id} shipped yesterday."


# Your functions, as declarations for the model, and what answers each.
TOOLS = [{"function_declarations": [{
    "name": "lookup_order",
    "description": "Look up the status of an order.",
    "parameters_json_schema": {"type": "object", "properties": {"order_id": {"type": "string"}},
                               "required": ["order_id"]},
}]}]
FUNCTIONS = {"lookup_order": lookup_order}

question = "Where is order A1001?"
with support.run(question) as run:  # one user message, one run
    config = types.GenerateContentConfig(
        system_instruction=run.system,     # your prompt, then the skill list
        tools=[*TOOLS, *run.tool_params],  # your functions, then load_skill
    )
    contents = [{"role": "user", "parts": [{"text": run.message}]}]
    while True:
        response = client.models.generate_content(
            model="gemini-3.5-flash", contents=contents, config=config,
        )
        if not response.function_calls:
            break
        contents.append(response.candidates[0].content)
        parts = []
        for call in response.function_calls:
            # load_skill is answered by the run; your own functions by FUNCTIONS.
            # A loop of your own rather than automatic function calling, which
            # raises KeyError when the model asks for a function you did not pass.
            function = FUNCTIONS.get(call.name)
            parts.append(run.tool_result(call) or {"function_response": {
                "name": call.name, "id": call.id,
                "response": {"result": function(**(call.args or {})) if function
                             else f"There is no function named {call.name!r}."},
            }})
        contents.append({"role": "user", "parts": parts})
print(response.text)

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/devin-axis-figma-code-connect/SKILL.md

Give it to your agent

from pathlib import Path
from google import genai
from google.genai import types

client = genai.Client()
skill = Path(".agents/skills/devin-axis-figma-code-connect/SKILL.md").read_text()
response = client.models.generate_content(
    model="gemini-3.5-flash",
    contents="Hello!",
    config=types.GenerateContentConfig(system_instruction=f"You are a helpful agent.\n\n{skill}"),
)

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

Gemini API docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[langchain]" langchain-openai
decimalai skills add devin-axis-figma-code-connect

Add it to your agent

from langchain.agents import create_agent
from decimalai.langchain import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = create_agent(
    "openai:gpt-5.4-mini",
    tools=[],                         # your tools; the middleware adds load_skill
    middleware=[support.middleware],  # your prompt, the skill list and load_skill
)
result = agent.invoke({"messages": [{"role": "user", "content": "Hello!"}]})

Install

pip install "decimalai[langchain]" langchain-openai

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("devin-axis-figma-code-connect")
if result.exit_code:
    raise SystemExit(result.problems)

from langchain.agents import create_agent
from decimalai.langchain import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = create_agent(
    "openai:gpt-5.4-mini",
    tools=[],                         # your tools; the middleware adds load_skill
    middleware=[support.middleware],  # your prompt, the skill list and load_skill
)
result = agent.invoke({"messages": [{"role": "user", "content": "Hello!"}]})

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/devin-axis-figma-code-connect/SKILL.md

Give it to your agent

from pathlib import Path
from langchain.agents import create_agent

skill = Path(".agents/skills/devin-axis-figma-code-connect/SKILL.md").read_text()
agent = create_agent("openai:gpt-5.4-mini", tools=[], system_prompt=f"You are a helpful agent.\n\n{skill}")
result = agent.invoke({"messages": [{"role": "user", "content": "Hello!"}]})

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

LangChain docs

CrewAI's own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" "crewai>=1.15.27"
decimalai skills add devin-axis-figma-code-connect

Add it to your agent

import decimalai.crewai
from crewai import Agent, Crew, Task

agent = Agent(
    role="Support", goal="Help the customer", backstory="A support agent.",
    llm=llm,                               # your own CrewAI LLM
    skills=decimalai.crewai.skills(),      # the installed folder
    tools=decimalai.crewai.skill_tools(),  # reads a skill's files, runs its scripts
)
task = Task(description="Hello!", expected_output="an answer", agent=agent)
Crew(agents=[agent], tasks=[task]).kickoff()

The same install from Python, for a notebook or a setup script. CrewAI's own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" "crewai>=1.15.27"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("devin-axis-figma-code-connect")
if result.exit_code:
    raise SystemExit(result.problems)

import decimalai.crewai
from crewai import Agent, Crew, Task

agent = Agent(
    role="Support", goal="Help the customer", backstory="A support agent.",
    llm=llm,                               # your own CrewAI LLM
    skills=decimalai.crewai.skills(),      # the installed folder
    tools=decimalai.crewai.skill_tools(),  # reads a skill's files, runs its scripts
)
task = Task(description="Hello!", expected_output="an answer", agent=agent)
Crew(agents=[agent], tasks=[task]).kickoff()

No DecimalAI package. CrewAI's own loader reads the folder, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/devin-axis-figma-code-connect/SKILL.md

Give it to your agent

from pathlib import Path
from crewai import Agent, Crew, Task

agent = Agent(
    role="Support", goal="Help the customer", backstory="A support agent.",
    llm=llm,                         # your own CrewAI LLM
    skills=[Path(".agents/skills")],
)
task = Task(description="Hello!", expected_output="an answer", agent=agent)
Crew(agents=[agent], tasks=[task]).kickoff()

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

CrewAI docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[adk]"
decimalai skills add devin-axis-figma-code-connect

Add it to your agent

from decimalai.adk import DecimalAIPlugin, agent_config
from google.adk.agents import LlmAgent
from google.adk.apps import App

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = LlmAgent(
    name="support",          # ADK needs a Python identifier
    model="gemini-3.5-flash",
    instruction=support.instruction,  # your prompt, then the skill list
    tools=[*support.tools],           # your tools, then load_skill
)
# DecimalAIPlugin makes each invocation of runners built from this App one trace.
app = App(name="support", root_agent=agent, plugins=[DecimalAIPlugin()])

Prefer ADK's own loader? SkillToolset(skills=decimalai.adk.skills(), ...) reads the same folder. Use one or the other: a skill delivered both ways reaches the prompt twice.

Install

pip install "decimalai[adk]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("devin-axis-figma-code-connect")
if result.exit_code:
    raise SystemExit(result.problems)

from decimalai.adk import DecimalAIPlugin, agent_config
from google.adk.agents import LlmAgent
from google.adk.apps import App

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = LlmAgent(
    name="support",          # ADK needs a Python identifier
    model="gemini-3.5-flash",
    instruction=support.instruction,  # your prompt, then the skill list
    tools=[*support.tools],           # your tools, then load_skill
)
# DecimalAIPlugin makes each invocation of runners built from this App one trace.
app = App(name="support", root_agent=agent, plugins=[DecimalAIPlugin()])

Prefer ADK's own loader? SkillToolset(skills=decimalai.adk.skills(), ...) reads the same folder. Use one or the other: a skill delivered both ways reaches the prompt twice.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/devin-axis-figma-code-connect/SKILL.md

Give it to your agent

from pathlib import Path
from google.adk.agents import LlmAgent

skill = Path(".agents/skills/devin-axis-figma-code-connect/SKILL.md").read_text()
agent = LlmAgent(
    name="support",
    model="gemini-3.5-flash",
    instruction=lambda context: f"You are a helpful agent.\n\n{skill}",
)

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

Google ADK docs

agent_config() hands your agent the skill. With no DecimalAI key it reads your project's files and sends nothing. Needs SDK 0.27 or newer.

Install

pip install "decimalai[pydantic-ai]"
decimalai skills add devin-axis-figma-code-connect

Add it to your agent

from pydantic_ai import Agent
from decimalai.pydantic_ai import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = Agent(
    "openai:gpt-4o-mini",
    name=support.name,
    tools=[],                 # your tools; the capability adds load_skill
    capabilities=[support],   # your prompt, the skill list and load_skill
)
# In a notebook or async code: result = await agent.run("Hello!")
result = agent.run_sync("Hello!")

On the Pydantic AI harness, decimalai.pydantic_ai_harness.skills(project) uses its own loader instead.

Install

pip install "decimalai[pydantic-ai]"

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("devin-axis-figma-code-connect")
if result.exit_code:
    raise SystemExit(result.problems)

from pydantic_ai import Agent
from decimalai.pydantic_ai import agent_config

# With no DECIMAL_API_KEY this reads the skills your project lists, from disk.
support = agent_config("support", fallback="You are a helpful agent.")

agent = Agent(
    "openai:gpt-4o-mini",
    name=support.name,
    tools=[],                 # your tools; the capability adds load_skill
    capabilities=[support],   # your prompt, the skill list and load_skill
)
# In a notebook or async code: result = await agent.run("Hello!")
result = agent.run_sync("Hello!")

On the Pydantic AI harness, decimalai.pydantic_ai_harness.skills(project) uses its own loader instead.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/devin-axis-figma-code-connect/SKILL.md

Give it to your agent

from pathlib import Path
from pydantic_ai import Agent

skill = Path(".agents/skills/devin-axis-figma-code-connect/SKILL.md").read_text()
agent = Agent("openai:gpt-4o-mini", instructions=f"You are a helpful agent.\n\n{skill}")
# In a notebook or async code: result = await agent.run("Hello!")
result = agent.run_sync("Hello!")

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

Pydantic AI docs

Deep Agents' own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" deepagents
decimalai skills add devin-axis-figma-code-connect

Add it to your agent

import decimalai.deepagents
from deepagents import create_deep_agent

agent = create_deep_agent(model=model, **decimalai.deepagents.skills())
agent.invoke({"messages": [{"role": "user", "content": "Hello!"}]})

The default backend reads files but has no shell. To run a skill's scripts, pass skills(backend=LocalShellBackend(...)).

The same install from Python, for a notebook or a setup script. Deep Agents' own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" deepagents

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("devin-axis-figma-code-connect")
if result.exit_code:
    raise SystemExit(result.problems)

import decimalai.deepagents
from deepagents import create_deep_agent

agent = create_deep_agent(model=model, **decimalai.deepagents.skills())
agent.invoke({"messages": [{"role": "user", "content": "Hello!"}]})

The default backend reads files but has no shell. To run a skill's scripts, pass skills(backend=LocalShellBackend(...)).

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/devin-axis-figma-code-connect/SKILL.md

Give it to your agent

from pathlib import Path
from deepagents import create_deep_agent

skill = Path(".agents/skills/devin-axis-figma-code-connect/SKILL.md").read_text()
agent = create_deep_agent(model=model, system_prompt=f"You are a helpful agent.\n\n{skill}")
agent.invoke({"messages": [{"role": "user", "content": "Hello!"}]})

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

Deep Agents docs

Its own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" agent-framework
decimalai skills add devin-axis-figma-code-connect

Add it to your agent

import asyncio

from agent_framework import Agent
from decimalai.agent_framework import skills

agent = Agent(client=client, instructions="You are a helpful agent.", context_providers=[skills()])
asyncio.run(agent.run("Hello!"))

It caches skills by default, so restart the process after decimalai skills update.

The same install from Python, for a notebook or a setup script. Its own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" agent-framework

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("devin-axis-figma-code-connect")
if result.exit_code:
    raise SystemExit(result.problems)

import asyncio

from agent_framework import Agent
from decimalai.agent_framework import skills

agent = Agent(client=client, instructions="You are a helpful agent.", context_providers=[skills()])
asyncio.run(agent.run("Hello!"))

It caches skills by default, so restart the process after decimalai skills update.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/devin-axis-figma-code-connect/SKILL.md

Give it to your agent

import asyncio
from pathlib import Path
from agent_framework import Agent

skill = Path(".agents/skills/devin-axis-figma-code-connect/SKILL.md").read_text()
agent = Agent(client=client, instructions=f"You are a helpful agent.\n\n{skill}")
asyncio.run(agent.run("Hello!"))

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

Microsoft Agent Framework docs

Strands' own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" strands-agents
decimalai skills add devin-axis-figma-code-connect

Add it to your agent

from decimalai.strands import skills
from strands import Agent
from strands.vended_tools import file_editor, shell

agent = Agent(
    model=model,                # always pass one: the default is Amazon Bedrock
    system_prompt="You are a helpful agent.",
    tools=[file_editor, shell],
    plugins=[skills()],
)
agent("Hello!")

Strands loads an agent's skills once, so build the agent again after decimalai skills update.

The same install from Python, for a notebook or a setup script. Strands' own skill loader reads the installed folder. No DecimalAI account needed.

Install

pip install "decimalai>=0.16" strands-agents

Add it to your agent

from decimalai import skillpkg

# Writes .agents/skills and .decimal/skills.toml. Safe to run twice.
result = skillpkg.add("devin-axis-figma-code-connect")
if result.exit_code:
    raise SystemExit(result.problems)

from decimalai.strands import skills
from strands import Agent
from strands.vended_tools import file_editor, shell

agent = Agent(
    model=model,                # always pass one: the default is Amazon Bedrock
    system_prompt="You are a helpful agent.",
    tools=[file_editor, shell],
    plugins=[skills()],
)
agent("Hello!")

Strands loads an agent's skills once, so build the agent again after decimalai skills update.

No DecimalAI package. The whole skill goes in every prompt, and nothing pins or updates it.

Copy SKILL.md

Save it in your project, as

.agents/skills/devin-axis-figma-code-connect/SKILL.md

Give it to your agent

from pathlib import Path
from strands import Agent

skill = Path(".agents/skills/devin-axis-figma-code-connect/SKILL.md").read_text()
agent = Agent(model=model, system_prompt=f"You are a helpful agent.\n\n{skill}")
agent("Hello!")

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

Strands docs

Adds every file the skill has, pinned so you can update it. Cursor, Copilot, Cline and Warp read this folder by themselves.

pip install "decimalai>=0.15"
decimalai skills add devin-axis-figma-code-connect

No Python or account. Cursor, Copilot, Cline and Warp read this folder by themselves.

Save it into your project

curl -fsSL --create-dirs -o .agents/skills/devin-axis-figma-code-connect/SKILL.md https://app.decimal.ai/s/devin-axis-figma-code-connect/SKILL.md

Copy SKILL.md

Save it in your project, as

.agents/skills/devin-axis-figma-code-connect/SKILL.md

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

Cursor and other editors docs

Fetch the file and give its text to your model as instructions. No account or package needed.

Get the file

curl -fsSL https://app.decimal.ai/s/devin-axis-figma-code-connect/SKILL.md

Read the summary as JSON

curl -fsSL https://app.decimal.ai/s/devin-axis-figma-code-connect.json

This gets SKILL.md only. The skill's 2 other files are not included.

Other ways to add it

Other setups docs

You don't need a DecimalAI account.

Version: v1, tested 9/9/2026
Source: devin-axis/ipollowork ↗
License: NOASSERTION

Manage it in DecimalAI

Saved prompts and skills, pinned versions, and traces of this skill in your runs. DecimalAI does not run your agent.

Claude Code reads files from your project, so DecimalAI config does not apply there.

On Claude Agent SDK: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On OpenAI Agents: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On OpenAI SDK: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On Anthropic: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On Gemini API: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On LangChain: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On CrewAI: set DECIMAL_API_KEY and add decimalai.init(crewai=True) to record runs and skill use. The skill version stays in your repo.

On Google ADK: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On Pydantic AI: save the skill to an agent here, set DECIMAL_API_KEY, and the same code uses it with no command to run. Changes you save reach the next run with no redeploy.

On Deep Agents: set DECIMAL_API_KEY and add decimalai.init(langchain=True) to record runs and skill use. The skill version stays in your repo.

On Microsoft Agent Framework: set DECIMAL_API_KEY and add decimalai.init(otel=True, agent_name="support") to record runs and skill use. The skill version stays in your repo.

On Strands: set DECIMAL_API_KEY and add decimalai.init(otel=True, agent_name="support") to record runs and skill use. The skill version stays in your repo.

Editors read files from your project, so DecimalAI config does not apply there.

Anywhere else: record a use with decimalai.log_skill_activation() inside a trace.

Use this skill

SKILL.md

Code Connect

Overview

Create Code Connect template files (.figma.ts) that map Figma components to code snippets. Given a Figma URL, follow the steps below to create a template.

Note: This project may also contain parser-based .figma.tsx files (using figma.connect(), published via CLI). This skill covers templates files only — .figma.ts files that use the MCP tools to fetch component context from Figma.

Prerequisites

Figma MCP server must be connected — verify that Figma MCP tools (e.g., get_code_connect_suggestions) are available before proceeding. If not, guide the user to enable the Figma MCP server and restart their MCP client.
Components must be published — Code Connect only works with components published to a Figma team library. If a component is not published, inform the user and stop.
Organization or Enterprise plan required — Code Connect is not available on Free or Professional plans.
URL must include node-id — the Figma URL must contain the node-id query parameter.
TypeScript types — for editor autocomplete and type checking in .figma.ts files @figma/code-connect/figma-types must be added to types in tsconfig.json:
```
{
  "compilerOptions": {
    "types": ["@figma/code-connect/figma-types"]
  }
}
```

Step 1: Parse the Figma URL

Extract fileKey and nodeId from the URL:

URL Format	fileKey	nodeId
`figma.com/design/:fileKey/:name?node-id=X-Y`	`:fileKey`	`X-Y` → `X:Y`
`figma.com/file/:fileKey/:name?node-id=X-Y`	`:fileKey`	`X-Y` → `X:Y`
`figma.com/design/:fileKey/branch/:branchKey/:name`	use `:branchKey`	from `node-id` param

Always convert nodeId hyphens to colons: 1234-5678 → 1234:5678.

Worked example:

Given: https://www.figma.com/design/QiEF6w564ggoW8ftcLvdcu/MyDesignSystem?node-id=4185-3778

fileKey = QiEF6w564ggoW8ftcLvdcu
nodeId = 4185-3778 → 4185:3778

Step 2: Discover Unmapped Components

The user may provide a URL pointing to a frame, instance, or variant — not necessarily a component set or standalone component. Call the MCP tool get_code_connect_suggestions with:

fileKey — from Step 1
nodeId — from Step 1 (colons format)
excludeMappingPrompt — true (returns a lightweight list of unmapped components)

This tool identifies published components in the selection that don't yet have Code Connect mappings.

Handle the response:

"No published components found in this selection" — the node contains no published components. Inform the user they need to publish the component to a team library in Figma first, then stop.
"All component instances in this selection are already connected to code via Code Connect" — everything is already mapped. Inform the user and stop.
Normal response with component list — extract the mainComponentNodeId for each returned component. Use these resolved node IDs (not the original from the URL) for all subsequent steps. If multiple components are returned (e.g. the user selected a frame containing several different component instances), repeat Steps 3–6 for each one.

Step 3: Fetch Component Properties

Call the MCP tool get_context_for_code_connect with:

fileKey — from Step 1
nodeId — the resolved mainComponentNodeId from Step 2
clientFrameworks — determine from figma.config.json parser field (e.g. "react" → ["react"])
clientLanguages — infer from project file extensions (e.g. TypeScript project → ["typescript"], JavaScript → ["javascript"])

For multiple components, call the tool once per node ID.

The response contains the Figma component's property definitions — note each property's name and type:

TEXT — text content (labels, titles, placeholders)
BOOLEAN — toggles (show/hide icon, disabled state)
VARIANT — enum options (size, variant, state)
INSTANCE_SWAP — swappable nested instances tied to a specific component (icon, avatar)
SLOT — flexible content regions (freeform layout, mixed children); use getSlot() in templates (not the same as INSTANCE_SWAP)

Save this property list — you will use it in Step 5 to write the template.

Step 4: Identify the Code Component

If the user did not specify which code component to connect:

Check figma.config.json for paths and importPaths to find where components live
Search the codebase for a component matching the Figma component name. Check common directories (src/components/, components/, lib/ui/, app/components/) if figma.config.json doesn't specify paths
Read candidate files and compare their props interface against the Figma properties from Step 3 — look for matching variant types, size options, boolean flags, and slot props
If multiple candidates match, pick the one with the closest prop-interface match and explain your reasoning to the user
If no match is found, show the 2 closest candidates and ask the user to confirm or provide the correct path

Confirm with the user before proceeding to Step 5. Present the match: which code component you found, where it lives, and why it matches (prop correspondence, naming, purpose).

Read figma.config.json for import path aliases — the importPaths section maps glob patterns to import specifiers, and the paths section maps those specifiers to directories.

Read the code component's source to understand its props interface — this informs how to map Figma properties to code props in Step 5.

Step 5: Create the Template File (.figma.ts)

File location

Place the file alongside existing Code Connect templates (.figma.tsx or .figma.ts files). Check figma.config.json include patterns for the correct directory. Name it ComponentName.figma.ts.

Template structure

Every template file follows this structure:

// url=https://www.figma.com/file/{fileKey}/{fileName}?node-id={nodeId}
// source={path to code component from Step 4}
// component={code component name from Step 4}
import figma from 'figma'
const instance = figma.selectedInstance

// Extract properties from the Figma component (see property mapping below)
// ...

export default {
  example: figma.code`<Component ... />`,       // Required: code snippet
  imports: ['import { Component } from "..."'], // Optional: import statements
  id: 'component-name',                         // Required: unique identifier
  metadata: {                                    // Optional
    nestable: true,                              // true = inline in parent, false = show as pill
    props: {}                                    // data accessible to parent templates
  }
}

Property mapping

Use the property list from Step 3 to extract values. For each Figma property type, use the corresponding method:

Figma Property Type	Template Method	When to Use
TEXT	`instance.getString('Name')`	Labels, titles, placeholder text
BOOLEAN	`instance.getBoolean('Name', { true: ..., false: ... })`	Toggle visibility, conditional props
VARIANT	`instance.getEnum('Name', { 'FigmaVal': 'codeVal' })`	Size, variant, state enums
INSTANCE_SWAP	`instance.getInstanceSwap('Name')`	Swapped instance for a fixed component slot (then `hasCodeConnect()` / `executeTemplate()`) - do not confuse with the SLOT property below
SLOT	`instance.getSlot('Name')`	Freeform slot content only when the Figma property type is SLOT
(child layer)	`instance.findInstance('LayerName')`	Named child instances without a property
(text layer)	`instance.findText('LayerName')` → `.textContent`	Text content from named layers

TEXT — get the string value directly:

const label = instance.getString('Label')

VARIANT — map Figma enum values to code values:

const variant = instance.getEnum('Variant', {
  'Primary': 'primary',
  'Secondary': 'secondary',
})

const size = instance.getEnum('Size', {
  'Small': 'sm',
  'Medium': 'md',
  'Large': 'lg',
})

BOOLEAN — simple boolean or mapped to values:

// Simple boolean
const disabled = instance.getBoolean('Disabled')

// Mapped to code values (e.g. when the code prop is an enum, not a boolean)
const size = instance.getBoolean('Show Label', { true: 'large', false: 'small' })

Map Figma properties to code props where there's a valid correspondence. Figma properties and code props don't always line up 1:1 — some Figma properties map directly (by name, or via the API methods above), others have no code equivalent. Where a mapping exists, use it; where none fits, omit the Figma property rather than invent a code prop. Never emit an attribute whose name doesn't appear in the code component's Props interface.

Exhaustive variant handling

When a VARIANT property has multiple possible values, the getEnum mapping must list every value returned by get_context_for_code_connect. Don't omit values — an unmapped value silently returns undefined, producing broken output.

// WRONG — omits 'Warning', which will render as undefined
const status = instance.getEnum('Status', {
  'Success': 'success',
  'Error': 'error',
})

// CORRECT — every value is mapped
const status = instance.getEnum('Status', {
  'Success': 'success',
  'Error': 'error',
  'Warning': 'warning',
  'Info': 'info',
})

When two or more VARIANT properties combine to produce different code output, generate exhaustive conditional branches. For example, 2 variants × 2 values = 4 branches:

const type = instance.getEnum('Type', { 'Filled': 'filled', 'Outlined': 'outlined' })
const status = instance.getEnum('Status', { 'Success': 'success', 'Error': 'error' })

let colorClass
if (type === 'filled' && status === 'success') {
  colorClass = 'bg-green-500 text-white'
} else if (type === 'filled' && status === 'error') {
  colorClass = 'bg-red-500 text-white'
} else if (type === 'outlined' && status === 'success') {
  colorClass = 'bg-transparent border-green-500'
} else if (type === 'outlined' && status === 'error') {
  colorClass = 'bg-transparent border-red-500'
}

If the combinations produce repetitive output (e.g., Size doesn't change the snippet structure — it's just passed through as a prop), a single getEnum mapping per variant is sufficient — no need for cross-product branches.

INSTANCE_SWAP — access swappable component instances:

const icon = instance.getInstanceSwap('Icon')
let iconCode
if (icon && icon.type === 'INSTANCE') {
  iconCode = icon.executeTemplate().example
}

SLOT — getSlot(propName) is only valid when the Figma component property reported in Step 3 has type SLOT. Do not use getSlot() for INSTANCE_SWAP properties (those use getInstanceSwap()). Slots are explicit “content regions” in the component definition, not generic nested instances.

Signature: getSlot(propName: string): ResultSection[] | undefined

// Figma property "Content" must be type SLOT in component properties
const content = instance.getSlot('Content')

export default {
  example: figma.code`<Card>${content}</Card>`,
  // ...
}

Interpolation in tagged templates

When interpolating values in tagged templates, use the correct wrapping:

String values (getString, getEnum, textContent): wrap in quotes → variant="${variant}"
Instance/section values (executeTemplate().example): wrap in braces → icon={${iconCode}}
Slot sections (getSlot() result — ResultSection[] | undefined): interpolate directly inside figma.code`...` (same shape as nested snippet sections), e.g. figma.code`<Select>${content}</Select>` — do not treat as a plain string
Boolean bare props: use conditional → ${disabled ? 'disabled' : ''}

Finding descendant layers

When you need to access children that aren't exposed as component properties:

Method	Use when
`instance.getInstanceSwap('PropName')`	Figma property type is INSTANCE_SWAP (fixed swapped instance)
`instance.getSlot('PropName')`	Figma property type is SLOT (freeform content region)
`instance.findInstance('LayerName')`	You know the child layer name (no component property)
`instance.findText('LayerName')` → `.textContent`	You need text content from a named text layer
`instance.findConnectedInstance('id')`	You know the child's Code Connect `id`
`instance.findConnectedInstances(fn)`	You need multiple connected children matching a filter
`instance.findLayers(fn)`	You need any layers (text + instances) matching a filter

Nested configurable instances

A component may contain child instances that are not exposed as component properties (no INSTANCE_SWAP) but are still independently configurable — they have their own variants, properties, or swap slots. These must be resolved dynamically, not hardcoded.

Check whether the child already has a Code Connect template — use get_code_connect_suggestions or check existing .figma.ts files in the project.
If no template exists, create one for the child so it renders correctly both standalone and when nested.
Reference the child from the parent using findInstance() or findConnectedInstance(), then call executeTemplate().

// Parent template — the Badge child isn't a prop, but it's configurable
const badge = instance.findInstance('Status Badge')
let badgeCode
if (badge && badge.type === 'INSTANCE') {
  badgeCode = badge.executeTemplate().example
}

export default {
  example: figma.code`<Card>${badgeCode}</Card>`,
  // ...
}

This applies to icons, badges, labels, and any other nested instance that is configurable by itself — always connect them and render dynamically, never hardcode their content.

Nested component example

For multi-level nested components or metadata prop passing between templates, see advanced-patterns.md.

const icon = instance.getInstanceSwap('Icon')
let iconSnippet
if (icon && icon.type === 'INSTANCE') {
  iconSnippet = icon.executeTemplate().example
}

export default {
  example: figma.code`<Button ${iconSnippet ? figma.code`icon={${iconSnippet}}` : ''}>${label}</Button>`,
  // ...
}

Conditional props

const variant = instance.getEnum('Variant', { 'Primary': 'primary', 'Secondary': 'secondary' })
const disabled = instance.getBoolean('Disabled')

export default {
  example: figma.code`
    <Button
      variant="${variant}"
      ${disabled ? 'disabled' : ''}
    >
      ${label}
    </Button>
  `,
  // ...
}

Step 6: Validate

Read back the .figma.ts file and review it against the following:

Property coverage — every Figma property from Step 3 should be accounted for in the template. Flag any that are missing and ask the user if they were intentionally omitted.
Valid, correctly typed code — all emitted code must be valid and correctly typed against the code component's Props interface. Never make up component properties — if a Figma property has no corresponding code prop, omit it rather than invent one.
No hardcoded children — verify that every INSTANCE_SWAP property and child component slot uses the dynamic APIs (getInstanceSwap(), findInstance(), findConnectedInstance(), etc.) with executeTemplate(). No slot should contain hardcoded component content.
Rules and Pitfalls — check for the common mistakes listed below (string concatenation of template results, unnecessary hasCodeConnect() guards, missing type === 'INSTANCE' checks, etc.)
Interpolation wrapping — strings (getString, getEnum, textContent) wrapped in quotes, instance/section values (executeTemplate().example) wrapped in braces, slot sections (getSlot) interpolated as snippet sections inside figma.code`...`, booleans using conditionals

If anything looks uncertain, consult api.md for API details and advanced-patterns.md for complex nesting.

Inline Quick Reference

`instance.*` Methods

Method	Signature	Returns
`getString`	`(propName: string)`	`string`
`getBoolean`	`(propName: string, mapping?: { true: any, false: any })`	`boolean \| any`
`getEnum`	`(propName: string, mapping: { [figmaVal]: codeVal })`	`any`
`getInstanceSwap`	`(propName: string)`	`InstanceHandle \| null`
`getSlot`	`(propName: string)`	`ResultSection[] \| undefined`
`getPropertyValue`	`(propName: string)`	`string \| boolean`
`findInstance`	`(layerName: string, opts?: SelectorOptions)`	`InstanceHandle \| ErrorHandle`
`findText`	`(layerName: string, opts?: SelectorOptions)`	`TextHandle \| ErrorHandle`
`findConnectedInstance`	`(codeConnectId: string, opts?: SelectorOptions)`	`InstanceHandle \| ErrorHandle`
`findConnectedInstances`	`(selector: (node) => boolean, opts?: SelectorOptions)`	`InstanceHandle[]`
`findLayers`	`(selector: (node) => boolean, opts?: SelectorOptions)`	`(InstanceHandle \| TextHandle)[]`

InstanceHandle Methods

Method	Returns
`hasCodeConnect()`	`boolean`
`executeTemplate()`	`{ example: ResultSection[], metadata: Metadata }`
`codeConnectId()`	`string \| null`

TextHandle Properties

Property	Type
`.textContent`	`string`
`.name`	`string`

SelectorOptions

{ path?: string[], traverseInstances?: boolean }

traverseInstances: true — required when the target lives inside another nested instance. Without it, findInstance/findText only search the current instance's own layers and stop at nested instance boundaries.
path: string[] — disambiguates when multiple descendants share the same layer name. Lists parent layer names that must appear on the path to the target.

Examples:

// Layer hierarchy:
//   A > C (instance) > "mychild"
// "mychild" sits inside nested instance C, so plain findInstance returns ErrorHandle.
instance.findInstance('mychild', { traverseInstances: true })

// Layer hierarchy:
//   A > C (instance) > "mychild"
//   A > D (instance) > "mychild"
// Two "mychild" layers exist — use path to pick the one under C.
instance.findInstance('mychild', { traverseInstances: true, path: ['C'] })

When to reach into a nested instance from a parent template: only when the parent code component (from Step 4) takes the nested layer as a prop value itself (e.g. <C show={<B />} /> — A forwards B into C). If the parent just composes C and C renders B internally, resolve C with executeTemplate() and let C's own template handle B — don't duplicate B's rendering at the parent level.

Export Structure

export default {
  example: figma.code`...`,                      // Required: ResultSection[]
  id: 'component-name',                         // Required: string
  imports: ['import { X } from "..."'],          // Optional: string[]
  metadata: { nestable: true, props: {} }        // Optional
}

Rules and Pitfalls

Never string-concatenate template results. executeTemplate().example is a ResultSection[] object, not a string. Using + or .join() produces [object Object]. Always interpolate inside tagged templates: figma.code`${snippet1}${snippet2}`

Do not use hasCodeConnect() guards. Call executeTemplate() directly on any instance after a type === 'INSTANCE' check. The runtime handles instances without Code Connect automatically.

// WRONG — hasCodeConnect() gate drops non-CC instances
if (icon && icon.type === 'INSTANCE' && icon.hasCodeConnect()) {
  iconCode = icon.executeTemplate().example
}

// CORRECT — let the runtime handle all instances
if (icon && icon.type === 'INSTANCE') {
  iconCode = icon.executeTemplate().example
}

Check type === 'INSTANCE' before calling executeTemplate(). findInstance(), findConnectedInstance(), and findText() return an ErrorHandle (truthy, but not a real node) on failure — not null. Always add a type check to avoid crashes: if (child && child.type === 'INSTANCE') { ... }
Prefer getInstanceSwap() over findInstance() when a component property exists for the slot. findInstance('Star Icon') breaks when the icon is swapped to a different name; getInstanceSwap('Icon') always works regardless of which instance is in the slot.
Use getSlot() only when the Figma property type is SLOT. For INSTANCE_SWAP props, use getInstanceSwap() (returns an InstanceHandle). getSlot() returns structured slot sections, not instances — never call executeTemplate() on its return value.
Property names are case-sensitive and must exactly match what get_context_for_code_connect returns.

Handle multiple template arrays correctly. When iterating over children, set each result in a separate variable and interpolate them individually — do not use .map().join():

// Wrong:
items.map(n => n.executeTemplate().example).join('\n')

// Correct — use separate variables:
const child1 = items[0]?.executeTemplate().example
const child2 = items[1]?.executeTemplate().example
export default { example: figma.code`${child1}${child2}` }

Never hardcode slot or children content. Always resolve child instances dynamically — use getInstanceSwap() for INSTANCE_SWAP properties, findInstance()/findConnectedInstance() for direct children — and render them via executeTemplate(). Never construct JSX from a layer name (e.g., <StarIcon />) or guess import paths. If an instance has no Code Connect, omit it — do not add a hardcoded fallback.

// WRONG — hardcodes the icon from its layer name
example: figma.code`<Button icon={<StarIcon />}>Submit</Button>`

// CORRECT — resolves dynamically, works for any swapped icon
const icon = instance.findInstance('Icon')
let iconCode
if (icon && icon.type === 'INSTANCE') {
  iconCode = icon.executeTemplate().example
}
example: figma.code`<Button${iconCode ? figma.code` icon={${iconCode}}` : ''}>...</Button>`

Attempt to represent every Figma property via a code prop. The code component's Props interface (from Step 4) is the authoritative list of attribute names. For each Figma property, figure out the right way to represent it using the API methods from Step 5 — direct name match, value transformation, or whatever fits. If no code prop fits at all, omit it — don't invent a prop name.

Complete Worked Example

Given URL: https://figma.com/design/abc123/MyFile?node-id=42-100

Step 1: Parse the URL.

fileKey = abc123
nodeId = 42-100 → 42:100

Step 2: Call get_code_connect_suggestions with fileKey: "abc123", nodeId: "42:100", excludeMappingPrompt: true. Response returns one component with mainComponentNodeId: "42:100". If the response were empty, stop and inform the user. If multiple components were returned, repeat Steps 3–6 for each.

Step 3: Call get_context_for_code_connect with fileKey: "abc123", nodeId: "42:100" (from Step 2), clientFrameworks: ["react"], clientLanguages: ["typescript"].

Response includes properties:

Label (TEXT)
Variant (VARIANT): Primary, Secondary
Size (VARIANT): Small, Medium, Large
Disabled (BOOLEAN)
Has Icon (BOOLEAN)
Icon (INSTANCE_SWAP)

Step 4: Search codebase → find Button component. Read its source to confirm props: variant, size, disabled, icon, children. Import path: "primitives".

Step 5: Create src/figma/primitives/Button.figma.ts:

// url=https://figma.com/design/abc123/MyFile?node-id=42-100
// source=src/components/Button.tsx
// component=Button
import figma from 'figma'
const instance = figma.selectedInstance

const label = instance.getString('Label')
const variant = instance.getEnum('Variant', {
  'Primary': 'primary',
  'Secondary': 'secondary',
})
const size = instance.getEnum('Size', {
  'Small': 'sm',
  'Medium': 'md',
  'Large': 'lg',
})
const disabled = instance.getBoolean('Disabled')
const hasIcon = instance.getBoolean('Has Icon')
const icon = hasIcon ? instance.getInstanceSwap('Icon') : null
let iconCode
if (icon && icon.type === 'INSTANCE') {
  iconCode = icon.executeTemplate().example
}

export default {
  example: figma.code`
    <Button
      variant="${variant}"
      size="${size}"
      ${disabled ? 'disabled' : ''}
      ${iconCode ? figma.code`icon={${iconCode}}` : ''}
    >
      ${label}
    </Button>
  `,
  imports: ['import { Button } from "primitives"'],
  id: 'button',
  metadata: { nestable: true }
}

Step 6: Read back file to verify syntax.

Additional Reference

For advanced patterns (multi-level nested components, findConnectedInstances filtering, metadata prop passing between parent/child templates):

api.md — Full Code Connect API reference
advanced-patterns.md — Advanced nesting, metadata props, and descendant patterns

When it activates

Automatically, when a task matches. 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.

About this skill

Automatic

Frontend / UI pack

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v5 — 8/17/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

devin-axis / ipollowork

examples/plugin-packages/figma/skills/figma-code-connect/SKILL.md

View on GitHub ↗

License NOASSERTIONImported 8/17/2026Version v1Bundled 2 files

Illustrative Want to see what devin-axis/figma-code-connect would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

Related skills

Skills that do similar work, with their headline benchmark lift.

From the same source and nearby in the catalogue.

Ready to supercharge your AI agents?

SkillScore

Safety

What it changes

Track record

Use this skill

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

Rules and Pitfalls

Complete Worked Example

Additional Reference

When it activates

SkillSafety

Source

Other skills for the same job

Related skills

More in the registry

`instance.*` Methods