magicpath

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. If auth.authenticated is false, run npx -y magicpath-ai login, wait for browser auth to finish, then verify with npx -y magicpath-ai whoami -o json. Use code start / code submit to create and edit designs on the project — this is the whole point of the session.

A MagicPath skill requires a non-empty name, description, and instructions. The description should say when the skill should be used; the instructions should say how to do the work. This phase is critical. Before installing anything, you MUST understand where the component is going and what it needs to do there. Skipping this leads to components that look right but behave wrong. Design system: What styling patterns does the project use (Tailwind, CSS modules, theme tokens)? The MagicPath component's styles need to harmonize, not clash. The :root and .dark blocks define the actual token values. Do not remove them. inspect is read-only. Shows full source code without writing any files. Use this when deciding whether a component fits your needs before committing to install. Configuration keys: SKILL.

Run: npx -y skills add https://github.com/magicpathai/agent-skills --skill magicpath --agent claude-code — the source lives at github.com/magicpathai/agent-skills.