magicpath — скилл для Claude Code: что делает и как установить
Переносит компоненты и дизайн-системы из MagicPath в локальный проект через консольную утилиту. Помогает собирать и править интерфейсы на лету.
npx skills add MagicPathAI/agent-skills --skill magicpath -a claude-codeЧто делает magicpath
Скилл связывает агента с платформой MagicPath через вызовы magicpath-ai в терминале. С его помощью агент находит готовые свёрстанные блоки, проверяет темы оформления и добавляет React-компоненты прямо в исходный код репозитория. При работе с локальным холстом редактирование строго ограничено файлами src/App.tsx, src/index.css, каталогом src/components/generated/ и временными картинками в assets/.
Для авторизации нужен браузер, а для запуска команд потребуется установленный Node.js с утилитой npx. Если постоянного аккаунта нет, поддерживается гостевой вход по одноразовому коду вида gst_.... В гостевом режиме доступен только один привязанный проект, который открывается по специальной ссылке холста.
Инструмент различает личные проекты и общие рабочие пространства компаний. Через флаги командной строки агент фильтрует компоненты по конкретным авторам и командам. Это защищает проект от случайного смешивания стилей из разных библиотек.
Какие задачи решает
- импортировать готовые UI-компоненты из MagicPath в локальный проект
- подключить переменные дизайн-системы и шрифты через выбор темы
- редактировать компоненты на живом визуальном холсте с отправкой правок
- подключиться к сессии по временному коду сопряжения
Примеры запросов агенту
- Проверь статус авторизации в MagicPath через info
- Найди в командном спейсе компоненты кнопок и покажи их параметры
- Подключись к гостевой сессии с кодом gst_demo123 и открой холст
Как установить magicpath
1Через Skills CLI (Vercel)
npx skills add MagicPathAI/agent-skills --skill magicpath -a claude-code2Вручную: положить файлы
~/.claude/skills/magicpath/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/magicpath/
1Через Skills CLI (Vercel)
npx skills add MagicPathAI/agent-skills --skill magicpath -a codex2Вручную: положить файлы
.agents/skills/magicpath/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add MagicPathAI/agent-skills --skill magicpath -a cursor2Вручную: положить файлы
.cursor/skills/magicpath/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install MagicPathAI/agent-skills magicpath2Вручную: положить файлы
.github/skills/magicpath/SKILL.md1Через Skills CLI (Vercel)
npx skills add MagicPathAI/agent-skills --skill magicpath -a gemini-cli2Командой платформы
gemini skills install https://github.com/MagicPathAI/agent-skills --path skills/magicpathВручную: положить файлы
.devin/skills/magicpath/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add MagicPathAI/agent-skills --skill magicpath -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора2
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о magicpath
Как установить magicpath в Claude Code?
Выполните в терминале команду npx skills add MagicPathAI/agent-skills --skill magicpath -a claude-code.
Что делает скилл magicpath?
Он связывает агента с платформой MagicPath через утилиту magicpath-ai. Это позволяет искать, устанавливать и синхронизировать UI-компоненты React и дизайн-системы прямо в коде проекта.
Какие системные требования нужны для работы скилла?
Требуются установленный Node.js для вызова npx, доступ в интернет и браузер для прохождения авторизации или предпросмотра холста.
