Agent skill

Using Bridge

A skill your agent uses when any Bridge command is invoked (make, fix, done, setup, drop, status) or any Figma / design-system / compiler / Bridge workflow topic is raised.

MITAuto-check passedFrontend & Design

Install Using Bridge

skills CLI

$ npx skills add noemuch/bridge --skill using-bridge -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install noemuch/bridge using-bridge --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/noemuch/bridge.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/using-bridge .claude/skills/using-bridge && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "using-bridge" agent skill from https://github.com/noemuch/bridge/tree/main/skills/using-bridge into .claude/skills/using-bridge/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "using-bridge", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/noemuch/bridge/tree/main/skills/using-bridge

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add noemuch/bridge --skill using-bridge -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install noemuch/bridge using-bridge --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/noemuch/bridge.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/using-bridge .agents/skills/using-bridge && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "using-bridge" agent skill from https://github.com/noemuch/bridge/tree/main/skills/using-bridge into .agents/skills/using-bridge/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "using-bridge", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add noemuch/bridge --skill using-bridge -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install noemuch/bridge using-bridge --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/noemuch/bridge.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/using-bridge .cursor/skills/using-bridge && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "using-bridge" agent skill from https://github.com/noemuch/bridge/tree/main/skills/using-bridge into .cursor/skills/using-bridge/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "using-bridge", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/noemuch/bridge.git --path skills/using-bridge

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add noemuch/bridge --skill using-bridge -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install noemuch/bridge using-bridge --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/noemuch/bridge.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/using-bridge .gemini/skills/using-bridge && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "using-bridge" agent skill from https://github.com/noemuch/bridge/tree/main/skills/using-bridge into .gemini/skills/using-bridge/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "using-bridge", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install noemuch/bridge using-bridge

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add noemuch/bridge --skill using-bridge -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/noemuch/bridge.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/using-bridge .github/skills/using-bridge && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "using-bridge" agent skill from https://github.com/noemuch/bridge/tree/main/skills/using-bridge into .github/skills/using-bridge/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "using-bridge", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add noemuch/bridge --skill using-bridge -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install noemuch/bridge using-bridge --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/noemuch/bridge.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/using-bridge .opencode/skills/using-bridge && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "using-bridge" agent skill from https://github.com/noemuch/bridge/tree/main/skills/using-bridge into .opencode/skills/using-bridge/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "using-bridge", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: using-bridge
GitHub stars: 156
Token cost: ~1.4k tokens
SKILL.md length: 603 words
Files: 1
Skills in repo: 5
Repo updated: Jun 3, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

A skill your agent uses when any Bridge command is invoked (make, fix, done, setup, drop, status) or any Figma / design-system / compiler / Bridge workflow topic is raised.

Works in 6 steps: Confirm. Ask: "Sure you want to drop… → Capture learnings. If a snapshot exists,… → Document drop reason. Append a drop:… → …
Any Bridge command is invoked (make
SKILL.md covers Command Map, Drop Procedure (inline), Skill Priority and Iron Laws (non-negotiable), plus 3 more sections
Calls make

What it does

Using Bridge is an agent skill from noemuch/bridge. Use when any Bridge command is invoked (make, fix, done, setup, drop, status) or any Figma / design-system / compiler / Bridge workflow topic is raised. Sets command priorities and iron laws (compiler-only, semantic tokens only, verification-before-ship).

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Design systems. It works with Figma. The repository describes itself as: Design in Figma with Claude Code. Bridge connects your terminal to the Figma Plugin API via WebSocket. The licence is MIT.

When your agent uses it

Any Bridge command is invoked (make
Any Figma / design-system / compiler / Bridge workflow topic is raised

Example prompts

“/using-bridge”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

Confirm. Ask: "Sure you want to drop {name}?"
Capture learnings. If a snapshot exists, offer to run fix first to
Document drop reason. Append a drop: block to the CSpec with
Archive. Move specs/active/{name}.cspec.yaml →
Update history. Append {ISO date} | {name} | DROPPED | {reason}
Cleanup. Remove /tmp/bridge-scene-{name}.json if present.

What it can do on your machine

Read from SKILL.md and the folder at commit 414977f. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- make
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Using Bridge loads about 1.4k tokens when it runs. Until then it costs about 67 tokens; SKILL.md has 603 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~67
When it runs · the whole SKILL.md, loaded when a task matches: ~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from noemuch/bridge at commit 414977f, republished under its MIT licence (© noemuch). 603 words, ~1,364 tokens.

Download SKILL.mdSave it as .claude/skills/using-bridge/SKILL.md (or your agent's skills folder).

name: using-bridge
description: Use when any Bridge command is invoked (make, fix, done, setup, drop, status) or any Figma / design-system / compiler / Bridge workflow topic is raised. Sets command priorities and iron laws (compiler-only, semantic tokens only, verification-before-ship).

Using Bridge

Bridge is a compiler-driven design workflow for generating Figma designs and maintaining a design system via Claude Code. The compiler (at lib/compiler/compile.ts) enforces all 26 Figma Plugin API rules, so Claude NEVER writes raw Plugin API code and NEVER hardcodes primitive values.

This skill is force-loaded at every SessionStart via hooks/session-start. Its job is to establish the discipline before any action skill runs. It is deliberately small (~400 tokens) to keep the fixed per-session cost low.

Command Map

User intent (keywords)	Route to
"make", "design", "create", "build", "generate", "new component", "new screen"	`generating-figma-design`
"fix", "correct", "learn", "diff", "what changed", "I adjusted"	`learning-from-corrections`
"done", "ship", "ship it", "finish", "complete"	`shipping-and-archiving`
"setup", "setup bridge", "extract", "extract DS", "onboard", "initialize", "bootstrap"	`extracting-design-system`
"drop", "abandon", "cancel"	inline `Drop Procedure` (this skill)
"status", "what's next", "workflow"	inline status logic (this skill)

Drop Procedure (inline)

drop is handled inline here — it is small enough not to warrant its own skill. Invoke when the user says "drop", "abandon", or "cancel".

Confirm. Ask: "Sure you want to drop {name}?"
Capture learnings. If a snapshot exists, offer to run fix first to capture corrections before archiving.
Document drop reason. Append a drop: block to the CSpec with date, reason, and learnings.
Archive. Move specs/active/{name}.cspec.yaml → specs/dropped/{name}.cspec.yaml. Move the snapshot JSON too if it exists.
Update history. Append {ISO date} | {name} | DROPPED | {reason} to specs/history.log.
Cleanup. Remove /tmp/bridge-scene-{name}.json if present.

Output template:

## Dropped: {name}

Reason: {reason}
CSpec archived: specs/dropped/{name}.cspec.yaml
Learnings: {captured | skipped}

Ready for the next design. Run: `make <description>`.

Skill Priority

Process first, then action. For exploratory or ambiguous requests, brainstorm the intent first before implementing. For a clear directive that maps to a command in the table above, route directly.
Verification before completion. No "done" without evidence (see Iron Laws below).
Minimal context. Load only the references needed for the current action. See each action skill's ## Verification section.

Show full SKILL.md (283 more words)Show less

Iron Laws (non-negotiable)

<IRON-LAW>
NEVER write raw Figma Plugin API code. All scene graph JSON must pass through `lib/compiler/compile.ts`. Violations require explicit human approval before any execution to Figma.
</IRON-LAW>

<IRON-LAW>
NEVER use hardcoded primitive values. Only semantic DS tokens (`$color/...`, `$spacing/...`, `$text/...`, `$comp/...`). The compiler emits `RESOLVE_TOKEN_NOT_FOUND` for any unresolved reference.
</IRON-LAW>

<IRON-LAW>
NEVER claim "done" without: (a) compiler exit 0, (b) screenshot taken in this turn, (c) user confirmation of visual correctness. "Looks right" / "should pass" / "I'm confident" are forbidden — show the evidence.
</IRON-LAW>

<IRON-LAW>
NEVER read `figma-api-rules.md`. The compiler enforces all 26 rules. This file does not exist in v6.
</IRON-LAW>

<IRON-LAW>
NEVER reuse a Figma `nodeId` from a previous session. Node IDs are session-scoped — re-search.
</IRON-LAW>

Red Flags — Rationalization → Reality

Rationalization	Reality
"I'll just hardcode this hex once"	Always use a semantic token. No exceptions.
"The compiler is overkill for this tiny thing"	The compiler is the only path.
"Skip the screenshot, it's obviously right"	'Looks right' ≠ 'is right'.
"I remember this nodeId from my last session"	Node IDs are session-scoped. Re-search.
"I'll use figma-api-rules.md for context"	That file is forbidden. Compiler owns all rules.
"The user approved, I can skip the compile exit code check"	Compile exit 0 is Gate A. Independent of user approval.
"Let me write a small inline Plugin API script for this fix"	No inline scripts. Scene graph → compiler → execute.

References

Compiler reference: references/compiler-reference.md (repo-root)
Transport adapter: references/transport-adapter.md (repo-root)
Verification gates: references/verification-gates.md (repo-root)
Red Flags catalog: references/red-flags-catalog.md (repo-root)

Conversation Language Rule

Conversation with the user: their language (detect from context).
All generated artifacts (KB files, CSpecs, guides, learnings, recipes, scene graphs, docs, specs, plans): English only. This rule is non-negotiable per Bridge's artifact policy.

Files

Just SKILL.md in skills/using-bridge of noemuch/bridge.

Open the folder on GitHubat commit 414977f

Compare with similar skills

Using Bridge next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Using Bridge compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Using Bridge this skillnoemuch/bridge	156	—	~1.4k	Automated safety check: Pass	MIT	4 mo ago
Figma Design System Builderwarpdotdev/warp	65k	2 repos	~4.4k	Automated safety check: Pass	AGPL-3.0	today
Figma use_figma Plugin API Ruleswarpdotdev/warp	65k	4 repos	~4.4k	Automated safety check: Pass	AGPL-3.0	today
Figma Design System Rules Generatorwarpdotdev/warp	65k	3 repos	~4.6k	Automated safety check: Pass	AGPL-3.0	today
Figma Code Connect Componentswarpdotdev/warp	65k	2 repos	~4.2k	Automated safety check: Pass	AGPL-3.0	today
Cc DesignZeroZ-lab/cc-design	827	—	~2.2k	Automated safety check: Notes	None	3 mo ago

Similar skills

Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
65k GitHub starsUsed in 2 repos~4.4k tokens
Frontend & DesignAuto-check passed
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
65k GitHub starsUsed in 4 repos~4.4k tokens
Frontend & DesignAuto-check passed
Figma Design System Rules Generator
warpdotdev/warp
Creates project-specific design system rules from your codebase so coding agents implement Figma designs with your components, naming and tokens.
65k GitHub starsUsed in 3 repos~4.6k tokens
Frontend & DesignAuto-check passed
Figma Code Connect Components
warpdotdev/warp
Maps published Figma components to their code implementations with Code Connect, using the Figma MCP suggestion and mapping tools.
65k GitHub starsUsed in 2 repos~4.2k tokens
Frontend & DesignAuto-check passed
Cc Design
ZeroZ-lab/cc-design
High-fidelity HTML design and prototype creation. An agent skill from ZeroZ-lab/cc-design.
827 GitHub stars~2.2k tokensUpdated 3 mo ago
Frontend & DesignAuto-check: notes
Visual Style
calesthio/OpenMontage
Create, extract, and apply portable visual design systems via visual-style.md files.
65k GitHub stars~1.5k tokensUpdated 4 days ago
Frontend & DesignAuto-check passed

More from noemuch/bridge

Generating Figma Design
noemuch/bridge
A skill your agent uses when the user requests to design, create, build, generate, or make a new Figma component or screen — including phrases like "make a button", "design a settings page", "build…
156 GitHub stars~4.6k tokensUpdated 4 mo ago
Auto-check passed
Extracting Design System
noemuch/bridge
A skill your agent uses when the user says "setup", "setup bridge", "extract", "extract DS", "onboard", "build knowledge base", "initialize bridge", or is starting Bridge in a project for the first…
156 GitHub stars~1.8k tokensUpdated 4 mo ago
Auto-check passed
Learning From Corrections
noemuch/bridge
A skill your agent uses when the user says they adjusted the design in Figma, mentions "fix", "correct", "learn from", "I changed", "diff", "what changed", or wants the system to incorporate manual…
156 GitHub stars~2.4k tokensUpdated 4 mo ago
Auto-check passed
Shipping And Archiving
noemuch/bridge
A skill your agent uses when the user says "done", "ship it", "finish", "complete", "archive", or otherwise indicates the current design is ready to be shipped.
156 GitHub stars~1.7k tokensUpdated 4 mo ago
Auto-check passed

Works with

Figma

Questions about Using Bridge

What does Using Bridge do?

A skill your agent uses when any Bridge command is invoked (make, fix, done, setup, drop, status) or any Figma / design-system / compiler / Bridge workflow topic is raised. Using Bridge is an agent skill from noemuch/bridge. Use when any Bridge command is invoked (make, fix, done, setup, drop, status) or any Figma / design-system / compiler / Bridge workflow topic is raised.

When should I use Using Bridge?

Using Bridge fits situations like: any Bridge command is invoked (make; any Figma / design-system / compiler / Bridge workflow topic is raised.

How do I install Using Bridge in Claude Code?

Run `npx skills add noemuch/bridge --skill using-bridge -a claude-code`. Or copy the skill folder (skills/using-bridge in noemuch/bridge) into .claude/skills/using-bridge in your project. Claude Code loads it when a task matches its description.

How do I install Using Bridge in Codex?

Run `npx skills add noemuch/bridge --skill using-bridge -a codex`. Or copy the skill folder (skills/using-bridge in noemuch/bridge) into .agents/skills/using-bridge in your project. Codex loads it when a task matches its description.

Can I use Using Bridge in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add noemuch/bridge --skill using-bridge -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/using-bridge, .gemini/skills/using-bridge, .github/skills/using-bridge and .opencode/skills/using-bridge in your project.

What does Using Bridge need to run?

Going by SKILL.md and its folder, Using Bridge needs the command-line tools its instructions call (make).

Does Using Bridge access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Using Bridge safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Using Bridge use?

Using Bridge is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Using Bridge use?

About 1.4k tokens (SKILL.md is roughly 5.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Using Bridge?

Skills that share tags, products or a category with Using Bridge: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Design System Rules Generator (warpdotdev/warp, 65k stars) and Figma Code Connect Components (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Using Bridge?

noemuch (a GitHub user) maintains it in noemuch/bridge, which has 156 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on June 3, 2026.

Source: noemuch/bridge on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Using Bridge

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Using Bridge

Command Map

Drop Procedure (inline)

Skill Priority

Iron Laws (non-negotiable)

Red Flags — Rationalization → Reality

References

Conversation Language Rule

Files

Compare with similar skills

Similar skills

More from noemuch/bridge

Related

Questions about Using Bridge