webcake-landing-mcp: Skill for Claude Code

webcake-landing — generate & edit Webcake landing pages

Workflow + rules for using the webcake-landing MCP to build a complete Webcake page_source from a brief, and to edit existing pages. The same rules are served at runtime via the server instructions (src/domains/landing/instructions.ts) — this skill is the long form.

Tools (21)

Reference/validation (no backend/env needed): get_generation_guide, list_elements, get_element, new_element, new_page_skeleton, get_page_schema, validate_page, layout (exact centering/row/grid/stack coordinates for BOTH breakpoints — call it instead of hand-computing left/top; row/grid auto-stack on mobile).

Media (works out of the box; no Webcake credentials required for either tool): search_images — real stock photos, ONLY for image slots with NO source image (nothing supplied by the user, nothing in the reference HTML/URL); returns hotlinkable URLs (src.large hero, src.medium card) to drop into an image element's specials.src. Works out of the box via a shared proxy; optional own key via PEXELS_API_KEY env / x-pexels-key header — free at https://www.pexels.com/api/. On ok:false (or no fitting photo) → find a real image yourself via web search/fetch and re-host it with upload_images; https://placehold.co/<w>x<h> is the LAST resort only after both fail.

get_icon_svg — resolve icon-font NAMES (ms:<name> Material Symbols, fa:<name> Font Awesome — the block.icon values from ingest, or a bare/Iconify name) into real inline <svg> via the Iconify API, so a clone reproduces a reference's icons (esp. Google Stitch, which uses an icon-font class) exactly and self-contained. Material Symbols resolve to the OUTLINED variant (filled fallback). Render each svg as Webcake's native icon — a rectangle: put it in BOTH responsive.{desktop,mobile}.config.svgMask, set styles.background to the icon color, and keep the box SQUARE (the svg is a MASK so it's BLANK without a background and stretched if the box isn't square; validate_page warns on each). No creds. upload_images — converts external image URLs (from ingest_html/ingest_url results), data: URIs, or local file paths from the user's machine (/abs/path.jpg, ~/Pictures/logo.png, file:///…, C:\…) into Webcake-hosted URLs (statics.pancake.vn) for use in specials.src. Pass local paths directly in urls — NEVER upload a user's local file to a third-party host (catbox, imgur, transfer.sh…) to obtain a URL first. Reference images are the user's assets: use this for BOTH intents (adapt AND clone) whenever the page is built from a reference HTML/URL, whenever the user provides image URLs, or whenever the user provides local image files — never swap them for stock photos. Uses multipart upload (200 MB backend limit). Batch: up to 20 entries/call in parallel. No Webcake creds needed. FILES INTO THE USER'S MEDIA COLLECTION ("bộ sưu tập"): with Webcake creds AND a resolved org it uploads through the editor's own media-picker route, which creates the Asset record so the image is re-pickable in the editor (each images[<original>] reports collection:true + asset_id; top level adds collection_uploads / collection_org_id / collection_note). THE ORG IS REQUIRED for a collection upload and must be the SAME org the page is created in — settle it during INTAKE, before any image work (see the workflow below), never mid-build. organization_id explicit / WEBCAKE_ORG_ID / x-webcake-org-id win; exactly ONE org auto-selects; with 2+ orgs and none chosen the call returns ok:false + reason:"organization_required" and the org list — re-call with organization_id (same contract as create_page; it no longer falls back to a personal collection). Only a MISSING JWT falls back to the public CDN endpoint (collection:false) exactly as before — URLs work and the page renders, there's just no Asset row. Optional in_folder (a specific sub-folder; overrides the resolved org root; ignored on the public fallback). UPLOADS BY DEFAULT (dry_run defaults to false): wait for the images map, then put each images[<original>].url into every element that used <original>. NOTE: for reference/web image URLs you usually DON'T need this — the save itself auto-hosts any external image URL left in the source, taking the same collection path (see below). The cases that still need upload_images are a user's LOCAL FILE PATH (the save can't read local files) and filing into a specific collection folder via in_folder. Pass dry_run:true only for an explicit no-op preview (local paths: reports file existence and size).