[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-automattic-imagery":3,"mdc-h0kvs7-key":35,"related-repo-automattic-imagery":795,"related-org-automattic-imagery":900},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":19,"repoUrl":20,"updatedAt":21,"license":22,"forks":23,"topics":24,"repo":30,"sourceUrl":33,"mdContent":34},"imagery","generate AI images for websites","Generate AI images for a site with generate_images — how to write image specs, pick aspect ratios, place files (theme assets vs media library), and handle failures.",{"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],{"name":13,"slug":14,"type":15},"Creative","creative","tag",{"name":17,"slug":18,"type":15},"Image Generation","image-generation",484,"https:\u002F\u002Fgithub.com\u002FAutomattic\u002Fstudio","2026-09-01T08:30:34.994105",null,82,[25,26,27,28,29],"agents","cli","desktop","electron","wordpress",{"repoUrl":20,"stars":19,"forks":23,"topics":31,"description":32},[25,26,27,28,29],"WordPress Studio, a free desktop app and CLI that helps developers streamline their local WordPress development workflow.","https:\u002F\u002Fgithub.com\u002FAutomattic\u002Fstudio\u002Ftree\u002FHEAD\u002Fapps\u002Fcli\u002Fai\u002Fskills\u002Fimagery","---\nname: imagery\ndescription: Generate AI images for a site with generate_images — how to write image specs, pick aspect ratios, place files (theme assets vs media library), and handle failures.\nuser-invokable: true\n---\n\n# Site Imagery\n\nUse this skill whenever a design calls for images — hero\u002Fcover backgrounds, feature, gallery, or card images, team photos, product shots — and before every `generate_images` call.\n\n## Workflow\n\n1. **Plan all imagery first.** While planning a page or theme, list every image it needs: filename, subject, placement, aspect ratio. Generate images BEFORE writing the markup that references them, so markup always points at real files.\n2. **Pick the destination per image:**\n   - **Theme imagery** (part of the theme's design: hero\u002Fcover backgrounds in templates or template parts, section background bands): write to `\u003Csite>\u002Fwp-content\u002Fthemes\u002F\u003Ctheme-slug>\u002Fassets\u002Fimages\u002F\u003Cname>.jpg` and reference it in markup as `\u002Fwp-content\u002Fthemes\u002F\u003Ctheme-slug>\u002Fassets\u002Fimages\u002F\u003Cname>.jpg`.\n   - **Site-specific content imagery** (images inside page\u002Fpost content: products, team photos, gallery items, feature illustrations): generate to a staging path like `\u003Csite>\u002Fwp-content\u002Fuploads\u002Fstudio-generated\u002F\u003Cname>.jpg`, then import into the media library and use the attachment:\n     ```\n     wp_cli media import wp-content\u002Fuploads\u002Fstudio-generated\u002F\u003Cname>.jpg --porcelain   → \u003Cid>\n     wp_cli post list --post_type=attachment --post__in=\u003Cid> --field=guid             → URL\n     ```\n     Use the returned URL as the `src` and the id in the block attrs (e.g. `wp:image {\"id\":\u003Cid>,\"sizeSlug\":\"large\"}`). Delete the staging file afterwards.\n3. **Batch aggressively.** One `generate_images` call per page (or per site for small sites) with every image in the `images` array — generation is concurrent server-side. Never one call per image.\n4. **Write real alt text.** Generated images are content: give every `\u003Cimg>` a short, descriptive alt in the markup (what the image shows, for a person who cannot see it). Never leave a spec string or an empty alt on a content image; cover backgrounds keep an empty alt (decorative).\n5. **Verify.** After applying markup, use take_screenshot to confirm the images render, fill their slots, and keep overlaid text legible.\n\n## Writing the spec fields\n\nEvery image in the `images` array takes `path`, `subject`, `pageContext`, `style`, `aspectRatio`. The call also takes a shared `siteContext` and `imageGrade`.\n\n### subject — what the image shows\n\n1–3 specific sentences describing ONLY the image itself: what it shows and from what point of view (composition, framing, vantage, mood).\n\n- **NEVER ask the image to render text.** No words, names, letters, numerals, wordmarks, signage copy, or \"hand-lettering of \u003Cwords>\" — in any language. Image models garble glyphs and invent fake scripts. Everything meant to be read is real HTML typography styled by the theme. Prefer scenes whose focal subject carries no lettering at all: the model completes any prominent sign, storefront, menu board, or screen with garbled fake text. When a text-bearing surface is unavoidable, describe it as bare (clear glass, an unmarked awning, a blank board) or keep it distant, oblique, or out of focus. Never write words for signage into the subject even to negate them — naming lettering plants it.\n- **Describe content and composition, NOT photographic grade.** The site-wide `imageGrade` is applied to every image; do not restate or contradict it per image (no \"black and white\", \"golden hour\", \"35mm grain\" in subjects) — per-image grading makes adjacent images clash.\n- Make sibling images in the same section describe distinct subjects so they don't read alike.\n- For cover backgrounds with overlaid copy, keep the focal subject off-center with calm, low-detail areas so the overlaid HTML text stays legible.\n\n### pageContext — where the image is used\n\nA short phrase in **pictorial slot language**, in **English** (it is machine guidance, not site copy). Examples: `contained editorial photograph in a 3-column gallery`, `menu item thumbnail`, `full-frame editorial photograph with the left third kept as open, low-detail negative space`.\n\n- Describe copy-overlay placement as **reserved empty space in photographic terms, never as text**: write `the left third kept as open, low-detail negative space` — NOT `hero with the headline overlaid on the left`. Naming a headline or menu in the pageContext is the trigger for the model painting ghost text into that exact region — and so is design-comp vocabulary like `hero cover background`: prefer photographic slot language (`editorial photograph`, `full-frame backdrop`) over web-layout language (`hero`, `banner`, `cover background`).\n- The structured `aspectRatio` field is authoritative for canvas shape; pageContext must not contradict it.\n\n### style\n\nOne of: `photorealistic` (default), `digital-art`, `illustration`, `minimalist`, `flat-design`, `3d-render`, `abstract`, `watercolor`. Keep one style per site unless the design deliberately mixes.\n\n### aspectRatio — match the slot\n\n- `landscape` (16:9) — the default for hero and banner images and wide feature\u002Fgallery rows\n- `ultrawide` (21:9) — ONLY for full-bleed backgrounds spanning the viewport edge to edge; never for contained images, cards, or columns\n- `portrait` (9:16) — dramatic tall images: full-height editorial shots, tall side-by-side panels\n- `card-landscape` (4:3) — contained landscape slots: product cards, blog thumbnails, feature images in columns\n- `card-portrait` (3:4) — the natural portrait-card shape: team headshots, tall product cards, framed insets; prefer over `portrait` for anything in a card or column\n- `square` (1:1) — only when the layout slot is genuinely 1:1\n\nA full-bleed cover BACKGROUND must be `landscape` or `ultrawide` — never square, portrait, or a card ratio. **Grid\u002Frow consistency:** all images displayed together in one row or grid MUST share the same aspect ratio — never mix.\n\n### siteContext and imageGrade (shared per call)\n\n- `siteContext`: one sentence of subject matter (\"A neighborhood bakery selling sourdough and pastries.\"). **NEVER include the site or business name** — a name in the prompt is what painted-in fake wordmarks stand in for.\n- `imageGrade`: ONE site-wide photographic treatment (e.g. \"warm natural window light, soft muted color, gentle film grain\"), derived from the visual direction. Use the identical grade in every call for the site so all imagery reads as one photographic series.\n\n## No decorative or transparent images\n\nGenerated imagery is for CONTENT — covers, feature\u002Fgallery\u002Fcard images, photographic bands. Never generate decorative assets: no ornaments, flourishes, crests, stamps, icons, or logo marks. They come out off-palette and geometrically wobbly, and small raster icons turn to mush. Decoration comes from theme primitives (separators, borders, spacing, type); feature icons: use none — let type and layout carry the hierarchy.\n\n## Cover blocks\n\nFor `wp:cover` backgrounds, set the same image URL on BOTH the block's `url` attribute and the inner `\u003Cimg>` src. Wide cover images (`landscape`\u002F`ultrawide`) are generated at 2K automatically.\n\n## Failure handling\n\n- **Safety-filtered image**: rewrite that image's subject to avoid the flagged element and call `generate_images` again for just that image. One retry; if it fails again, treat as a permanent failure.\n- **Permanent failure**: adapt the layout to work without that image (a color\u002Fgradient background, a text-led card). NEVER substitute an unrelated image, source an image from a web URL, or leave a reference to a file that does not exist.\n",{"data":36,"body":38},{"name":4,"description":6,"user-invokable":37},true,{"type":39,"children":40},"root",[41,50,65,72,227,233,297,304,309,355,361,401,489,493,556,562,638,664,670,700,706,711,717,759,765],{"type":42,"tag":43,"props":44,"children":46},"element","h1",{"id":45},"site-imagery",[47],{"type":48,"value":49},"text","Site Imagery",{"type":42,"tag":51,"props":52,"children":53},"p",{},[54,56,63],{"type":48,"value":55},"Use this skill whenever a design calls for images — hero\u002Fcover backgrounds, feature, gallery, or card images, team photos, product shots — and before every ",{"type":42,"tag":57,"props":58,"children":60},"code",{"className":59},[],[61],{"type":48,"value":62},"generate_images",{"type":48,"value":64}," call.",{"type":42,"tag":66,"props":67,"children":69},"h2",{"id":68},"workflow",[70],{"type":48,"value":71},"Workflow",{"type":42,"tag":73,"props":74,"children":75},"ol",{},[76,88,174,199,217],{"type":42,"tag":77,"props":78,"children":79},"li",{},[80,86],{"type":42,"tag":81,"props":82,"children":83},"strong",{},[84],{"type":48,"value":85},"Plan all imagery first.",{"type":48,"value":87}," While planning a page or theme, list every image it needs: filename, subject, placement, aspect ratio. Generate images BEFORE writing the markup that references them, so markup always points at real files.",{"type":42,"tag":77,"props":89,"children":90},{},[91,96],{"type":42,"tag":81,"props":92,"children":93},{},[94],{"type":48,"value":95},"Pick the destination per image:",{"type":42,"tag":97,"props":98,"children":99},"ul",{},[100,126],{"type":42,"tag":77,"props":101,"children":102},{},[103,108,110,116,118,124],{"type":42,"tag":81,"props":104,"children":105},{},[106],{"type":48,"value":107},"Theme imagery",{"type":48,"value":109}," (part of the theme's design: hero\u002Fcover backgrounds in templates or template parts, section background bands): write to ",{"type":42,"tag":57,"props":111,"children":113},{"className":112},[],[114],{"type":48,"value":115},"\u003Csite>\u002Fwp-content\u002Fthemes\u002F\u003Ctheme-slug>\u002Fassets\u002Fimages\u002F\u003Cname>.jpg",{"type":48,"value":117}," and reference it in markup as ",{"type":42,"tag":57,"props":119,"children":121},{"className":120},[],[122],{"type":48,"value":123},"\u002Fwp-content\u002Fthemes\u002F\u003Ctheme-slug>\u002Fassets\u002Fimages\u002F\u003Cname>.jpg",{"type":48,"value":125},".",{"type":42,"tag":77,"props":127,"children":128},{},[129,134,136,142,144,156,158,164,166,172],{"type":42,"tag":81,"props":130,"children":131},{},[132],{"type":48,"value":133},"Site-specific content imagery",{"type":48,"value":135}," (images inside page\u002Fpost content: products, team photos, gallery items, feature illustrations): generate to a staging path like ",{"type":42,"tag":57,"props":137,"children":139},{"className":138},[],[140],{"type":48,"value":141},"\u003Csite>\u002Fwp-content\u002Fuploads\u002Fstudio-generated\u002F\u003Cname>.jpg",{"type":48,"value":143},", then import into the media library and use the attachment:\n",{"type":42,"tag":145,"props":146,"children":150},"pre",{"className":147,"code":149,"language":48},[148],"language-text","wp_cli media import wp-content\u002Fuploads\u002Fstudio-generated\u002F\u003Cname>.jpg --porcelain   → \u003Cid>\nwp_cli post list --post_type=attachment --post__in=\u003Cid> --field=guid             → URL\n",[151],{"type":42,"tag":57,"props":152,"children":154},{"__ignoreMap":153},"",[155],{"type":48,"value":149},{"type":48,"value":157},"\nUse the returned URL as the ",{"type":42,"tag":57,"props":159,"children":161},{"className":160},[],[162],{"type":48,"value":163},"src",{"type":48,"value":165}," and the id in the block attrs (e.g. ",{"type":42,"tag":57,"props":167,"children":169},{"className":168},[],[170],{"type":48,"value":171},"wp:image {\"id\":\u003Cid>,\"sizeSlug\":\"large\"}",{"type":48,"value":173},"). Delete the staging file afterwards.",{"type":42,"tag":77,"props":175,"children":176},{},[177,182,184,189,191,197],{"type":42,"tag":81,"props":178,"children":179},{},[180],{"type":48,"value":181},"Batch aggressively.",{"type":48,"value":183}," One ",{"type":42,"tag":57,"props":185,"children":187},{"className":186},[],[188],{"type":48,"value":62},{"type":48,"value":190}," call per page (or per site for small sites) with every image in the ",{"type":42,"tag":57,"props":192,"children":194},{"className":193},[],[195],{"type":48,"value":196},"images",{"type":48,"value":198}," array — generation is concurrent server-side. Never one call per image.",{"type":42,"tag":77,"props":200,"children":201},{},[202,207,209,215],{"type":42,"tag":81,"props":203,"children":204},{},[205],{"type":48,"value":206},"Write real alt text.",{"type":48,"value":208}," Generated images are content: give every ",{"type":42,"tag":57,"props":210,"children":212},{"className":211},[],[213],{"type":48,"value":214},"\u003Cimg>",{"type":48,"value":216}," a short, descriptive alt in the markup (what the image shows, for a person who cannot see it). Never leave a spec string or an empty alt on a content image; cover backgrounds keep an empty alt (decorative).",{"type":42,"tag":77,"props":218,"children":219},{},[220,225],{"type":42,"tag":81,"props":221,"children":222},{},[223],{"type":48,"value":224},"Verify.",{"type":48,"value":226}," After applying markup, use take_screenshot to confirm the images render, fill their slots, and keep overlaid text legible.",{"type":42,"tag":66,"props":228,"children":230},{"id":229},"writing-the-spec-fields",[231],{"type":48,"value":232},"Writing the spec fields",{"type":42,"tag":51,"props":234,"children":235},{},[236,238,243,245,251,253,259,260,266,267,273,274,280,282,288,290,296],{"type":48,"value":237},"Every image in the ",{"type":42,"tag":57,"props":239,"children":241},{"className":240},[],[242],{"type":48,"value":196},{"type":48,"value":244}," array takes ",{"type":42,"tag":57,"props":246,"children":248},{"className":247},[],[249],{"type":48,"value":250},"path",{"type":48,"value":252},", ",{"type":42,"tag":57,"props":254,"children":256},{"className":255},[],[257],{"type":48,"value":258},"subject",{"type":48,"value":252},{"type":42,"tag":57,"props":261,"children":263},{"className":262},[],[264],{"type":48,"value":265},"pageContext",{"type":48,"value":252},{"type":42,"tag":57,"props":268,"children":270},{"className":269},[],[271],{"type":48,"value":272},"style",{"type":48,"value":252},{"type":42,"tag":57,"props":275,"children":277},{"className":276},[],[278],{"type":48,"value":279},"aspectRatio",{"type":48,"value":281},". The call also takes a shared ",{"type":42,"tag":57,"props":283,"children":285},{"className":284},[],[286],{"type":48,"value":287},"siteContext",{"type":48,"value":289}," and ",{"type":42,"tag":57,"props":291,"children":293},{"className":292},[],[294],{"type":48,"value":295},"imageGrade",{"type":48,"value":125},{"type":42,"tag":298,"props":299,"children":301},"h3",{"id":300},"subject-what-the-image-shows",[302],{"type":48,"value":303},"subject — what the image shows",{"type":42,"tag":51,"props":305,"children":306},{},[307],{"type":48,"value":308},"1–3 specific sentences describing ONLY the image itself: what it shows and from what point of view (composition, framing, vantage, mood).",{"type":42,"tag":97,"props":310,"children":311},{},[312,328,345,350],{"type":42,"tag":77,"props":313,"children":314},{},[315,320,322],{"type":42,"tag":81,"props":316,"children":317},{},[318],{"type":48,"value":319},"NEVER ask the image to render text.",{"type":48,"value":321}," No words, names, letters, numerals, wordmarks, signage copy, or \"hand-lettering of ",{"type":42,"tag":323,"props":324,"children":325},"words",{},[326],{"type":48,"value":327},"\" — in any language. Image models garble glyphs and invent fake scripts. Everything meant to be read is real HTML typography styled by the theme. Prefer scenes whose focal subject carries no lettering at all: the model completes any prominent sign, storefront, menu board, or screen with garbled fake text. When a text-bearing surface is unavoidable, describe it as bare (clear glass, an unmarked awning, a blank board) or keep it distant, oblique, or out of focus. Never write words for signage into the subject even to negate them — naming lettering plants it.",{"type":42,"tag":77,"props":329,"children":330},{},[331,336,338,343],{"type":42,"tag":81,"props":332,"children":333},{},[334],{"type":48,"value":335},"Describe content and composition, NOT photographic grade.",{"type":48,"value":337}," The site-wide ",{"type":42,"tag":57,"props":339,"children":341},{"className":340},[],[342],{"type":48,"value":295},{"type":48,"value":344}," is applied to every image; do not restate or contradict it per image (no \"black and white\", \"golden hour\", \"35mm grain\" in subjects) — per-image grading makes adjacent images clash.",{"type":42,"tag":77,"props":346,"children":347},{},[348],{"type":48,"value":349},"Make sibling images in the same section describe distinct subjects so they don't read alike.",{"type":42,"tag":77,"props":351,"children":352},{},[353],{"type":48,"value":354},"For cover backgrounds with overlaid copy, keep the focal subject off-center with calm, low-detail areas so the overlaid HTML text stays legible.",{"type":42,"tag":298,"props":356,"children":358},{"id":357},"pagecontext-where-the-image-is-used",[359],{"type":48,"value":360},"pageContext — where the image is used",{"type":42,"tag":51,"props":362,"children":363},{},[364,366,371,373,378,380,386,387,393,394,400],{"type":48,"value":365},"A short phrase in ",{"type":42,"tag":81,"props":367,"children":368},{},[369],{"type":48,"value":370},"pictorial slot language",{"type":48,"value":372},", in ",{"type":42,"tag":81,"props":374,"children":375},{},[376],{"type":48,"value":377},"English",{"type":48,"value":379}," (it is machine guidance, not site copy). Examples: ",{"type":42,"tag":57,"props":381,"children":383},{"className":382},[],[384],{"type":48,"value":385},"contained editorial photograph in a 3-column gallery",{"type":48,"value":252},{"type":42,"tag":57,"props":388,"children":390},{"className":389},[],[391],{"type":48,"value":392},"menu item thumbnail",{"type":48,"value":252},{"type":42,"tag":57,"props":395,"children":397},{"className":396},[],[398],{"type":48,"value":399},"full-frame editorial photograph with the left third kept as open, low-detail negative space",{"type":48,"value":125},{"type":42,"tag":97,"props":402,"children":403},{},[404,477],{"type":42,"tag":77,"props":405,"children":406},{},[407,409,414,416,422,424,430,432,438,440,446,447,453,455,461,462,468,469,475],{"type":48,"value":408},"Describe copy-overlay placement as ",{"type":42,"tag":81,"props":410,"children":411},{},[412],{"type":48,"value":413},"reserved empty space in photographic terms, never as text",{"type":48,"value":415},": write ",{"type":42,"tag":57,"props":417,"children":419},{"className":418},[],[420],{"type":48,"value":421},"the left third kept as open, low-detail negative space",{"type":48,"value":423}," — NOT ",{"type":42,"tag":57,"props":425,"children":427},{"className":426},[],[428],{"type":48,"value":429},"hero with the headline overlaid on the left",{"type":48,"value":431},". Naming a headline or menu in the pageContext is the trigger for the model painting ghost text into that exact region — and so is design-comp vocabulary like ",{"type":42,"tag":57,"props":433,"children":435},{"className":434},[],[436],{"type":48,"value":437},"hero cover background",{"type":48,"value":439},": prefer photographic slot language (",{"type":42,"tag":57,"props":441,"children":443},{"className":442},[],[444],{"type":48,"value":445},"editorial photograph",{"type":48,"value":252},{"type":42,"tag":57,"props":448,"children":450},{"className":449},[],[451],{"type":48,"value":452},"full-frame backdrop",{"type":48,"value":454},") over web-layout language (",{"type":42,"tag":57,"props":456,"children":458},{"className":457},[],[459],{"type":48,"value":460},"hero",{"type":48,"value":252},{"type":42,"tag":57,"props":463,"children":465},{"className":464},[],[466],{"type":48,"value":467},"banner",{"type":48,"value":252},{"type":42,"tag":57,"props":470,"children":472},{"className":471},[],[473],{"type":48,"value":474},"cover background",{"type":48,"value":476},").",{"type":42,"tag":77,"props":478,"children":479},{},[480,482,487],{"type":48,"value":481},"The structured ",{"type":42,"tag":57,"props":483,"children":485},{"className":484},[],[486],{"type":48,"value":279},{"type":48,"value":488}," field is authoritative for canvas shape; pageContext must not contradict it.",{"type":42,"tag":298,"props":490,"children":491},{"id":272},[492],{"type":48,"value":272},{"type":42,"tag":51,"props":494,"children":495},{},[496,498,504,506,512,513,519,520,526,527,533,534,540,541,547,548,554],{"type":48,"value":497},"One of: ",{"type":42,"tag":57,"props":499,"children":501},{"className":500},[],[502],{"type":48,"value":503},"photorealistic",{"type":48,"value":505}," (default), ",{"type":42,"tag":57,"props":507,"children":509},{"className":508},[],[510],{"type":48,"value":511},"digital-art",{"type":48,"value":252},{"type":42,"tag":57,"props":514,"children":516},{"className":515},[],[517],{"type":48,"value":518},"illustration",{"type":48,"value":252},{"type":42,"tag":57,"props":521,"children":523},{"className":522},[],[524],{"type":48,"value":525},"minimalist",{"type":48,"value":252},{"type":42,"tag":57,"props":528,"children":530},{"className":529},[],[531],{"type":48,"value":532},"flat-design",{"type":48,"value":252},{"type":42,"tag":57,"props":535,"children":537},{"className":536},[],[538],{"type":48,"value":539},"3d-render",{"type":48,"value":252},{"type":42,"tag":57,"props":542,"children":544},{"className":543},[],[545],{"type":48,"value":546},"abstract",{"type":48,"value":252},{"type":42,"tag":57,"props":549,"children":551},{"className":550},[],[552],{"type":48,"value":553},"watercolor",{"type":48,"value":555},". Keep one style per site unless the design deliberately mixes.",{"type":42,"tag":298,"props":557,"children":559},{"id":558},"aspectratio-match-the-slot",[560],{"type":48,"value":561},"aspectRatio — match the slot",{"type":42,"tag":97,"props":563,"children":564},{},[565,576,587,598,609,627],{"type":42,"tag":77,"props":566,"children":567},{},[568,574],{"type":42,"tag":57,"props":569,"children":571},{"className":570},[],[572],{"type":48,"value":573},"landscape",{"type":48,"value":575}," (16:9) — the default for hero and banner images and wide feature\u002Fgallery rows",{"type":42,"tag":77,"props":577,"children":578},{},[579,585],{"type":42,"tag":57,"props":580,"children":582},{"className":581},[],[583],{"type":48,"value":584},"ultrawide",{"type":48,"value":586}," (21:9) — ONLY for full-bleed backgrounds spanning the viewport edge to edge; never for contained images, cards, or columns",{"type":42,"tag":77,"props":588,"children":589},{},[590,596],{"type":42,"tag":57,"props":591,"children":593},{"className":592},[],[594],{"type":48,"value":595},"portrait",{"type":48,"value":597}," (9:16) — dramatic tall images: full-height editorial shots, tall side-by-side panels",{"type":42,"tag":77,"props":599,"children":600},{},[601,607],{"type":42,"tag":57,"props":602,"children":604},{"className":603},[],[605],{"type":48,"value":606},"card-landscape",{"type":48,"value":608}," (4:3) — contained landscape slots: product cards, blog thumbnails, feature images in columns",{"type":42,"tag":77,"props":610,"children":611},{},[612,618,620,625],{"type":42,"tag":57,"props":613,"children":615},{"className":614},[],[616],{"type":48,"value":617},"card-portrait",{"type":48,"value":619}," (3:4) — the natural portrait-card shape: team headshots, tall product cards, framed insets; prefer over ",{"type":42,"tag":57,"props":621,"children":623},{"className":622},[],[624],{"type":48,"value":595},{"type":48,"value":626}," for anything in a card or column",{"type":42,"tag":77,"props":628,"children":629},{},[630,636],{"type":42,"tag":57,"props":631,"children":633},{"className":632},[],[634],{"type":48,"value":635},"square",{"type":48,"value":637}," (1:1) — only when the layout slot is genuinely 1:1",{"type":42,"tag":51,"props":639,"children":640},{},[641,643,648,650,655,657,662],{"type":48,"value":642},"A full-bleed cover BACKGROUND must be ",{"type":42,"tag":57,"props":644,"children":646},{"className":645},[],[647],{"type":48,"value":573},{"type":48,"value":649}," or ",{"type":42,"tag":57,"props":651,"children":653},{"className":652},[],[654],{"type":48,"value":584},{"type":48,"value":656}," — never square, portrait, or a card ratio. ",{"type":42,"tag":81,"props":658,"children":659},{},[660],{"type":48,"value":661},"Grid\u002Frow consistency:",{"type":48,"value":663}," all images displayed together in one row or grid MUST share the same aspect ratio — never mix.",{"type":42,"tag":298,"props":665,"children":667},{"id":666},"sitecontext-and-imagegrade-shared-per-call",[668],{"type":48,"value":669},"siteContext and imageGrade (shared per call)",{"type":42,"tag":97,"props":671,"children":672},{},[673,690],{"type":42,"tag":77,"props":674,"children":675},{},[676,681,683,688],{"type":42,"tag":57,"props":677,"children":679},{"className":678},[],[680],{"type":48,"value":287},{"type":48,"value":682},": one sentence of subject matter (\"A neighborhood bakery selling sourdough and pastries.\"). ",{"type":42,"tag":81,"props":684,"children":685},{},[686],{"type":48,"value":687},"NEVER include the site or business name",{"type":48,"value":689}," — a name in the prompt is what painted-in fake wordmarks stand in for.",{"type":42,"tag":77,"props":691,"children":692},{},[693,698],{"type":42,"tag":57,"props":694,"children":696},{"className":695},[],[697],{"type":48,"value":295},{"type":48,"value":699},": ONE site-wide photographic treatment (e.g. \"warm natural window light, soft muted color, gentle film grain\"), derived from the visual direction. Use the identical grade in every call for the site so all imagery reads as one photographic series.",{"type":42,"tag":66,"props":701,"children":703},{"id":702},"no-decorative-or-transparent-images",[704],{"type":48,"value":705},"No decorative or transparent images",{"type":42,"tag":51,"props":707,"children":708},{},[709],{"type":48,"value":710},"Generated imagery is for CONTENT — covers, feature\u002Fgallery\u002Fcard images, photographic bands. Never generate decorative assets: no ornaments, flourishes, crests, stamps, icons, or logo marks. They come out off-palette and geometrically wobbly, and small raster icons turn to mush. Decoration comes from theme primitives (separators, borders, spacing, type); feature icons: use none — let type and layout carry the hierarchy.",{"type":42,"tag":66,"props":712,"children":714},{"id":713},"cover-blocks",[715],{"type":48,"value":716},"Cover blocks",{"type":42,"tag":51,"props":718,"children":719},{},[720,722,728,730,736,738,743,745,750,752,757],{"type":48,"value":721},"For ",{"type":42,"tag":57,"props":723,"children":725},{"className":724},[],[726],{"type":48,"value":727},"wp:cover",{"type":48,"value":729}," backgrounds, set the same image URL on BOTH the block's ",{"type":42,"tag":57,"props":731,"children":733},{"className":732},[],[734],{"type":48,"value":735},"url",{"type":48,"value":737}," attribute and the inner ",{"type":42,"tag":57,"props":739,"children":741},{"className":740},[],[742],{"type":48,"value":214},{"type":48,"value":744}," src. Wide cover images (",{"type":42,"tag":57,"props":746,"children":748},{"className":747},[],[749],{"type":48,"value":573},{"type":48,"value":751},"\u002F",{"type":42,"tag":57,"props":753,"children":755},{"className":754},[],[756],{"type":48,"value":584},{"type":48,"value":758},") are generated at 2K automatically.",{"type":42,"tag":66,"props":760,"children":762},{"id":761},"failure-handling",[763],{"type":48,"value":764},"Failure handling",{"type":42,"tag":97,"props":766,"children":767},{},[768,785],{"type":42,"tag":77,"props":769,"children":770},{},[771,776,778,783],{"type":42,"tag":81,"props":772,"children":773},{},[774],{"type":48,"value":775},"Safety-filtered image",{"type":48,"value":777},": rewrite that image's subject to avoid the flagged element and call ",{"type":42,"tag":57,"props":779,"children":781},{"className":780},[],[782],{"type":48,"value":62},{"type":48,"value":784}," again for just that image. One retry; if it fails again, treat as a permanent failure.",{"type":42,"tag":77,"props":786,"children":787},{},[788,793],{"type":42,"tag":81,"props":789,"children":790},{},[791],{"type":48,"value":792},"Permanent failure",{"type":48,"value":794},": adapt the layout to work without that image (a color\u002Fgradient background, a text-led card). NEVER substitute an unrelated image, source an image from a web URL, or leave a reference to a file that does not exist.",{"items":796,"total":899},[797,816,834,848,853,870,885],{"slug":798,"name":798,"fn":799,"description":800,"org":801,"tags":802,"stars":19,"repoUrl":20,"updatedAt":815},"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},[803,806,809,812],{"name":804,"slug":805,"type":15},"Frontend","frontend",{"name":807,"slug":808,"type":15},"Productivity","productivity",{"name":810,"slug":811,"type":15},"UX Copy","ux-copy",{"name":813,"slug":814,"type":15},"UX Design","ux-design","2026-05-06T05:40:01.516544",{"slug":817,"name":817,"fn":818,"description":819,"org":820,"tags":821,"stars":19,"repoUrl":20,"updatedAt":833},"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},[822,825,828,831],{"name":823,"slug":824,"type":15},"Block Editor","block-editor",{"name":826,"slug":827,"type":15},"CSS","css",{"name":829,"slug":830,"type":15},"HTML","html",{"name":832,"slug":29,"type":15},"WordPress","2026-08-29T09:23:44.042569",{"slug":835,"name":835,"fn":836,"description":837,"org":838,"tags":839,"stars":19,"repoUrl":20,"updatedAt":847},"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},[840,843,846],{"name":841,"slug":842,"type":15},"Pricing","pricing",{"name":844,"slug":845,"type":15},"Reference","reference",{"name":832,"slug":29,"type":15},"2026-07-02T07:42:33.654791",{"slug":4,"name":4,"fn":5,"description":6,"org":849,"tags":850,"stars":19,"repoUrl":20,"updatedAt":21},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[851,852],{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"slug":854,"name":854,"fn":855,"description":856,"org":857,"tags":858,"stars":19,"repoUrl":20,"updatedAt":869},"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},[859,862,865,868],{"name":860,"slug":861,"type":15},"CMS","cms",{"name":863,"slug":864,"type":15},"Migration","migration",{"name":866,"slug":867,"type":15},"Web Development","web-development",{"name":832,"slug":29,"type":15},"2026-07-09T06:47:33.454311",{"slug":871,"name":871,"fn":872,"description":873,"org":874,"tags":875,"stars":19,"repoUrl":20,"updatedAt":884},"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},[876,879,880,883],{"name":877,"slug":878,"type":15},"Audit","audit",{"name":804,"slug":805,"type":15},{"name":881,"slug":882,"type":15},"Performance","performance",{"name":832,"slug":29,"type":15},"2026-05-06T05:40:06.433267",{"slug":886,"name":886,"fn":887,"description":888,"org":889,"tags":890,"stars":19,"repoUrl":20,"updatedAt":898},"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},[891,894,897],{"name":892,"slug":893,"type":15},"Content Creation","content-creation",{"name":895,"slug":896,"type":15},"Plugin Development","plugin-development",{"name":832,"slug":29,"type":15},"2026-08-22T03:27:47.937007",14,{"items":901,"total":1020},[902,909,916,922,927,934,941,947,962,979,989,1004],{"slug":798,"name":798,"fn":799,"description":800,"org":903,"tags":904,"stars":19,"repoUrl":20,"updatedAt":815},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[905,906,907,908],{"name":804,"slug":805,"type":15},{"name":807,"slug":808,"type":15},{"name":810,"slug":811,"type":15},{"name":813,"slug":814,"type":15},{"slug":817,"name":817,"fn":818,"description":819,"org":910,"tags":911,"stars":19,"repoUrl":20,"updatedAt":833},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[912,913,914,915],{"name":823,"slug":824,"type":15},{"name":826,"slug":827,"type":15},{"name":829,"slug":830,"type":15},{"name":832,"slug":29,"type":15},{"slug":835,"name":835,"fn":836,"description":837,"org":917,"tags":918,"stars":19,"repoUrl":20,"updatedAt":847},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[919,920,921],{"name":841,"slug":842,"type":15},{"name":844,"slug":845,"type":15},{"name":832,"slug":29,"type":15},{"slug":4,"name":4,"fn":5,"description":6,"org":923,"tags":924,"stars":19,"repoUrl":20,"updatedAt":21},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[925,926],{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"slug":854,"name":854,"fn":855,"description":856,"org":928,"tags":929,"stars":19,"repoUrl":20,"updatedAt":869},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[930,931,932,933],{"name":860,"slug":861,"type":15},{"name":863,"slug":864,"type":15},{"name":866,"slug":867,"type":15},{"name":832,"slug":29,"type":15},{"slug":871,"name":871,"fn":872,"description":873,"org":935,"tags":936,"stars":19,"repoUrl":20,"updatedAt":884},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[937,938,939,940],{"name":877,"slug":878,"type":15},{"name":804,"slug":805,"type":15},{"name":881,"slug":882,"type":15},{"name":832,"slug":29,"type":15},{"slug":886,"name":886,"fn":887,"description":888,"org":942,"tags":943,"stars":19,"repoUrl":20,"updatedAt":898},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[944,945,946],{"name":892,"slug":893,"type":15},{"name":895,"slug":896,"type":15},{"name":832,"slug":29,"type":15},{"slug":948,"name":948,"fn":949,"description":950,"org":951,"tags":952,"stars":19,"repoUrl":20,"updatedAt":961},"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},[953,954,957,960],{"name":877,"slug":878,"type":15},{"name":955,"slug":956,"type":15},"Marketing","marketing",{"name":958,"slug":959,"type":15},"SEO","seo",{"name":832,"slug":29,"type":15},"2026-05-06T05:40:05.196367",{"slug":963,"name":963,"fn":964,"description":965,"org":966,"tags":967,"stars":19,"repoUrl":20,"updatedAt":978},"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},[968,971,974,977],{"name":969,"slug":970,"type":15},"Design","design",{"name":972,"slug":973,"type":15},"Product Management","product-management",{"name":975,"slug":976,"type":15},"Specs","specs",{"name":832,"slug":29,"type":15},"2026-05-06T05:40:02.739409",{"slug":980,"name":980,"fn":981,"description":982,"org":983,"tags":984,"stars":19,"repoUrl":20,"updatedAt":988},"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},[985,987],{"name":986,"slug":26,"type":15},"CLI",{"name":832,"slug":29,"type":15},"2026-09-01T08:01:44.128957",{"slug":990,"name":990,"fn":991,"description":992,"org":993,"tags":994,"stars":19,"repoUrl":20,"updatedAt":1003},"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},[995,998,1001,1002],{"name":996,"slug":997,"type":15},"Content Strategy","content-strategy",{"name":999,"slug":1000,"type":15},"Data Cleaning","data-cleaning",{"name":958,"slug":959,"type":15},{"name":832,"slug":29,"type":15},"2026-05-06T05:40:03.966799",{"slug":1005,"name":1005,"fn":1006,"description":1007,"org":1008,"tags":1009,"stars":19,"repoUrl":20,"updatedAt":1019},"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},[1010,1013,1014,1017],{"name":1011,"slug":1012,"type":15},"Animation","animation",{"name":969,"slug":970,"type":15},{"name":1015,"slug":1016,"type":15},"Typography","typography",{"name":1018,"slug":1005,"type":15},"Visual Design","2026-07-24T05:40:57.887452",86]