magicpath · openai — Claude skill: MagicPath components in code
This skill wires the agent to the MagicPath platform: it finds canvas components, installs them into your repo and edits them as code. Handy when design lives in MagicPath and the app lives in git.
npx skills add openai/plugins --skill magicpath -a codexWhat magicpath does
The agent gets a documented set of magicpath-ai CLI calls. It starts with npx -y magicpath-ai info -o json; an unauthenticated account triggers login, followed by whoami -o json. From there it picks a workflow: component search, the open canvas, team projects, themes and design systems.
Pulling a component into an app means inspect first (read-only), then add -y. The code lands in src/components/magicpath/<name>/, and the agent renders it using the returned importStatement and usage, swapping mock content and static sizes for real props and responsive layout. Non-JS projects skip add altogether and the design is translated by hand. Editing the canvas itself goes through code start and code submit --wait, with writes confined to src/App.tsx, src/index.css, src/components/generated/** and images under assets/**.
A few limits matter before you install. view launches the OS browser, so those calls must not run in parallel. Personal projects stay private to their owner, which leaves team projects as the only sensible search target. And every command depends on a MagicPath login.
What it helps with
- find a MagicPath component by name and read its source before installing
- move a selected canvas item into the project's React app
- build a new screen from code and push it to the canvas
- copy theme CSS variables and fonts into the target app
- hand a teammate a project or component link without opening a browser
Example prompts for the agent
- Find the button component in MagicPath and add it to the project
- Show me what's selected on the canvas
- Build the login screen in
src/components/generated/and submit it
How to install magicpath
1Skills CLI (Vercel)
npx skills add openai/plugins --skill magicpath -a codex2Manually: put the files in place
.agents/skills/magicpath/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add openai/plugins --skill magicpath -a claude-code2Manually: put the files in place
~/.claude/skills/magicpath/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/magicpath/
Manually: put the files in place
.cursor/skills/magicpath/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install openai/plugins magicpath2Manually: put the files in place
.github/skills/magicpath/SKILL.mdPlatform CLI
gemini skills install https://github.com/openai/plugins --path plugins/magicpath/skills/magicpathManually: put the files in place
.devin/skills/magicpath/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: Codex skills: how to install, where they live, how to call them
Questions about magicpath
How do I install magicpath in Claude?
Run npx skills add openai/plugins --skill magicpath -a codex; the skill lands in .agents/skills/magicpath/SKILL.md.
What does magicpath do?
It equips the agent with magicpath-ai CLI commands for searching and inspecting components, installing them into an app, and working with canvases, themes and team projects.
Do I need a MagicPath account?
Yes. The skill opens with info and, when no session exists, runs login and confirms with whoami.
Similar skills
All skills for Frontend and UI →magicpath by other authors comes first.
