Skip to main content
skill CX Codex

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add figma/mcp-server-guide --skill figma-shaders -a claude-code
Open on GitHub

What 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-code

2Manually: put the files in place

~/.claude/skills/figma-shaders/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/figma-shaders/

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.

Similar skills

Everything for Design →

From the same set4

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor