К основному содержанию
скилл CX Codex

superwall-editor — скилл для Claude Code: правка пейволов Superwall

Скилл для сборки и правки пейволов, онбординга и web2app-сценариев Superwall прямо из терминала. Пригодится, когда редактор открыт в браузере, а работать хочется из агента.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add superwall/skills --skill superwall-editor -a claude-code
Открыть на GitHub

Что делает superwall-editor

Пейволы в Superwall собирают в браузерном редакторе, и он отдаёт свои инструменты через защищённый релей. Скилл работает с той же поверхностью, что и MCP-шлюз, поэтому каждый вызов попадает в живую сессию, которую пользователь держит открытой.

Сначала нужно привязаться к сессии. Если есть SUPERWALL_API_KEY, идентификатор приложения и пейвола, запускается scripts/sw-editor.sh expose --application-id <id> --paywall-id <id> --agent-name <agent> --open --wait — человеку останется пройти авторизацию в браузере. Иначе берётся код сопряжения из интерфейса редактора и выполняется scripts/sw-editor.sh attach <pairing-code> --agent-name <agent>. После привязки список доступных инструментов читают через tools, а вызывают их через call.

Имена инструментов и их параметры скилл не запоминает: набор живёт в бандле браузера и меняется от релиза к релизу, поэтому перед первым вызовом незнакомого инструмента стоит выполнить tools. Коды сопряжения живут около 10 минут и меняются при отвязке, так что просроченный код придётся запросить заново. Ещё один клиент на той же сессии получит session_locked — предыдущую привязку надо отпустить. Когда работа закончена, сессию освобождают командой release.

Какие задачи решает

  • собрать пейвол в редакторе Superwall, не переключаясь из терминала
  • поправить тексты и стили в уже готовом экране
  • проверить онбординг и web2app-сценарий перед запуском
  • подхватить сессию редактора по коду сопряжения
  • узнать, какие инструменты доступны в текущем релизе редактора

Примеры запросов агенту

  • Подключись к редактору Superwall по коду сопряжения и покажи, какие инструменты сейчас доступны.
  • Собери пейвол для приложения <id> и пейвола <id> через expose и сделай скриншот после правок.
  • Поправь тексты и стили в текущем экране, потом освободи сессию.

Как установить superwall-editor

1Через Skills CLI (Vercel)

npx skills add superwall/skills --skill superwall-editor -a claude-code

2Вручную: положить файлы

~/.claude/skills/superwall-editor/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/superwall-editor/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о superwall-editor

Как установить superwall-editor в Claude?

Выполните npx skills add superwall/skills --skill superwall-editor -a claude-code. Скилл окажется в ~/.claude/skills/superwall-editor/SKILL.md.

Что делает superwall-editor?

Даёт агенту доступ к инструментам браузерного редактора Superwall: сборка и правка пейволов, онбординга и web2app-сценариев. Работа идёт в той сессии редактора, которую вы держите открытой.

Почему код сопряжения перестаёт работать?

Коды живут примерно 10 минут и меняются при отвязке. Если приходит attach_failed, попросите показать текущий код и привяжитесь заново.

Исходный текст

SKILL.md · MIT
---
name: superwall-editor
description: Build, edit, or review Superwall paywall, onboarding, and web2app flows from a local coding agent with terminal access. Launch a browser editor session through the local CLI or attach to one with a pairing code, then discover its current tools. Covers native sw-* elements, design standards, and the attach/call/release lifecycle.
---

# Superwall Paywall Editor

Paywalls are built in a browser editor that exposes its tools over an authenticated relay. This skill drives the same surface used by the MCP gateway, so every tool runs inside the live browser session the user has open.

## When to use

- The user wants to build, edit, or review a Superwall paywall, onboarding, or web2app flow.
- The user pastes a pairing code and asks you to take over editing.
- The user asks "what tools can you run right now?" Discover them via the browser, not from memory.

## Start here: attach, then discover

Never assume a tool name or signature from memory. The browser is the source of truth and its tool set changes across releases.

For `--agent-name`, use your agent's recognized slug, such as `codex`, `claude`,
or `cursor`. Use `other` for Grok Build, Muse Code, or any agent not listed in
the [CLI reference](references/cli.md#agent-identity).

Preferred API launch flow:

1. Create an auto-expose URL: `scripts/sw-editor.sh expose --application-id <id> --paywall-id <id> --agent-name <agent> --open --wait`
2. Ask the user to complete browser authorization if prompted. The editor auto-exposes; do not ask them to click the expose button.
3. Discover what is available right now: `scripts/sw-editor.sh tools`
4. Invoke tools: `scripts/sw-editor.sh call <tool-name> --args '<json>'`

Fallback manual flow:

1. Ask the user for the **pairing code** shown in the editor UI.
2. Attach: `scripts/sw-editor.sh attach <pairing-code> --agent-name <agent>`
3. Continue with `tools` and `call`.

Full CLI reference: [references/cli.md](references/cli.md).

## How to build and edit

- Workflow, build order, and when to use which tool: [references/workflow.md](references/workflow.md)
- Native `sw-*` elements (multiple-choice, indicator, drawer, picker, lottie, navigation): [references/native-elements.md](references/native-elements.md)
- Design standards, review checkpoints, typography, and conversion principles: [references/design.md](references/design.md)

## Orchestration rules

- Always establish an attachment before editing. Use `expose --open --wait` when possible, otherwise use `attach <pairing-code> --agent-name <agent>`. `tools`, `call`, `status`, `release` all require an attached session.
- Prefer `expose --open --wait` when you have `SUPERWALL_API_KEY`, an application id, and a paywall id. It uses the same relay as manual pairing but removes the human pairing-code step.
- Before calling a tool you have not used this session, run `tools` to confirm it exists and to read the current parameter schema. Tools are defined in the browser bundle, so an updated editor can ship new or renamed tools without changing this skill.
- Use `get_screenshot` (if present in the tool list) every two or three modifications to verify. Don't fly blind.
- Prefer semantic tools (`update_styles`, `set_text_content`, `set_dynamic_value`, `move_nodes`) over re-running `write_html` on existing structure. See `references/workflow.md`.
- Prefer native `sw-*` elements over hand-rolled `<div>` recreations whenever the UI represents a semantic control. See `references/native-elements.md`.
- When parsing CLI output, use `jq`, not Python. Example: `sw-editor.sh call get_subtree --args '...' | jq -r '.content[0].text'`
- Release when the user is done: `scripts/sw-editor.sh release`.

## When things go wrong

- `session_not_ready`: the browser disconnected or reloaded. Ask the user to bring the editor tab back, then re-attach. The pairing code rotates, so they must provide the new one.
- `session_locked`: another client is already attached. The user either attached from another MCP client, or a previous CLI attachment wasn't released. They can detach from the editor UI and you can retry.
- `unauthorized`: the controller token is stale. Re-attach with a fresh pairing code.
- `attach_failed: provide a valid current pairingCode`: pairing codes expire after ~10 minutes and rotate on detach. Ask the user to show you the current one.

© superwall · MIT · superwall/skills

Похожие скиллы

Всё по теме «Фронтенд и UI» →
paywall-upgrade-cro nexu-io Скилл помогает проектировать и оптимизировать экраны апгрейда, paywall и модальные окна upsell. Пригодится при работе над конверсией в SaaS и экспериментах с pricing-страницами. CX Codex +1 2 700установок syncfusion-react-image-editor Syncfusion Inc Скилл для работы с компонентом Syncfusion React Image Editor: подскажет агенту, как встроить редактирование картинок в React-приложение. CX Codex +1 713установок onboarding-ux jezweb Скилл проходит по приложению как новый пользователь, находит места, где он застрянет, и пишет текст с кодом для пустых состояний, подсказок и приветствия. CX Codex +1 1 100установок editor diffusionstudio Анализирует видео, звук и изображения, генерирует медиа через ИИ и собирает видеокомпозиции с помощью Diffusion Studio. CX Codex +1 1 800установок pp-archive-is Matt Van Horn Ищет копии страниц, обходит пейволлы и отправляет адреса в веб-архивы с автоматической сменой бэкенда. Пригодится агенту для чтения закрытых статей и пакетного сохранения ссылок. CX Codex +1 642установок build-game-map-editor MengTo Скилл помогает спроектировать браузерный редактор карт для Three.js и изометрических игр. Он настраивает режим режиссёра, черновики и оверлеи без изменения боевых сохранений. CX Codex +1 1 200установок

Из того же набора3

Спонсоры проекта

Компании, которые помогают держать аналитику открытой