mcpbeat

Magicpath Agent Skill

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.

33k tokens
context cost
the whole folder, loaded on every use
5
files
instructions only
0
copies elsewhere
how many repositories repackaged it
86
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/MagicPathAI/agent-skills --skill magicpath

Other skills for the same job

different authors, same section of the catalogue
Use Dom
by openai
vendor ×3

Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.

3k tokens
Frontend Dev Guidelines
by mrgoonie
×2

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

33k tokens
Next Cache Components
by vercel-labs
vendor ×2

Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag

2k tokens
Shopify Development
by ComeOnOliver
×2

| Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid. "shopify theme", "liquid template", "polaris", "shopify graphql", "shopify webhook", "shopify billing", "app subscription", "metafields", "shopify functions"

24k tokens scripts
Huggingface Gradio
by huggingface
vendor ×1

Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.

10k tokens
Figma Generate Diagram
by openai
vendor ×1

MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).

28k tokens
Web Perf
by cloudflare
vendor ×1

Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.

2k tokens
Algorithmic Art
by lingxling
×1

Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).

15k tokens scripts

How to use it

Copy the folder

Take magicpathai/magicpath from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npx. Without those the skill loads but fails at the first command.