Skills (playbooks)

Fetch real, license-free stock photos AND videos from the Pexels API for storefront/website builds on this multi-tenant content platform — hero/banner images, product photos, blog featured images, content-record images, section backgrounds, team/about photos, and cinematic looping hero/background VIDEOS (search_stock_videos). Use whenever a build needs real imagery instead of broken links, placeholders, or grey boxes (e.g. "the store images are blank", "add real product photos", "find a hero image", "make the hero a video"). Pairs with the shop MCP's upload_image / upload_product_image (and the hero video_url setting) to re-host the asset as a durable, store-owned URL. ALWAYS pick media that match the design's subject + treatment (see shop-core-rules §B).

Build customizer-editable storefront sections on this multi-tenant content platform via the shop MCP server. Produces a Liquid section with a COMPLETE {% schema %} (per-section settings + blocks + presets), wired to the global theme palette (settings.* CSS vars), then places it on a page template so it shows in the theme customizer. Use when the user asks to add/build/edit a storefront section, a hero/banner/feature/FAQ/testimonial block, or make part of a page editable. ALWAYS ask which fields should be editable and which global tokens to use before building.

Build a FULL, COMPLETE content website end-to-end on this multi-tenant content platform — from the homepage to EVERY page (about/services/contact/legal/404), custom content types + records, customizer-editable sections, a theme palette, and mobile-ready chrome with nav authored in the header/footer link_list. Also covers MCP setup (.mcp.json, wmk_ API key, scopes). Use when the user says "build me a website", "build full website", or wants a multi-step site built. This platform is CONTENT-ONLY — no products, cart, checkout, payments, or menus. ALWAYS clarify brand and pages up front.

Build a NON-ecommerce content website on this multi-tenant content platform via the shop MCP — real-estate listings, restaurant menus, agency portfolios, brochure/affiliate/blog sites. Covers the commerce_enabled toggle (hides ecom admin menus + 404s ecom storefront routes), the storefront `content` Liquid Drop + data-driven url_pattern router + pagination, reusing the built-in blog/pages/menus, making content list/detail pages customizer-editable via .json section templates. Also the recipe for turning a Claude Design (claude.ai/design) HTML/CSS handoff into such a site. Use when building a site that is NOT a shop, or implementing a design handoff as a content site. NOT for a shop with a cart — use shop-builder for that.

The canonical cross-cutting rules every shop-MCP build/redesign skill depends on — confirm-the-plan gate, extract-design-spec protocol, image-source choice + re-hosting, the verify-on-draft screenshot gate, every-link-resolves, the layout/section design contract (theme.js + theme-settings-vars + Style group), the palette→CSS-var token map, NO-HARDCODE + storefront render rules (the 5 menu handles, per-template data keys, product-block values), and durability (live vs not-baked). Read this FIRST whenever you build or restyle a store, a section, products, or content via the shop MCP — the other shop-* skills reference these §A–§M anchors instead of repeating them.

Create custom content types and records on this multi-tenant content platform via the shop MCP server — Strapi-like dynamic types (houses, menu items, projects, events, team members…) that are EAV-backed with NO new tables, rendered on the storefront via the `content` Liquid Drop and a data-driven url_pattern router. Use when the user wants a non-product content collection, a directory/listing site, or to add records of a custom type. ALWAYS study the design first, then PROPOSE a content-model plan (which content types + which fields in each + url_pattern) and have the user confirm/choose before creating anything.

The DRAW-FIRST gate — draw a real, self-contained HTML mockup of the target page (homepage for a full build; the page being redesigned; the section being edited) for the user to APPROVE before any code is written. Proactive on every visual task (build/redesign/clone/page-edit/section-edit), not opt-in. Authored in the store's Tailwind utility vocabulary (shop-core-rules §G.2) + token colors so the platform can inject the store's real CSS and the mockup renders in the real design system. Emit it wrapped in ⟦MOCKUP⟧…⟦/MOCKUP⟧; the FE shows it for approve / revise / draw-another-direction / skip; the approved HTML becomes the measurable §B reference and the build matches it section-by-section, top to bottom, with §D verification.

Design-taste rules for building storefront UIs on this platform that look custom-made, not AI-generic — layout variance, typographic hierarchy, spacing rhythm, color discipline mapped to the global tokens, scroll-motion via the built-in data-anim convention, and an anti-slop checklist. Apply to EVERY visual build/redesign/section task ON TOP of shop-core-rules (this skill never overrides the §F/§G/§H contract — it tells you what to do WITHIN it). Distilled from leonxlnx/taste-skill + greensock/gsap-skills (MIT), adapted to the Liquid + CSS-token contract.

Edit ONE page you are PINNED to — a confined, single-page AI chat (the page-builder assistant for a CMS page) on this multi-tenant content platform via the shop MCP. You may read anything for context, but the ONLY content you can change is THIS page (its own sections/content). The platform HARD-BLOCKS everything else (the global palette, theme files, OTHER pages, content types/records/translations, publish-theme, the graphql escape hatch). Use when the chat scope is a single page; do NOT try site-wide work here — tell the user to open the whole-site assistant.

Edit ONE storefront section you are PINNED to — a confined, single-section AI chat (the ✨ assistant on a section row in the theme customizer) on this multi-tenant content platform via the shop MCP. You may read the whole page for context, but the ONLY change you can make is to THIS section's settings/content. The platform HARD-BLOCKS everything else (other sections, page structure, the global palette, theme files, products/menus/collections/blog/translations, publish). Use when the chat scope is a single section; do NOT try to do store-wide work here — tell the user to open the whole-store assistant.

Make a storefront multi-language on this multi-tenant content platform via the shop MCP — UI-string localization with the Liquid `| t` filter + per-store `locales/<lang>.json` theme files, the customizer-editable-AND-localized "Pattern B", per-store locale, and the bilingual one-store-per-language model for dynamic content (products/pages/blog). Use when the user wants a store in EN+VI (or any language pair), asks why text shows English on a VI store, or wants localized section copy. Read `shop-core-rules` first; deep repo/durability mechanics live in `storefront-theme-design` (Pattern B).

Redesign / restyle an EXISTING store that already has real data (pages, blog, content types/records, media) on this multi-tenant content platform via the shop MCP server — WITHOUT destroying data, changing URLs, or taking the live site down. Works on a DRAFT theme, reuses the real catalog (never seeds/wipes), preserves url_keys & menu handles & core features, screenshot-verifies on the draft, then publishes with instant rollback. Use when the user says "redesign this store", "restyle the theme", "make it look like <design> but keep my products", or when a store already has content and only the LOOK should change. Do NOT use for a brand-new/empty store — use shop-builder for that.

A rich catalog of website SECTION TYPES (hero, bento, feature-tabs, timeline, pinned scrollytelling, horizontal case-study scroll, draggable carousel, before/after slider, stats counter, pricing, comparison table, FAQ, gallery, video showcase, marquee, CTA, footer, …) plus a motion-effect palette (entrance/hover/scroll/text/background/SVG/cursor), so a build draws from a WIDE section vocabulary instead of the same hero→3-cards→CTA. Read on any from-scratch visual build/redesign to pick 10–15 section types that FIT the vertical + chosen style, including 2–3 signature "wow" sections. Sits ON TOP of shop-core-rules (contract) + shop-design-taste (taste).