Turn Figma designs into CDS React (cds-web) or React Native (cds-mobile) code. Use when the user shares a Figma design URL (e.g. `figma.com/design/...?node-id=...`) or asks to "implement this design" or "build this from Figma" in a frontend project that is using Coinbase Design System (CDS). Do not use for general CDS UI work with no Figma reference (use `cds-code`), or for design critique without an implementation request.
69
84%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Critical
Do not install without reviewing
Security
1 critical severity finding. Installing this skill is not recommended: please review these findings carefully if you do intend to do so.
Detected a prompt injection in the skill instructions. The skill contains hidden or deceptive instructions that fall outside its stated purpose and attempt to override the agent’s safety guidelines or intended behavior.
The skill explicitly instructs the agent to "do not surface" and "silently skip" Figma MCP prompts about Code Connect mappings (SKILL.md:54-61), i.e. to hide actionable information from the user, which is a deceptive/hidden instruction outside normal transparency for the skill's described purpose.
Low
Low-risk findings.
2 low severity findings. Worth noting, but not necessarily harmful.
The skill exposes the agent to untrusted, user-generated content from public third-party sources, creating a risk of indirect prompt injection. This includes browsing arbitrary URLs, reading social media posts or forum comments, and analyzing content from unknown websites.
The required workflow ingests outsider-authored free text and structured content from the user-provided Figma node URL by calling Figma MCP tools `get_design_context`/`get_metadata` and `get_screenshot`, and also processes fallback HTML/Tailwind/classes included in `get_design_context` responses.
The skill fetches instructions or code from an external URL at runtime, and the fetched content directly controls the agent’s prompts or executes code. This dynamic dependency allows the external source to modify the agent’s behavior without any changes to the skill itself.
The skill requires fetching a Figma file URL at runtime (e.g., https://figma.com/design/:fileKey/:fileName?node-id=1-2 and https://www.figma.com/design/<fileKey>/<fileName>?node-id=12345-67890&m=dev) via the Figma MCP server and the returned design/context snippets are injected into the agent's generation context to drive code output, so these external URLs directly control the agent's prompts and are a required runtime dependency.
edabef0
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.