[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-automattic-creating-themes":3,"mdc--c66fkj-key":36,"related-org-automattic-creating-themes":1393,"related-repo-automattic-creating-themes":1580},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":31,"sourceUrl":34,"mdContent":35},"creating-themes","create WordPress block themes","Guidelines for creating new WordPress block themes from scratch — load this before generating theme files",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"automattic","Automattic","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fautomattic.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"Full Site Editing","full-site-editing","tag",{"name":17,"slug":18,"type":15},"WordPress","wordpress",{"name":20,"slug":21,"type":15},"Themes","themes",{"name":23,"slug":24,"type":15},"Block Editor","block-editor",31,"https:\u002F\u002Fgithub.com\u002FAutomattic\u002Fdata-liberation-agent","2026-06-08T08:17:50.666611",null,1,[],{"repoUrl":26,"stars":25,"forks":29,"topics":32,"description":33},[],"Extract content from closed web platforms into WordPress-compatible WXR files.","https:\u002F\u002Fgithub.com\u002FAutomattic\u002Fdata-liberation-agent\u002Ftree\u002FHEAD\u002Fskills\u002Fcreating-themes","---\nname: creating-themes\ndescription: Guidelines for creating new WordPress block themes from scratch — load this before generating theme files\ndisable-model-invocation: true\n---\n\n## When to use me\n\nUse this skill when creating a new theme from scratch.\nDo not use this skill when modifying an existing theme.\n\n## General Rules\n\nFollow these rules carefully unless the user explicitly requests otherwise:\n\n- **Focus on the home page first**: Create a beautiful, image-rich home page as the centerpiece of the initial theme. The home page should showcase the theme's aesthetic vision with compelling visuals, strong typography, and engaging layout. Put your creative energy here.\n- **Minimal template set**: On initial theme creation, only create `index.html`. Avoid creating additional templates like `single.html`, `page.html`, `archive.html`, etc. unless the user specifically requests them. Keep the initial scope focused.\n- **Patterns for landing pages**: When creating a theme that includes a landing page or multi-section home page, generate block patterns for each major section (hero, features, testimonials, FAQ, CTA, etc.) and compose them into the `index.html` template. This produces a richer, more polished result. Load the `generating-patterns` skill for detailed guidance.\n- **Prefer templates over patterns for simple themes**: For minimal or single-purpose themes without a landing page, default to templates rather than patterns. Only create patterns when they add clear value.\n- **Pattern visibility rule**: Every pattern you create must be included in a template so the user can immediately preview it. Patterns that exist only in the `patterns\u002F` directory without being used in any template are hard to discover.\n- **Footer credit**: Default to a minimal, neutral credit (or none at all). When rebuilding a user's site as a replica, do not insert third-party branding into the footer. If the user explicitly asks for a credit line, adapt the styling (font size, colors) to match the theme's design. Example:\n  `\u003C!-- wp:paragraph -->\u003Cp>Powered by \u003Ca href=\"https:\u002F\u002Fwordpress.org\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress\u003C\u002Fa>\u003C\u002Fp>\u003C!-- \u002Fwp:paragraph -->`\n\n## Generating Theme Instructions\n\n- Always use the current working directory — do not create a subdirectory for the theme\n- Always include style.css with the required WordPress theme header comment\n- Always create a valid theme.json (version 3) as the central configuration\n- Always create block templates in templates\u002F and template parts in parts\u002F\n- Never use emojis in any generated content — not in headings, paragraphs, button text, or any text\n- Never close the final PHP tag in functions.php\n- Guard functions with function_exists() checks\n- Use `enqueue_block_assets` hook for fonts (not `wp_enqueue_scripts`) to ensure they load in both front-end and editor\n- Define colors, typography, and spacing in theme.json — not in CSS where possible\n- Make the theme FSE-compatible (Full Site Editing)\n- For landing page themes, generate patterns for each section and compose them into templates\n- For simple themes without a landing page, prefer templates over patterns unless the user explicitly requests them\n- Keep functions.php minimal — enqueuing assets, registering patterns, and adding theme support\n\n## Theme File Structure\n\n```\nstyle.css              # Required — theme header comment and base styles\ntheme.json             # Central configuration (colors, typography, spacing, layout)\nfunctions.php          # Minimal — enqueue assets, register patterns, add theme support\ntemplates\u002F             # Block templates\n  index.html           # Required — fallback template\n  single.html          # Single post\n  page.html            # Page\n  archive.html         # Archive\n  404.html             # Not found\n  home.html            # Blog home (optional)\n  search.html          # Search results (optional)\nparts\u002F                 # Reusable template parts\n  header.html          # Site header\n  footer.html          # Site footer\npatterns\u002F              # Block patterns for reusable sections\nassets\u002F                # Static assets (images, local fonts)\n```\n\n## style.css Header (required)\n\n```css\n\u002F*\nTheme Name: Theme Name\nTheme URI: https:\u002F\u002Fexample.com\nAuthor: Author Name\nDescription: Theme description\nVersion: 1.0.0\nRequires at least: 6.0\nTested up to: 6.5\nRequires PHP: 8.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\u002F\u002Fwww.gnu.org\u002Flicenses\u002Fgpl-2.0.html\nText Domain: theme-slug\n*\u002F\n```\n\n## theme.json Essentials\n\n- Use version 3\n- Define settings: colors (palette), typography (fontFamilies, fontSizes), spacing (units, spacingSizes), layout (contentSize, wideSize)\n- Define styles: global styles and block-specific overrides\n- Use appearanceTools: true to enable border, typography, spacing, and color controls\n- Register custom template parts with their area (header, footer, uncategorized)\n- Use style variations to offer different design options\n- Add custom block styles when needed to extend core blocks\n\n## Fonts — self-host the source's real typefaces\n\nWhen replicating a liberated site, **self-host the source's fonts** rather than substituting a Google Font or leaving a system fallback. The deterministic scaffold (`liberate_theme_scaffold`) already does this: it parses `@font-face` rules from the captured HTML\u002FCSS, downloads the referenced font files into `assets\u002Ffonts\u002F`, emits `@font-face` rules in `style.css`, and registers the family in `theme.json` `settings.typography.fontFamilies` with a `fontFace[]` (each entry's `src` is `file:.\u002Fassets\u002Ffonts\u002F\u003Cfile>`). This is generic — capture whatever the source loads (e.g. Larsseit from a Shopify CDN), not a hardcoded family. Heading (display) and body families bind to the captured fonts; the display family is rebound to the real typeface even when the foundation recorded an open *substitute*. NEVER ship headings\u002Fbody in a system fallback when the source font is self-hostable. Sanitize bogus captured line-heights (`0` \u002F `0px`) to a sane default (e.g. `1.2`).\n\n**Uncapturable fonts → free substitution (self-hosted).** Some source fonts can't be self-hosted: Adobe Typekit (`use.typekit.net` serves CSS only, no reachable woff), Monotype, or hashed builder family names. For these the scaffold AUTO-SUBSTITUTES to the closest FREE web font, downloads *that* font's woff2 into `assets\u002Ffonts\u002F`, and binds the body\u002Fdisplay family to it — so body copy renders in a real web font, never a bare `sans-serif`. The mapping table + gstatic URLs live in `src\u002Flib\u002Freplicate\u002Ffont-substitution.ts`; the human-readable starter table is in `skills\u002Fdesign-foundations\u002Freferences\u002Ftheme-tokens.md` (e.g. `quasimoda → Hanken Grotesk`, `Proxima Nova → Montserrat`, `Avenir → Inter`). Only genuinely uncapturable families are swapped — a self-hostable source font (e.g. Larsseit on a CDN) is always preferred. Verify the substitute computes live (body paragraphs report the substituted family).\n\n## Header (replica) — source logo + primary nav, NEVER page-list\n\nBuild the site header from the SOURCE header, not WordPress's page list:\n\n- **Logo:** the source's real logo image (a `core\u002Fimage` \u002F site-logo of the header `\u003Cimg>`\u002FSVG), not `wp:site-title` text and not a product image. **Localize it** — download the CDN logo into the theme `assets\u002F` (or WP media) and reference it locally (`\u002Fwp-content\u002Fthemes\u002F\u003Cslug>\u002Fassets\u002F\u003Cfile>`); never hot-link the source CDN. The scaffold does this via `localLogoPath`.\n- **Nav:** explicit `wp:navigation-link`s for the source's **top-level primary menu only**. NEVER use `wp:page-list` — it auto-lists every published WP page (Sample Page, Checkout, account, etc.) as junk. Drop mega-menu sub-links and the mobile-drawer duplicate from the menu.\n- **Utility icons:** re-add the source header's search \u002F account \u002F cart icon cluster on the right (dropped from the *primary nav* but part of the chrome). Ship each glyph as a theme SVG asset (`assets\u002Ficon-*.svg`, explicit stroke color) referenced from a `core\u002Fimage` link — NOT `wp:html` (banned). cart→`\u002Fcart`, account→`\u002Faccount`, search→`\u002F?s=`. The scaffold emits this.\n- **Announcement bar:** preserve the source's top announcement\u002Futility bar when present.\n\n## Google Fonts (fallback only — prefer self-hosting source fonts above)\n\nWhen a font is genuinely not self-hostable, use `enqueue_block_assets` hook (not `wp_enqueue_scripts`) to ensure fonts load in BOTH the front-end AND block editor:\n\n```php\nfunction theme_fonts() {\n    wp_enqueue_style(\n        'theme-fonts',\n        'https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;600;700&display=swap',\n        array(),\n        null\n    );\n}\nadd_action( 'enqueue_block_assets', 'theme_fonts' );\n```\n\n## Generating a landing page\n\n- **YOU DECIDE** which sections\u002Fblocks best serve this specific site. Do not follow a rigid template.\n  Consider the user site type and audience to determine the optimal page structure.\n  Examples:\n  - A portfolio might need a full-bleed project gallery\n  - A SaaS might need feature grids\n  - A restaurant might need a reservations widget\n  - An agency might need case study cards\n- **Always include a header and footer**, but the sections in between are your creative choice.\n- Treat every block as a **self-contained section** (one dominant semantic wrapper) whose markup will live inside its own file.\n- Keep copy **realistic but placeholder-friendly**; never reference real clients or brands.\n- Favor **semantic HTML**, class-based styling hooks, and **shallow DOM trees** that respond well on mobile.\n- **Section margin reset**: Add `\"style\":{\"spacing\":{\"margin\":{\"top\":\"0\"}}}` to every top-level Group block that wraps a landing page section. This overrides WordPress's default top margin on direct children of `.wp-site-blocks` and can be easily adjusted by users in the editor.\n- **Section layout widths**: Hero sections, header groups, cover blocks, and feature grids should use `\"align\":\"wide\"` or `\"align\":\"full\"` rather than defaulting to narrow content width. Only use default (content) alignment for text-heavy reading sections.\n- Do **not** use `\u003Cinner-blocks>`; output the full expanded markup inside each block.\n- **No decorative HTML comments**: Never insert section-labeling comments like `\u003C!-- Hero Section -->` or `\u003C!-- Services Section -->` in templates, template parts, or patterns. Only WordPress block comments (`\u003C!-- wp:block-name -->`) are allowed.\n- Each site payload includes `\u003Ctypography>` instructions.\n  Apply those font stacks via **inline `style` attributes** (e.g.,\n  `style=\"font-family: 'Space Grotesk', 'Helvetica Neue', sans-serif;\"`) on the root wrapper and any hero\u002Fheadline elements —\n  **do NOT output `\u003Cstyle>` tags** (the build strips them).\n- Prefer a **sticky nav** (`sticky top-0 z-50`) when appropriate, but ensure it degrades gracefully on mobile.\n- Use **Tailwind motion utilities** (`transition`, `duration-300`, `motion-safe:animate-fade`, `scroll-mt-24`, etc.) to add gentle entry animations and interactive feedback without custom JavaScript.\n- Be **bold with layout choices**. Use asymmetric grids, overlapping elements, creative whitespace, and distinctive visual treatments.\n\n## Reference Files\n\nBefore generating theme files, read the relevant references from the `references\u002F` directory next to this skill file.\n\n- **`references\u002Fblock-html.md`** — REQUIRED: read this FIRST. Block HTML validity rules, block comment ↔ HTML matching, image\u002Fcover\u002Fbutton block structure. Violating these causes \"unexpected or invalid content\" errors.\n- **`references\u002Fdesign-direction.md`** — REQUIRED: read this before generating any theme files. Contains guidelines and good design directions.\n- **`references\u002Fnavigation.md`** — read this before generating any header template part, covers `wp:navigation` block markup, overlay (hamburger menu)\n- **`references\u002Fquery-loop.md`** — read this if the theme must display dynamic content (blog posts, archives, search results) in templates or patterns\n",{"data":37,"body":39},{"name":4,"description":6,"disable-model-invocation":38},true,{"type":40,"children":41},"root",[42,51,57,63,68,195,201,285,291,303,309,437,443,481,487,610,688,694,699,874,880,899,980,986,1302,1308,1321,1388],{"type":43,"tag":44,"props":45,"children":47},"element","h2",{"id":46},"when-to-use-me",[48],{"type":49,"value":50},"text","When to use me",{"type":43,"tag":52,"props":53,"children":54},"p",{},[55],{"type":49,"value":56},"Use this skill when creating a new theme from scratch.\nDo not use this skill when modifying an existing theme.",{"type":43,"tag":44,"props":58,"children":60},{"id":59},"general-rules",[61],{"type":49,"value":62},"General Rules",{"type":43,"tag":52,"props":64,"children":65},{},[66],{"type":49,"value":67},"Follow these rules carefully unless the user explicitly requests otherwise:",{"type":43,"tag":69,"props":70,"children":71},"ul",{},[72,84,126,151,161,179],{"type":43,"tag":73,"props":74,"children":75},"li",{},[76,82],{"type":43,"tag":77,"props":78,"children":79},"strong",{},[80],{"type":49,"value":81},"Focus on the home page first",{"type":49,"value":83},": Create a beautiful, image-rich home page as the centerpiece of the initial theme. The home page should showcase the theme's aesthetic vision with compelling visuals, strong typography, and engaging layout. Put your creative energy here.",{"type":43,"tag":73,"props":85,"children":86},{},[87,92,94,101,103,109,111,117,118,124],{"type":43,"tag":77,"props":88,"children":89},{},[90],{"type":49,"value":91},"Minimal template set",{"type":49,"value":93},": On initial theme creation, only create ",{"type":43,"tag":95,"props":96,"children":98},"code",{"className":97},[],[99],{"type":49,"value":100},"index.html",{"type":49,"value":102},". Avoid creating additional templates like ",{"type":43,"tag":95,"props":104,"children":106},{"className":105},[],[107],{"type":49,"value":108},"single.html",{"type":49,"value":110},", ",{"type":43,"tag":95,"props":112,"children":114},{"className":113},[],[115],{"type":49,"value":116},"page.html",{"type":49,"value":110},{"type":43,"tag":95,"props":119,"children":121},{"className":120},[],[122],{"type":49,"value":123},"archive.html",{"type":49,"value":125},", etc. unless the user specifically requests them. Keep the initial scope focused.",{"type":43,"tag":73,"props":127,"children":128},{},[129,134,136,141,143,149],{"type":43,"tag":77,"props":130,"children":131},{},[132],{"type":49,"value":133},"Patterns for landing pages",{"type":49,"value":135},": When creating a theme that includes a landing page or multi-section home page, generate block patterns for each major section (hero, features, testimonials, FAQ, CTA, etc.) and compose them into the ",{"type":43,"tag":95,"props":137,"children":139},{"className":138},[],[140],{"type":49,"value":100},{"type":49,"value":142}," template. This produces a richer, more polished result. Load the ",{"type":43,"tag":95,"props":144,"children":146},{"className":145},[],[147],{"type":49,"value":148},"generating-patterns",{"type":49,"value":150}," skill for detailed guidance.",{"type":43,"tag":73,"props":152,"children":153},{},[154,159],{"type":43,"tag":77,"props":155,"children":156},{},[157],{"type":49,"value":158},"Prefer templates over patterns for simple themes",{"type":49,"value":160},": For minimal or single-purpose themes without a landing page, default to templates rather than patterns. Only create patterns when they add clear value.",{"type":43,"tag":73,"props":162,"children":163},{},[164,169,171,177],{"type":43,"tag":77,"props":165,"children":166},{},[167],{"type":49,"value":168},"Pattern visibility rule",{"type":49,"value":170},": Every pattern you create must be included in a template so the user can immediately preview it. Patterns that exist only in the ",{"type":43,"tag":95,"props":172,"children":174},{"className":173},[],[175],{"type":49,"value":176},"patterns\u002F",{"type":49,"value":178}," directory without being used in any template are hard to discover.",{"type":43,"tag":73,"props":180,"children":181},{},[182,187,189],{"type":43,"tag":77,"props":183,"children":184},{},[185],{"type":49,"value":186},"Footer credit",{"type":49,"value":188},": Default to a minimal, neutral credit (or none at all). When rebuilding a user's site as a replica, do not insert third-party branding into the footer. If the user explicitly asks for a credit line, adapt the styling (font size, colors) to match the theme's design. Example:\n",{"type":43,"tag":95,"props":190,"children":192},{"className":191},[],[193],{"type":49,"value":194},"\u003C!-- wp:paragraph -->\u003Cp>Powered by \u003Ca href=\"https:\u002F\u002Fwordpress.org\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress\u003C\u002Fa>\u003C\u002Fp>\u003C!-- \u002Fwp:paragraph -->",{"type":43,"tag":44,"props":196,"children":198},{"id":197},"generating-theme-instructions",[199],{"type":49,"value":200},"Generating Theme Instructions",{"type":43,"tag":69,"props":202,"children":203},{},[204,209,214,219,224,229,234,239,260,265,270,275,280],{"type":43,"tag":73,"props":205,"children":206},{},[207],{"type":49,"value":208},"Always use the current working directory — do not create a subdirectory for the theme",{"type":43,"tag":73,"props":210,"children":211},{},[212],{"type":49,"value":213},"Always include style.css with the required WordPress theme header comment",{"type":43,"tag":73,"props":215,"children":216},{},[217],{"type":49,"value":218},"Always create a valid theme.json (version 3) as the central configuration",{"type":43,"tag":73,"props":220,"children":221},{},[222],{"type":49,"value":223},"Always create block templates in templates\u002F and template parts in parts\u002F",{"type":43,"tag":73,"props":225,"children":226},{},[227],{"type":49,"value":228},"Never use emojis in any generated content — not in headings, paragraphs, button text, or any text",{"type":43,"tag":73,"props":230,"children":231},{},[232],{"type":49,"value":233},"Never close the final PHP tag in functions.php",{"type":43,"tag":73,"props":235,"children":236},{},[237],{"type":49,"value":238},"Guard functions with function_exists() checks",{"type":43,"tag":73,"props":240,"children":241},{},[242,244,250,252,258],{"type":49,"value":243},"Use ",{"type":43,"tag":95,"props":245,"children":247},{"className":246},[],[248],{"type":49,"value":249},"enqueue_block_assets",{"type":49,"value":251}," hook for fonts (not ",{"type":43,"tag":95,"props":253,"children":255},{"className":254},[],[256],{"type":49,"value":257},"wp_enqueue_scripts",{"type":49,"value":259},") to ensure they load in both front-end and editor",{"type":43,"tag":73,"props":261,"children":262},{},[263],{"type":49,"value":264},"Define colors, typography, and spacing in theme.json — not in CSS where possible",{"type":43,"tag":73,"props":266,"children":267},{},[268],{"type":49,"value":269},"Make the theme FSE-compatible (Full Site Editing)",{"type":43,"tag":73,"props":271,"children":272},{},[273],{"type":49,"value":274},"For landing page themes, generate patterns for each section and compose them into templates",{"type":43,"tag":73,"props":276,"children":277},{},[278],{"type":49,"value":279},"For simple themes without a landing page, prefer templates over patterns unless the user explicitly requests them",{"type":43,"tag":73,"props":281,"children":282},{},[283],{"type":49,"value":284},"Keep functions.php minimal — enqueuing assets, registering patterns, and adding theme support",{"type":43,"tag":44,"props":286,"children":288},{"id":287},"theme-file-structure",[289],{"type":49,"value":290},"Theme File Structure",{"type":43,"tag":292,"props":293,"children":297},"pre",{"className":294,"code":296,"language":49},[295],"language-text","style.css              # Required — theme header comment and base styles\ntheme.json             # Central configuration (colors, typography, spacing, layout)\nfunctions.php          # Minimal — enqueue assets, register patterns, add theme support\ntemplates\u002F             # Block templates\n  index.html           # Required — fallback template\n  single.html          # Single post\n  page.html            # Page\n  archive.html         # Archive\n  404.html             # Not found\n  home.html            # Blog home (optional)\n  search.html          # Search results (optional)\nparts\u002F                 # Reusable template parts\n  header.html          # Site header\n  footer.html          # Site footer\npatterns\u002F              # Block patterns for reusable sections\nassets\u002F                # Static assets (images, local fonts)\n",[298],{"type":43,"tag":95,"props":299,"children":301},{"__ignoreMap":300},"",[302],{"type":49,"value":296},{"type":43,"tag":44,"props":304,"children":306},{"id":305},"stylecss-header-required",[307],{"type":49,"value":308},"style.css Header (required)",{"type":43,"tag":292,"props":310,"children":314},{"className":311,"code":312,"language":313,"meta":300,"style":300},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F*\nTheme Name: Theme Name\nTheme URI: https:\u002F\u002Fexample.com\nAuthor: Author Name\nDescription: Theme description\nVersion: 1.0.0\nRequires at least: 6.0\nTested up to: 6.5\nRequires PHP: 8.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\u002F\u002Fwww.gnu.org\u002Flicenses\u002Fgpl-2.0.html\nText Domain: theme-slug\n*\u002F\n","css",[315],{"type":43,"tag":95,"props":316,"children":317},{"__ignoreMap":300},[318,329,338,347,356,365,374,383,392,401,410,419,428],{"type":43,"tag":319,"props":320,"children":322},"span",{"class":321,"line":29},"line",[323],{"type":43,"tag":319,"props":324,"children":326},{"style":325},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[327],{"type":49,"value":328},"\u002F*\n",{"type":43,"tag":319,"props":330,"children":332},{"class":321,"line":331},2,[333],{"type":43,"tag":319,"props":334,"children":335},{"style":325},[336],{"type":49,"value":337},"Theme Name: Theme Name\n",{"type":43,"tag":319,"props":339,"children":341},{"class":321,"line":340},3,[342],{"type":43,"tag":319,"props":343,"children":344},{"style":325},[345],{"type":49,"value":346},"Theme URI: https:\u002F\u002Fexample.com\n",{"type":43,"tag":319,"props":348,"children":350},{"class":321,"line":349},4,[351],{"type":43,"tag":319,"props":352,"children":353},{"style":325},[354],{"type":49,"value":355},"Author: Author Name\n",{"type":43,"tag":319,"props":357,"children":359},{"class":321,"line":358},5,[360],{"type":43,"tag":319,"props":361,"children":362},{"style":325},[363],{"type":49,"value":364},"Description: Theme description\n",{"type":43,"tag":319,"props":366,"children":368},{"class":321,"line":367},6,[369],{"type":43,"tag":319,"props":370,"children":371},{"style":325},[372],{"type":49,"value":373},"Version: 1.0.0\n",{"type":43,"tag":319,"props":375,"children":377},{"class":321,"line":376},7,[378],{"type":43,"tag":319,"props":379,"children":380},{"style":325},[381],{"type":49,"value":382},"Requires at least: 6.0\n",{"type":43,"tag":319,"props":384,"children":386},{"class":321,"line":385},8,[387],{"type":43,"tag":319,"props":388,"children":389},{"style":325},[390],{"type":49,"value":391},"Tested up to: 6.5\n",{"type":43,"tag":319,"props":393,"children":395},{"class":321,"line":394},9,[396],{"type":43,"tag":319,"props":397,"children":398},{"style":325},[399],{"type":49,"value":400},"Requires PHP: 8.0\n",{"type":43,"tag":319,"props":402,"children":404},{"class":321,"line":403},10,[405],{"type":43,"tag":319,"props":406,"children":407},{"style":325},[408],{"type":49,"value":409},"License: GNU General Public License v2 or later\n",{"type":43,"tag":319,"props":411,"children":413},{"class":321,"line":412},11,[414],{"type":43,"tag":319,"props":415,"children":416},{"style":325},[417],{"type":49,"value":418},"License URI: http:\u002F\u002Fwww.gnu.org\u002Flicenses\u002Fgpl-2.0.html\n",{"type":43,"tag":319,"props":420,"children":422},{"class":321,"line":421},12,[423],{"type":43,"tag":319,"props":424,"children":425},{"style":325},[426],{"type":49,"value":427},"Text Domain: theme-slug\n",{"type":43,"tag":319,"props":429,"children":431},{"class":321,"line":430},13,[432],{"type":43,"tag":319,"props":433,"children":434},{"style":325},[435],{"type":49,"value":436},"*\u002F\n",{"type":43,"tag":44,"props":438,"children":440},{"id":439},"themejson-essentials",[441],{"type":49,"value":442},"theme.json Essentials",{"type":43,"tag":69,"props":444,"children":445},{},[446,451,456,461,466,471,476],{"type":43,"tag":73,"props":447,"children":448},{},[449],{"type":49,"value":450},"Use version 3",{"type":43,"tag":73,"props":452,"children":453},{},[454],{"type":49,"value":455},"Define settings: colors (palette), typography (fontFamilies, fontSizes), spacing (units, spacingSizes), layout (contentSize, wideSize)",{"type":43,"tag":73,"props":457,"children":458},{},[459],{"type":49,"value":460},"Define styles: global styles and block-specific overrides",{"type":43,"tag":73,"props":462,"children":463},{},[464],{"type":49,"value":465},"Use appearanceTools: true to enable border, typography, spacing, and color controls",{"type":43,"tag":73,"props":467,"children":468},{},[469],{"type":49,"value":470},"Register custom template parts with their area (header, footer, uncategorized)",{"type":43,"tag":73,"props":472,"children":473},{},[474],{"type":49,"value":475},"Use style variations to offer different design options",{"type":43,"tag":73,"props":477,"children":478},{},[479],{"type":49,"value":480},"Add custom block styles when needed to extend core blocks",{"type":43,"tag":44,"props":482,"children":484},{"id":483},"fonts-self-host-the-sources-real-typefaces",[485],{"type":49,"value":486},"Fonts — self-host the source's real typefaces",{"type":43,"tag":52,"props":488,"children":489},{},[490,492,497,499,505,507,513,515,521,523,528,530,536,538,544,546,552,554,560,562,568,570,576,578,584,586,592,594,600,602,608],{"type":49,"value":491},"When replicating a liberated site, ",{"type":43,"tag":77,"props":493,"children":494},{},[495],{"type":49,"value":496},"self-host the source's fonts",{"type":49,"value":498}," rather than substituting a Google Font or leaving a system fallback. The deterministic scaffold (",{"type":43,"tag":95,"props":500,"children":502},{"className":501},[],[503],{"type":49,"value":504},"liberate_theme_scaffold",{"type":49,"value":506},") already does this: it parses ",{"type":43,"tag":95,"props":508,"children":510},{"className":509},[],[511],{"type":49,"value":512},"@font-face",{"type":49,"value":514}," rules from the captured HTML\u002FCSS, downloads the referenced font files into ",{"type":43,"tag":95,"props":516,"children":518},{"className":517},[],[519],{"type":49,"value":520},"assets\u002Ffonts\u002F",{"type":49,"value":522},", emits ",{"type":43,"tag":95,"props":524,"children":526},{"className":525},[],[527],{"type":49,"value":512},{"type":49,"value":529}," rules in ",{"type":43,"tag":95,"props":531,"children":533},{"className":532},[],[534],{"type":49,"value":535},"style.css",{"type":49,"value":537},", and registers the family in ",{"type":43,"tag":95,"props":539,"children":541},{"className":540},[],[542],{"type":49,"value":543},"theme.json",{"type":49,"value":545}," ",{"type":43,"tag":95,"props":547,"children":549},{"className":548},[],[550],{"type":49,"value":551},"settings.typography.fontFamilies",{"type":49,"value":553}," with a ",{"type":43,"tag":95,"props":555,"children":557},{"className":556},[],[558],{"type":49,"value":559},"fontFace[]",{"type":49,"value":561}," (each entry's ",{"type":43,"tag":95,"props":563,"children":565},{"className":564},[],[566],{"type":49,"value":567},"src",{"type":49,"value":569}," is ",{"type":43,"tag":95,"props":571,"children":573},{"className":572},[],[574],{"type":49,"value":575},"file:.\u002Fassets\u002Ffonts\u002F\u003Cfile>",{"type":49,"value":577},"). This is generic — capture whatever the source loads (e.g. Larsseit from a Shopify CDN), not a hardcoded family. Heading (display) and body families bind to the captured fonts; the display family is rebound to the real typeface even when the foundation recorded an open ",{"type":43,"tag":579,"props":580,"children":581},"em",{},[582],{"type":49,"value":583},"substitute",{"type":49,"value":585},". NEVER ship headings\u002Fbody in a system fallback when the source font is self-hostable. Sanitize bogus captured line-heights (",{"type":43,"tag":95,"props":587,"children":589},{"className":588},[],[590],{"type":49,"value":591},"0",{"type":49,"value":593}," \u002F ",{"type":43,"tag":95,"props":595,"children":597},{"className":596},[],[598],{"type":49,"value":599},"0px",{"type":49,"value":601},") to a sane default (e.g. ",{"type":43,"tag":95,"props":603,"children":605},{"className":604},[],[606],{"type":49,"value":607},"1.2",{"type":49,"value":609},").",{"type":43,"tag":52,"props":611,"children":612},{},[613,618,620,626,628,633,635,640,642,648,650,656,658,664,666,672,673,679,680,686],{"type":43,"tag":77,"props":614,"children":615},{},[616],{"type":49,"value":617},"Uncapturable fonts → free substitution (self-hosted).",{"type":49,"value":619}," Some source fonts can't be self-hosted: Adobe Typekit (",{"type":43,"tag":95,"props":621,"children":623},{"className":622},[],[624],{"type":49,"value":625},"use.typekit.net",{"type":49,"value":627}," serves CSS only, no reachable woff), Monotype, or hashed builder family names. For these the scaffold AUTO-SUBSTITUTES to the closest FREE web font, downloads ",{"type":43,"tag":579,"props":629,"children":630},{},[631],{"type":49,"value":632},"that",{"type":49,"value":634}," font's woff2 into ",{"type":43,"tag":95,"props":636,"children":638},{"className":637},[],[639],{"type":49,"value":520},{"type":49,"value":641},", and binds the body\u002Fdisplay family to it — so body copy renders in a real web font, never a bare ",{"type":43,"tag":95,"props":643,"children":645},{"className":644},[],[646],{"type":49,"value":647},"sans-serif",{"type":49,"value":649},". The mapping table + gstatic URLs live in ",{"type":43,"tag":95,"props":651,"children":653},{"className":652},[],[654],{"type":49,"value":655},"src\u002Flib\u002Freplicate\u002Ffont-substitution.ts",{"type":49,"value":657},"; the human-readable starter table is in ",{"type":43,"tag":95,"props":659,"children":661},{"className":660},[],[662],{"type":49,"value":663},"skills\u002Fdesign-foundations\u002Freferences\u002Ftheme-tokens.md",{"type":49,"value":665}," (e.g. ",{"type":43,"tag":95,"props":667,"children":669},{"className":668},[],[670],{"type":49,"value":671},"quasimoda → Hanken Grotesk",{"type":49,"value":110},{"type":43,"tag":95,"props":674,"children":676},{"className":675},[],[677],{"type":49,"value":678},"Proxima Nova → Montserrat",{"type":49,"value":110},{"type":43,"tag":95,"props":681,"children":683},{"className":682},[],[684],{"type":49,"value":685},"Avenir → Inter",{"type":49,"value":687},"). Only genuinely uncapturable families are swapped — a self-hostable source font (e.g. Larsseit on a CDN) is always preferred. Verify the substitute computes live (body paragraphs report the substituted family).",{"type":43,"tag":44,"props":689,"children":691},{"id":690},"header-replica-source-logo-primary-nav-never-page-list",[692],{"type":49,"value":693},"Header (replica) — source logo + primary nav, NEVER page-list",{"type":43,"tag":52,"props":695,"children":696},{},[697],{"type":49,"value":698},"Build the site header from the SOURCE header, not WordPress's page list:",{"type":43,"tag":69,"props":700,"children":701},{},[702,767,800,864],{"type":43,"tag":73,"props":703,"children":704},{},[705,710,712,718,720,726,728,734,736,741,743,749,751,757,759,765],{"type":43,"tag":77,"props":706,"children":707},{},[708],{"type":49,"value":709},"Logo:",{"type":49,"value":711}," the source's real logo image (a ",{"type":43,"tag":95,"props":713,"children":715},{"className":714},[],[716],{"type":49,"value":717},"core\u002Fimage",{"type":49,"value":719}," \u002F site-logo of the header ",{"type":43,"tag":95,"props":721,"children":723},{"className":722},[],[724],{"type":49,"value":725},"\u003Cimg>",{"type":49,"value":727},"\u002FSVG), not ",{"type":43,"tag":95,"props":729,"children":731},{"className":730},[],[732],{"type":49,"value":733},"wp:site-title",{"type":49,"value":735}," text and not a product image. ",{"type":43,"tag":77,"props":737,"children":738},{},[739],{"type":49,"value":740},"Localize it",{"type":49,"value":742}," — download the CDN logo into the theme ",{"type":43,"tag":95,"props":744,"children":746},{"className":745},[],[747],{"type":49,"value":748},"assets\u002F",{"type":49,"value":750}," (or WP media) and reference it locally (",{"type":43,"tag":95,"props":752,"children":754},{"className":753},[],[755],{"type":49,"value":756},"\u002Fwp-content\u002Fthemes\u002F\u003Cslug>\u002Fassets\u002F\u003Cfile>",{"type":49,"value":758},"); never hot-link the source CDN. The scaffold does this via ",{"type":43,"tag":95,"props":760,"children":762},{"className":761},[],[763],{"type":49,"value":764},"localLogoPath",{"type":49,"value":766},".",{"type":43,"tag":73,"props":768,"children":769},{},[770,775,777,783,785,790,792,798],{"type":43,"tag":77,"props":771,"children":772},{},[773],{"type":49,"value":774},"Nav:",{"type":49,"value":776}," explicit ",{"type":43,"tag":95,"props":778,"children":780},{"className":779},[],[781],{"type":49,"value":782},"wp:navigation-link",{"type":49,"value":784},"s for the source's ",{"type":43,"tag":77,"props":786,"children":787},{},[788],{"type":49,"value":789},"top-level primary menu only",{"type":49,"value":791},". NEVER use ",{"type":43,"tag":95,"props":793,"children":795},{"className":794},[],[796],{"type":49,"value":797},"wp:page-list",{"type":49,"value":799}," — it auto-lists every published WP page (Sample Page, Checkout, account, etc.) as junk. Drop mega-menu sub-links and the mobile-drawer duplicate from the menu.",{"type":43,"tag":73,"props":801,"children":802},{},[803,808,810,815,817,823,825,830,832,838,840,846,848,854,856,862],{"type":43,"tag":77,"props":804,"children":805},{},[806],{"type":49,"value":807},"Utility icons:",{"type":49,"value":809}," re-add the source header's search \u002F account \u002F cart icon cluster on the right (dropped from the ",{"type":43,"tag":579,"props":811,"children":812},{},[813],{"type":49,"value":814},"primary nav",{"type":49,"value":816}," but part of the chrome). Ship each glyph as a theme SVG asset (",{"type":43,"tag":95,"props":818,"children":820},{"className":819},[],[821],{"type":49,"value":822},"assets\u002Ficon-*.svg",{"type":49,"value":824},", explicit stroke color) referenced from a ",{"type":43,"tag":95,"props":826,"children":828},{"className":827},[],[829],{"type":49,"value":717},{"type":49,"value":831}," link — NOT ",{"type":43,"tag":95,"props":833,"children":835},{"className":834},[],[836],{"type":49,"value":837},"wp:html",{"type":49,"value":839}," (banned). cart→",{"type":43,"tag":95,"props":841,"children":843},{"className":842},[],[844],{"type":49,"value":845},"\u002Fcart",{"type":49,"value":847},", account→",{"type":43,"tag":95,"props":849,"children":851},{"className":850},[],[852],{"type":49,"value":853},"\u002Faccount",{"type":49,"value":855},", search→",{"type":43,"tag":95,"props":857,"children":859},{"className":858},[],[860],{"type":49,"value":861},"\u002F?s=",{"type":49,"value":863},". The scaffold emits this.",{"type":43,"tag":73,"props":865,"children":866},{},[867,872],{"type":43,"tag":77,"props":868,"children":869},{},[870],{"type":49,"value":871},"Announcement bar:",{"type":49,"value":873}," preserve the source's top announcement\u002Futility bar when present.",{"type":43,"tag":44,"props":875,"children":877},{"id":876},"google-fonts-fallback-only-prefer-self-hosting-source-fonts-above",[878],{"type":49,"value":879},"Google Fonts (fallback only — prefer self-hosting source fonts above)",{"type":43,"tag":52,"props":881,"children":882},{},[883,885,890,892,897],{"type":49,"value":884},"When a font is genuinely not self-hostable, use ",{"type":43,"tag":95,"props":886,"children":888},{"className":887},[],[889],{"type":49,"value":249},{"type":49,"value":891}," hook (not ",{"type":43,"tag":95,"props":893,"children":895},{"className":894},[],[896],{"type":49,"value":257},{"type":49,"value":898},") to ensure fonts load in BOTH the front-end AND block editor:",{"type":43,"tag":292,"props":900,"children":904},{"className":901,"code":902,"language":903,"meta":300,"style":300},"language-php shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function theme_fonts() {\n    wp_enqueue_style(\n        'theme-fonts',\n        'https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;600;700&display=swap',\n        array(),\n        null\n    );\n}\nadd_action( 'enqueue_block_assets', 'theme_fonts' );\n","php",[905],{"type":43,"tag":95,"props":906,"children":907},{"__ignoreMap":300},[908,916,924,932,940,948,956,964,972],{"type":43,"tag":319,"props":909,"children":910},{"class":321,"line":29},[911],{"type":43,"tag":319,"props":912,"children":913},{},[914],{"type":49,"value":915},"function theme_fonts() {\n",{"type":43,"tag":319,"props":917,"children":918},{"class":321,"line":331},[919],{"type":43,"tag":319,"props":920,"children":921},{},[922],{"type":49,"value":923},"    wp_enqueue_style(\n",{"type":43,"tag":319,"props":925,"children":926},{"class":321,"line":340},[927],{"type":43,"tag":319,"props":928,"children":929},{},[930],{"type":49,"value":931},"        'theme-fonts',\n",{"type":43,"tag":319,"props":933,"children":934},{"class":321,"line":349},[935],{"type":43,"tag":319,"props":936,"children":937},{},[938],{"type":49,"value":939},"        'https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;600;700&display=swap',\n",{"type":43,"tag":319,"props":941,"children":942},{"class":321,"line":358},[943],{"type":43,"tag":319,"props":944,"children":945},{},[946],{"type":49,"value":947},"        array(),\n",{"type":43,"tag":319,"props":949,"children":950},{"class":321,"line":367},[951],{"type":43,"tag":319,"props":952,"children":953},{},[954],{"type":49,"value":955},"        null\n",{"type":43,"tag":319,"props":957,"children":958},{"class":321,"line":376},[959],{"type":43,"tag":319,"props":960,"children":961},{},[962],{"type":49,"value":963},"    );\n",{"type":43,"tag":319,"props":965,"children":966},{"class":321,"line":385},[967],{"type":43,"tag":319,"props":968,"children":969},{},[970],{"type":49,"value":971},"}\n",{"type":43,"tag":319,"props":973,"children":974},{"class":321,"line":394},[975],{"type":43,"tag":319,"props":976,"children":977},{},[978],{"type":49,"value":979},"add_action( 'enqueue_block_assets', 'theme_fonts' );\n",{"type":43,"tag":44,"props":981,"children":983},{"id":982},"generating-a-landing-page",[984],{"type":49,"value":985},"Generating a landing page",{"type":43,"tag":69,"props":987,"children":988},{},[989,1022,1032,1044,1056,1075,1101,1127,1147,1180,1231,1251,1290],{"type":43,"tag":73,"props":990,"children":991},{},[992,997,999],{"type":43,"tag":77,"props":993,"children":994},{},[995],{"type":49,"value":996},"YOU DECIDE",{"type":49,"value":998}," which sections\u002Fblocks best serve this specific site. Do not follow a rigid template.\nConsider the user site type and audience to determine the optimal page structure.\nExamples:\n",{"type":43,"tag":69,"props":1000,"children":1001},{},[1002,1007,1012,1017],{"type":43,"tag":73,"props":1003,"children":1004},{},[1005],{"type":49,"value":1006},"A portfolio might need a full-bleed project gallery",{"type":43,"tag":73,"props":1008,"children":1009},{},[1010],{"type":49,"value":1011},"A SaaS might need feature grids",{"type":43,"tag":73,"props":1013,"children":1014},{},[1015],{"type":49,"value":1016},"A restaurant might need a reservations widget",{"type":43,"tag":73,"props":1018,"children":1019},{},[1020],{"type":49,"value":1021},"An agency might need case study cards",{"type":43,"tag":73,"props":1023,"children":1024},{},[1025,1030],{"type":43,"tag":77,"props":1026,"children":1027},{},[1028],{"type":49,"value":1029},"Always include a header and footer",{"type":49,"value":1031},", but the sections in between are your creative choice.",{"type":43,"tag":73,"props":1033,"children":1034},{},[1035,1037,1042],{"type":49,"value":1036},"Treat every block as a ",{"type":43,"tag":77,"props":1038,"children":1039},{},[1040],{"type":49,"value":1041},"self-contained section",{"type":49,"value":1043}," (one dominant semantic wrapper) whose markup will live inside its own file.",{"type":43,"tag":73,"props":1045,"children":1046},{},[1047,1049,1054],{"type":49,"value":1048},"Keep copy ",{"type":43,"tag":77,"props":1050,"children":1051},{},[1052],{"type":49,"value":1053},"realistic but placeholder-friendly",{"type":49,"value":1055},"; never reference real clients or brands.",{"type":43,"tag":73,"props":1057,"children":1058},{},[1059,1061,1066,1068,1073],{"type":49,"value":1060},"Favor ",{"type":43,"tag":77,"props":1062,"children":1063},{},[1064],{"type":49,"value":1065},"semantic HTML",{"type":49,"value":1067},", class-based styling hooks, and ",{"type":43,"tag":77,"props":1069,"children":1070},{},[1071],{"type":49,"value":1072},"shallow DOM trees",{"type":49,"value":1074}," that respond well on mobile.",{"type":43,"tag":73,"props":1076,"children":1077},{},[1078,1083,1085,1091,1093,1099],{"type":43,"tag":77,"props":1079,"children":1080},{},[1081],{"type":49,"value":1082},"Section margin reset",{"type":49,"value":1084},": Add ",{"type":43,"tag":95,"props":1086,"children":1088},{"className":1087},[],[1089],{"type":49,"value":1090},"\"style\":{\"spacing\":{\"margin\":{\"top\":\"0\"}}}",{"type":49,"value":1092}," to every top-level Group block that wraps a landing page section. This overrides WordPress's default top margin on direct children of ",{"type":43,"tag":95,"props":1094,"children":1096},{"className":1095},[],[1097],{"type":49,"value":1098},".wp-site-blocks",{"type":49,"value":1100}," and can be easily adjusted by users in the editor.",{"type":43,"tag":73,"props":1102,"children":1103},{},[1104,1109,1111,1117,1119,1125],{"type":43,"tag":77,"props":1105,"children":1106},{},[1107],{"type":49,"value":1108},"Section layout widths",{"type":49,"value":1110},": Hero sections, header groups, cover blocks, and feature grids should use ",{"type":43,"tag":95,"props":1112,"children":1114},{"className":1113},[],[1115],{"type":49,"value":1116},"\"align\":\"wide\"",{"type":49,"value":1118}," or ",{"type":43,"tag":95,"props":1120,"children":1122},{"className":1121},[],[1123],{"type":49,"value":1124},"\"align\":\"full\"",{"type":49,"value":1126}," rather than defaulting to narrow content width. Only use default (content) alignment for text-heavy reading sections.",{"type":43,"tag":73,"props":1128,"children":1129},{},[1130,1132,1137,1139,1145],{"type":49,"value":1131},"Do ",{"type":43,"tag":77,"props":1133,"children":1134},{},[1135],{"type":49,"value":1136},"not",{"type":49,"value":1138}," use ",{"type":43,"tag":95,"props":1140,"children":1142},{"className":1141},[],[1143],{"type":49,"value":1144},"\u003Cinner-blocks>",{"type":49,"value":1146},"; output the full expanded markup inside each block.",{"type":43,"tag":73,"props":1148,"children":1149},{},[1150,1155,1157,1163,1164,1170,1172,1178],{"type":43,"tag":77,"props":1151,"children":1152},{},[1153],{"type":49,"value":1154},"No decorative HTML comments",{"type":49,"value":1156},": Never insert section-labeling comments like ",{"type":43,"tag":95,"props":1158,"children":1160},{"className":1159},[],[1161],{"type":49,"value":1162},"\u003C!-- Hero Section -->",{"type":49,"value":1118},{"type":43,"tag":95,"props":1165,"children":1167},{"className":1166},[],[1168],{"type":49,"value":1169},"\u003C!-- Services Section -->",{"type":49,"value":1171}," in templates, template parts, or patterns. Only WordPress block comments (",{"type":43,"tag":95,"props":1173,"children":1175},{"className":1174},[],[1176],{"type":49,"value":1177},"\u003C!-- wp:block-name -->",{"type":49,"value":1179},") are allowed.",{"type":43,"tag":73,"props":1181,"children":1182},{},[1183,1185,1191,1193,1206,1208,1214,1216,1229],{"type":49,"value":1184},"Each site payload includes ",{"type":43,"tag":95,"props":1186,"children":1188},{"className":1187},[],[1189],{"type":49,"value":1190},"\u003Ctypography>",{"type":49,"value":1192}," instructions.\nApply those font stacks via ",{"type":43,"tag":77,"props":1194,"children":1195},{},[1196,1198,1204],{"type":49,"value":1197},"inline ",{"type":43,"tag":95,"props":1199,"children":1201},{"className":1200},[],[1202],{"type":49,"value":1203},"style",{"type":49,"value":1205}," attributes",{"type":49,"value":1207}," (e.g.,\n",{"type":43,"tag":95,"props":1209,"children":1211},{"className":1210},[],[1212],{"type":49,"value":1213},"style=\"font-family: 'Space Grotesk', 'Helvetica Neue', sans-serif;\"",{"type":49,"value":1215},") on the root wrapper and any hero\u002Fheadline elements —\n",{"type":43,"tag":77,"props":1217,"children":1218},{},[1219,1221,1227],{"type":49,"value":1220},"do NOT output ",{"type":43,"tag":95,"props":1222,"children":1224},{"className":1223},[],[1225],{"type":49,"value":1226},"\u003Cstyle>",{"type":49,"value":1228}," tags",{"type":49,"value":1230}," (the build strips them).",{"type":43,"tag":73,"props":1232,"children":1233},{},[1234,1236,1241,1243,1249],{"type":49,"value":1235},"Prefer a ",{"type":43,"tag":77,"props":1237,"children":1238},{},[1239],{"type":49,"value":1240},"sticky nav",{"type":49,"value":1242}," (",{"type":43,"tag":95,"props":1244,"children":1246},{"className":1245},[],[1247],{"type":49,"value":1248},"sticky top-0 z-50",{"type":49,"value":1250},") when appropriate, but ensure it degrades gracefully on mobile.",{"type":43,"tag":73,"props":1252,"children":1253},{},[1254,1255,1260,1261,1267,1268,1274,1275,1281,1282,1288],{"type":49,"value":243},{"type":43,"tag":77,"props":1256,"children":1257},{},[1258],{"type":49,"value":1259},"Tailwind motion utilities",{"type":49,"value":1242},{"type":43,"tag":95,"props":1262,"children":1264},{"className":1263},[],[1265],{"type":49,"value":1266},"transition",{"type":49,"value":110},{"type":43,"tag":95,"props":1269,"children":1271},{"className":1270},[],[1272],{"type":49,"value":1273},"duration-300",{"type":49,"value":110},{"type":43,"tag":95,"props":1276,"children":1278},{"className":1277},[],[1279],{"type":49,"value":1280},"motion-safe:animate-fade",{"type":49,"value":110},{"type":43,"tag":95,"props":1283,"children":1285},{"className":1284},[],[1286],{"type":49,"value":1287},"scroll-mt-24",{"type":49,"value":1289},", etc.) to add gentle entry animations and interactive feedback without custom JavaScript.",{"type":43,"tag":73,"props":1291,"children":1292},{},[1293,1295,1300],{"type":49,"value":1294},"Be ",{"type":43,"tag":77,"props":1296,"children":1297},{},[1298],{"type":49,"value":1299},"bold with layout choices",{"type":49,"value":1301},". Use asymmetric grids, overlapping elements, creative whitespace, and distinctive visual treatments.",{"type":43,"tag":44,"props":1303,"children":1305},{"id":1304},"reference-files",[1306],{"type":49,"value":1307},"Reference Files",{"type":43,"tag":52,"props":1309,"children":1310},{},[1311,1313,1319],{"type":49,"value":1312},"Before generating theme files, read the relevant references from the ",{"type":43,"tag":95,"props":1314,"children":1316},{"className":1315},[],[1317],{"type":49,"value":1318},"references\u002F",{"type":49,"value":1320}," directory next to this skill file.",{"type":43,"tag":69,"props":1322,"children":1323},{},[1324,1338,1352,1374],{"type":43,"tag":73,"props":1325,"children":1326},{},[1327,1336],{"type":43,"tag":77,"props":1328,"children":1329},{},[1330],{"type":43,"tag":95,"props":1331,"children":1333},{"className":1332},[],[1334],{"type":49,"value":1335},"references\u002Fblock-html.md",{"type":49,"value":1337}," — REQUIRED: read this FIRST. Block HTML validity rules, block comment ↔ HTML matching, image\u002Fcover\u002Fbutton block structure. Violating these causes \"unexpected or invalid content\" errors.",{"type":43,"tag":73,"props":1339,"children":1340},{},[1341,1350],{"type":43,"tag":77,"props":1342,"children":1343},{},[1344],{"type":43,"tag":95,"props":1345,"children":1347},{"className":1346},[],[1348],{"type":49,"value":1349},"references\u002Fdesign-direction.md",{"type":49,"value":1351}," — REQUIRED: read this before generating any theme files. Contains guidelines and good design directions.",{"type":43,"tag":73,"props":1353,"children":1354},{},[1355,1364,1366,1372],{"type":43,"tag":77,"props":1356,"children":1357},{},[1358],{"type":43,"tag":95,"props":1359,"children":1361},{"className":1360},[],[1362],{"type":49,"value":1363},"references\u002Fnavigation.md",{"type":49,"value":1365}," — read this before generating any header template part, covers ",{"type":43,"tag":95,"props":1367,"children":1369},{"className":1368},[],[1370],{"type":49,"value":1371},"wp:navigation",{"type":49,"value":1373}," block markup, overlay (hamburger menu)",{"type":43,"tag":73,"props":1375,"children":1376},{},[1377,1386],{"type":43,"tag":77,"props":1378,"children":1379},{},[1380],{"type":43,"tag":95,"props":1381,"children":1383},{"className":1382},[],[1384],{"type":49,"value":1385},"references\u002Fquery-loop.md",{"type":49,"value":1387}," — read this if the theme must display dynamic content (blog posts, archives, search results) in templates or patterns",{"type":43,"tag":1203,"props":1389,"children":1390},{},[1391],{"type":49,"value":1392},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1394,"total":1579},[1395,1416,1430,1444,1461,1476,1490,1505,1522,1533,1548,1564],{"slug":1396,"name":1396,"fn":1397,"description":1398,"org":1399,"tags":1400,"stars":1413,"repoUrl":1414,"updatedAt":1415},"annotate","collect visual feedback with browser annotation tools","Open a browser with visual annotation tools. The user clicks elements on their site and leaves feedback — the agent reads annotations and makes changes. Use this when the user wants to point at specific elements to fix, tweak, or redesign.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1401,1404,1407,1410],{"name":1402,"slug":1403,"type":15},"Frontend","frontend",{"name":1405,"slug":1406,"type":15},"Productivity","productivity",{"name":1408,"slug":1409,"type":15},"UX Copy","ux-copy",{"name":1411,"slug":1412,"type":15},"UX Design","ux-design",484,"https:\u002F\u002Fgithub.com\u002FAutomattic\u002Fstudio","2026-05-06T05:40:01.516544",{"slug":1417,"name":1417,"fn":1418,"description":1419,"org":1420,"tags":1421,"stars":1413,"repoUrl":1414,"updatedAt":1429},"block-content","write editable WordPress block markup","Write editable WordPress block markup for local Studio sites, including core\u002Fhtml limits, block-theme layout rules, full-width sections, validation, and skeleton-first page\u002FCSS recipes.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1422,1423,1425,1428],{"name":23,"slug":24,"type":15},{"name":1424,"slug":313,"type":15},"CSS",{"name":1426,"slug":1427,"type":15},"HTML","html",{"name":17,"slug":18,"type":15},"2026-05-27T07:01:55.629681",{"slug":1431,"name":1431,"fn":1432,"description":1433,"org":1434,"tags":1435,"stars":1413,"repoUrl":1414,"updatedAt":1443},"hosting-plans-helper","provide WordPress.com hosting plan information","Answer WordPress.com plan, pricing, upgrade, and feature-tier questions (plan names, what each tier unlocks — plugins, themes, custom code, SSH, hosting — and current prices) from authoritative live data. Load before answering ANY plan, pricing, or feature-gating question; never answer these from memory.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1436,1439,1442],{"name":1437,"slug":1438,"type":15},"Pricing","pricing",{"name":1440,"slug":1441,"type":15},"Reference","reference",{"name":17,"slug":18,"type":15},"2026-07-02T07:42:33.654791",{"slug":1445,"name":1445,"fn":1446,"description":1447,"org":1448,"tags":1449,"stars":1413,"repoUrl":1414,"updatedAt":1460},"liberate","migrate websites to WordPress","Import and rebuild a website from a closed platform (Wix, Squarespace, Webflow, Shopify, GoDaddy, Hostinger, HubSpot, Weebly) into a Studio WordPress site. Extracts pages\u002Fposts\u002Fproducts + media, then reconstructs the design as editable blocks + WooCommerce OR as a high-fidelity replica theme. Invoke when the user wants to migrate, import, liberate, or rebuild a site from one of these platforms.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1450,1453,1456,1459],{"name":1451,"slug":1452,"type":15},"CMS","cms",{"name":1454,"slug":1455,"type":15},"Migration","migration",{"name":1457,"slug":1458,"type":15},"Web Development","web-development",{"name":17,"slug":18,"type":15},"2026-07-09T06:47:33.454311",{"slug":1462,"name":1462,"fn":1463,"description":1464,"org":1465,"tags":1466,"stars":1413,"repoUrl":1414,"updatedAt":1475},"need-for-speed","run frontend performance audits for WordPress sites","Run a frontend performance audit on a WordPress site and get actionable optimization recommendations.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1467,1470,1471,1474],{"name":1468,"slug":1469,"type":15},"Audit","audit",{"name":1402,"slug":1403,"type":15},{"name":1472,"slug":1473,"type":15},"Performance","performance",{"name":17,"slug":18,"type":15},"2026-05-06T05:40:06.433267",{"slug":1477,"name":1477,"fn":1478,"description":1479,"org":1480,"tags":1481,"stars":1413,"repoUrl":1414,"updatedAt":1489},"plugin-recommendations","recommend WordPress plugins for site features","Choose recommended plugins and plugin-provided blocks for features core WordPress blocks do not cover - ecommerce (WooCommerce), forms and newsletters (Jetpack), online courses and quizzes (Sensei LMS), polls, surveys and ratings (Crowdsignal), spam protection (Akismet) - while keeping generated content editable and avoiding raw HTML fallbacks. Any request to sell products or build a shop, store, or storefront requires WooCommerce with products.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1482,1485,1488],{"name":1483,"slug":1484,"type":15},"Content Creation","content-creation",{"name":1486,"slug":1487,"type":15},"Plugin Development","plugin-development",{"name":17,"slug":18,"type":15},"2026-05-27T07:01:58.249105",{"slug":1491,"name":1491,"fn":1492,"description":1493,"org":1494,"tags":1495,"stars":1413,"repoUrl":1414,"updatedAt":1504},"rank-me-up","run on-page SEO audits for WordPress sites","Run an on-page SEO audit on a WordPress site and get actionable recommendations to improve search visibility.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1496,1497,1500,1503],{"name":1468,"slug":1469,"type":15},{"name":1498,"slug":1499,"type":15},"Marketing","marketing",{"name":1501,"slug":1502,"type":15},"SEO","seo",{"name":17,"slug":18,"type":15},"2026-05-06T05:40:05.196367",{"slug":1506,"name":1506,"fn":1507,"description":1508,"org":1509,"tags":1510,"stars":1413,"repoUrl":1414,"updatedAt":1521},"site-spec","gather specifications for new WordPress sites","Gather the site name and layout preference before building a WordPress site. Run this before creating any new site.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1511,1514,1517,1520],{"name":1512,"slug":1513,"type":15},"Design","design",{"name":1515,"slug":1516,"type":15},"Product Management","product-management",{"name":1518,"slug":1519,"type":15},"Specs","specs",{"name":17,"slug":18,"type":15},"2026-05-06T05:40:02.739409",{"slug":1523,"name":1523,"fn":1524,"description":1525,"org":1526,"tags":1527,"stars":1413,"repoUrl":1414,"updatedAt":1532},"studio-cli","manage local WordPress sites with Studio CLI","Use the Studio CLI to manage local WordPress sites, authentication, and preview sites. Invoke this skill when you need to run Studio CLI commands, manage sites, or troubleshoot site issues.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1528,1531],{"name":1529,"slug":1530,"type":15},"CLI","cli",{"name":17,"slug":18,"type":15},"2026-04-06T18:02:57.150231",{"slug":1534,"name":1534,"fn":1535,"description":1536,"org":1537,"tags":1538,"stars":1413,"repoUrl":1414,"updatedAt":1547},"taxonomist","optimize WordPress category taxonomy","Analyze and optimize a WordPress site's category taxonomy. Exports all posts, uses AI to suggest an improved category structure — merging duplicates, retiring dead categories, creating missing ones, writing descriptions, and re-categorizing posts. Run this when the user wants to clean up or improve their categories.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1539,1542,1545,1546],{"name":1540,"slug":1541,"type":15},"Content Strategy","content-strategy",{"name":1543,"slug":1544,"type":15},"Data Cleaning","data-cleaning",{"name":1501,"slug":1502,"type":15},{"name":17,"slug":18,"type":15},"2026-05-06T05:40:03.966799",{"slug":1549,"name":1549,"fn":1550,"description":1551,"org":1552,"tags":1553,"stars":1413,"repoUrl":1414,"updatedAt":1563},"visual-design","plan and execute visual design direction","Plan and execute high-quality visual direction for site creation, redesign, layout, typography, color, motion, and visual polish.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1554,1557,1558,1561],{"name":1555,"slug":1556,"type":15},"Animation","animation",{"name":1512,"slug":1513,"type":15},{"name":1559,"slug":1560,"type":15},"Typography","typography",{"name":1562,"slug":1549,"type":15},"Visual Design","2026-07-24T05:40:57.887452",{"slug":1565,"name":1565,"fn":1566,"description":1567,"org":1568,"tags":1569,"stars":1413,"repoUrl":1414,"updatedAt":1578},"visual-polish","verify and polish website visual design","Verify and polish a built or redesigned site by diagnosing rendered-DOM issues against intent and fixing them in a planned, batched screenshot-and-fix loop.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1570,1573,1574,1577],{"name":1571,"slug":1572,"type":15},"Debugging","debugging",{"name":1402,"slug":1403,"type":15},{"name":1575,"slug":1576,"type":15},"Screenshots","screenshots",{"name":1562,"slug":1549,"type":15},"2026-06-06T07:09:59.809812",81,{"items":1581,"total":1670},[1582,1597,1608,1619,1626,1641,1657],{"slug":1583,"name":1583,"fn":1584,"description":1585,"org":1586,"tags":1587,"stars":25,"repoUrl":26,"updatedAt":1596},"adapt","build platform adapters for content extraction","Build a new platform adapter to extract content from an unsupported platform (Blogger, Ghost, Tumblr, etc.)",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1588,1591,1592,1595],{"name":1589,"slug":1590,"type":15},"Automation","automation",{"name":1543,"slug":1544,"type":15},{"name":1593,"slug":1594,"type":15},"Data Engineering","data-engineering",{"name":17,"slug":18,"type":15},"2026-05-09T05:32:13.987972",{"slug":1598,"name":1598,"fn":1599,"description":1600,"org":1601,"tags":1602,"stars":25,"repoUrl":26,"updatedAt":1607},"compose-page-blocks","compose WordPress block markup from HTML","Compose a single liberated page's WordPress block-editor markup from its rendered HTML and screenshot. Inputs are a sanitized HTML file, a desktop screenshot, the design-foundation tokens, the URL's archetype (page\u002Fpost\u002Fproduct\u002Fetc.), and the source URL. Output is a string of valid block markup that round-trips through parse_blocks, uses theme tokens (no inlined hex colors), and contains only text drawn from the source HTML. Call per-page during the streaming watch loop after extraction has produced HTML+screenshot for that URL. Use when a freshly-imported page needs `post_content` upgraded from raw HTML into block-editor markup so the replica theme's tokens, gradients, and patterns actually render.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1603,1604,1605,1606],{"name":23,"slug":24,"type":15},{"name":1483,"slug":1484,"type":15},{"name":1426,"slug":1427,"type":15},{"name":17,"slug":18,"type":15},"2026-06-08T08:17:34.212397",{"slug":1609,"name":1609,"fn":1610,"description":1611,"org":1612,"tags":1613,"stars":25,"repoUrl":26,"updatedAt":1618},"creating-blocks","create new WordPress blocks","Templates and guidelines for creating new WordPress blocks from scratch — load this before generating block files",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1614,1615,1616,1617],{"name":23,"slug":24,"type":15},{"name":13,"slug":14,"type":15},{"name":1486,"slug":1487,"type":15},{"name":17,"slug":18,"type":15},"2026-06-08T08:17:49.413995",{"slug":4,"name":4,"fn":5,"description":6,"org":1620,"tags":1621,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1622,1623,1624,1625],{"name":23,"slug":24,"type":15},{"name":13,"slug":14,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"slug":1627,"name":1627,"fn":1628,"description":1629,"org":1630,"tags":1631,"stars":25,"repoUrl":26,"updatedAt":1640},"design-foundations","build design foundation JSON from sites","Build a coherent design-foundation JSON from a liberated site — semantic color\u002Ftypography\u002Fspacing roles with evidence trails. Consumes the partial scaffold produced by liberate_design_foundation_scaffold plus aggregate HTML\u002FCSS analysis and representative rendered HTML; produces a complete design-foundation matching the schema. Call after liberation, before theme generation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1632,1635,1636,1639],{"name":1633,"slug":1634,"type":15},"Data Modeling","data-modeling",{"name":1512,"slug":1513,"type":15},{"name":1637,"slug":1638,"type":15},"Design System","design-system",{"name":1402,"slug":1403,"type":15},"2026-06-08T08:17:44.457834",{"slug":1642,"name":1642,"fn":1643,"description":1644,"org":1645,"tags":1646,"stars":25,"repoUrl":26,"updatedAt":1656},"design-qa","run visual QA on WordPress themes","Visual-QA loop run after replica theme install and content import. Captures replica screenshots, applies a hard responsiveness gate at 390px AND a hard per-section visual-parity gate (measured SectionParity records, verdict computed by buildRunReport), runs qualitative vision review of source\u002Freplica pairs, checks accessibility, and drives a per-section escalation ladder of fixes via editing-themes\u002Fediting-blocks\u002Frebuild-section (R1 CSS → R2 spec-rebuild → R3 re-extract → R4a AI canonical-block rebuild → R4b deterministic styled-island floor) — escalating unresolved divergences to the operator rather than shipping them. Orchestration-internal — invoked by the replicate-with-blocks\u002Fliberate orchestrators, not directly by users.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1647,1650,1651,1654,1655],{"name":1648,"slug":1649,"type":15},"QA","qa",{"name":1575,"slug":1576,"type":15},{"name":1652,"slug":1653,"type":15},"Testing","testing",{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},"2026-06-08T08:17:45.698278",{"slug":1658,"name":1658,"fn":1659,"description":1660,"org":1661,"tags":1662,"stars":25,"repoUrl":26,"updatedAt":1669},"diagnose","debug failed data extraction processes","Debug failed or low-quality extractions by analyzing logs, probing the source site, and identifying root causes",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1663,1664,1665,1668],{"name":1593,"slug":1594,"type":15},{"name":1571,"slug":1572,"type":15},{"name":1666,"slug":1667,"type":15},"Logs","logs",{"name":1648,"slug":1649,"type":15},"2026-05-10T05:48:11.267642",21]