feat: Figma MCP and storybook skills

[rickarize]

Addresses #11461

Adds:

• Human and LLM readable instructions for connecting to the Figma MCP server, docs for basic operations
• Skills for bidirectionally linking storybook and figma components
• Skills for looking up existing components, snapping loose values to nearest token, flagging discrepancies, etc.
• Connects storybook components to their figma equivalents

Of note:

• Figma MCP's handling of tokens is very primitive. They erase aliases / token origin and flatten values. The equivalent rest API is disabled unless we upgrade to enterprise pricing. Token Studio looks like the right way to handle this going forward.

Storybook:

Figma:

---

Note

Low Risk
Primarily documentation and dev-tooling/config additions; the only code changes are Storybook metadata updates and a new dev dependency.

Overview
Adds first-class Figma integration for the repo: a new .mcp.json config for the remote Figma MCP server plus a figma-usage agent skill (README + rules) documenting how to implement UI from Figma, resolve design values to Phoenix tokens/Emotion, and create bidirectional Code Connect mappings.

Enables Code Connect publishing by adding @figma/code-connect and app/figma.config.json, and links several Storybook stories to their corresponding Figma nodes by adding parameters.design (and related references) so designs show up in Storybook’s Design tab and can be used for mappings.

^{Written by Cursor Bugbot for commit cb360b2. This will update automatically on new commits. Configure here.}

[rickarize]

This looks like our first instance of this pattern. Want to confirm this is okay / the preferred method.

[mikeldking]

any idea where this pattern is from?

[mikeldking]

need to mark it as private

[mikeldking]

any idea where this pattern is from?

[mikeldking]

maybe we just name this skill phoenix-design so we can put all best practices in it

[mikeldking]

let's drop the skill for now

[mikeldking]

@claude rebase this PR on main. then remove the skills and MCP for now and just preserve the necessary parts for the figma files to be in the stories.

[claude]

Claude finished @mikeldking's task in 56s —— View job

---

PR cleanup done

• Remove .agents/skills/figma-usage/ directory
• Remove .cursor/skills/figma-usage symlink
• Remove .mcp.json
• Story files and app/figma.config.json preserved

Note on rebase: I'm unable to perform a git rebase — this is outside my supported git operations (I can only create and push commits). You'll need to rebase the branch manually: git rebase origin/main and force-push. The stories and figma.config changes remain intact.
|

[mikeldking]

@claude rebase on main

[claude]

Claude finished @mikeldking's task in 14s —— View job

---

Rebase Request

Unfortunately, I'm unable to perform a git rebase — rebasing is outside my supported git operations. I can only create and push new commits.

To rebase this branch on main, please run the following commands locally:

git fetch origin
git checkout rick/design-skills
git rebase origin/main
git push --force-with-lease origin rick/design-skills

You can find more information in the FAQ.