Add Figma MCP skill #80
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| # Figma MCP | ||
|
|
||
| Access Figma designs using the Figma MCP server. Read design files, extract components, get design tokens, and inspect layer properties. | ||
|
|
||
| ## Triggers | ||
|
|
||
| This skill is activated by the following keywords: | ||
|
|
||
| - `figma` | ||
| - `figma design` | ||
| - `figma mcp` | ||
|
|
||
| ## Details | ||
|
|
||
| The Figma MCP server provides tools to interact with Figma designs directly from OpenHands. It uses OAuth authentication to securely access your Figma account. | ||
|
|
||
| ## Installation | ||
|
|
||
| To install the Figma MCP server, run the following command in your terminal: | ||
|
|
||
| ```bash | ||
| openhands mcp add figma --transport http --auth oauth https://figma.com/mcp/sse | ||
| ``` | ||
|
|
||
| This will: | ||
| 1. Add the Figma MCP server to your OpenHands configuration | ||
| 2. Configure OAuth authentication (you'll be prompted to authorize when first used) | ||
| 3. Enable the server immediately | ||
|
|
||
| After installation, restart your OpenHands session to apply the changes. | ||
|
|
||
| ## Verification | ||
|
|
||
| To verify the installation: | ||
|
|
||
| ```bash | ||
| openhands mcp list | ||
| ``` | ||
|
|
||
| You should see the Figma server listed with status "enabled". | ||
|
|
||
| ## Managing the Server | ||
|
|
||
| ```bash | ||
| # Disable the Figma MCP server | ||
| openhands mcp disable figma | ||
|
|
||
| # Re-enable the Figma MCP server | ||
| openhands mcp enable figma | ||
|
|
||
| # Remove the Figma MCP server | ||
| openhands mcp remove figma | ||
|
|
||
| # Get details about the Figma server | ||
| openhands mcp get figma | ||
| ``` | ||
|
|
||
| ## Documentation | ||
|
|
||
| - Figma MCP Server: https://developers.figma.com/docs/figma-mcp-server | ||
| - Remote Server Installation: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/ | ||
| - Figma API: https://www.figma.com/developers/api | ||
|
Comment on lines
+1
to
+62
There was a problem hiding this comment. 🟡 Suggestion: README.md and SKILL.md have ~90% duplicate content. Per the repository conventions (see AGENTS.md), these should be complementary:
Currently both files are nearly identical. README.md should include what SKILL.md lacks:
The PR description mentions "Future updates will include usage examples" - but these should be in the initial PR to be actually useful. |
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| --- | ||
|
There was a problem hiding this comment. 🟠 Important: According to the repository agent notes, new skills should be added to |
||
| name: figma | ||
| description: Access Figma designs using the Figma MCP server. Read design files, extract components, get design tokens, and inspect layer properties. | ||
| triggers: | ||
| - figma | ||
| - figma design | ||
| - figma mcp | ||
| --- | ||
|
|
||
| # Figma MCP | ||
|
|
||
| The Figma MCP server provides tools to interact with Figma designs directly from OpenHands. It uses OAuth authentication to securely access your Figma account. | ||
|
|
||
| ## Installation | ||
|
|
||
| To install the Figma MCP server, run the following command in your terminal: | ||
|
|
||
| ```bash | ||
| openhands mcp add figma --transport http https://mcp.figma.com/mcp | ||
|
There was a problem hiding this comment. 🔴 Critical: This installation command conflicts with the one in README.md (line 22), which uses:
Which one is correct? Having two different commands will confuse users and one will fail. This needs to be fixed before merge. |
||
| ``` | ||
|
|
||
| This will: | ||
| 1. Add the Figma MCP server to your OpenHands configuration | ||
| 2. You'll be prompted to authorize via Figma OAuth when first used | ||
| 3. Enable the server immediately | ||
|
|
||
| After installation, restart your OpenHands session to apply the changes. | ||
|
|
||
| ## Verification | ||
|
|
||
| To verify the installation: | ||
|
|
||
| ```bash | ||
| openhands mcp list | ||
| ``` | ||
|
|
||
| You should see the Figma server listed with status "enabled". | ||
|
|
||
| ## Managing the Server | ||
|
|
||
| ```bash | ||
| # Disable the Figma MCP server | ||
| openhands mcp disable figma | ||
|
|
||
| # Re-enable the Figma MCP server | ||
| openhands mcp enable figma | ||
|
|
||
| # Remove the Figma MCP server | ||
| openhands mcp remove figma | ||
|
|
||
| # Get details about the Figma server | ||
| openhands mcp get figma | ||
| ``` | ||
|
|
||
| ## Documentation | ||
|
|
||
| - Figma MCP Server: https://developers.figma.com/docs/figma-mcp-server | ||
| - Remote Server Installation: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/ | ||
|
Comment on lines
+10
to
+58
There was a problem hiding this comment. 🟠 Important: This skill violates the progressive disclosure pattern required by the AgentSkills standard. SKILL.md should be concise - just enough for an agent to decide whether to use it. Currently this includes:
Fix: Move the detailed content (verification, management commands, docs) to README.md only. Keep SKILL.md minimal: # Figma MCP
Access Figma designs using the Figma MCP server with OAuth authentication.
## Installation
[Single correct installation command]
For detailed usage, verification steps, and management commands, see README.md.
## Documentation
- [Figma MCP Server](https://developers.figma.com/docs/figma-mcp-server) |
||
| - Figma API: https://www.figma.com/developers/api | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🔴 Critical: See comment on SKILL.md line 19 - these two installation commands are different and one will be wrong. The URL and authentication flags must match between both files.