Skip to content
AI Primer
πŸ’» Developer Tools

magicpath

MagicPathAIby MagicPathAI2 months ago83

Use MagicPath through the magicpath-ai CLI to find, preview, inspect, install, export, create, and edit UI components and manage MagicPath skills. Trigger for MagicPath designs/components; personal or team projects; active canvases and selected components/images/revisions; themes/design systems; teams, members, ownership, attribution, installed-component audits, and share/view links. Use when exporting exact MagicPath components or revisions to local folders/apps; replacing, adapting, or translating local UI with 1:1 fidelity and explicit requested changes; installing React/TypeScript components with inspect/add; authoring responsive interactive canvas components with code start/submit; importing or recreating UI from local paths or GitHub/GitLab/Bitbucket repositories into MagicPath; or creating, retrieving, updating, importing, enabling, disabling, or deleting MagicPath skills. In hosts with an embedded browser, keep the project canvas open via share URLs for visual work.

Install

npx skills add https://github.com/magicpathai/agent-skills --skill magicpath
Show step-by-step
  1. 1

    Open your terminal

    • Mac: Press ⌘ Space, type "Terminal", press Enter
    • Windows: Press Win R, type "cmd", press Enter
  2. 2

    Paste the command above and press Enter

    Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).

  3. 3

    Restart Claude Code

    Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives
~/.claude/skills/magicpathai--agent-skills--skills--magicpath/
β”œβ”€β”€ SKILL.md
└── ... (skill resource files)
View on GitHub

Comments

X@skirano

"For Cursor to communicate with MagicPath, it needs our agent skill. Just paste this inside the Cursor chat. "Install this skill npx skills add --skill..."

X@dingyi

"Codex + MagicPath 可δ»₯εΉ²ζŽ‰ Figma 了。"

X@skirano

"First, grab the MagicPath skill, just paste this inside Codex. The agent will walk you through the installation, logging into our app and the CLI. "Install..."

Always review skill code before installing. Third-party skills may contain scripts that run on your machine.

Related skills

✍️ Writing

writing-plans

Use when you have a spec or requirements for a multi-step task, before touching code

by obra Β· 13 days ago258.6k
πŸ“¦ Product

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

by obra Β· 13 days ago258.6k
🎨 Design

p5js

p5.js sketches: gen art, shaders, interactive, 3D.

by NousResearch Β· 2 months ago218.2k
πŸ’» Developer Tools

grill-me

A relentless interview to sharpen a plan or design.

by mattpocock Β· 3 months ago179.9k