Help us improve
Share bugs, ideas, or general feedback.
From bridge-ds
Bootstraps Bridge setup and extracts design systems from Figma. Handles pre-flight checks, scaffolding, Figma token management, and guide generation via MCP or REST.
npx claudepluginhub noemuch/bridge --plugin bridge-dsHow this skill is triggered — by the user, by Claude, or both
Slash command
/bridge-ds:extracting-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Single-entry-point skill for Bridge's initial setup AND subsequent re-extracts. Orchestrates the complete flow from empty repo to "docs shipped" via 8 procedural steps. Uses the `setup-orchestrator` module (Bash tool) + MCP tools (figma-console-mcp) + user prompts.
Manages Bridge design workflow for Figma: routes user intents (make, fix, done, setup, drop, status) to appropriate action skills and enforces compiler-only rules and verification checks.
Provides production reference architecture for Figma REST API integrations: design token extraction, asset exports, webhook handlers, with TypeScript project structure and CLI scripts.
Automates design system construction from repository analysis: extracts patterns, builds OKLCH token hierarchies, implements accessible components with tests, verifies via multi-reviewer panels.
Share bugs, ideas, or general feedback.
Single-entry-point skill for Bridge's initial setup AND subsequent re-extracts. Orchestrates the complete flow from empty repo to "docs shipped" via 8 procedural steps. Uses the setup-orchestrator module (Bash tool) + MCP tools (figma-console-mcp) + user prompts.
Invoke when the user:
Do NOT use if:
generating-figma-designlearning-from-correctionsshipping-and-archivingBefore starting, load:
references/transport-adapter.md (repo-root) — for MCP transport detectionRun via Bash tool:
node --version
git rev-parse --is-inside-work-tree
gh auth status
Then Node:
const { runPreflight } = require("/path/to/node_modules/@noemuch/bridge-ds/dist/lib/cli/setup-orchestrator.js");
const { gitRemote, figmaKey } = await runPreflight();
Report to user in conversation:
✓ Node 20 · git repo · gh auth OK
📍 Detected git remote: {gitRemote or "(none)"}
📍 Detected Figma URL in README: {figmaKey or "(none)"}
If figmaKey is null from pre-flight:
Paste the Figma DS file URL:
Extract the key via the regex figma\.com\/(?:design|file)\/([a-zA-Z0-9_-]+).
IMPORTANT: token must be stdin-masked. Use Claude Code's native password prompt (AskUserQuestion tool with type=password if available, otherwise instruct the user via terminal).
Paste your Figma PAT (hidden, never logged).
Press Enter to skip — we'll use the plugin path (interactive extraction only).
If provided:
validateFigmaToken(token) — if 401, abortprobeVariablesEndpoint(token, fileKey) — note plan tierIf skipped: plan to use MCP path only (no cron support until token added later).
Via Bash:
node -e "
const { scaffold } = require('@noemuch/bridge-ds/dist/lib/cli/setup-orchestrator.js');
(async () => {
const created = await scaffold({
dsName: '$DS_NAME',
figmaFileKey: '$FIGMA_KEY',
cronCadence: 'daily',
cronTime: '06:00',
});
console.log(JSON.stringify(created, null, 2));
})();
"
Report:
✓ Scaffolded files/directories:
- bridge-ds/knowledge-base/registries/
- bridge-ds/knowledge-base/recipes/
- .bridge/
- docs.config.yaml
- .github/workflows/bridge-kb-cron.yml
Via Bash:
node -e "
const { storeTokenInGitHubSecret } = require('@noemuch/bridge-ds/dist/lib/cli/setup-orchestrator.js');
(async () => {
const result = await storeTokenInGitHubSecret({
token: process.env._FIGMA_TOKEN_TEMP,
repo: '$GITHUB_REPO',
fileKey: '$FIGMA_KEY',
});
console.log(JSON.stringify(result));
})();
" 2>&1
Where _FIGMA_TOKEN_TEMP is set for the duration of this single command invocation ONLY, then unset.
Per references/transport-adapter.md:
figma_get_status via MCP → if available and setup.valid: true, use console transportDuring extract, Claude Code should display progress events from the MCP tool calls. Pattern:
figma_get_design_system_kit / figma_get_variables / figma_search_components batch, report to user:
⠋ Extracted: 42/156 components · 130/856 variables · 12/49 text styles
Sample import probe (3–5 keys per registry type). If any fail, re-extract the failing entries (max 3 attempts).
Write to bridge-ds/knowledge-base/registries/{components,variables,text-styles,icons,logos,illustrations}.json.
Report:
✓ Registries validated. Keys verified.
- Components: 156 (100%)
- Variables: 856 (100%)
- ...
Propose initial commit? [Y/n]
If Y, Bash:
git add .
git commit -m "feat: bootstrap Bridge KB via setup bridge"
git push origin $(git rev-parse --abbrev-ref HEAD)
Finally, propose first cron run:
Trigger first cron run now to verify the workflow? [Y/n]
If Y, Bash:
gh workflow run bridge-kb-cron.yml --repo $GITHUB_REPO
gh run watch
✨ Setup complete in Xm Ys.
Your DS:
Repo: https://github.com/{repo}
KB: bridge-ds/knowledge-base/registries/
Cron: .github/workflows/bridge-kb-cron.yml (daily sync)
Next steps:
• Say "make <description>" to design a new component/screen
• Say "fix" after manual Figma edits
• Say "done" to ship + extract recipes
• Daily cron runs at 06:00 UTC automatically
NEVER write a registry entry without a `key` field (hex hash for
components/icons/logos; name path for variables).
NEVER mark setup complete without validating a sample of keys (3–5 per registry) via a live import probe.
NEVER echo or log the Figma PAT. Token goes from stdin → validate
→ setGitHubSecret (stdin pipe to gh CLI). Wipe buffer afterward.
NEVER use an interactive CLI wizard. Bridge is plugin-only — use setup bridge via Claude Code.
See the full catalog at references/red-flags-catalog.md (repo-root).
Top flags for this skill:
setGitHubSecret.Evidence to surface: per-registry entry counts, key-validation probe results, scaffold file list, token mask (never full value).
lib/cli/setup-orchestrator.ts — shared orchestration logiclib/cli/token-handling.ts — stdin pipe + validatelib/kb/auto-detect.ts — git remote + Figma URL detectionreferences/transport-adapter.md (repo-root) — MCP vs REST decision