# efecto-web-design

Build web pages and app interfaces in Efecto with JSX, Tailwind CSS, and MCP tools. It fits landing pages, dashboards, and other visual UI work.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 691 installs · ★ 23
- Author: pablostanley
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/pablostanley/efecto-plugin/tree/HEAD/skills/web-design/SKILL.md
- Updated: 2026-08-08
- HTML: https://affpapa.org/en/nevibecode/skills/efecto-web-design

## What it does

efecto-web-design sets up Efecto sessions, artboards, and interface sections. Layouts are sent as JSX, while Tailwind CSS classes control their styling. The skill can inspect the current document, locate nodes, and apply grouped property changes through MCP tools.

The agent works against a live session: the user opens the Efecto URL in a browser, then each edit appears on the canvas. A session expires after 2 hours without activity. The Efecto MCP server is required, and the browser must join the session before its tool calls can run.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pablostanley/efecto-plugin --skill efecto-web-design -a claude-code
```
```bash
npx skills add pablostanley/efecto-plugin --skill web-design -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/web-design/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/web-design/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pablostanley/efecto-plugin --skill web-design -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/web-design/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pablostanley/efecto-plugin --skill web-design -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/web-design/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pablostanley/efecto-plugin web-design
```

2. **Manually: put the files in place**
- File: `.github/skills/web-design/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pablostanley/efecto-plugin --skill web-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pablostanley/efecto-plugin --path skills/web-design
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/web-design/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pablostanley/efecto-plugin --skill web-design -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/pablostanley/efecto-plugin/tree/HEAD/skills/web-design/SKILL.md

## When to use it
- assemble a landing page from JSX sections
- create an artboard with set dimensions
- locate nodes and change their classes
- revise an existing Efecto document

## Example prompts
- Create an Efecto landing page with a session, an artboard, and JSX sections for navigation, hero content, and a call to action.
- Build a dashboard with a vertical Tailwind CSS layout, then give me the session URL.
- Inspect the current Efecto document, find the heading and buttons, and update their classes in one batch.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [pablostanley/efecto-plugin](https://affpapa.org/en/nevibecode/by/pablostanley/efecto-plugin.md) — 2 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md