Find, install, and edit MagicPath UI components via the magicpath-ai CLI.
npx skills add https://github.com/xixvivji/alzs-well --skill magicpath-xixvivji
Please help me install this Agent Skill. Skill: magicpath Source: https://github.com/xixvivji/alzs-well/tree/main/.agents/skills/magicpath Command: npx skills add https://github.com/xixvivji/alzs-well --skill magicpath-xixvivji
add. - Canvas authoring from code: Create or edit MagicPath canvas components locally with code start and code submit, with Tailwind v4 styling rules enforced. - Teams, themes, and skills management: List teams and members, apply design-system themes, and create, import, update, or delete MagicPath skills. - Use Case: Ask the agent to find your team's latest dashboard design, install it into your React app, and adapt it with real data, responsive layout, and working event handlers. ## Quick Start Ask the agent to search MagicPath for a component by name and install it into the current React project.High-intent search queries and answers about installing and using this skill.
Run npx -y magicpath-ai add <generatedName> -y after confirming the component. The CLI writes .tsx files to src/components/magicpath/ and installs dependencies; then import the component using the returned importStatement and wire in your props and handlers.
Run npx -y magicpath-ai code start --component <componentId> --dir . to begin a session, edit only src/App.tsx, src/index.css, and files under src/components/generated/, then run code submit --wait to push changes back to the canvas.
Yes, but do not run add, which only writes React/TypeScript files. Use npx -y magicpath-ai inspect <generatedName> -o json to read the source, then translate the design and behavior into your target framework while preserving concrete values.
Run list-members --team "<team>" -o json to resolve the person's user ID, then run list-components <projectId> --created-by <userId> -o json on team projects. Personal projects of other users are private and cannot be searched.
MagicPath components are design artifacts with fixed widths, mock data, and placeholder handlers. You must adapt them after add: replace hardcoded sizes with responsive utilities, connect real data and callbacks, and match the parent layout context.
A guest session connects the CLI to a single project using a pairing code via login --guest-code <code>, with no account required. It is scoped to that one project and expires; use code start and code submit to build on it, and open the canvasUrl from whoami to view it.
Mischio95Set up shadcn/ui components and forms with React Hook Form and Zod.
SaberAlouiTransforms approved sandbox mockups into production components matching the main app's conventions.
openaiSearch, inspect, install, and author MagicPath canvas UI components via the magicpath-ai CLI.
RelicWare-CoDefine premium UI standards for Stitch screen generation.