# magicpath

Connects your coding agent to MagicPath via CLI to browse, install, and edit UI components. Useful when pulling design systems directly into code.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 6300 installs · ★ 92
- Author: MagicPathAI
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/MagicPathAI/agent-skills/tree/HEAD/skills/magicpath/SKILL.md
- Updated: 2026-07-15
- HTML: https://affpapa.org/en/nevibecode/skills/magicpathai-magicpath

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

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add MagicPathAI/agent-skills --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/

### Codex

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

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add MagicPathAI/agent-skills --skill magicpath -a cursor
```

2. **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 MagicPathAI/agent-skills magicpath
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add MagicPathAI/agent-skills --skill magicpath -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/MagicPathAI/agent-skills --path skills/magicpath
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add MagicPathAI/agent-skills --skill magicpath -a opencode
```

### 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/MagicPathAI/agent-skills/tree/HEAD/skills/magicpath/SKILL.md

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

## Similar
- [mantine-custom-components](https://affpapa.org/en/nevibecode/skills/mantine-custom-components.md) — skill · 3600 installs
- [antd](https://affpapa.org/en/nevibecode/skills/antd.md) — skill · 6100 installs
- [syncfusion-react-timeline](https://affpapa.org/en/nevibecode/skills/syncfusion-react-timeline.md) — skill · 650 installs
- [webflow-cli:designer-extension](https://affpapa.org/en/nevibecode/skills/webflow-clidesigner-extension.md) — skill · 1000 installs
- [animated-component-libraries](https://affpapa.org/en/nevibecode/skills/animated-component-libraries.md) — skill · 2900 installs
- [aceternity-ui](https://affpapa.org/en/nevibecode/skills/aceternity-ui.md) — skill · 1500 installs

From the same set: [magicpathai/agent-skills](https://affpapa.org/en/nevibecode/by/magicpathai/agent-skills.md) — 2 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