efecto-social-media — Claude Code skill: what it does, how to install
Builds social media layouts via the efecto.app canvas. Useful when asking an agent to generate Instagram carousels, YouTube covers, or social posts.
npx skills add pablostanley/efecto-plugin --skill efecto-social-media -a claude-code
npx skills add pablostanley/efecto-plugin --skill social-media -a claude-codeWhat efecto-social-media does
The agent connects to the efecto.app editor through MCP and initiates work using create_session. You open the returned web link in a browser, then the agent sends styling commands directly to the canvas. Layouts are constructed with JSX and Tailwind utility classes. When building multi-slide carousels, the agent duplicates existing artboards with duplicate_artboard and updates text via batch_update.
The underlying server provides 68 MCP tools. These handle layer edits and image exports. To inspect large documents without hitting token ceilings, the skill suggests scoped inspections via outline: true or a constrained maxDepth.
The skill fails completely without @efectoapp/mcp running locally. Layouts also require specific syntax: artboards need flex flex-col to stop elements from stacking at coordinate (0,0). Arbitrary hex values such as bg-[#f9f9f9] fail quietly inside Efecto classes.
What it helps with
- build a multi-slide Instagram carousel
- design a thumbnail for a YouTube video
- format graphics for LinkedIn or Twitter posts
- create vertical story layouts for TikTok
Example prompts for the agent
- Design an Instagram carousel about typography tips across five slides
- Create a YouTube thumbnail featuring a high-contrast title and a dark background
- Build an announcement graphic for Twitter with a bold headline
How to install efecto-social-media
1Skills 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-code2Manually: put the files in place
~/.claude/skills/social-media/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/social-media/
1Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill social-media -a codex2Manually: put the files in place
.agents/skills/social-media/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill social-media -a cursor2Manually: put the files in place
.cursor/skills/social-media/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install pablostanley/efecto-plugin social-media2Manually: put the files in place
.github/skills/social-media/SKILL.md1Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill social-media -a gemini-cli2Platform CLI
gemini skills install https://github.com/pablostanley/efecto-plugin --path skills/social-mediaManually: put the files in place
.devin/skills/social-media/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill social-media -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about efecto-social-media
How to install efecto-social-media in Claude Code?
Run npx skills add pablostanley/efecto-plugin --skill efecto-social-media -a claude-code in your terminal. You must also connect the MCP server by running claude mcp add efecto -- npx -y @efectoapp/mcp.
What does efecto-social-media do?
The skill provides guidelines and workflow steps for producing social visuals on the Efecto canvas. It guides the model through valid Tailwind styling, artboard layouts, and MCP tool calls.
Why do child elements overlap on the canvas?
Artboards in Efecto require the flex flex-col utility inside their className property. Without that flex container setting, every section stacks at coordinate (0,0).
