efecto-social-media

The saved excerpt is a snapshot from when this skill was listed. The external source remains the complete and most current version.

---
name: efecto-social-media
description: Design social media assets with Efecto — Instagram posts, carousels, stories, YouTube thumbnails, TikTok covers, Twitter/X images, LinkedIn slides, Pinterest pins, and Facebook graphics. Use when asked to "design a post", "create a carousel", "make a thumbnail", "design social media", or any social content task. Requires Efecto MCP server.
metadata:
  mcp-server: efecto
  author: pablostanley
  version: "1.0.0"
  argument-hint: <design-description>
---

# Efecto — Social Media Design Guide

Design social media assets — Instagram, YouTube, TikTok, Twitter/X, LinkedIn, Pinterest, Facebook — using the Efecto design tool. Proper sizing, bold typography, and platform-specific best practices.

---

## Setup

This skill requires the **Efecto MCP server**. Check if it's available by looking for tools like `create_session`, `add_section`, or `get_document` in your tool list.

**If Efecto tools are NOT available, install the MCP server:**

### Claude Code
```bash
claude mcp add efecto -- npx -y @efectoapp/mcp
```

### Cursor
Add to `.cursor/mcp.json`:
```json
{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}
```

### Windsurf / VS Code / Other MCP Clients
```json
{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}
```

Once installed, you'll have access to 68 MCP tools, including image search and native animation authoring. The MCP server connects your agent to the Efecto design canvas at [efecto.app](https://efecto.app).

### How It Works

1. Your agent creates an Efecto session via MCP (`create_session`)
2. You open the returned design URL in your browser
3. The agent pushes design commands — you see every change live
4. Iterate with natural language until the design is perfect

---

## Using Efecto Tools — Quick Reference

### Session Workflow

Every design starts with a session:

```
create_session  label: "Instagram Carousel"
```
Returns `{ sessionId, documentId, designUrl }`. Tell the user to open the URL, then call `wait_for_connection` (blocks until paired). If the user already has an Efecto URL with `?session=...`, call `attach_session` with that URL instead of creating a duplicate session. Never call `create_session` twice to "reconnect" — a paired session refuses overwrite without `force: true`. Use `session_status` to inspect routing (`{ all: true }` for the full session list).

### Building Social Media Designs

The primary workflow is: **create artboard → add sections with JSX → refine with updates**.

```
# 1. Create an artboard (Instagram post example)
create_artboard  name: "Slide 1"  width: 1080  height: 1080  backgroundColor: "#111827"  className: "flex flex-col"

# 2. Add content with JSX
add_section  parentId: "<artboard-id>"  jsx: '<section name="Carousel Hook" className="flex flex-col items-center justify-center gap-8 p-16 w-full h-full">
  <h1 name="Hook Headline" className="text-7xl font-extrabold text-white text-center leading-none">Stop designing like it&apos;s 2020</h1>
  <p name="Swipe Prompt" className="text-xl text-gray-400 font-medium">Swipe for 5 rules -></p>
</section>'

# 3. Duplicate artboard for carousel slides
duplicate_artboard  artboardId: "<artboard-id>"  newName: "Slide 2"

# 4. Read state and batch-update the duplicate
get_document
batch_update  updates: [
  { nodeId: "abc", textContent: "01" },
  { nodeId: "def", textContent: "White space is not wasted space" }
]
```

### All 68 Tools

| Category | Tools |
|----------|-------|
| **Session** | `create_session`, `attach_session`, `wait_for_connection`, `session_status`, `close_session` |
| **Reading** | `get_document`, `get_selection`, `get_node_tree`, `list_artboards`, `find_nodes` |
| **Creating** | `create_artboard`, `add_section`, `add_node` |
| **Modifying** | `update_node`, `update_class`, `update_artboard`, `batch_update`, `replace_section` |
| **Animation** | `list_animation_pr