@skilly-hand/skilly-hand 0.25.1 → 0.25.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +30 -0
- package/catalog/skills/figma-mcp-0to1/SKILL.md +36 -5
- package/catalog/skills/figma-mcp-0to1/agents/canvas-creation-playbook.md +20 -8
- package/catalog/skills/figma-mcp-0to1/agents/install-auth.md +23 -6
- package/catalog/skills/figma-mcp-0to1/agents/tool-function-catalog.md +12 -5
- package/catalog/skills/figma-mcp-0to1/agents/troubleshooting-ops.md +14 -0
- package/catalog/skills/figma-mcp-0to1/assets/client-config-snippets.md +57 -12
- package/catalog/skills/figma-mcp-0to1/assets/prompt-recipes.md +24 -0
- package/catalog/skills/figma-mcp-0to1/manifest.json +3 -3
- package/catalog/skills/figma-mcp-0to1/references/official-tools-matrix.md +43 -13
- package/catalog/templates/AGENTS.template.md +20 -0
- package/package.json +1 -1
- package/packages/catalog/package.json +1 -1
- package/packages/catalog/src/index.js +10 -1
- package/packages/cli/package.json +1 -1
- package/packages/core/package.json +1 -1
- package/packages/detectors/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -16,6 +16,36 @@ All notable changes to this project are documented in this file.
|
|
|
16
16
|
### Removed
|
|
17
17
|
- _None._
|
|
18
18
|
|
|
19
|
+
## [0.25.3] - 2026-05-01
|
|
20
|
+
[View on npm](https://www.npmjs.com/package/@skilly-hand/skilly-hand/v/0.25.3)
|
|
21
|
+
|
|
22
|
+
### Added
|
|
23
|
+
- _None._
|
|
24
|
+
|
|
25
|
+
### Changed
|
|
26
|
+
- Refreshed the `figma-mcp-0to1` skill with current Figma MCP tools, setup commands, agent coverage notes, Make resources, and trusted workflow guidance.
|
|
27
|
+
|
|
28
|
+
### Fixed
|
|
29
|
+
- _None._
|
|
30
|
+
|
|
31
|
+
### Removed
|
|
32
|
+
- _None._
|
|
33
|
+
|
|
34
|
+
## [0.25.2] - 2026-04-29
|
|
35
|
+
[View on npm](https://www.npmjs.com/package/@skilly-hand/skilly-hand/v/0.25.2)
|
|
36
|
+
|
|
37
|
+
### Added
|
|
38
|
+
- _None._
|
|
39
|
+
|
|
40
|
+
### Changed
|
|
41
|
+
- Added mandatory optimizer and planning challenge gates to generated convention files so `token-optimizer`, `output-optimizer`, and `roaster` are consistently enforced across agent instruction targets.
|
|
42
|
+
|
|
43
|
+
### Fixed
|
|
44
|
+
- _None._
|
|
45
|
+
|
|
46
|
+
### Removed
|
|
47
|
+
- _None._
|
|
48
|
+
|
|
19
49
|
## [0.25.1] - 2026-04-27
|
|
20
50
|
[View on npm](https://www.npmjs.com/package/@skilly-hand/skilly-hand/v/0.25.1)
|
|
21
51
|
|
|
@@ -3,10 +3,10 @@ name: "figma-mcp-0to1"
|
|
|
3
3
|
description: "Guide users from Figma MCP installation and authentication through first canvas creation, with function-level tool coverage and operational recovery patterns."
|
|
4
4
|
skillMetadata:
|
|
5
5
|
author: "skilly-hand"
|
|
6
|
-
last-edit: "2026-
|
|
6
|
+
last-edit: "2026-05-01"
|
|
7
7
|
license: "Apache-2.0"
|
|
8
|
-
version: "1.0.
|
|
9
|
-
changelog: "
|
|
8
|
+
version: "1.0.2"
|
|
9
|
+
changelog: "Refreshed Figma MCP tools, commands, permissions, Make resources, and agent-support notes against current Figma coverage; improves setup accuracy and 0-to-1 workflow reliability; affects figma-mcp-0to1 docs, references, assets, and metadata"
|
|
10
10
|
auto-invoke: "Installing, configuring, or using Figma MCP from setup through first canvas creation"
|
|
11
11
|
allowed-tools:
|
|
12
12
|
- "Read"
|
|
@@ -30,6 +30,7 @@ Use this skill when:
|
|
|
30
30
|
- You need a reliable path from connection to first successful canvas output.
|
|
31
31
|
- You need to choose the right Figma MCP function for a task.
|
|
32
32
|
- You need operational recovery for permission, auth, tool-loading, or rate-limit failures.
|
|
33
|
+
- You need to understand which skilly-hand agents overlap with Figma-supported MCP clients.
|
|
33
34
|
|
|
34
35
|
Do not use this skill for:
|
|
35
36
|
|
|
@@ -57,14 +58,17 @@ Choose subskills by intent:
|
|
|
57
58
|
1. Set up server transport and authentication.
|
|
58
59
|
2. Verify connectivity with a low-risk call (`whoami` on remote, or a read tool).
|
|
59
60
|
3. Select the smallest tool that solves the immediate task.
|
|
60
|
-
4.
|
|
61
|
-
5.
|
|
61
|
+
4. For writes, inspect existing file/design-system context before creating new content.
|
|
62
|
+
5. Run creation in short, validated steps (avoid large one-shot requests).
|
|
63
|
+
6. If anything fails, use troubleshooting flow before retrying.
|
|
62
64
|
|
|
63
65
|
---
|
|
64
66
|
|
|
65
67
|
## Core Rules
|
|
66
68
|
|
|
67
69
|
- Prefer remote server for broadest feature coverage and write workflows.
|
|
70
|
+
- Treat official Figma MCP docs as the source of truth for official tools, supported clients, permissions, and limits.
|
|
71
|
+
- Keep client-specific helpers separate from official Figma MCP tools.
|
|
68
72
|
- Treat write actions as staged operations, not a single large operation.
|
|
69
73
|
- Use link-based node targeting for reliable design-context extraction.
|
|
70
74
|
- Keep a clear distinction between read context tools and write/canvas tools.
|
|
@@ -72,6 +76,18 @@ Choose subskills by intent:
|
|
|
72
76
|
|
|
73
77
|
---
|
|
74
78
|
|
|
79
|
+
## Agent Coverage
|
|
80
|
+
|
|
81
|
+
Figma MCP support and skilly-hand installation support are related but not identical:
|
|
82
|
+
|
|
83
|
+
| Coverage | Agents or Clients | Guidance |
|
|
84
|
+
| --- | --- | --- |
|
|
85
|
+
| Figma-supported and skilly-hand-supported | `codex`, `claude`, `cursor`, `copilot` | Include concrete setup paths in this skill. |
|
|
86
|
+
| Figma-supported but not skilly-hand-native | VS Code, Warp, Augment, Factory, Firebender | Mention as Figma-supported clients, but do not add skilly-hand install assumptions. |
|
|
87
|
+
| skilly-hand-supported but not source-backed in current Figma docs | `gemini`, `antigravity`, `windsurf`, `trae` | Keep broad `agentSupport`; document that Figma-specific setup may require client documentation or manual MCP config. |
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
75
91
|
## Key References
|
|
76
92
|
|
|
77
93
|
- Full function matrix: [references/official-tools-matrix.md](references/official-tools-matrix.md)
|
|
@@ -86,6 +102,21 @@ Choose subskills by intent:
|
|
|
86
102
|
# Codex CLI (manual remote setup)
|
|
87
103
|
codex mcp add figma --url https://mcp.figma.com/mcp
|
|
88
104
|
|
|
105
|
+
# Claude Code plugin setup
|
|
106
|
+
claude plugin install figma@claude-plugins-official
|
|
107
|
+
|
|
108
|
+
# Claude Code manual remote setup
|
|
109
|
+
claude mcp add --transport http figma https://mcp.figma.com/mcp
|
|
110
|
+
|
|
111
|
+
# Claude Code manual remote setup, user scope
|
|
112
|
+
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
|
|
113
|
+
|
|
114
|
+
# Claude Code manual desktop setup
|
|
115
|
+
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
|
|
116
|
+
|
|
117
|
+
# Cursor plugin setup
|
|
118
|
+
/add-plugin figma
|
|
119
|
+
|
|
89
120
|
# Verify catalog integrity in this repository
|
|
90
121
|
npm run catalog:check
|
|
91
122
|
```
|
|
@@ -7,14 +7,17 @@ Deliver a first successful Figma canvas result with low risk and clear verificat
|
|
|
7
7
|
## Safe 0-to-1 Workflow
|
|
8
8
|
|
|
9
9
|
1. **Create or choose file context**
|
|
10
|
-
- New file path: call `create_new_file`.
|
|
10
|
+
- New file path: run `whoami` if needed to obtain a plan/team context, then call `create_new_file`.
|
|
11
11
|
- Existing file path: confirm URL/node target and permissions.
|
|
12
|
+
- Live web UI path: use `generate_figma_design` to capture to a new file, existing file, or clipboard.
|
|
13
|
+
- Make path: use MCP resources from a Figma Make link to fetch project/file context before implementation.
|
|
12
14
|
|
|
13
15
|
2. **Verify identity and access**
|
|
14
16
|
- Run `whoami` (remote) to confirm account/plan.
|
|
15
17
|
- If access mismatch appears, stop and fix permissions first.
|
|
16
18
|
|
|
17
19
|
3. **Read before write**
|
|
20
|
+
- Use `get_libraries` if the Codex Figma plugin exposes it and library scope matters.
|
|
18
21
|
- Call `search_design_system` to reuse components/variables.
|
|
19
22
|
- Optionally call `get_metadata` for structure baseline.
|
|
20
23
|
|
|
@@ -23,6 +26,7 @@ Deliver a first successful Figma canvas result with low risk and clear verificat
|
|
|
23
26
|
- Create one frame.
|
|
24
27
|
- Add one text node.
|
|
25
28
|
- Apply one style/token decision.
|
|
29
|
+
- For FigJam, create or update one small board object such as a sticky, section, connector, or shape.
|
|
26
30
|
|
|
27
31
|
5. **Validate state**
|
|
28
32
|
- Inspect with `get_metadata` or `get_screenshot`.
|
|
@@ -36,19 +40,27 @@ Deliver a first successful Figma canvas result with low risk and clear verificat
|
|
|
36
40
|
|
|
37
41
|
### Diagram-first flow (FigJam)
|
|
38
42
|
|
|
39
|
-
1. `
|
|
40
|
-
2. `generate_diagram`
|
|
41
|
-
3. Validate diagram structure and labels
|
|
43
|
+
1. Call `generate_diagram` from plain-language workflow description or Mermaid syntax.
|
|
44
|
+
2. Let `generate_diagram` create a new FigJam file, or provide an existing FigJam file key.
|
|
45
|
+
3. Validate diagram structure and labels.
|
|
42
46
|
|
|
43
47
|
### Code-to-canvas flow
|
|
44
48
|
|
|
45
|
-
1. Ask client to start local app capture workflow
|
|
46
|
-
2.
|
|
47
|
-
3. Open generated file and validate generated layers
|
|
48
|
-
4. Follow up with `use_figma` for cleanup/polish
|
|
49
|
+
1. Ask client to start local app capture workflow.
|
|
50
|
+
2. Use `generate_figma_design` to capture screen/element states to a new file, existing file, or clipboard.
|
|
51
|
+
3. Open generated file and validate generated layers.
|
|
52
|
+
4. Follow up with `use_figma` for cleanup/polish.
|
|
53
|
+
|
|
54
|
+
### Make-to-code context flow
|
|
55
|
+
|
|
56
|
+
1. Provide a valid Figma Make link.
|
|
57
|
+
2. Use MCP resources to list available project files.
|
|
58
|
+
3. Fetch only the files needed for the task.
|
|
59
|
+
4. Implement or refine the production code using that Make context.
|
|
49
60
|
|
|
50
61
|
## Guardrails
|
|
51
62
|
|
|
52
63
|
- Do not run large multi-section writes as the first operation.
|
|
53
64
|
- Always return to read/verify tools after each write step.
|
|
54
65
|
- If a write fails, use troubleshooting flow before retrying.
|
|
66
|
+
- Do not call `create_new_file` before `generate_diagram`; diagrams can create their own FigJam file.
|
|
@@ -8,8 +8,8 @@ Get Figma MCP connected and authenticated, with a verified first tool call.
|
|
|
8
8
|
|
|
9
9
|
| Mode | Endpoint | Recommended | Notes |
|
|
10
10
|
| --- | --- | --- | --- |
|
|
11
|
-
| Remote | `https://mcp.figma.com/mcp` | Yes | Broadest
|
|
12
|
-
| Desktop | `http://127.0.0.1:3845/mcp` | Only for special org
|
|
11
|
+
| Remote | `https://mcp.figma.com/mcp` | Yes | Broadest feature coverage, including write-to-canvas, code-to-canvas, diagrams, and file creation. |
|
|
12
|
+
| Desktop | `http://127.0.0.1:3845/mcp` | Only for local selection-based or special org needs | Requires Figma desktop app + Dev Mode desktop MCP toggle; narrower workflow coverage. |
|
|
13
13
|
|
|
14
14
|
## Codex Setup
|
|
15
15
|
|
|
@@ -26,15 +26,29 @@ codex mcp add figma --url https://mcp.figma.com/mcp
|
|
|
26
26
|
|
|
27
27
|
When prompted, authenticate the server.
|
|
28
28
|
|
|
29
|
-
## Other
|
|
29
|
+
## Other Supported Client Paths
|
|
30
30
|
|
|
31
|
+
Use concrete setup paths for agents that are both Figma-supported and skilly-hand-supported:
|
|
32
|
+
|
|
33
|
+
- Claude Code plugin: `claude plugin install figma@claude-plugins-official`
|
|
34
|
+
- Claude Code manual remote: `claude mcp add --transport http figma https://mcp.figma.com/mcp`
|
|
35
|
+
- Claude Code user-scope remote: `claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp`
|
|
36
|
+
- Claude Code manual desktop: `claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp`
|
|
37
|
+
- Cursor plugin: `/add-plugin figma`
|
|
38
|
+
- Cursor manual: add the remote or desktop endpoint in MCP settings.
|
|
39
|
+
- Copilot: use the VS Code MCP route and enable GitHub Copilot in the client.
|
|
31
40
|
- VS Code: add HTTP MCP server in `mcp.json` using the remote endpoint.
|
|
32
|
-
- Cursor: add MCP server in MCP settings or use its Figma plugin flow.
|
|
33
|
-
- Claude Code: `claude mcp add --transport http figma https://mcp.figma.com/mcp`.
|
|
34
|
-
- Gemini CLI: install Figma extension from `figma/mcp-server-guide`, then run auth command in CLI.
|
|
35
41
|
|
|
36
42
|
See exact snippets in [../assets/client-config-snippets.md](../assets/client-config-snippets.md).
|
|
37
43
|
|
|
44
|
+
## Agent Coverage Notes
|
|
45
|
+
|
|
46
|
+
| Coverage | Agents or Clients | Guidance |
|
|
47
|
+
| --- | --- | --- |
|
|
48
|
+
| Figma-supported and skilly-hand-supported | `codex`, `claude`, `cursor`, `copilot` | Use the commands and setup paths above. |
|
|
49
|
+
| Figma-supported but not skilly-hand-native | VS Code, Warp, Augment, Factory, Firebender | Follow Figma/client setup docs; do not assume skilly-hand skill install paths. |
|
|
50
|
+
| skilly-hand-supported but not source-backed in current Figma docs | `gemini`, `antigravity`, `windsurf`, `trae` | Keep install support, but verify Figma MCP setup through that client's docs or manual MCP config. |
|
|
51
|
+
|
|
38
52
|
## Verification Checklist
|
|
39
53
|
|
|
40
54
|
1. Confirm server appears in client MCP list.
|
|
@@ -42,13 +56,16 @@ See exact snippets in [../assets/client-config-snippets.md](../assets/client-con
|
|
|
42
56
|
- Remote: `whoami` (recommended)
|
|
43
57
|
- Desktop-only contexts: `get_metadata` or `get_design_context` on a known node
|
|
44
58
|
3. Confirm the authenticated user has access to the target Figma file.
|
|
59
|
+
4. For write workflows, confirm the authenticated seat can edit the target file.
|
|
45
60
|
|
|
46
61
|
## First Prompt After Setup
|
|
47
62
|
|
|
48
63
|
- "Use Figma MCP `whoami` and show which account is authenticated."
|
|
49
64
|
- "Use Figma MCP `get_design_context` for this node URL and summarize dimensions, layout, and variables."
|
|
65
|
+
- "Using this Figma file URL, inspect the current libraries before creating anything new."
|
|
50
66
|
|
|
51
67
|
## Notes
|
|
52
68
|
|
|
53
69
|
- If tools do not appear, restart MCP client session and retry authentication.
|
|
54
70
|
- If permissions fail, verify file sharing and plan seat alignment before retry.
|
|
71
|
+
- If a client does not expose an official tool, check the active tool list before changing the workflow.
|
|
@@ -7,20 +7,23 @@ Pick the smallest correct Figma MCP function for the task, with predictable inpu
|
|
|
7
7
|
## Start Here
|
|
8
8
|
|
|
9
9
|
1. Read [../references/official-tools-matrix.md](../references/official-tools-matrix.md).
|
|
10
|
-
2. Identify whether task is read, write, design-system search, code-connect, or
|
|
10
|
+
2. Identify whether task is read, write, design-system search, code-connect, diagram, live UI capture, or Make resource context.
|
|
11
11
|
3. Prefer read-first calls before write calls on unknown files.
|
|
12
12
|
|
|
13
13
|
## Selection Rules
|
|
14
14
|
|
|
15
15
|
- Need full style/layout context for implementation: `get_design_context`.
|
|
16
|
+
- Need Figma Make project/file context: use MCP resources if the client supports resources.
|
|
16
17
|
- Output too large or structure-first pass: `get_metadata` first, then targeted `get_design_context`.
|
|
17
18
|
- Need variables/tokens only: `get_variable_defs`.
|
|
18
19
|
- Need visual reference: `get_screenshot`.
|
|
19
20
|
- Need FigJam extraction: `get_figjam`.
|
|
21
|
+
- Need library discovery in Codex before a scoped search: `get_libraries` if the Codex Figma plugin exposes it.
|
|
20
22
|
- Need design-system discovery before creating: `search_design_system`.
|
|
21
|
-
- Need to write/create/update content: `use_figma` (remote write
|
|
22
|
-
- Need
|
|
23
|
-
- Need
|
|
23
|
+
- Need to write/create/update Figma Design or FigJam content: `use_figma` (remote write workflow; use `figma-use` skill when available).
|
|
24
|
+
- Need first-time live web UI capture: `generate_figma_design`.
|
|
25
|
+
- Need new blank file: `create_new_file` (requires plan/team context such as `planKey` in some clients).
|
|
26
|
+
- Need Mermaid-to-FigJam: `generate_diagram` (creates its own FigJam file unless an existing FigJam file key is provided).
|
|
24
27
|
- Need code-connect lookup/update: `get_code_connect_map`, `add_code_connect_map`, suggestion/confirm functions.
|
|
25
28
|
|
|
26
29
|
## Prompting Pattern
|
|
@@ -28,11 +31,15 @@ Pick the smallest correct Figma MCP function for the task, with predictable inpu
|
|
|
28
31
|
Use direct tool-trigger language when selection is ambiguous:
|
|
29
32
|
|
|
30
33
|
- "Use Figma MCP `get_metadata` first, then `get_design_context` only for the selected child nodes."
|
|
34
|
+
- "Use `get_libraries` if available, then use Figma MCP `search_design_system` for the selected library."
|
|
31
35
|
- "Use Figma MCP `search_design_system` before creating any new component."
|
|
36
|
+
- "Use Figma MCP `generate_figma_design` to capture this live web UI to a new Figma file."
|
|
32
37
|
- "Use Figma MCP `create_new_file`, then `use_figma` to add a first frame and typography style."
|
|
38
|
+
- "Use MCP resources from this Figma Make link and fetch only the files needed for implementation."
|
|
33
39
|
|
|
34
40
|
## Remote/Desktop Caveats
|
|
35
41
|
|
|
36
42
|
- Remote-only flags are tracked in the matrix; confirm availability before relying on those functions.
|
|
37
|
-
- Write-to-canvas flows are remote-
|
|
43
|
+
- Write-to-canvas flows are remote-only in current official guidance.
|
|
38
44
|
- Desktop mode is valid for local selection-based extraction, but with narrower workflow coverage.
|
|
45
|
+
- Selection-based prompting works with the desktop server; remote workflows should use Figma file or node links.
|
|
@@ -14,6 +14,8 @@ Failure observed?
|
|
|
14
14
|
-> Verify link format, run whoami, confirm seat/plan and file access
|
|
15
15
|
-> Rate-limit behavior
|
|
16
16
|
-> Reduce read call volume, stage calls, wait/backoff, upgrade seat/plan if needed
|
|
17
|
+
-> Missing expected tool
|
|
18
|
+
-> Compare active client tools with official matrix, then choose a supported fallback
|
|
17
19
|
-> Write failure
|
|
18
20
|
-> Stop retries, inspect state with read tools, fix cause, retry scoped step
|
|
19
21
|
```
|
|
@@ -35,15 +37,27 @@ Failure observed?
|
|
|
35
37
|
### Rate limiting
|
|
36
38
|
|
|
37
39
|
- Read-heavy calls are rate-limited by plan/seat.
|
|
40
|
+
- Starter plan or View/Collab seats are limited to low monthly usage.
|
|
41
|
+
- Dev/Full seats on Professional or Organization plans have higher daily usage.
|
|
42
|
+
- Enterprise Dev/Full seats have the highest documented daily usage.
|
|
43
|
+
- Officially documented exempt tools include `add_code_connect_map`, `generate_figma_design`, and `whoami`.
|
|
38
44
|
- Use smaller selections and fewer repeated reads.
|
|
39
45
|
- Prefer `get_metadata` preflight before broad `get_design_context`.
|
|
40
46
|
- Batch intent into fewer, targeted calls.
|
|
41
47
|
|
|
48
|
+
### Missing expected tools
|
|
49
|
+
|
|
50
|
+
- Official Figma MCP tools may not be exposed by every client plugin surface.
|
|
51
|
+
- Client-specific helpers, such as Codex `get_libraries`, are not official substitutes for every client.
|
|
52
|
+
- Prefer a documented fallback rather than forcing an unavailable tool.
|
|
53
|
+
|
|
42
54
|
### Write step errors
|
|
43
55
|
|
|
44
56
|
- Do not immediately retry the exact same large request.
|
|
45
57
|
- Split into smaller write actions.
|
|
46
58
|
- Verify partial outcomes using read tools before next step.
|
|
59
|
+
- For `create_new_file`, ensure a plan/team context is available.
|
|
60
|
+
- For `generate_diagram`, do not pre-create a blank FigJam file unless adding to an existing file is the explicit goal.
|
|
47
61
|
|
|
48
62
|
## Scoped Retry Pattern
|
|
49
63
|
|
|
@@ -14,6 +14,37 @@
|
|
|
14
14
|
codex mcp add figma --url https://mcp.figma.com/mcp
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
+
## Codex App
|
|
18
|
+
|
|
19
|
+
Use the Figma plugin/app install path in Codex when available, then complete the OAuth authentication flow.
|
|
20
|
+
|
|
21
|
+
## Claude Code Plugin
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
claude plugin install figma@claude-plugins-official
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Claude Code (manual remote)
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
claude mcp add --transport http figma https://mcp.figma.com/mcp
|
|
31
|
+
claude mcp list
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Claude Code (manual remote, user scope)
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
|
|
38
|
+
claude mcp list
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Claude Code (manual desktop)
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
|
|
45
|
+
claude mcp list
|
|
46
|
+
```
|
|
47
|
+
|
|
17
48
|
## VS Code `mcp.json` (remote)
|
|
18
49
|
|
|
19
50
|
```json
|
|
@@ -53,24 +84,38 @@ codex mcp add figma --url https://mcp.figma.com/mcp
|
|
|
53
84
|
}
|
|
54
85
|
```
|
|
55
86
|
|
|
56
|
-
##
|
|
87
|
+
## Cursor Plugin
|
|
57
88
|
|
|
58
89
|
```bash
|
|
59
|
-
|
|
60
|
-
claude mcp list
|
|
90
|
+
/add-plugin figma
|
|
61
91
|
```
|
|
62
92
|
|
|
63
|
-
##
|
|
93
|
+
## Cursor MCP config (desktop)
|
|
64
94
|
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
|
|
95
|
+
```json
|
|
96
|
+
{
|
|
97
|
+
"mcpServers": {
|
|
98
|
+
"figma-desktop": {
|
|
99
|
+
"url": "http://127.0.0.1:3845/mcp"
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
68
103
|
```
|
|
69
104
|
|
|
70
|
-
##
|
|
105
|
+
## Other Desktop MCP Config
|
|
71
106
|
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
107
|
+
```json
|
|
108
|
+
{
|
|
109
|
+
"mcpServers": {
|
|
110
|
+
"figma-desktop": {
|
|
111
|
+
"url": "http://127.0.0.1:3845/mcp"
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
76
115
|
```
|
|
116
|
+
|
|
117
|
+
## Agent Coverage Notes
|
|
118
|
+
|
|
119
|
+
- Figma-supported and skilly-hand-supported: `codex`, `claude`, `cursor`, `copilot`.
|
|
120
|
+
- Figma-supported but not skilly-hand-native: VS Code, Warp, Augment, Factory, Firebender.
|
|
121
|
+
- skilly-hand-supported but not source-backed in current Figma docs: `gemini`, `antigravity`, `windsurf`, `trae`.
|
|
@@ -4,31 +4,55 @@
|
|
|
4
4
|
|
|
5
5
|
- "Set up Figma MCP remote server and verify with `whoami`."
|
|
6
6
|
- "Use Figma MCP `whoami` and tell me which account and plans are active."
|
|
7
|
+
- "Check whether this client exposes the Figma MCP tools I need before starting."
|
|
7
8
|
|
|
8
9
|
## Read Context
|
|
9
10
|
|
|
10
11
|
- "Use `get_design_context` for this node URL and return layout, spacing, typography, and variables."
|
|
11
12
|
- "Use `get_metadata` first, then call `get_design_context` only for the button and header nodes."
|
|
12
13
|
- "Use `get_variable_defs` for this node and list token names with resolved values."
|
|
14
|
+
- "Use `get_screenshot` for this node and compare it against the generated implementation."
|
|
15
|
+
- "Use Figma MCP resources from this Figma Make link and fetch only the files needed for this component."
|
|
13
16
|
|
|
14
17
|
## Design-System and Code Connect
|
|
15
18
|
|
|
19
|
+
- "Use `get_libraries` if available, then search only the relevant design libraries."
|
|
16
20
|
- "Use `search_design_system` to find an existing card and button component before creating anything new."
|
|
21
|
+
- "Use `search_design_system` to find primary color, typography, and spacing variables."
|
|
17
22
|
- "Use `get_code_connect_map` for this node and show mapped source locations."
|
|
18
23
|
- "Use `add_code_connect_map` to map this Figma node to my component path."
|
|
24
|
+
- "Use `get_code_connect_suggestions`, then confirm mappings with `send_code_connect_mappings` if the suggestions are correct."
|
|
19
25
|
|
|
20
26
|
## First Canvas Creation
|
|
21
27
|
|
|
28
|
+
- "Use `whoami` to choose the right plan, then use `create_new_file` to create a new design file named 'MCP First Canvas'."
|
|
22
29
|
- "Use `create_new_file` to create a new design file named 'MCP First Canvas'."
|
|
23
30
|
- "Use `use_figma` to create one frame, add one title text layer, and apply auto layout spacing."
|
|
24
31
|
- "After the write, use `get_screenshot` to verify the result."
|
|
32
|
+
- "Before writing, inspect the file and use `search_design_system` for existing components or variables."
|
|
33
|
+
|
|
34
|
+
## Live UI Capture
|
|
35
|
+
|
|
36
|
+
- "Start my local app and use `generate_figma_design` to capture the current screen into a new Figma file."
|
|
37
|
+
- "Use `generate_figma_design` to capture this URL into the existing Figma file."
|
|
38
|
+
- "Use `generate_figma_design` to capture this page to my clipboard."
|
|
25
39
|
|
|
26
40
|
## FigJam Flows
|
|
27
41
|
|
|
28
42
|
- "Use `create_new_file` to create a new FigJam board for architecture planning."
|
|
29
43
|
- "Use `generate_diagram` to create a sequence diagram for login and checkout flow."
|
|
44
|
+
- "Use `generate_diagram` to add an ERD to this existing FigJam file."
|
|
45
|
+
- "Use `use_figma` to organize this FigJam board into sections with stickies and connectors."
|
|
46
|
+
- "Use `use_figma` to update this architecture diagram with a new service."
|
|
47
|
+
|
|
48
|
+
## Agent Coverage
|
|
49
|
+
|
|
50
|
+
- "For this agent, tell me whether Figma officially supports its MCP setup path and which command/config I should use."
|
|
51
|
+
- "Compare this client's active Figma tools against the official Figma MCP matrix before choosing a workflow."
|
|
30
52
|
|
|
31
53
|
## Troubleshooting
|
|
32
54
|
|
|
33
55
|
- "I got a permission error. Use `whoami` and tell me what to check next."
|
|
34
56
|
- "I am rate-limited. Switch to a staged workflow with fewer `get_design_context` calls."
|
|
57
|
+
- "This client does not expose `get_screenshot`. Choose the closest supported verification path."
|
|
58
|
+
- "My `create_new_file` call failed. Check whether a plan key or team context is missing."
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
"agentSupport": ["codex", "claude", "cursor", "gemini", "copilot", "antigravity", "windsurf", "trae"],
|
|
11
11
|
"skillMetadata": {
|
|
12
12
|
"author": "skilly-hand",
|
|
13
|
-
"last-edit": "2026-
|
|
13
|
+
"last-edit": "2026-05-01",
|
|
14
14
|
"license": "Apache-2.0",
|
|
15
|
-
"version": "1.0.
|
|
16
|
-
"changelog": "
|
|
15
|
+
"version": "1.0.2",
|
|
16
|
+
"changelog": "Refreshed Figma MCP tools, commands, permissions, Make resources, and agent-support notes against current Figma coverage; improves setup accuracy and 0-to-1 workflow reliability; affects figma-mcp-0to1 docs, references, assets, and metadata",
|
|
17
17
|
"auto-invoke": "Installing, configuring, or using Figma MCP from setup through first canvas creation",
|
|
18
18
|
"allowed-modes": [
|
|
19
19
|
"install-auth",
|
|
@@ -1,31 +1,56 @@
|
|
|
1
|
-
# Official Figma MCP Tools Matrix (As of 2026-
|
|
1
|
+
# Official Figma MCP Tools Matrix (As of 2026-05-01)
|
|
2
2
|
|
|
3
|
-
This matrix tracks the official Figma MCP tool/function set in current Figma documentation.
|
|
3
|
+
This matrix tracks the official Figma MCP tool/function set in current Figma documentation. Treat it as the source of truth for official tool names, supported file types, and remote-only status. Client-specific helpers are listed separately.
|
|
4
4
|
|
|
5
5
|
## Coverage Matrix
|
|
6
6
|
|
|
7
7
|
| Tool | Primary Purpose | Typical Input | Supported File Types | Availability Notes |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `generate_figma_design` | Generate design layers from live web UI
|
|
10
|
-
| `get_design_context` | Fetch rich design context for implementation | Figma URL or `fileKey` + `nodeId` | Figma Design | Read tool;
|
|
9
|
+
| `generate_figma_design` | Generate editable design layers from live web UI | URL/local app capture context | Figma Design output | Remote-only; select clients only; can output to new file, existing file, or clipboard; exempt from standard read limits. |
|
|
10
|
+
| `get_design_context` | Fetch rich design context for implementation | Figma URL or `fileKey` + `nodeId` | Figma Design, Figma Make | Read tool; remote server requires link-based node targeting; desktop can use selection-based prompts. |
|
|
11
11
|
| `get_variable_defs` | Retrieve variable/token definitions | `fileKey` + `nodeId` | Figma Design | Best for token-only extraction. |
|
|
12
12
|
| `get_code_connect_map` | Read existing Code Connect mappings | `fileKey` + `nodeId` | Figma Design | Use to inspect mapping before updates. |
|
|
13
13
|
| `add_code_connect_map` | Add mapping from node to code component | `fileKey`, `nodeId`, source details | Figma Design | Write-style utility; exempt from read rate limits in docs. |
|
|
14
|
-
| `get_screenshot` | Render node screenshot for visual verification | `fileKey` + `nodeId` | Figma Design | Useful verification after write steps. |
|
|
14
|
+
| `get_screenshot` | Render node screenshot for visual verification | `fileKey` + `nodeId` | Figma Design, FigJam | Useful verification after write steps and for preserving visual fidelity. |
|
|
15
15
|
| `create_design_system_rules` | Generate design-system rules prompt/scaffold | Framework/language context | No file context required | Use to enforce repeatable design-system workflows. |
|
|
16
16
|
| `get_metadata` | Sparse XML structure (ids, names, hierarchy, bounds) | Selection or `fileKey` + `nodeId` | Figma Design | Preferred preflight for large contexts. |
|
|
17
17
|
| `get_figjam` | Fetch FigJam metadata (and node visuals) | `fileKey` + `nodeId` | FigJam | FigJam-specific extraction. |
|
|
18
|
-
| `generate_diagram` | Create FigJam diagram from Mermaid or natural language intent | Diagram description or Mermaid syntax | No file context required |
|
|
18
|
+
| `generate_diagram` | Create FigJam diagram from Mermaid or natural language intent | Diagram description or Mermaid syntax | No file context required | Remote-only; supports flowchart, gantt, state, sequence, architecture, and ERD workflows. |
|
|
19
19
|
| `whoami` | Show authenticated Figma identity, plans, and seat types | None | No file context required | Remote-only in official docs; exempt from read rate limits. |
|
|
20
20
|
| `get_code_connect_suggestions` | Suggest candidate node-to-code mappings | File context + repo context | Figma Design | Usually part of Code Connect workflows. |
|
|
21
21
|
| `send_code_connect_mappings` | Confirm/persist mapping suggestions | Suggestions payload | Figma Design | Follow-up action after suggestion generation. |
|
|
22
|
-
| `use_figma` | General-purpose write/edit/delete/inspect
|
|
23
|
-
| `search_design_system` | Search libraries for components, variables, styles | Query text and optional type narrowing | Figma Design |
|
|
24
|
-
| `create_new_file` | Create new blank Design or FigJam file |
|
|
22
|
+
| `use_figma` | General-purpose write/edit/delete/inspect via Plugin API workflow | Task instructions and file context | Figma Design, FigJam | Remote-only; default direct write/update path; best used with the `figma-use` skill when available. |
|
|
23
|
+
| `search_design_system` | Search libraries for components, variables, styles | Query text and optional type narrowing | Figma Design | Remote-only; use before creating new artifacts when design-system reuse is relevant. |
|
|
24
|
+
| `create_new_file` | Create new blank Design or FigJam file | File name, file type, plan context | No file context required | Remote-only; creates files in drafts or a project; requires plan/team context in some clients. |
|
|
25
|
+
|
|
26
|
+
## Figma Make Resources
|
|
27
|
+
|
|
28
|
+
Figma Make project context is exposed through MCP resources on clients that support MCP resources. Use a valid Figma Make link, let the client list available project files, and fetch only the files needed for the implementation task.
|
|
29
|
+
|
|
30
|
+
## Codex Plugin Helpers
|
|
31
|
+
|
|
32
|
+
The Codex Figma plugin may expose helper tools beyond the current official tools page. Keep these documented as client-specific helpers:
|
|
33
|
+
|
|
34
|
+
| Helper | Purpose | Notes |
|
|
35
|
+
| --- | --- | --- |
|
|
36
|
+
| `get_libraries` | List libraries associated with a Figma file | Use before scoped `search_design_system`; not listed on the official Figma tools page as of this matrix date. |
|
|
37
|
+
|
|
38
|
+
Some official Figma MCP tools may not be exposed by every client plugin surface. Prefer the active client's tool list over assumptions when executing.
|
|
39
|
+
|
|
40
|
+
## Client and Agent Coverage
|
|
41
|
+
|
|
42
|
+
| Coverage | Agents or Clients | Guidance |
|
|
43
|
+
| --- | --- | --- |
|
|
44
|
+
| Figma-supported and skilly-hand-supported | `codex`, `claude`, `cursor`, `copilot` | Include concrete setup paths and prompts in this skill. |
|
|
45
|
+
| Figma-supported but not skilly-hand-native | VS Code, Warp, Augment, Factory, Firebender | Mention as Figma-supported clients; do not add skilly-hand install assumptions. |
|
|
46
|
+
| skilly-hand-supported but not source-backed in current Figma docs | `gemini`, `antigravity`, `windsurf`, `trae` | Keep broad install support; advise manual MCP/client docs for Figma-specific setup. |
|
|
25
47
|
|
|
26
48
|
## Rate-Limit Notes (Official)
|
|
27
49
|
|
|
28
|
-
- Read tools are subject to seat/plan limits.
|
|
50
|
+
- Read tools are subject to seat/plan limits and per-minute limits.
|
|
51
|
+
- Starter plan or View/Collab seats: up to 6 tool calls per month.
|
|
52
|
+
- Professional or Organization with Dev/Full seat: up to 200 tool calls per day.
|
|
53
|
+
- Enterprise with Dev/Full seat: up to 600 tool calls per day.
|
|
29
54
|
- Officially documented exempt tools include:
|
|
30
55
|
- `add_code_connect_map`
|
|
31
56
|
- `generate_figma_design`
|
|
@@ -35,9 +60,11 @@ This matrix tracks the official Figma MCP tool/function set in current Figma doc
|
|
|
35
60
|
|
|
36
61
|
1. Start with `whoami` when authentication or permissions are uncertain.
|
|
37
62
|
2. Use `get_metadata` before `get_design_context` for large files.
|
|
38
|
-
3. Use `search_design_system`
|
|
39
|
-
4.
|
|
40
|
-
5. Use `
|
|
63
|
+
3. Use `get_libraries` where available, then `search_design_system` for scoped design-system reuse.
|
|
64
|
+
4. Use `generate_figma_design` for first-time live web UI capture.
|
|
65
|
+
5. Use `use_figma` for direct Figma Design or FigJam writes and updates.
|
|
66
|
+
6. Keep `use_figma` calls small and validate after each step.
|
|
67
|
+
7. Use `get_screenshot` as final visual verification after edits when available.
|
|
41
68
|
|
|
42
69
|
## Sources
|
|
43
70
|
|
|
@@ -45,5 +72,8 @@ This matrix tracks the official Figma MCP tool/function set in current Figma doc
|
|
|
45
72
|
- https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/
|
|
46
73
|
- https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
|
|
47
74
|
- https://developers.figma.com/docs/figma-mcp-server/local-server-installation/
|
|
75
|
+
- https://developers.figma.com/docs/figma-mcp-server/write-to-canvas/
|
|
76
|
+
- https://developers.figma.com/docs/figma-mcp-server/code-to-canvas/
|
|
77
|
+
- https://developers.figma.com/docs/figma-mcp-server/bringing-make-context-to-your-agent/
|
|
48
78
|
- https://developers.figma.com/docs/figma-mcp-server/plans-access-and-permissions/
|
|
49
79
|
- https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server
|
|
@@ -16,6 +16,26 @@ This file is generated by `skilly-hand`.
|
|
|
16
16
|
| ----- | ------- | ---- |
|
|
17
17
|
{{skillsTable}}
|
|
18
18
|
|
|
19
|
+
### Mandatory Skill Gate (Must Use / Must Read)
|
|
20
|
+
|
|
21
|
+
This gate has global precedence and applies to every user interaction across all supported agent conventions/files.
|
|
22
|
+
|
|
23
|
+
1. Always run `token-optimizer` first to classify complexity and set the minimum viable reasoning depth.
|
|
24
|
+
2. Always run `output-optimizer` immediately after `token-optimizer` for response-shape control.
|
|
25
|
+
3. `output-optimizer` mode policy:
|
|
26
|
+
- Default: use `step-brief` when there is no explicit mode or strong phrasing signal.
|
|
27
|
+
- Override: if user explicitly requests a mode (for example `mode: step-brief`), that explicit mode wins.
|
|
28
|
+
- Persistence: keep the explicitly requested mode active until the user asks for a different mode.
|
|
29
|
+
|
|
30
|
+
### Mandatory Planning Challenge Gate (Must Use / Must Read)
|
|
31
|
+
|
|
32
|
+
This gate is mandatory whenever the user proposes, requests, or evaluates a plan of any kind.
|
|
33
|
+
|
|
34
|
+
1. Always run `roaster` before agreeing with or executing a plan.
|
|
35
|
+
2. Use `roaster` to critique assumptions, scope, sequencing, risks, and verification.
|
|
36
|
+
3. Keep the critique constructive and actionable; target the plan, not the person.
|
|
37
|
+
4. Skip only for emergencies, trivial one-step tasks, or sensitive contexts where roast tone would be inappropriate.
|
|
38
|
+
|
|
19
39
|
## When
|
|
20
40
|
|
|
21
41
|
### Auto-invoke Triggers
|
package/package.json
CHANGED
|
@@ -543,9 +543,18 @@ export function renderAgentsMarkdown({ skills, detections, generatedAt, projectN
|
|
|
543
543
|
" - Override: if user explicitly requests a mode (for example `mode: step-brief`), that explicit mode wins.",
|
|
544
544
|
" - Persistence: keep the explicitly requested mode active until the user asks for a different mode.",
|
|
545
545
|
"",
|
|
546
|
+
"### Mandatory Planning Challenge Gate (Must Use / Must Read)",
|
|
547
|
+
"",
|
|
548
|
+
"This gate is mandatory whenever the user proposes, requests, or evaluates a plan of any kind.",
|
|
549
|
+
"",
|
|
550
|
+
"1. Always run `roaster` before agreeing with or executing a plan.",
|
|
551
|
+
"2. Use `roaster` to critique assumptions, scope, sequencing, risks, and verification.",
|
|
552
|
+
"3. Keep the critique constructive and actionable; target the plan, not the person.",
|
|
553
|
+
"4. Skip only for emergencies, trivial one-step tasks, or sensitive contexts where roast tone would be inappropriate.",
|
|
554
|
+
"",
|
|
546
555
|
"### Task Routing",
|
|
547
556
|
"",
|
|
548
|
-
"**Mandatory-gate precedence:** apply the mandatory optimizer gate
|
|
557
|
+
"**Mandatory-gate precedence:** apply the mandatory optimizer gate first, then apply the mandatory planning challenge gate when the task includes planning.",
|
|
549
558
|
"",
|
|
550
559
|
"**SDD-first policy:** for feature delivery, bug fixes, or any multi-step implementation, start with `spec-driven-development` unless the task is clearly trivial and one-step.",
|
|
551
560
|
"",
|