Skip to content
AI Primer
πŸ’» Developer Tools

magicpath

MagicPathAIby MagicPathAI2 months ago87

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

πŸ” Code Review

requesting-code-review

Use when completing tasks, implementing major features, or before merging to verify work meets requirements

by obra Β· 17 days ago268.5k
πŸ’» Developer Tools

test-driven-development

Use when implementing any feature or bugfix, before writing implementation code

by obra Β· 17 days ago268.5k
πŸ’» Developer Tools

systematic-debugging

Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes

by obra Β· 17 days ago268.5k
πŸ’» Developer Tools

using-git-worktrees

Use when starting feature work that needs isolation from current workspace or before executing implementation plans - ensures an isolated workspace exists via native tools or git worktree fallback

by obra Β· 17 days ago268.5k