EST. 2026 · A CLAUDE SKILL · No. 01
The SP Page Builder
Compositor.
A screenshot, an HTML page, a Figma export, or a single written sentence goes in — and verified, native-first, crash-safe SP Page Builder 6 layout JSON comes out. Now with full EasyStore commerce support.
FIG. 1 — The schema, set once and set correctly.
SP Page Builder's layout JSON is exact and unforgiving. The Import button expects a different wrapper than a database insert. Heading colours are objects, not strings. A lean settings object renders on the page yet crashes the editor the instant you click the addon. This compositor encodes all of it as verified ground truth — every addon emitted from its real default block — so the layout imports cleanly and opens without error the first time.
No. 02 / Features
Everything it knows,
so you do not have to.
I
111 addons catalogued
Every SP Page Builder 6 core addon plus all 42 EasyStore commerce addons — exact field keys, types, and defaults.
II
Verified field shapes
All 46 field-value types, including the 17 that serialise as objects — typography, advancedcolor, media, transform — with precise structure.
III
Crash-safe settings
Every addon emitted from its real default block, correctly shaped — so the editor settings panel opens instead of crashing on import.
IV
Native-first build
Existing addon first, styled with its own fields; custom CSS only for native-less effects; raw HTML a true last resort.
V
EasyStore commerce
42 store addons in four categories, the product-list card template, the Filter panel, and the context rules that keep them rendering.
VI
The div primitive
The verified flat-children model for flex and grid containers — cards, chip rows, and sub-layouts built the way the builder stores them.
VII
CSS-target precision
Padding and background on the inner element; margin and width on the wrapper; button borders on the button itself.
VIII
Four CSS scopes
Page, section, addon, and import-envelope CSS — each one's real selector and which to reach for, including the raw unscoped page CSS.
IX
Render-tested traps
Button borders scoped correctly, column borders using the keys that work, no negative-margin hacks — each fix found on a live screen.
X
Native animations
Scroll reveals through the real animation gate and class names — not hand-rolled keyframes that break inside the editor.
XI
Two output formats
The import-layout envelope for the Import button and the raw content-column form for direct database inserts.
XII
Fifteen rules
A pre-output checklist enforces layout maths, unique IDs, responsive collapse, correct field shapes, and crash-safe settings on every generation.
FIG. 2 — Built the way the builder stores it — not HTML dressed up as a layout.
No. 03 / Commerce
Full EasyStore support,
in four categories.
Mention a store, products, or a cart and the compositor reaches for the right EasyStore addon — each with its verified context, so it renders instead of coming up empty.
A
EasyStore
Cart, search, category, pagination status, and the Product List engine. Context-free — drops onto any page.
B
EasyStore List
The card-template fields — thumbnail, title, price, ratings, badge, add-to-cart — that repeat per product inside a Product List.
C
Single Product
Title, gallery, price, variants, reviews, specification and more — bound to a single product detail layout.
D
Collection
Title, thumbnail, and description for a collection landing layout.
A product grid is one Product List addon: it queries products by source and limit, and repeats a card template held in its items array. The Filter panel sits in a sidebar and refines the grid by URL — wired by sharing the page, needing no manual link.
No. 04 / Method
From design to live page
in four movements.
01
Install the compositor
Add sppb-page-builder.skill to Claude — in the app, on claude.ai, or in Claude Code. It loads its rules, the 111-addon catalogue, and the default-settings blocks.
02
Hand over a design
Paste a screenshot, an exported HTML page, a Figma export, or just describe the page — a storefront included. Say what to keep or ignore.
03
The JSON is composed
Every block is mapped to its closest native addon, started from that addon's real default block, made responsive, and validated against the checklist.
04
Import into the builder
Choose Import Layout, paste the JSON — the layout arrives fully built, editable, and opening cleanly in the settings panel. Or write it to the content column.
FIG. 3 — Every rule confirmed against a live install.
Colophon / Why it differs
Verified on screen,
not guessed.
Most generated SPPB JSON looks right and fails on import, or imports and then crashes the editor the moment you click an addon — a settings panel reading a malformed value.
This compositor was built the opposite way: every rule confirmed against a live install, every fault — including the panel crash — reproduced, traced, corrected, and codified so it can never recur.
No. 05 / Guarantees
Rules it never breaks.
A selection of the fifteen non-negotiable rules baked into every generation.
Crash-safe settings
Every addon starts from its complete, correctly-shaped default block, so the editor panel opens instead of crashing on a malformed value.
Valid by construction
Layouts always sum to twelve columns, every node carries a unique id, and the JSON parses — checked before you ever see it.
Correct field shapes
Heading colours are objects, typography carries per-breakpoint value and unit, arrays stay arrays — never a guessed scalar.
Right context for commerce
Single addons only on a single-product layout, list addons inside a Product List — so EasyStore renders instead of coming up empty.
Existing addon first
If an addon already does it — progress bars, counters, product cards — it is used and styled, never rebuilt in markup.
Responsive by default
Every multi-column row folds to full width on phones and every type size steps down — no desktop measures left on mobile.
Install it, and describe
your next page.
The schema is handled — storefront or landing page alike. You are free to think only about the design.