magicpath — Claude Code skill: what it does, how to install
Connects your coding agent to MagicPath via CLI to browse, install, and edit UI components. Useful when pulling design systems directly into code.
npx skills add MagicPathAI/agent-skills --skill magicpath -a claude-codeWhat magicpath does
This skill integrates the magicpath-ai CLI into the agent environment. It lets the agent discover shared designs, inspect themes, and insert React code into local repositories. When building directly from local files, editing is intentionally restricted: the CLI touches only src/App.tsx, src/index.css, files inside src/components/generated/, and local temporary assets in assets/.
You need Node.js with npx and network access. Authentication opens a browser window for login, but guest sessions are also supported via temporary gst_... pairing codes. In guest mode, work is scoped to a single project and accessed via a dedicated canvas URL.
The tool handles both personal projects and shared team workspaces. Filtering flags isolate team designs or specific authors. That structure prevents accidental overwrites when managing multiple design libraries across different workspaces.
What it helps with
- install React and TypeScript UI components directly into source code
- inspect and apply MagicPath design system themes and CSS variables
- iterate on UI layouts using live visual canvas syncing
- collaborate using temporary guest pairing codes
Example prompts for the agent
- Run magicpath info to check my current authentication status
- Search for navigation components in the Acme Inc team workspace
- Log in using guest pairing code gst_sample and show the canvas link
How to install magicpath
1Skills CLI (Vercel)
npx skills add MagicPathAI/agent-skills --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/
1Skills CLI (Vercel)
npx skills add MagicPathAI/agent-skills --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 MagicPathAI/agent-skills --skill magicpath -a cursor2Manually: put the files in place
.cursor/skills/magicpath/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install MagicPathAI/agent-skills magicpath2Manually: put the files in place
.github/skills/magicpath/SKILL.md1Skills CLI (Vercel)
npx skills add MagicPathAI/agent-skills --skill magicpath -a gemini-cli2Platform CLI
gemini skills install https://github.com/MagicPathAI/agent-skills --path skills/magicpathManually: put the files in place
.devin/skills/magicpath/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add MagicPathAI/agent-skills --skill magicpath -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 magicpath
How do I install magicpath in Claude Code?
Run npx skills add MagicPathAI/agent-skills --skill magicpath -a claude-code in your terminal.
What does the magicpath skill do?
It allows your agent to search, inspect, and install MagicPath React components and design system themes directly into your repository using the magicpath-ai CLI.
What are the prerequisites for using magicpath?
You must have Node.js to run npx, active internet access, and a web browser to complete user login or view the canvas.
