# magicpath

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.

- skill · `type=skill` · Codex, ChatGPT · ★ 7604
- Author: MagicPathAI · official OpenAI repository
- License: LicenseRef-Unlicensed · policy=link-only · description only; the file stays with the author
- Source: https://github.com/openai/plugins/tree/HEAD/plugins/magicpath/skills/magicpath/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/magicpath

## What it 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.

## Install

### Codex (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill magicpath -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/magicpath/SKILL.md` — For all projects use ~/.agents/skills/

### Claude Code

1. **Skills CLI (Vercel)**
```bash
npx skills add openai/plugins --skill magicpath -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/magicpath/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/magicpath/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/magicpath/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install openai/plugins magicpath
```

2. **Manually: put the files in place**
- File: `.github/skills/magicpath/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/openai/plugins --path plugins/magicpath/skills/magicpath
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/magicpath/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/openai/plugins/tree/HEAD/plugins/magicpath/skills/magicpath/SKILL.md

## When to use it
- 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
- 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

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

## Other versions with the same name
- [magicpath · magicpathai](https://affpapa.org/en/nevibecode/skills/magicpathai-magicpath.md) — 6300 installs

From the same set: [openai/plugins](https://affpapa.org/en/nevibecode/by/openai/plugins.md) — 528 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md