Magicpath
This is your bridge between Claude and MagicPath's component platform. It wraps the magicpath-ai CLI so you can search, preview, and install React/TypeScript UI components directly into your codebase, or go the other direction and push local code into MagicPath's visual canvas for editing. The team/personal workspace handling is thorough, with proper flags for filtering by team, person, or just your own stuff. One thing to know: it leans hard on JSON output flags for everything, which makes sense for agent workflows but means you're parsing structured data constantly. Works best in environments with an embedded browser since you can keep the MagicPath canvas open alongside your code for real-time visual feedback.
- skills.sh installs
- 6.4K
- GitHub stars
- 93
- last updated
- Jul 14, 2026
Install
$ npx -y skills add magicpathai/agent-skills --skill magicpath --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/magicpathai/agent-skills
- Category
- AI & Agent Building
- First seen
- Jun 3, 2026
Recommended
More AI & Agent Building
figma-generate-designfigma/mcp-server-guideUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma',6.4Kskills.sh installs
screenshotopenai/skillsUse when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture cap6.3Kskills.sh installs
parallel-cli-setupparallel-web/parallel-agent-skillsSet up and maintain the Parallel CLI (install, auth, balance, skills install)6.3Kskills.sh installs
troubleshooting-efsaws/agent-toolkit-for-awsDiagnoses and resolves Amazon EFS issues including mount failures, NFS timeouts, permission errors, throughput problems, and burst credit exhaustion. Use when t6.3Kskills.sh installs
wp-rest-apiwordpress/agent-skillsUse when building, extending, or debugging WordPress REST API endpoints/routes: register_rest_route, WP_REST_Controller/controller classes, schema/argument vali6.3Kskills.sh installswp-block-themeswordpress/agent-skillsUse when developing WordPress block themes: theme.json (global settings/styles), templates and template parts, patterns, style variations, and Site Editor troub6.3Kskills.sh installs