efecto-social-media

What this skill does

# 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 className="flex flex-col items-center justify-center gap-8 p-16 w-full h-full">
  <h1 className="text-7xl font-extrabold text-white text-center leading-none">Stop designing like it&apos;s 2020</h1>
  <p 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_presets`, `apply_animation_plan`, `clear_animations` |
| **Organizing** | `move_node`, `duplicate_node`, `duplicate_artboard`, `group_nodes`, `ungroup_node`, `reorder_node` |
| **Selection** | `select_nodes`, `deselect_all`, `set_visibility`, `delete_nodes`, `delete_artboard` |
| **Alignment** | `align_nodes`, `distribute_nodes` |
| **Fill & Export** | `set_fill`, `export_image` |
| **Viewport** | `zoom_to_artboard`, `zoom_to_fit`, `set_viewport`, `move_artboard` |
| **Document** | `rename_document`, `new_document` |
| **History** | `undo`, `redo` |
| **Theme** | `get_theme`, `set_theme`, `set_theme_mode`, `reset_theme` |
| **Quality** | `audit_design`, `repair_design` |

**Scoped reads (large docs).** `get_document` returns the whole tree by default — on multi-artboard carousels that can blow past tool-result token caps. Prefer scoped modes: `outline: true` (one-line summary per top-level child), `artboardId: "..."` (single slide), `maxDepth: N` (cap descent; 0 = artboard header only, 1 = top-level children). Response includes an approx-token count so you can decide whether to widen. Drill into a subtree with `get_node_tree` after.

**Routing inspection.** `session_status` returns the legacy single-session shape by default (sessionId, paired, browserConnected, knownSessions). Pass `{ all: true }` for the list shape — every session in this MCP process with isActive/paired flags. If this MCP process restarted, `attach_session` with the current browser URL makes that session active again.

### JSX Format for `add_section`

Write standard HTML tags with Tailwind `className`. The tag determines the node type:

```
<div>/<section>/<nav>  → frame       <img>     → image
<h1>-<h6>/<p>/<span>   → text        <button>  → button
<a>                    → link        <svg>     → icon
<input>                → input       <video>   → video
```

Icons: `<svg icon="arrow-right" className="w-5 h-5 text-gray-600" />`

### Critical Gotchas

- **Artboard `className` must include `flex flex-col`** — without it, children overlap at (0,0)
- **Artboard `backgroundColor` is a property, NOT a className** — use `backgroundColor: "#111827"`, not `className: "bg-gray-900"`
- **Never use arbitrary hex in className** — `bg-[#f9f9f9]` silently fails. Use named colors (`bg-gray-50`) or inline `style`
- **Use `grow` instead of `flex-1`** — `flex-1` doesn't work in Efecto
- **Buttons ignore children** — use a flex container with `<span>` + `<svg>` instead
- **Always add `w-full`** on direct children of artboards
- **For carousels**: use `duplicate_artboard` to create slides, then `batch_update` to change content per slide

---

## Images — Use Real Photos, Not Placeholders

Use `search_images` to find free, high-quality stock photos from Lummi. **No session required** — call it anytime.

```
search_images
  query: "team celebration"
  orientation: "square"
  luminance: "bright"
  limit: 4
```

Then apply images to your designs:

- **Image node**: `add_node` with `type: "image"`, `src: "<url>"`, `alt: "..."`, `className: "w-full h-full object-cover"`
- **Background fill**: `set_fill` with `fill: { type: "image", url: "<url>", size: "cover" }`
- **In JSX**: `<img src="<url>" alt="..." className="w-full h-full object-cover" />`

**Tips for social media**: Match `orientation` to the platform format — `square` for Instagram/LinkedIn posts, `vertical` for Stories/Reels/TikTok, `horizontal` for YouTube thumbnails/Twitter. Use `luminance: "dark"` for dramatic social content. Real photos make social media content feel authentic — avoid empty placeholder boxes.

---

## Shader Nodes & Visual Effects

Make social media content stand out with shader nodes. Use `add_node` with `type: "shader"`.

### Generative Backgrounds

Eye-catching backgrounds without images — perfect for quote cards, carousels, and story slides:

```
add_node
  parentId: "<artboard-id>"
  type: "shader"
  shaderType: "meshGradient"
  className: "w-full h-full"
```

**Shader types**: `meshGradient` (organic), `liquidMetal` (premium), `chrome` (bold), `pulsar` (energy), `particles` (ambient), `fireworks` (celebration).

### Apply Effects to Photos

Process images with ASCII, dither, halftone, or glitch effects for scroll-stopping visuals:

```
search_images  query: "team photo"  orientation: "square"  limit: 1
add_node
  parentId: "<artboard-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<url>", mediaType: "image", objectFit: "cover" }
  effectId: "ascii-standard"
  effectEnabled: true
  className: "w-full h-full"
```

**Best effects