efecto-social-media — скилл для Claude Code: что делает и установка
Генерирует макеты для соцсетей через холст efecto.app. Пригодится, когда агенту нужно сверстать пост для Instagram, слайды или обложку YouTube.
npx skills add pablostanley/efecto-plugin --skill efecto-social-media -a claude-code
npx skills add pablostanley/efecto-plugin --skill social-media -a claude-codeЧто делает efecto-social-media
Агент подключается к редактору efecto.app через протокол MCP и открывает сессию командой create_session. Пользователь переходит по выданной ссылке в браузере, а помощник отдаёт команды холсту. Интерфейс собирается на JSX с классами Tailwind. Для каруселей агент дублирует готовый слайд через duplicate_artboard, после чего меняет надписи пачкой через batch_update.
В наборе доступно 68 инструментов MCP. Они отвечают за правку слоёв и экспорт картинок. При чтении объёмных макетов скилл советует запрашивать структуру через outline: true или maxDepth, чтобы не упереться в лимит токенов.
Без MCP-сервера @efectoapp/mcp скилл не заработает. Артборду обязательно нужен класс flex flex-col, иначе все блоки наложатся в точке (0,0). Произвольные шестнадцатеричные цвета вроде bg-[#f9f9f9] холст молча игнорирует.
Какие задачи решает
- сверстать карусель для Instagram с несколькими слайдами
- подготовить обложку для ролика на YouTube
- оформить графику для публикации в LinkedIn или Twitter
- сгенерировать вертикальную историю для TikTok
Примеры запросов агенту
- Сверстай карусель для Instagram из пяти слайдов про основы типографики
- Создай обложку для YouTube-видео с крупным заголовком и тёмным фоном
- Подготовь графику для публикации в Twitter с цитатой и рамкой
Как установить efecto-social-media
1Через Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill efecto-social-media -a claude-codenpx skills add pablostanley/efecto-plugin --skill social-media -a claude-code2Вручную: положить файлы
~/.claude/skills/social-media/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/social-media/
1Через Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill social-media -a codex2Вручную: положить файлы
.agents/skills/social-media/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill social-media -a cursor2Вручную: положить файлы
.cursor/skills/social-media/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install pablostanley/efecto-plugin social-media2Вручную: положить файлы
.github/skills/social-media/SKILL.md1Через Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill social-media -a gemini-cli2Командой платформы
gemini skills install https://github.com/pablostanley/efecto-plugin --path skills/social-mediaВручную: положить файлы
.devin/skills/social-media/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill social-media -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о efecto-social-media
Как установить efecto-social-media в Claude Code?
Выполните в консоли команду npx skills add pablostanley/efecto-plugin --skill efecto-social-media -a claude-code. Для работы также потребуется подключить сервер холста через claude mcp add efecto -- npx -y @efectoapp/mcp.
Что делает efecto-social-media?
Скилл передаёт агенту правила сборки баннеров и публикаций на холсте Efecto. Он помогает формировать разметку JSX с классами Tailwind и вызывать нужные команды MCP.
Почему элементы на артборде накладываются друг на друга?
Контейнеру артборда строго необходим класс flex flex-col в свойстве className. Если этот класс пропущен, все дочерние узлы рендерятся в верхнем левом углу.
