{"id":87678,"plugin_id":"plugin_asdk_app_6ac768a541148191adc9588132f9f44c","kind":"skill","collection_source":"plugin_package","comparison_source":null,"observed_at":"2026-11-09T18:08:40.652Z","digest":"34c3ccd3e1ce6f6a0d1a08803a160414c51bc7623bfa784d357685e3c9746da2","against":null,"payload":{"description":"Build, edit and publish Captino funnel step pages (landing pages, opt-in pages, thank-you pages, popups) from a brief, using the page builder MCP tools and GrapesJS project data made of Captino components. Use when the user asks to \"build a landing page\", \"create a page for my funnel\", \"add an opt-in page\", \"change the headline on my page\", \"add a popup\", \"publish the page\", or wants a website or funnel page written or changed without opening the visual builder.","included_files":[{"relative_path":"agents/openai.yaml","size_in_bytes":474}],"name":"page-builder","skill_md_contents":"---\nname: page-builder\ndescription: Build, edit and publish Captino funnel step pages (landing pages, opt-in pages, thank-you pages, popups) from a brief, using the page builder MCP tools and GrapesJS project data made of Captino components. Use when the user asks to \"build a landing page\", \"create a page for my funnel\", \"add an opt-in page\", \"change the headline on my page\", \"add a popup\", \"publish the page\", or wants a website or funnel page written or changed without opening the visual builder.\n---\n\n# Page builder\n\nWrites or changes the page of a funnel step as GrapesJS project data built from\nCaptino components, checks it with the compiler, saves it as a draft and, when\nthe user wants, publishes it. The result is the same as a page made in the\nvisual builder, so the user can keep editing it there afterwards.\n\n## Prerequisites\n\nUses the Captino MCP tools `get_page_builder_reference`, `get_page_project`,\n`validate_page_project`, `save_page_project`, `publish_page`,\n`create_funnel_step`, `list_funnels`, `get_funnel` and `list_funnel_steps`.\nNeeds **Funnel: write** access, granted when connecting Captino (read is enough\nfor the reference, reading a project and validating). If the tools are missing\nor fail with 401/403, run the `captino-setup` skill.\n\nOnly **site steps created with the page builder** can be built this way. Form\nsteps and legacy template steps are rejected with \"not a page builder step\";\nbuild and attach forms with the `form-builder` skill.\n\n## Workflow\n\n### 1. Understand the brief\n\nBefore writing anything, know: the goal of the page (collect leads, sell,\ninform, thank), the audience, the single call to action, the tone, and any\nbrand colors, fonts, images or copy the user already has. Ask only for what\nyou cannot infer; one short question is better than a form. Use the user's own\nwords for the copy when they gave some, and write concise, concrete copy when\nthey did not. Never invent testimonials, numbers or claims about the user's\nproduct.\n\n### 2. Resolve the funnel and the step\n\n1. Find the funnel with `list_funnels` (`query` = the name), then `get_funnel`\n   for its `steps`, `gdprCompliant` and `visitUrl`. Ask if the name is ambiguous.\n2. Pick the step:\n   - Editing an existing page: the step the user named. Check `type: Site`,\n     `editorType: GrapesJs`, and note `isPublic` and `hasDraft`.\n   - New page: `create_funnel_step` with the funnel id and a name such as\n     \"Landing page\". It is appended to the funnel, unpublished, with a path\n     derived from the name. A new funnel needs `create_funnel` first (name and\n     subdomain).\n3. Note the `path` of every step. The opt-in form's redirect target is a step\n   path, and buttons that link between steps use `/{path}`.\n\n### 3. Read the reference once\n\nCall `get_page_builder_reference` once per conversation and keep it. It is the\nsource of truth: component types with their properties (`traits`), allowed\nvalues (`options`), defaults, the region rules and a small valid example. The\nsummary below is for orientation; when they disagree, the reference wins.\n\n### 4. Author the project data\n\nThe project is one JSON object:\n\n```json\n{\n  \"pages\": [{ \"frames\": [{ \"component\": { \"type\": \"wrapper\", \"components\": [ ...regions or sections... ] } }] }],\n  \"styles\": [],\n  \"assets\": []\n}\n```\n\nRules:\n\n- Exactly one page, one frame, a `wrapper` root.\n- A component is `{ \"type\": \"captino-…\", \"components\": [...] | \"text\", \"attributes\": {...}, \"cap-…\": value }`.\n  Traits with `changeProp: true` are top-level `\"cap-…\"` properties; the rest\n  (`href`, `id`, `title`) go in `attributes`. Text and button labels are a\n  string in `components`; inline HTML is limited to `b`, `i`, `br`, `span`.\n- Structure: `wrapper` › `captino-region` (`cap-region-kind`: `header`,\n  `template`, `footer`, `popups`) › `captino-section` (or `captino-modal` in\n  `popups`) › `captino-stack` / `captino-columns` › content. Regions may be\n  omitted; stray sections land in the template region.\n- Use Captino components only. Never raw HTML elements; `captino-custom-code`\n  is the last resort for embeds.\n- Give components you may want to style or reference an `attributes.id`.\n  Custom CSS goes in `styles` as `{ \"selectors\": [\"#id\"], \"style\": { ... } }`,\n  but prefer component properties.\n- Images and videos are absolute URLs the user provided or that already exist\n  in Captino. Do not make up image URLs; leave images out or ask.\n- Values of select properties must be one of the listed options, as strings.\n\nComponent summary (properties in the reference are authoritative):\n\n| Component | Use | Key properties |\n| :-- | :-- | :-- |\n| `wrapper` | Page theme | `cap-accent-primary`, `cap-accent-secondary`, `cap-bg`, `cap-font-family`, `cap-heading-font-family`, `cap-radius-scale` (`default`, `sharp`, `rounded`, `pill`), `cap-section-spacing`, `cap-button-style` |\n| `captino-section` | Full-width band | `cap-max-width` (`none`…`1200px`), `cap-padding-y`, `cap-padding-x`, `cap-bg`, `cap-bg-image` |\n| `captino-stack` | Flex column or row | `cap-direction` (`column`, `row`), `cap-align`, `cap-justify`, `cap-gap`, `cap-padding`, `cap-wrap`, `cap-collapse` |\n| `captino-columns` › `captino-column` | Side-by-side layout | `cap-gap`, `cap-collapse` (`never`, `tablet`, `mobile`); children must be `captino-column` |\n| `captino-text` | Any text | `cap-format` (`title`, `subtitle`, `body`, `small`, `quote`), `cap-align`, `tagName` (`h1`…`h6`, `p`) |\n| `captino-button` | CTA link or modal opener | `attributes.href`, `cap-variant` (`primary`, `secondary`, `outline`, `ghost`), `cap-corners`, `cap-action` (`link`, `open-modal`), `cap-modal-target`, `cap-link-new-tab` |\n| `captino-optin-form` | Lead capture, wired to Captino | `cap-show-name/email/phone/company`, labels and placeholders, `cap-submit-label`, `cap-after-submit` (`message`, `close-modal`, `redirect-step`, `redirect-url`), `cap-redirect-step` (a step path), `cap-redirect-url` |\n| `captino-image` / `captino-video` | Media | `cap-src` + `cap-alt` / `cap-url` (YouTube or Vimeo), `cap-fit`, `cap-corners`, `cap-height`, `cap-ratio` |\n| `captino-bullet-list` › `captino-bullet-item` | Benefit lists | `cap-marker` (`disc`, `check`, `arrow`) |\n| `captino-modal` › `captino-modal-content` | Popup in the `popups` region | `cap-modal-id`, `cap-trigger` (`button`, `load`), `cap-delay`, `cap-size` |\n| `captino-input`, `captino-checkbox`, `captino-map`, `captino-custom-code` | Standalone field, checkbox, Google Map, embed | see reference |\n\nPatterns that work:\n\n- **Hero**: section (`cap-max-width: 960px`) › stack (`cap-align: center`,\n  `cap-gap: 24px`) › `captino-text` title as `h1` centered, `captino-text`\n  subtitle, `captino-button` or `captino-optin-form`.\n- **Benefits**: section › `captino-columns` with three `captino-column`s, each\n  holding a `captino-text` subtitle and a body text, or one\n  `captino-bullet-list` with `cap-marker: check`.\n- **Opt-in page**: hero copy on the left column, `captino-optin-form` on the\n  right; `cap-after-submit: redirect-step` with `cap-redirect-step` set to the\n  thank-you step's path. Show only the fields the user needs; every extra field\n  lowers conversion.\n- **Popup**: `captino-modal` (`cap-modal-id: \"offer\"`) in the `popups` region\n  holding a `captino-modal-content` with the form; a `captino-button` with\n  `cap-action: open-modal` and `cap-modal-target: \"offer\"` opens it.\n- **Footer**: `footer` region › section › stack row with small texts. The\n  funnel's GDPR links are added by Captino when `gdprCompliant` is on; do not\n  hand-write a cookie banner.\n\nSet the theme on the `wrapper` once (accent color, fonts, radius) instead of\ncoloring individual components; the components follow the theme.\n\nMinimal example:\n\n```json\n{\n  \"pages\": [{ \"frames\": [{ \"component\": {\n    \"type\": \"wrapper\",\n    \"cap-accent-primary\": \"#7581F0\",\n    \"components\": [{\n      \"type\": \"captino-region\", \"cap-region-kind\": \"template\",\n      \"components\": [{\n        \"type\": \"captino-section\", \"cap-max-width\": \"960px\",\n        \"components\": [{\n          \"type\": \"captino-stack\", \"cap-align\": \"center\", \"cap-gap\": \"24px\",\n          \"components\": [\n            { \"type\": \"captino-text\", \"tagName\": \"h1\", \"cap-format\": \"title\", \"cap-align\": \"center\", \"components\": \"Grow your audience\" },\n            { \"type\": \"captino-text\", \"cap-align\": \"center\", \"components\": \"Join 2,000+ marketers who get our weekly playbook.\" },\n            { \"type\": \"captino-optin-form\", \"cap-show-name\": false, \"cap-submit-label\": \"Send me the playbook\", \"cap-after-submit\": \"redirect-step\", \"cap-redirect-step\": \"thank-you\" }\n          ]\n        }]\n      }]\n    }]\n  } }] }],\n  \"styles\": [],\n  \"assets\": []\n}\n```\n\n### 5. Validate, then save\n\n1. `validate_page_project` with the funnel id, step id and the project. It\n   returns `isValid` plus `errors`, each naming the JSON path of the offending\n   node, and `warnings`. Fix every error and validate again; do not save an\n   invalid project. Pass `includeHtml: true` only when you need to inspect the\n   output.\n2. `save_page_project` with `publish: false` stores the compiled project as\n   the step's draft. The response carries the step (`hasDraft: true`),\n   `warnings` and `htmlLength`.\n3. Publishing makes the page live and the step public. Only do it when the user\n   asked for it or confirms: `save_page_project` with `publish: true`, or\n   `publish_page` for a draft saved earlier. Publishing needs an active\n   subscription; report the error plainly if it fails. The draft is kept.\n\n### 6. Editing an existing page\n\n1. `get_page_project` returns `source` (`draft`, `published` or `empty`) and\n   the `projectData`. When `source` is `draft`, tell the user there are\n   unpublished changes that the edit will build on.\n2. Change only what the user asked for. Keep existing `attributes.id`,\n   `classes`, `styles` and component order; the visual builder stored them.\n3. Validate and save as in step 5. Saving always writes the draft; the live\n   page changes only on publish.\n\n### 7. Report\n\nState what was built or changed and where it is, in a few lines: the funnel and\nstep names, the step path, whether it is a draft or live, and the page URL\n(`visitUrl` from `get_funnel` plus `/{path}`) when it is live. Mention warnings\nfrom the compiler only when they need action. Offer the next step once: publish\nthe draft, add a thank-you page, or wire the form's redirect.\n\n## Pitfalls\n\n- `pages` must contain exactly one page; a funnel step is one page.\n- Unknown `type` values and select values outside the options are errors, not\n  warnings. Read them from the reference instead of guessing.\n- `cap-redirect-step` takes the target step's **path**, not its id.\n- A `captino-columns` may only contain `captino-column`; a `captino-modal`\n  only lives in the `popups` region; the `header`, `template` and `footer`\n  regions only accept `captino-section`.\n- `attributes.class` is accepted but `classes` is what the builder uses; do not\n  add framework CSS classes, they are not on the published page.\n- Do not paste whole HTML documents into `captino-custom-code`; build the page\n  from components so the user can keep editing it visually.\n"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}