AI导哈

前端开发

magicpath

magicpathai/agent-skills

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.

  • 6352 次安装
  • 93 星标
  • 收录于

安装命令

npx skills add https://github.com/magicpathai/agent-skills --skill magicpath

SKILL.md

MagicPath

A platform for building, sharing, and installing UI components via AI. Components are added as source code to the user's project via the magicpath-ai CLI.

MagicPath canvas components can also be created and edited directly from local code via the npx -y magicpath-ai code ... subcommands — see Edit or create canvas components from code. That path is strict: only src/App.tsx, src/index.css, files under src/components/generated/, and temporary image assets under assets/ in the code working directory are editable.

When this skill runs inside an agent host with an embedded browser, use a MagicPath project as a persistent visual canvas beside the agent when appropriate. If you create a project for canvas authoring, open that project in the embedded browser immediately after creation and before code start; see Working with embedded browsers.

Terminology: Users often refer to MagicPath components as "designs" — the two terms are interchangeable. When a user says "design," "my designs," or "that design," treat it as meaning a MagicPath component. Search, inspect, and install accordingly.

Users also refer to MagicPath design systems as "themes." When a user says "theme," "my themes," or "use the X theme," they mean a MagicPath design system — a set of CSS variables, fonts, and styling instructions. Use list-themes and get-theme to work with them.

Users may belong to teams (also called "workspaces"). When a user says "the team's designs," "our team's components," or mentions a team name like "Acme Inc," they mean the projects and components owned by that team. Use list-teams, --team, and --personal flags to navigate between personal and team workspaces.

Users may also ask about skills they created in MagicPath. These are reusable instruction bundles that can be invoked from MagicPath chat and managed with npx -y magicpath-ai skills .... Personal skills live in the user's workspace; team skills live in a MagicPath team. Public MagicPath skills are read-only unless the platform says otherwise.

First Step

Run npx -y magicpath-ai info -o json to check auth status and project context. The first invocation may take a few seconds as npx downloads the package; subsequent calls are fast.