By MagicPathAI
Search, preview, install, and create MagicPath UI components and design systems directly from the Claude Code CLI, including editing canvas components, applying themes, and managing team workspaces.
Agent Skills for MagicPath, packaged for the open Agent Skills ecosystem and installable with Vercel's skills CLI or as a Claude Code, Codex, or Cursor plugin.
In Cursor, install the plugin from the Cursor marketplace, or run the following from inside a Cursor session:
/add-plugin magicpath
In Claude Code, add this repo as a marketplace and install the plugin:
/plugin marketplace add MagicPathAI/agent-skills
/plugin install magicpath@magicpath
In Codex (CLI, app, or VS Code extension), add this repo as a marketplace and install the plugin:
codex plugin marketplace add MagicPathAI/agent-skills
codex plugin add magicpath@magicpath
npx skills add https://github.com/MagicPathAI/agent-skills
List available skills without installing:
npx skills add https://github.com/MagicPathAI/agent-skills --list
magicpathSearch, preview, inspect, install, create, and edit MagicPath UI components with the magicpath-ai CLI. The skill also teaches agents how to manage MagicPath-hosted skills through magicpath-ai skills ....
Use this when the user mentions MagicPath, wants to find a MagicPath component, preview one, add one to their project, wire a MagicPath component into existing code, create/edit a canvas component, or create/retrieve/update/import/delete a MagicPath skill.
This skill is the canonical source of truth — both npx skills add and magicpath-ai setup-skills install from this repo.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub magicpathai/agent-skills --plugin magicpathComprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design
Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency.
Design engineering for Claude Code. Build production-grade interfaces with strong visual hierarchy, review craft against an approval bar, and strip AI design slop. Self-contained — direction, hierarchy, tokens, polish, and motion in one skill.
Frontend design skill for UI/UX implementation
MCP server for shadcn UI tooling