efecto-web-design — Claude Code skill: what it does, install
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.
npx skills add pablostanley/efecto-plugin --skill efecto-web-design -a claude-code
npx skills add pablostanley/efecto-plugin --skill web-design -a claude-codeWhat efecto-web-design 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.
What it helps with
- 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 for the agent
- 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.
How to install efecto-web-design
1Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill efecto-web-design -a claude-codenpx skills add pablostanley/efecto-plugin --skill web-design -a claude-code2Manually: put the files in place
~/.claude/skills/web-design/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/web-design/
1Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill web-design -a codex2Manually: put the files in place
.agents/skills/web-design/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill web-design -a cursor2Manually: put the files in place
.cursor/skills/web-design/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install pablostanley/efecto-plugin web-design2Manually: put the files in place
.github/skills/web-design/SKILL.md1Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill web-design -a gemini-cli2Platform CLI
gemini skills install https://github.com/pablostanley/efecto-plugin --path skills/web-designManually: put the files in place
.devin/skills/web-design/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add pablostanley/efecto-plugin --skill web-design -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-web-design
How do I install efecto-web-design in Claude Code?
Run npx skills add pablostanley/efecto-plugin --skill efecto-web-design -a claude-code. The installed skill file is then available at ~/.claude/skills/web-design/SKILL.md.
What does efecto-web-design do?
It lets an agent create and edit web UI in Efecto by managing sessions, artboards, JSX sections, document state, and node updates through MCP tools.
What does efecto-web-design need to run?
It needs the Efecto MCP server and a browser connected to an active session. If the MCP process restarts, reconnect to the existing session instead of opening a duplicate.
