Create Figma MCP skill

[malhotra5]

Summary

Create a new skill that enables OpenHands to work with Figma designs through the Figma MCP (Model Context Protocol) server.

Implementation Details

Skill Structure

Create the following files under skills/figma/:

1. SKILL.md - Main skill definition with:

   • Frontmatter with name: figma and description
   • Triggers: figma, figma.com, figma link
   • Instructions for detecting Figma usage (Figma links, Figma mentions, PNGs with Figma metadata)
   • Guide for installing the Figma MCP server via OpenHands CLI
   • MCP installation command reference
   • Post-installation prompts to suggest sharing Figma links for better context

2. README.md - Human-readable documentation

Skill Behavior

The skill should:

1. Detect Figma context: Trigger when user provides Figma links, mentions Figma, or shares PNGs with Figma software metadata
2. Offer MCP installation: When Figma context is detected, offer to install the Figma MCP server if not already available
3. Provide installation instructions: Include the CLI command to install Figma MCP with OAuth authentication
4. Suggest enhanced workflows: After MCP installation, prompt users to share Figma links for better design-to-code workflows

Marketplace Registration

Add entry to marketplaces/default.json:

{
    "name": "figma",
    "source": "./figma",
    "description": "Work with Figma designs using the Figma MCP server. Detects Figma links and offers MCP installation for design-to-code workflows.",
    "category": "integration",
    "keywords": [
        "figma",
        "design",
        "mcp",
        "ui"
    ]
}

References

• Figma MCP: https://github.com/figma/figma-mcp (or official Figma MCP location)
• Figma API documentation: https://www.figma.com/developers/api

Acceptance Criteria

• skills/figma/SKILL.md created with proper frontmatter and triggers
• skills/figma/README.md created with documentation
• Skill registered in marketplaces/default.json
• Skill includes MCP installation instructions for CLI
• Skill prompts for Figma link sharing after MCP detection/installation