figma-shaders — Claude Code skill for Figma shaders
Create or revise Figma shader effects and fills through MCP. Load this skill before using create_shader or update_shader.
npx skills add figma/mcp-server-guide --skill figma-shaders -a claude-codeWhat figma-shaders does
The skill guides shader work in Figma, distinguishing effects that process an existing rendered layer from fills that generate pixels on their own. For a new shader, it covers choosing a kind and plan, creating a scaffold, reading its source, then replacing main.ts with the complete implementation. The scaffold is only a starting point.
For edits, it directs the agent to inspect the current shader files and keep existing controls unless asked to change them. Read references/authoring.md before writing the replacement. Animation and mouse metadata must reflect the inputs used by the source; when the tool says a capability is unavailable, the skill forbids trying to bypass that limit. Updates must keep the shader’s existing kind.
What it helps with
- Create a procedural fill or visual effect in Figma
- Revise a shader without changing its kind
- Add time-based or mouse-driven shader behavior
- Correct a shader build error using compiler output
Example prompts for the agent
- Create a procedural noise fill in Figma.
- Revise the blur effect in the existing shader and keep its kind and controls.
- Add time-driven animation and update the shader metadata.
How to install figma-shaders
1Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-shaders -a claude-code2Manually: put the files in place
~/.claude/skills/figma-shaders/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/figma-shaders/
1Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-shaders -a codex2Manually: put the files in place
.agents/skills/figma-shaders/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-shaders -a cursor2Manually: put the files in place
.cursor/skills/figma-shaders/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install figma/mcp-server-guide figma-shaders2Manually: put the files in place
.github/skills/figma-shaders/SKILL.md1Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-shaders -a gemini-cli2Platform CLI
gemini skills install https://github.com/figma/mcp-server-guide --path skills-figquery/figma-shadersManually: put the files in place
.devin/skills/figma-shaders/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add figma/mcp-server-guide --skill figma-shaders -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about figma-shaders
How do I install figma-shaders in Claude Code?
Run npx skills add figma/mcp-server-guide --skill figma-shaders -a claude-code. The skill file is ~/.claude/skills/figma-shaders/SKILL.md.
What does figma-shaders do?
It guides an agent through creating and updating Figma shader effects and fills via MCP, including reading source files and replacing main.ts.
Should I read references/authoring.md before writing a shader?
Yes. The skill requires reading it before preparing a replacement for main.ts; it covers module structure, parameters, and effect and fill rules.