[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-automattic-design-foundations":3,"mdc-o2km6e-key":36,"related-repo-automattic-design-foundations":2981,"related-org-automattic-design-foundations":3087},{"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},"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},"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},"Data Modeling","data-modeling","tag",{"name":17,"slug":18,"type":15},"Design System","design-system",{"name":20,"slug":21,"type":15},"Frontend","frontend",{"name":23,"slug":24,"type":15},"Design","design",31,"https:\u002F\u002Fgithub.com\u002FAutomattic\u002Fdata-liberation-agent","2026-06-08T08:17:44.457834",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\u002Fdesign-foundations","---\nname: design-foundations\ndescription: 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.\n---\n\n# Design Foundations\n\nYou build a coherent **design foundation** — a semantic, reviewable intermediate between raw SP1 token observations and WordPress theme generation.\n\n## Input contract\n\nThe agent gives you:\n\n1. A `PartialDesignFoundation` JSON blob (the output of `liberate_design_foundation_scaffold`). Some roles are already filled in by deterministic rules. The remaining slots are `null`, listed in `skillTodos`.\n2. Aggregate HTML\u002FCSS analysis files: `palette.json`, `typography.json`, `breakpoints.json`, and when present `computed-styles.json`.\n3. Paths to representative rendered HTML excerpts (e.g. `\u003CoutputDir>\u002Fhtml\u002Fhomepage.html`).\n4. Optional paths to screenshots for ambiguity checks only.\n5. Access to the MCP tool `liberate_design_foundation_validate`.\n\n### Evidence mode — HTML\u002FCSS first, screenshots only for ambiguity\n\nVision context is the dominant cost in this skill. The normal path should not open screenshots. Use rendered HTML, aggregate computed CSS, and deterministic scaffold evidence first.\n\nIf the invoking runner provides a `Foundation sample` JSON, that sample is a hard cap: do **not** inspect HTML outside the listed entries. Use aggregate `palette.json`, `typography.json`, `breakpoints.json`, and `computed-styles.json` for broad frequency and component signals. Use only the sampled HTML for semantic role decisions.\n\n**Step 1 — aggregate CSS analysis (cheap):**\n\nRead aggregate analysis before opening any visual asset:\n\n- `palette.json`: high-frequency background colors.\n- `typography.json`: observed font families, sizes, weights, and line heights.\n- `computed-styles.json`: component-level text, background, border, radius, padding, typography, and background-image evidence for selectors like `header`, `footer`, `a`, `button`, form controls, hero\u002Fcard\u002FCTA containers.\n- `breakpoints.json`: responsive tier evidence.\n\nThese files are generated from the live DOM using browser-computed CSS. They are the source of truth for colors and typography; screenshots are not needed to discover tokens.\n\n**Step 2 — inspect the representative HTML (cap):**\n\nUse the provided Foundation sample. In the fast path it contains at most one representative rendered HTML file, preferring the homepage. Inspect it for:\n\n- `\u003Cheader>`, `\u003Cfooter>`, `\u003Cmain>` boundaries.\n- Button\u002Flink\u002Fnav\u002Fform selectors and class names.\n- Inline styles, CSS variables, gradients, and background images.\n- Whether a high-frequency color is actually a surface, text color, CTA, border, or decoration.\n\n**Step 3 — screenshot fallback only when needed:**\n\nOpen a screenshot only if HTML\u002FCSS evidence cannot answer a specific semantic question, for example:\n\n- A color appears in multiple roles and computed selectors do not identify usage.\n- A gradient\u002Fbackground image needs a role (`hero background`, `cta banner`, `decorative`) and HTML class names are unclear.\n- Mobile stacking or overlaid composition affects a token decision.\n\nIf you open a screenshot, state exactly what ambiguity it resolved. **Do not read all screenshots.**\n\n## Output contract\n\nReturn a **complete** `DesignFoundation` matching the schema documented in `src\u002Flib\u002Fdesign-foundation\u002Fschema.ts`. The JSON must pass `liberate_design_foundation_validate` with `{ ok: true }`.\n\n**You MUST call `liberate_design_foundation_validate` on your output before returning.** If it returns errors, fix them and re-validate. Do not return until validation passes.\n\n## Role assignments — judgment criteria\n\nThe scaffold fills:\n- `color.surface.base` — lightest high-frequency palette entry\n- `color.text.default` — darkest high-frequency palette entry\n- `typography.families.body` — most-common body fontFamily\n- `breakpoints.{sm,md,lg,xl}` — nearest-tier mapping\n- `gradient.*` — CSS strings (roles marked \"TODO\")\n- `inputsDigest.*` — sha256s\n\nYou fill everything else. Use the criteria below.\n\n### color.surface\n\n| Role | How to pick |\n|---|---|\n| `raised` | A slightly-darker-or-lighter palette entry commonly used for cards, alternate sections, subtle containers. Prefer `computed-styles.json` selectors like card\u002Fsection containers and representative HTML class names. |\n| `inverse` | A saturated dark entry commonly used as a dark hero \u002F footer background. Usually appears on most pages in header\u002Ffooter patterns. |\n\n### color.text\n\n| Role | How to pick |\n|---|---|\n| `muted` | A mid-lightness entry used for secondary labels, placeholders, metadata. Usually appears in button labels, form hints, deemphasized text. |\n| `inverse` | Near-white; used on inverse surfaces (dark hero text, footer text). |\n| `subtle` | A very-light-on-light or very-dark-on-dark entry used for placeholder\u002Fghost text. Often `#999`, `#ccc`, or the equivalent inversed on dark. |\n\n### color.accent\n\nDistinguish by saturation, frequency, and usage signal:\n\n| Role | How to pick |\n|---|---|\n| `primary` | The dominant saturated color used on primary CTAs (Book a Demo, Sign Up, etc.). Usually visible on the homepage hero and most page footers. |\n| `primaryAlt` | A slightly-varied primary (darker for hover state, or a closely-related hue used in gradients with primary). |\n| `warning` | A red \u002F warm orange used for urgent CTAs, alerts, \"important\" banners. Often appears on pricing or trial pages. |\n| `warm` | A secondary accent in the orange\u002Fcoral family used as a visual counterweight to primary. |\n| `highlight` | A yellow \u002F gold used in gradients or for highlighted text. Usually low-frequency but visually prominent where it appears. |\n\n**Ambiguity rule:** If two entries both look like primary candidates, pick the one with higher `urls` (more pages). If still tied, pick the one with higher saturation.\n\n### color.border\n\n| Role | How to pick |\n|---|---|\n| `default` | A light-grey entry commonly used as a hairline divider (often `#ccc`, `#ddd`). |\n| `subtle` | A lighter grey (or a tinted alternative) used inside low-contrast containers. |\n\n### typography.families\n\nThe scaffold fills `body`. Fill:\n\n| Role | How to pick |\n|---|---|\n| `display` | The family used for the largest headlines (h1, hero titles). Often a serif or display face. Check `typography.h1` entries in the raw SP1 file. |\n| `mono` | A monospace family used for tags, labels, small caps. Check typography entries with `fontFamily` containing \"Mono\", \"Courier\", or \"Code\". If no mono family is observed, set to `null` — do NOT hallucinate one. |\n\n### gradient\n\nScaffold fills `css` and `evidence`; you fill `role`. Map each gradient to its usage:\n\n- `hero background` — dark, full-bleed, used as page hero\u002Fheader background\n- `cta banner` — used on call-to-action bands and subscribe blocks\n- `headline accent` — light-to-highlight gradients used with `background-clip: text` on headlines\n- `decorative` — anything else\n\nLook at the HTML excerpt to see which selectors use the gradient.\n\n### components (minimal fixed set)\n\nFill all five with token references (not raw values). Reference form: `\"color.accent.primary\"`, `\"radius.base\"`, `\"spacing.4\"`.\n\n| Component | Required tokens |\n|---|---|\n| `button` | `background` (accent.primary), `text` (text.inverse), `radius` (radius.base), `padding`, `fontFamily` (families.body), `fontWeight` |\n| `input` | `background` (surface.base), `border` (border.default), `text` (text.default), `radius`, `padding` |\n| `card` | `background` (surface.base or surface.raised), `border` (border.subtle), `radius` (radius.lg), `padding` |\n| `surface` | `background` (surface.base) — baseline container |\n| `divider` | `background` (border.default), `height` (e.g. \"1px\") |\n\n### openQuestions\n\nFlag things that will affect downstream theme generation:\n\n- Commercial fonts (e.g. Reckless, Displaay faces) → suggest open-source substitution (`Fraunces`, `Playfair`).\n- **Uncapturable fonts (Typekit \u002F Monotype \u002F hashed builder names) →** these can't be self-hosted (no reachable woff\u002Fwoff2). The deterministic font pipeline now AUTO-SUBSTITUTES them to the closest FREE web font, self-hosts its woff2, and binds it as the theme's body\u002Fdisplay family — see `references\u002Ftheme-tokens.md` (\"Commercial \u002F uncapturable → free substitution\"). Record the substitution as an `openQuestion` (`blocksReplica:false`) noting which family was swapped (e.g. `quasimoda → Hanken Grotesk`) so an operator can confirm the visual match; do NOT leave the family as a bare `sans-serif` fallback.\n- Font files loaded from unknown CDNs (no open license path).\n- Colors observed once or twice that look like one-off overrides rather than design-system tokens — worth flagging for operator review.\n\nEach entry: `{ id: \"short-slug\", question: \"Confirm ...\", blocksReplica: true|false }`.\n\n## Evidence discipline\n\nEvery role you fill must have at least one evidence entry. Good evidence:\n\n- `\"palette[5]: 92\u002F186 urls, 341 occurrences\"` (cites raw SP1 frequency)\n- `\"computed button background on homepage.html\"` (cites HTML + element)\n- `\"hero section @ screenshots\u002Fdesktop\u002Fhomepage.png\"` (cites screenshot)\n\nBad evidence:\n\n- `\"looks like primary\"` (no citation)\n- `\"skill-filled\"` (placeholder — unacceptable)\n\n## Process\n\n1. Read the PartialDesignFoundation. Note every path in `skillTodos`.\n2. Read aggregate HTML\u002FCSS analysis and the representative HTML excerpt.\n3. For each slot in `skillTodos`:\n   - Apply the criteria above.\n   - If you cannot confidently fill a slot (e.g. no mono family exists), leave it `null` AND remove its path from `skillTodos`. This communicates \"deliberately empty\" instead of \"forgot to fill.\"\n4. Populate `components` with the fixed set above.\n5. Populate `openQuestions` with any concerns.\n6. Set `skillTodos: []` once every remaining slot is filled.\n7. Invoke `liberate_design_foundation_validate`. If it fails, fix and retry.\n8. Return the validated JSON to the calling agent.\n\n## Anti-patterns\n\n- **Hallucinating tokens.** If SP1 didn't observe a `serif` family but the agent seems to want one, do NOT invent `\"Merriweather\"`. Leave `display: null` and add an `openQuestion` about font substitution.\n- **Skipping evidence.** Every role must cite its source. No bare strings.\n- **Skipping validate.** You MUST call `liberate_design_foundation_validate` before returning.\n- **Over-confident mapping.** If two palette entries tie for `primary`, flag the tie in `openQuestions` rather than silently picking one.\n- **Duplicating deterministic work.** Do not override the scaffold's filled slots (surface.base, text.default, etc.) unless they're demonstrably wrong.\n\n## Known scaffold-pollution failure modes (correct these every run)\n\nThe deterministic scaffold can be misled by markup that isn't the real page design. These are common enough to check explicitly — when you see them, the slot IS \"demonstrably wrong,\" so correct it against `palette.json` frequency + a screenshot and note the correction in `openQuestions`:\n\n- **Inverted surface\u002Ftext from a one-off CSS variable.** The scaffold can fill `color.surface.base` and `color.text.default` from a low-frequency `:root`\u002Fcomponent CSS var (e.g. `--tooltip-background-color`) instead of palette frequency — producing `surface.base: \"black\"` \u002F `text.default: \"white\"` on a site that's actually white-background\u002Fdark-text. **Sanity check: if `surface.base` is dark or `text.default` is light, verify against `palette.json` — the dominant high-count entry is the real surface; the darkest high-count entry is the real text.** Swiftlumber (2026-05-28): scaffold gave black\u002Fwhite from a 1-url tooltip var; palette showed `#ffffff`×57 \u002F `#000000`×3 → corrected to #fff\u002F#000.\n- **10px base font size from a hidden SEO `\u003Cbody>`.** `typography.scale.base` (and `typography.body.fontSize`) can read ~10px from a visually-hidden SEO body element. Real body copy is ~16px (check `typography.scale.steps.base`). Reconstruction uses captured per-element sizes, so this rarely changes output — but flag it in `openQuestions` so it isn't trusted downstream.\n- **Hidden-SEO display font.** Computed `h1`\u002F`h2` may report a hidden-SEO face (e.g. `orig_sf_pro_display_bold`, `wfont_*`) that is NOT the visible heading face. Cross-check `h3`\u002Fvisible headings — the real display family often surfaces there (swiftlumber: visible headings are `\"libre baskerville\", serif` from h3; h1\u002Fh2 were the SEO SF-Pro face).\n\n## Example (abbreviated)\n\nInput partial (relevant slots only):\n\n```json\n{\n  \"color\": {\n    \"accent\": { \"primary\": null, \"warning\": null, \"highlight\": null }\n  },\n  \"skillTodos\": [\"color.accent.primary\", \"color.accent.warning\", \"color.accent.highlight\"]\n}\n```\n\nScreenshot evidence: homepage CTA button is teal; \"Book a Demo\" button is red; headline text has a gold→red gradient.\n\nOutput:\n\n```json\n{\n  \"color\": {\n    \"accent\": {\n      \"primary\": {\n        \"value\": \"#00a4bd\",\n        \"role\": \"primary CTA, link\",\n        \"evidence\": [\n          \"palette[5]: 40\u002F100 urls, 200 occurrences\",\n          \"button.primary@homepage.html computed background\"\n        ]\n      },\n      \"warning\": {\n        \"value\": \"#f2545b\",\n        \"role\": \"urgent CTA (Book a Demo)\",\n        \"evidence\": [\n          \"palette[7]: 30\u002F100 urls\",\n          \"a.cta-book@homepage.html computed background\"\n        ]\n      },\n      \"highlight\": {\n        \"value\": \"#ffc700\",\n        \"role\": \"gradient highlight\",\n        \"evidence\": [\n          \"gradient.headlineAccent uses #ffc700 → #cc0201\",\n          \"h1 span.highlight@homepage.html\"\n        ]\n      }\n    }\n  },\n  \"skillTodos\": []\n}\n```\n\nThen call `liberate_design_foundation_validate` and return.\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,49,63,70,75,183,190,195,241,249,254,327,332,340,345,388,396,401,441,451,457,499,516,522,527,596,601,607,676,682,767,773,778,883,901,907,973,979,992,1069,1074,1103,1155,1160,1166,1192,1411,1417,1422,1504,1516,1522,1527,1563,1568,1593,1599,1711,1717,1822,1828,1847,2052,2058,2063,2308,2313,2318,2963,2975],{"type":42,"tag":43,"props":44,"children":45},"element","h1",{"id":4},[46],{"type":47,"value":48},"text","Design Foundations",{"type":42,"tag":50,"props":51,"children":52},"p",{},[53,55,61],{"type":47,"value":54},"You build a coherent ",{"type":42,"tag":56,"props":57,"children":58},"strong",{},[59],{"type":47,"value":60},"design foundation",{"type":47,"value":62}," — a semantic, reviewable intermediate between raw SP1 token observations and WordPress theme generation.",{"type":42,"tag":64,"props":65,"children":67},"h2",{"id":66},"input-contract",[68],{"type":47,"value":69},"Input contract",{"type":42,"tag":50,"props":71,"children":72},{},[73],{"type":47,"value":74},"The agent gives you:",{"type":42,"tag":76,"props":77,"children":78},"ol",{},[79,118,153,166,171],{"type":42,"tag":80,"props":81,"children":82},"li",{},[83,85,92,94,100,102,108,110,116],{"type":47,"value":84},"A ",{"type":42,"tag":86,"props":87,"children":89},"code",{"className":88},[],[90],{"type":47,"value":91},"PartialDesignFoundation",{"type":47,"value":93}," JSON blob (the output of ",{"type":42,"tag":86,"props":95,"children":97},{"className":96},[],[98],{"type":47,"value":99},"liberate_design_foundation_scaffold",{"type":47,"value":101},"). Some roles are already filled in by deterministic rules. The remaining slots are ",{"type":42,"tag":86,"props":103,"children":105},{"className":104},[],[106],{"type":47,"value":107},"null",{"type":47,"value":109},", listed in ",{"type":42,"tag":86,"props":111,"children":113},{"className":112},[],[114],{"type":47,"value":115},"skillTodos",{"type":47,"value":117},".",{"type":42,"tag":80,"props":119,"children":120},{},[121,123,129,131,137,138,144,146,152],{"type":47,"value":122},"Aggregate HTML\u002FCSS analysis files: ",{"type":42,"tag":86,"props":124,"children":126},{"className":125},[],[127],{"type":47,"value":128},"palette.json",{"type":47,"value":130},", ",{"type":42,"tag":86,"props":132,"children":134},{"className":133},[],[135],{"type":47,"value":136},"typography.json",{"type":47,"value":130},{"type":42,"tag":86,"props":139,"children":141},{"className":140},[],[142],{"type":47,"value":143},"breakpoints.json",{"type":47,"value":145},", and when present ",{"type":42,"tag":86,"props":147,"children":149},{"className":148},[],[150],{"type":47,"value":151},"computed-styles.json",{"type":47,"value":117},{"type":42,"tag":80,"props":154,"children":155},{},[156,158,164],{"type":47,"value":157},"Paths to representative rendered HTML excerpts (e.g. ",{"type":42,"tag":86,"props":159,"children":161},{"className":160},[],[162],{"type":47,"value":163},"\u003CoutputDir>\u002Fhtml\u002Fhomepage.html",{"type":47,"value":165},").",{"type":42,"tag":80,"props":167,"children":168},{},[169],{"type":47,"value":170},"Optional paths to screenshots for ambiguity checks only.",{"type":42,"tag":80,"props":172,"children":173},{},[174,176,182],{"type":47,"value":175},"Access to the MCP tool ",{"type":42,"tag":86,"props":177,"children":179},{"className":178},[],[180],{"type":47,"value":181},"liberate_design_foundation_validate",{"type":47,"value":117},{"type":42,"tag":184,"props":185,"children":187},"h3",{"id":186},"evidence-mode-htmlcss-first-screenshots-only-for-ambiguity",[188],{"type":47,"value":189},"Evidence mode — HTML\u002FCSS first, screenshots only for ambiguity",{"type":42,"tag":50,"props":191,"children":192},{},[193],{"type":47,"value":194},"Vision context is the dominant cost in this skill. The normal path should not open screenshots. Use rendered HTML, aggregate computed CSS, and deterministic scaffold evidence first.",{"type":42,"tag":50,"props":196,"children":197},{},[198,200,206,208,213,215,220,221,226,227,232,234,239],{"type":47,"value":199},"If the invoking runner provides a ",{"type":42,"tag":86,"props":201,"children":203},{"className":202},[],[204],{"type":47,"value":205},"Foundation sample",{"type":47,"value":207}," JSON, that sample is a hard cap: do ",{"type":42,"tag":56,"props":209,"children":210},{},[211],{"type":47,"value":212},"not",{"type":47,"value":214}," inspect HTML outside the listed entries. Use aggregate ",{"type":42,"tag":86,"props":216,"children":218},{"className":217},[],[219],{"type":47,"value":128},{"type":47,"value":130},{"type":42,"tag":86,"props":222,"children":224},{"className":223},[],[225],{"type":47,"value":136},{"type":47,"value":130},{"type":42,"tag":86,"props":228,"children":230},{"className":229},[],[231],{"type":47,"value":143},{"type":47,"value":233},", and ",{"type":42,"tag":86,"props":235,"children":237},{"className":236},[],[238],{"type":47,"value":151},{"type":47,"value":240}," for broad frequency and component signals. Use only the sampled HTML for semantic role decisions.",{"type":42,"tag":50,"props":242,"children":243},{},[244],{"type":42,"tag":56,"props":245,"children":246},{},[247],{"type":47,"value":248},"Step 1 — aggregate CSS analysis (cheap):",{"type":42,"tag":50,"props":250,"children":251},{},[252],{"type":47,"value":253},"Read aggregate analysis before opening any visual asset:",{"type":42,"tag":255,"props":256,"children":257},"ul",{},[258,268,278,317],{"type":42,"tag":80,"props":259,"children":260},{},[261,266],{"type":42,"tag":86,"props":262,"children":264},{"className":263},[],[265],{"type":47,"value":128},{"type":47,"value":267},": high-frequency background colors.",{"type":42,"tag":80,"props":269,"children":270},{},[271,276],{"type":42,"tag":86,"props":272,"children":274},{"className":273},[],[275],{"type":47,"value":136},{"type":47,"value":277},": observed font families, sizes, weights, and line heights.",{"type":42,"tag":80,"props":279,"children":280},{},[281,286,288,294,295,301,302,308,309,315],{"type":42,"tag":86,"props":282,"children":284},{"className":283},[],[285],{"type":47,"value":151},{"type":47,"value":287},": component-level text, background, border, radius, padding, typography, and background-image evidence for selectors like ",{"type":42,"tag":86,"props":289,"children":291},{"className":290},[],[292],{"type":47,"value":293},"header",{"type":47,"value":130},{"type":42,"tag":86,"props":296,"children":298},{"className":297},[],[299],{"type":47,"value":300},"footer",{"type":47,"value":130},{"type":42,"tag":86,"props":303,"children":305},{"className":304},[],[306],{"type":47,"value":307},"a",{"type":47,"value":130},{"type":42,"tag":86,"props":310,"children":312},{"className":311},[],[313],{"type":47,"value":314},"button",{"type":47,"value":316},", form controls, hero\u002Fcard\u002FCTA containers.",{"type":42,"tag":80,"props":318,"children":319},{},[320,325],{"type":42,"tag":86,"props":321,"children":323},{"className":322},[],[324],{"type":47,"value":143},{"type":47,"value":326},": responsive tier evidence.",{"type":42,"tag":50,"props":328,"children":329},{},[330],{"type":47,"value":331},"These files are generated from the live DOM using browser-computed CSS. They are the source of truth for colors and typography; screenshots are not needed to discover tokens.",{"type":42,"tag":50,"props":333,"children":334},{},[335],{"type":42,"tag":56,"props":336,"children":337},{},[338],{"type":47,"value":339},"Step 2 — inspect the representative HTML (cap):",{"type":42,"tag":50,"props":341,"children":342},{},[343],{"type":47,"value":344},"Use the provided Foundation sample. In the fast path it contains at most one representative rendered HTML file, preferring the homepage. Inspect it for:",{"type":42,"tag":255,"props":346,"children":347},{},[348,373,378,383],{"type":42,"tag":80,"props":349,"children":350},{},[351,357,358,364,365,371],{"type":42,"tag":86,"props":352,"children":354},{"className":353},[],[355],{"type":47,"value":356},"\u003Cheader>",{"type":47,"value":130},{"type":42,"tag":86,"props":359,"children":361},{"className":360},[],[362],{"type":47,"value":363},"\u003Cfooter>",{"type":47,"value":130},{"type":42,"tag":86,"props":366,"children":368},{"className":367},[],[369],{"type":47,"value":370},"\u003Cmain>",{"type":47,"value":372}," boundaries.",{"type":42,"tag":80,"props":374,"children":375},{},[376],{"type":47,"value":377},"Button\u002Flink\u002Fnav\u002Fform selectors and class names.",{"type":42,"tag":80,"props":379,"children":380},{},[381],{"type":47,"value":382},"Inline styles, CSS variables, gradients, and background images.",{"type":42,"tag":80,"props":384,"children":385},{},[386],{"type":47,"value":387},"Whether a high-frequency color is actually a surface, text color, CTA, border, or decoration.",{"type":42,"tag":50,"props":389,"children":390},{},[391],{"type":42,"tag":56,"props":392,"children":393},{},[394],{"type":47,"value":395},"Step 3 — screenshot fallback only when needed:",{"type":42,"tag":50,"props":397,"children":398},{},[399],{"type":47,"value":400},"Open a screenshot only if HTML\u002FCSS evidence cannot answer a specific semantic question, for example:",{"type":42,"tag":255,"props":402,"children":403},{},[404,409,436],{"type":42,"tag":80,"props":405,"children":406},{},[407],{"type":47,"value":408},"A color appears in multiple roles and computed selectors do not identify usage.",{"type":42,"tag":80,"props":410,"children":411},{},[412,414,420,421,427,428,434],{"type":47,"value":413},"A gradient\u002Fbackground image needs a role (",{"type":42,"tag":86,"props":415,"children":417},{"className":416},[],[418],{"type":47,"value":419},"hero background",{"type":47,"value":130},{"type":42,"tag":86,"props":422,"children":424},{"className":423},[],[425],{"type":47,"value":426},"cta banner",{"type":47,"value":130},{"type":42,"tag":86,"props":429,"children":431},{"className":430},[],[432],{"type":47,"value":433},"decorative",{"type":47,"value":435},") and HTML class names are unclear.",{"type":42,"tag":80,"props":437,"children":438},{},[439],{"type":47,"value":440},"Mobile stacking or overlaid composition affects a token decision.",{"type":42,"tag":50,"props":442,"children":443},{},[444,446],{"type":47,"value":445},"If you open a screenshot, state exactly what ambiguity it resolved. ",{"type":42,"tag":56,"props":447,"children":448},{},[449],{"type":47,"value":450},"Do not read all screenshots.",{"type":42,"tag":64,"props":452,"children":454},{"id":453},"output-contract",[455],{"type":47,"value":456},"Output contract",{"type":42,"tag":50,"props":458,"children":459},{},[460,462,467,469,475,477,483,485,490,492,498],{"type":47,"value":461},"Return a ",{"type":42,"tag":56,"props":463,"children":464},{},[465],{"type":47,"value":466},"complete",{"type":47,"value":468}," ",{"type":42,"tag":86,"props":470,"children":472},{"className":471},[],[473],{"type":47,"value":474},"DesignFoundation",{"type":47,"value":476}," matching the schema documented in ",{"type":42,"tag":86,"props":478,"children":480},{"className":479},[],[481],{"type":47,"value":482},"src\u002Flib\u002Fdesign-foundation\u002Fschema.ts",{"type":47,"value":484},". The JSON must pass ",{"type":42,"tag":86,"props":486,"children":488},{"className":487},[],[489],{"type":47,"value":181},{"type":47,"value":491}," with ",{"type":42,"tag":86,"props":493,"children":495},{"className":494},[],[496],{"type":47,"value":497},"{ ok: true }",{"type":47,"value":117},{"type":42,"tag":50,"props":500,"children":501},{},[502,514],{"type":42,"tag":56,"props":503,"children":504},{},[505,507,512],{"type":47,"value":506},"You MUST call ",{"type":42,"tag":86,"props":508,"children":510},{"className":509},[],[511],{"type":47,"value":181},{"type":47,"value":513}," on your output before returning.",{"type":47,"value":515}," If it returns errors, fix them and re-validate. Do not return until validation passes.",{"type":42,"tag":64,"props":517,"children":519},{"id":518},"role-assignments-judgment-criteria",[520],{"type":47,"value":521},"Role assignments — judgment criteria",{"type":42,"tag":50,"props":523,"children":524},{},[525],{"type":47,"value":526},"The scaffold fills:",{"type":42,"tag":255,"props":528,"children":529},{},[530,541,552,563,574,585],{"type":42,"tag":80,"props":531,"children":532},{},[533,539],{"type":42,"tag":86,"props":534,"children":536},{"className":535},[],[537],{"type":47,"value":538},"color.surface.base",{"type":47,"value":540}," — lightest high-frequency palette entry",{"type":42,"tag":80,"props":542,"children":543},{},[544,550],{"type":42,"tag":86,"props":545,"children":547},{"className":546},[],[548],{"type":47,"value":549},"color.text.default",{"type":47,"value":551}," — darkest high-frequency palette entry",{"type":42,"tag":80,"props":553,"children":554},{},[555,561],{"type":42,"tag":86,"props":556,"children":558},{"className":557},[],[559],{"type":47,"value":560},"typography.families.body",{"type":47,"value":562}," — most-common body fontFamily",{"type":42,"tag":80,"props":564,"children":565},{},[566,572],{"type":42,"tag":86,"props":567,"children":569},{"className":568},[],[570],{"type":47,"value":571},"breakpoints.{sm,md,lg,xl}",{"type":47,"value":573}," — nearest-tier mapping",{"type":42,"tag":80,"props":575,"children":576},{},[577,583],{"type":42,"tag":86,"props":578,"children":580},{"className":579},[],[581],{"type":47,"value":582},"gradient.*",{"type":47,"value":584}," — CSS strings (roles marked \"TODO\")",{"type":42,"tag":80,"props":586,"children":587},{},[588,594],{"type":42,"tag":86,"props":589,"children":591},{"className":590},[],[592],{"type":47,"value":593},"inputsDigest.*",{"type":47,"value":595}," — sha256s",{"type":42,"tag":50,"props":597,"children":598},{},[599],{"type":47,"value":600},"You fill everything else. Use the criteria below.",{"type":42,"tag":184,"props":602,"children":604},{"id":603},"colorsurface",[605],{"type":47,"value":606},"color.surface",{"type":42,"tag":608,"props":609,"children":610},"table",{},[611,630],{"type":42,"tag":612,"props":613,"children":614},"thead",{},[615],{"type":42,"tag":616,"props":617,"children":618},"tr",{},[619,625],{"type":42,"tag":620,"props":621,"children":622},"th",{},[623],{"type":47,"value":624},"Role",{"type":42,"tag":620,"props":626,"children":627},{},[628],{"type":47,"value":629},"How to pick",{"type":42,"tag":631,"props":632,"children":633},"tbody",{},[634,659],{"type":42,"tag":616,"props":635,"children":636},{},[637,647],{"type":42,"tag":638,"props":639,"children":640},"td",{},[641],{"type":42,"tag":86,"props":642,"children":644},{"className":643},[],[645],{"type":47,"value":646},"raised",{"type":42,"tag":638,"props":648,"children":649},{},[650,652,657],{"type":47,"value":651},"A slightly-darker-or-lighter palette entry commonly used for cards, alternate sections, subtle containers. Prefer ",{"type":42,"tag":86,"props":653,"children":655},{"className":654},[],[656],{"type":47,"value":151},{"type":47,"value":658}," selectors like card\u002Fsection containers and representative HTML class names.",{"type":42,"tag":616,"props":660,"children":661},{},[662,671],{"type":42,"tag":638,"props":663,"children":664},{},[665],{"type":42,"tag":86,"props":666,"children":668},{"className":667},[],[669],{"type":47,"value":670},"inverse",{"type":42,"tag":638,"props":672,"children":673},{},[674],{"type":47,"value":675},"A saturated dark entry commonly used as a dark hero \u002F footer background. Usually appears on most pages in header\u002Ffooter patterns.",{"type":42,"tag":184,"props":677,"children":679},{"id":678},"colortext",[680],{"type":47,"value":681},"color.text",{"type":42,"tag":608,"props":683,"children":684},{},[685,699],{"type":42,"tag":612,"props":686,"children":687},{},[688],{"type":42,"tag":616,"props":689,"children":690},{},[691,695],{"type":42,"tag":620,"props":692,"children":693},{},[694],{"type":47,"value":624},{"type":42,"tag":620,"props":696,"children":697},{},[698],{"type":47,"value":629},{"type":42,"tag":631,"props":700,"children":701},{},[702,719,735],{"type":42,"tag":616,"props":703,"children":704},{},[705,714],{"type":42,"tag":638,"props":706,"children":707},{},[708],{"type":42,"tag":86,"props":709,"children":711},{"className":710},[],[712],{"type":47,"value":713},"muted",{"type":42,"tag":638,"props":715,"children":716},{},[717],{"type":47,"value":718},"A mid-lightness entry used for secondary labels, placeholders, metadata. Usually appears in button labels, form hints, deemphasized text.",{"type":42,"tag":616,"props":720,"children":721},{},[722,730],{"type":42,"tag":638,"props":723,"children":724},{},[725],{"type":42,"tag":86,"props":726,"children":728},{"className":727},[],[729],{"type":47,"value":670},{"type":42,"tag":638,"props":731,"children":732},{},[733],{"type":47,"value":734},"Near-white; used on inverse surfaces (dark hero text, footer text).",{"type":42,"tag":616,"props":736,"children":737},{},[738,747],{"type":42,"tag":638,"props":739,"children":740},{},[741],{"type":42,"tag":86,"props":742,"children":744},{"className":743},[],[745],{"type":47,"value":746},"subtle",{"type":42,"tag":638,"props":748,"children":749},{},[750,752,758,759,765],{"type":47,"value":751},"A very-light-on-light or very-dark-on-dark entry used for placeholder\u002Fghost text. Often ",{"type":42,"tag":86,"props":753,"children":755},{"className":754},[],[756],{"type":47,"value":757},"#999",{"type":47,"value":130},{"type":42,"tag":86,"props":760,"children":762},{"className":761},[],[763],{"type":47,"value":764},"#ccc",{"type":47,"value":766},", or the equivalent inversed on dark.",{"type":42,"tag":184,"props":768,"children":770},{"id":769},"coloraccent",[771],{"type":47,"value":772},"color.accent",{"type":42,"tag":50,"props":774,"children":775},{},[776],{"type":47,"value":777},"Distinguish by saturation, frequency, and usage signal:",{"type":42,"tag":608,"props":779,"children":780},{},[781,795],{"type":42,"tag":612,"props":782,"children":783},{},[784],{"type":42,"tag":616,"props":785,"children":786},{},[787,791],{"type":42,"tag":620,"props":788,"children":789},{},[790],{"type":47,"value":624},{"type":42,"tag":620,"props":792,"children":793},{},[794],{"type":47,"value":629},{"type":42,"tag":631,"props":796,"children":797},{},[798,815,832,849,866],{"type":42,"tag":616,"props":799,"children":800},{},[801,810],{"type":42,"tag":638,"props":802,"children":803},{},[804],{"type":42,"tag":86,"props":805,"children":807},{"className":806},[],[808],{"type":47,"value":809},"primary",{"type":42,"tag":638,"props":811,"children":812},{},[813],{"type":47,"value":814},"The dominant saturated color used on primary CTAs (Book a Demo, Sign Up, etc.). Usually visible on the homepage hero and most page footers.",{"type":42,"tag":616,"props":816,"children":817},{},[818,827],{"type":42,"tag":638,"props":819,"children":820},{},[821],{"type":42,"tag":86,"props":822,"children":824},{"className":823},[],[825],{"type":47,"value":826},"primaryAlt",{"type":42,"tag":638,"props":828,"children":829},{},[830],{"type":47,"value":831},"A slightly-varied primary (darker for hover state, or a closely-related hue used in gradients with primary).",{"type":42,"tag":616,"props":833,"children":834},{},[835,844],{"type":42,"tag":638,"props":836,"children":837},{},[838],{"type":42,"tag":86,"props":839,"children":841},{"className":840},[],[842],{"type":47,"value":843},"warning",{"type":42,"tag":638,"props":845,"children":846},{},[847],{"type":47,"value":848},"A red \u002F warm orange used for urgent CTAs, alerts, \"important\" banners. Often appears on pricing or trial pages.",{"type":42,"tag":616,"props":850,"children":851},{},[852,861],{"type":42,"tag":638,"props":853,"children":854},{},[855],{"type":42,"tag":86,"props":856,"children":858},{"className":857},[],[859],{"type":47,"value":860},"warm",{"type":42,"tag":638,"props":862,"children":863},{},[864],{"type":47,"value":865},"A secondary accent in the orange\u002Fcoral family used as a visual counterweight to primary.",{"type":42,"tag":616,"props":867,"children":868},{},[869,878],{"type":42,"tag":638,"props":870,"children":871},{},[872],{"type":42,"tag":86,"props":873,"children":875},{"className":874},[],[876],{"type":47,"value":877},"highlight",{"type":42,"tag":638,"props":879,"children":880},{},[881],{"type":47,"value":882},"A yellow \u002F gold used in gradients or for highlighted text. Usually low-frequency but visually prominent where it appears.",{"type":42,"tag":50,"props":884,"children":885},{},[886,891,893,899],{"type":42,"tag":56,"props":887,"children":888},{},[889],{"type":47,"value":890},"Ambiguity rule:",{"type":47,"value":892}," If two entries both look like primary candidates, pick the one with higher ",{"type":42,"tag":86,"props":894,"children":896},{"className":895},[],[897],{"type":47,"value":898},"urls",{"type":47,"value":900}," (more pages). If still tied, pick the one with higher saturation.",{"type":42,"tag":184,"props":902,"children":904},{"id":903},"colorborder",[905],{"type":47,"value":906},"color.border",{"type":42,"tag":608,"props":908,"children":909},{},[910,924],{"type":42,"tag":612,"props":911,"children":912},{},[913],{"type":42,"tag":616,"props":914,"children":915},{},[916,920],{"type":42,"tag":620,"props":917,"children":918},{},[919],{"type":47,"value":624},{"type":42,"tag":620,"props":921,"children":922},{},[923],{"type":47,"value":629},{"type":42,"tag":631,"props":925,"children":926},{},[927,957],{"type":42,"tag":616,"props":928,"children":929},{},[930,939],{"type":42,"tag":638,"props":931,"children":932},{},[933],{"type":42,"tag":86,"props":934,"children":936},{"className":935},[],[937],{"type":47,"value":938},"default",{"type":42,"tag":638,"props":940,"children":941},{},[942,944,949,950,956],{"type":47,"value":943},"A light-grey entry commonly used as a hairline divider (often ",{"type":42,"tag":86,"props":945,"children":947},{"className":946},[],[948],{"type":47,"value":764},{"type":47,"value":130},{"type":42,"tag":86,"props":951,"children":953},{"className":952},[],[954],{"type":47,"value":955},"#ddd",{"type":47,"value":165},{"type":42,"tag":616,"props":958,"children":959},{},[960,968],{"type":42,"tag":638,"props":961,"children":962},{},[963],{"type":42,"tag":86,"props":964,"children":966},{"className":965},[],[967],{"type":47,"value":746},{"type":42,"tag":638,"props":969,"children":970},{},[971],{"type":47,"value":972},"A lighter grey (or a tinted alternative) used inside low-contrast containers.",{"type":42,"tag":184,"props":974,"children":976},{"id":975},"typographyfamilies",[977],{"type":47,"value":978},"typography.families",{"type":42,"tag":50,"props":980,"children":981},{},[982,984,990],{"type":47,"value":983},"The scaffold fills ",{"type":42,"tag":86,"props":985,"children":987},{"className":986},[],[988],{"type":47,"value":989},"body",{"type":47,"value":991},". Fill:",{"type":42,"tag":608,"props":993,"children":994},{},[995,1009],{"type":42,"tag":612,"props":996,"children":997},{},[998],{"type":42,"tag":616,"props":999,"children":1000},{},[1001,1005],{"type":42,"tag":620,"props":1002,"children":1003},{},[1004],{"type":47,"value":624},{"type":42,"tag":620,"props":1006,"children":1007},{},[1008],{"type":47,"value":629},{"type":42,"tag":631,"props":1010,"children":1011},{},[1012,1037],{"type":42,"tag":616,"props":1013,"children":1014},{},[1015,1024],{"type":42,"tag":638,"props":1016,"children":1017},{},[1018],{"type":42,"tag":86,"props":1019,"children":1021},{"className":1020},[],[1022],{"type":47,"value":1023},"display",{"type":42,"tag":638,"props":1025,"children":1026},{},[1027,1029,1035],{"type":47,"value":1028},"The family used for the largest headlines (h1, hero titles). Often a serif or display face. Check ",{"type":42,"tag":86,"props":1030,"children":1032},{"className":1031},[],[1033],{"type":47,"value":1034},"typography.h1",{"type":47,"value":1036}," entries in the raw SP1 file.",{"type":42,"tag":616,"props":1038,"children":1039},{},[1040,1049],{"type":42,"tag":638,"props":1041,"children":1042},{},[1043],{"type":42,"tag":86,"props":1044,"children":1046},{"className":1045},[],[1047],{"type":47,"value":1048},"mono",{"type":42,"tag":638,"props":1050,"children":1051},{},[1052,1054,1060,1062,1067],{"type":47,"value":1053},"A monospace family used for tags, labels, small caps. Check typography entries with ",{"type":42,"tag":86,"props":1055,"children":1057},{"className":1056},[],[1058],{"type":47,"value":1059},"fontFamily",{"type":47,"value":1061}," containing \"Mono\", \"Courier\", or \"Code\". If no mono family is observed, set to ",{"type":42,"tag":86,"props":1063,"children":1065},{"className":1064},[],[1066],{"type":47,"value":107},{"type":47,"value":1068}," — do NOT hallucinate one.",{"type":42,"tag":184,"props":1070,"children":1072},{"id":1071},"gradient",[1073],{"type":47,"value":1071},{"type":42,"tag":50,"props":1075,"children":1076},{},[1077,1079,1085,1087,1093,1095,1101],{"type":47,"value":1078},"Scaffold fills ",{"type":42,"tag":86,"props":1080,"children":1082},{"className":1081},[],[1083],{"type":47,"value":1084},"css",{"type":47,"value":1086}," and ",{"type":42,"tag":86,"props":1088,"children":1090},{"className":1089},[],[1091],{"type":47,"value":1092},"evidence",{"type":47,"value":1094},"; you fill ",{"type":42,"tag":86,"props":1096,"children":1098},{"className":1097},[],[1099],{"type":47,"value":1100},"role",{"type":47,"value":1102},". Map each gradient to its usage:",{"type":42,"tag":255,"props":1104,"children":1105},{},[1106,1116,1126,1145],{"type":42,"tag":80,"props":1107,"children":1108},{},[1109,1114],{"type":42,"tag":86,"props":1110,"children":1112},{"className":1111},[],[1113],{"type":47,"value":419},{"type":47,"value":1115}," — dark, full-bleed, used as page hero\u002Fheader background",{"type":42,"tag":80,"props":1117,"children":1118},{},[1119,1124],{"type":42,"tag":86,"props":1120,"children":1122},{"className":1121},[],[1123],{"type":47,"value":426},{"type":47,"value":1125}," — used on call-to-action bands and subscribe blocks",{"type":42,"tag":80,"props":1127,"children":1128},{},[1129,1135,1137,1143],{"type":42,"tag":86,"props":1130,"children":1132},{"className":1131},[],[1133],{"type":47,"value":1134},"headline accent",{"type":47,"value":1136}," — light-to-highlight gradients used with ",{"type":42,"tag":86,"props":1138,"children":1140},{"className":1139},[],[1141],{"type":47,"value":1142},"background-clip: text",{"type":47,"value":1144}," on headlines",{"type":42,"tag":80,"props":1146,"children":1147},{},[1148,1153],{"type":42,"tag":86,"props":1149,"children":1151},{"className":1150},[],[1152],{"type":47,"value":433},{"type":47,"value":1154}," — anything else",{"type":42,"tag":50,"props":1156,"children":1157},{},[1158],{"type":47,"value":1159},"Look at the HTML excerpt to see which selectors use the gradient.",{"type":42,"tag":184,"props":1161,"children":1163},{"id":1162},"components-minimal-fixed-set",[1164],{"type":47,"value":1165},"components (minimal fixed set)",{"type":42,"tag":50,"props":1167,"children":1168},{},[1169,1171,1177,1178,1184,1185,1191],{"type":47,"value":1170},"Fill all five with token references (not raw values). Reference form: ",{"type":42,"tag":86,"props":1172,"children":1174},{"className":1173},[],[1175],{"type":47,"value":1176},"\"color.accent.primary\"",{"type":47,"value":130},{"type":42,"tag":86,"props":1179,"children":1181},{"className":1180},[],[1182],{"type":47,"value":1183},"\"radius.base\"",{"type":47,"value":130},{"type":42,"tag":86,"props":1186,"children":1188},{"className":1187},[],[1189],{"type":47,"value":1190},"\"spacing.4\"",{"type":47,"value":117},{"type":42,"tag":608,"props":1193,"children":1194},{},[1195,1211],{"type":42,"tag":612,"props":1196,"children":1197},{},[1198],{"type":42,"tag":616,"props":1199,"children":1200},{},[1201,1206],{"type":42,"tag":620,"props":1202,"children":1203},{},[1204],{"type":47,"value":1205},"Component",{"type":42,"tag":620,"props":1207,"children":1208},{},[1209],{"type":47,"value":1210},"Required tokens",{"type":42,"tag":631,"props":1212,"children":1213},{},[1214,1271,1319,1360,1382],{"type":42,"tag":616,"props":1215,"children":1216},{},[1217,1225],{"type":42,"tag":638,"props":1218,"children":1219},{},[1220],{"type":42,"tag":86,"props":1221,"children":1223},{"className":1222},[],[1224],{"type":47,"value":314},{"type":42,"tag":638,"props":1226,"children":1227},{},[1228,1234,1236,1241,1243,1249,1251,1257,1258,1263,1265],{"type":42,"tag":86,"props":1229,"children":1231},{"className":1230},[],[1232],{"type":47,"value":1233},"background",{"type":47,"value":1235}," (accent.primary), ",{"type":42,"tag":86,"props":1237,"children":1239},{"className":1238},[],[1240],{"type":47,"value":47},{"type":47,"value":1242}," (text.inverse), ",{"type":42,"tag":86,"props":1244,"children":1246},{"className":1245},[],[1247],{"type":47,"value":1248},"radius",{"type":47,"value":1250}," (radius.base), ",{"type":42,"tag":86,"props":1252,"children":1254},{"className":1253},[],[1255],{"type":47,"value":1256},"padding",{"type":47,"value":130},{"type":42,"tag":86,"props":1259,"children":1261},{"className":1260},[],[1262],{"type":47,"value":1059},{"type":47,"value":1264}," (families.body), ",{"type":42,"tag":86,"props":1266,"children":1268},{"className":1267},[],[1269],{"type":47,"value":1270},"fontWeight",{"type":42,"tag":616,"props":1272,"children":1273},{},[1274,1283],{"type":42,"tag":638,"props":1275,"children":1276},{},[1277],{"type":42,"tag":86,"props":1278,"children":1280},{"className":1279},[],[1281],{"type":47,"value":1282},"input",{"type":42,"tag":638,"props":1284,"children":1285},{},[1286,1291,1293,1299,1301,1306,1308,1313,1314],{"type":42,"tag":86,"props":1287,"children":1289},{"className":1288},[],[1290],{"type":47,"value":1233},{"type":47,"value":1292}," (surface.base), ",{"type":42,"tag":86,"props":1294,"children":1296},{"className":1295},[],[1297],{"type":47,"value":1298},"border",{"type":47,"value":1300}," (border.default), ",{"type":42,"tag":86,"props":1302,"children":1304},{"className":1303},[],[1305],{"type":47,"value":47},{"type":47,"value":1307}," (text.default), ",{"type":42,"tag":86,"props":1309,"children":1311},{"className":1310},[],[1312],{"type":47,"value":1248},{"type":47,"value":130},{"type":42,"tag":86,"props":1315,"children":1317},{"className":1316},[],[1318],{"type":47,"value":1256},{"type":42,"tag":616,"props":1320,"children":1321},{},[1322,1331],{"type":42,"tag":638,"props":1323,"children":1324},{},[1325],{"type":42,"tag":86,"props":1326,"children":1328},{"className":1327},[],[1329],{"type":47,"value":1330},"card",{"type":42,"tag":638,"props":1332,"children":1333},{},[1334,1339,1341,1346,1348,1353,1355],{"type":42,"tag":86,"props":1335,"children":1337},{"className":1336},[],[1338],{"type":47,"value":1233},{"type":47,"value":1340}," (surface.base or surface.raised), ",{"type":42,"tag":86,"props":1342,"children":1344},{"className":1343},[],[1345],{"type":47,"value":1298},{"type":47,"value":1347}," (border.subtle), ",{"type":42,"tag":86,"props":1349,"children":1351},{"className":1350},[],[1352],{"type":47,"value":1248},{"type":47,"value":1354}," (radius.lg), ",{"type":42,"tag":86,"props":1356,"children":1358},{"className":1357},[],[1359],{"type":47,"value":1256},{"type":42,"tag":616,"props":1361,"children":1362},{},[1363,1372],{"type":42,"tag":638,"props":1364,"children":1365},{},[1366],{"type":42,"tag":86,"props":1367,"children":1369},{"className":1368},[],[1370],{"type":47,"value":1371},"surface",{"type":42,"tag":638,"props":1373,"children":1374},{},[1375,1380],{"type":42,"tag":86,"props":1376,"children":1378},{"className":1377},[],[1379],{"type":47,"value":1233},{"type":47,"value":1381}," (surface.base) — baseline container",{"type":42,"tag":616,"props":1383,"children":1384},{},[1385,1394],{"type":42,"tag":638,"props":1386,"children":1387},{},[1388],{"type":42,"tag":86,"props":1389,"children":1391},{"className":1390},[],[1392],{"type":47,"value":1393},"divider",{"type":42,"tag":638,"props":1395,"children":1396},{},[1397,1402,1403,1409],{"type":42,"tag":86,"props":1398,"children":1400},{"className":1399},[],[1401],{"type":47,"value":1233},{"type":47,"value":1300},{"type":42,"tag":86,"props":1404,"children":1406},{"className":1405},[],[1407],{"type":47,"value":1408},"height",{"type":47,"value":1410}," (e.g. \"1px\")",{"type":42,"tag":184,"props":1412,"children":1414},{"id":1413},"openquestions",[1415],{"type":47,"value":1416},"openQuestions",{"type":42,"tag":50,"props":1418,"children":1419},{},[1420],{"type":47,"value":1421},"Flag things that will affect downstream theme generation:",{"type":42,"tag":255,"props":1423,"children":1424},{},[1425,1444,1494,1499],{"type":42,"tag":80,"props":1426,"children":1427},{},[1428,1430,1436,1437,1443],{"type":47,"value":1429},"Commercial fonts (e.g. Reckless, Displaay faces) → suggest open-source substitution (",{"type":42,"tag":86,"props":1431,"children":1433},{"className":1432},[],[1434],{"type":47,"value":1435},"Fraunces",{"type":47,"value":130},{"type":42,"tag":86,"props":1438,"children":1440},{"className":1439},[],[1441],{"type":47,"value":1442},"Playfair",{"type":47,"value":165},{"type":42,"tag":80,"props":1445,"children":1446},{},[1447,1452,1454,1460,1462,1468,1470,1476,1478,1484,1486,1492],{"type":42,"tag":56,"props":1448,"children":1449},{},[1450],{"type":47,"value":1451},"Uncapturable fonts (Typekit \u002F Monotype \u002F hashed builder names) →",{"type":47,"value":1453}," these can't be self-hosted (no reachable woff\u002Fwoff2). The deterministic font pipeline now AUTO-SUBSTITUTES them to the closest FREE web font, self-hosts its woff2, and binds it as the theme's body\u002Fdisplay family — see ",{"type":42,"tag":86,"props":1455,"children":1457},{"className":1456},[],[1458],{"type":47,"value":1459},"references\u002Ftheme-tokens.md",{"type":47,"value":1461}," (\"Commercial \u002F uncapturable → free substitution\"). Record the substitution as an ",{"type":42,"tag":86,"props":1463,"children":1465},{"className":1464},[],[1466],{"type":47,"value":1467},"openQuestion",{"type":47,"value":1469}," (",{"type":42,"tag":86,"props":1471,"children":1473},{"className":1472},[],[1474],{"type":47,"value":1475},"blocksReplica:false",{"type":47,"value":1477},") noting which family was swapped (e.g. ",{"type":42,"tag":86,"props":1479,"children":1481},{"className":1480},[],[1482],{"type":47,"value":1483},"quasimoda → Hanken Grotesk",{"type":47,"value":1485},") so an operator can confirm the visual match; do NOT leave the family as a bare ",{"type":42,"tag":86,"props":1487,"children":1489},{"className":1488},[],[1490],{"type":47,"value":1491},"sans-serif",{"type":47,"value":1493}," fallback.",{"type":42,"tag":80,"props":1495,"children":1496},{},[1497],{"type":47,"value":1498},"Font files loaded from unknown CDNs (no open license path).",{"type":42,"tag":80,"props":1500,"children":1501},{},[1502],{"type":47,"value":1503},"Colors observed once or twice that look like one-off overrides rather than design-system tokens — worth flagging for operator review.",{"type":42,"tag":50,"props":1505,"children":1506},{},[1507,1509,1515],{"type":47,"value":1508},"Each entry: ",{"type":42,"tag":86,"props":1510,"children":1512},{"className":1511},[],[1513],{"type":47,"value":1514},"{ id: \"short-slug\", question: \"Confirm ...\", blocksReplica: true|false }",{"type":47,"value":117},{"type":42,"tag":64,"props":1517,"children":1519},{"id":1518},"evidence-discipline",[1520],{"type":47,"value":1521},"Evidence discipline",{"type":42,"tag":50,"props":1523,"children":1524},{},[1525],{"type":47,"value":1526},"Every role you fill must have at least one evidence entry. Good evidence:",{"type":42,"tag":255,"props":1528,"children":1529},{},[1530,1541,1552],{"type":42,"tag":80,"props":1531,"children":1532},{},[1533,1539],{"type":42,"tag":86,"props":1534,"children":1536},{"className":1535},[],[1537],{"type":47,"value":1538},"\"palette[5]: 92\u002F186 urls, 341 occurrences\"",{"type":47,"value":1540}," (cites raw SP1 frequency)",{"type":42,"tag":80,"props":1542,"children":1543},{},[1544,1550],{"type":42,"tag":86,"props":1545,"children":1547},{"className":1546},[],[1548],{"type":47,"value":1549},"\"computed button background on homepage.html\"",{"type":47,"value":1551}," (cites HTML + element)",{"type":42,"tag":80,"props":1553,"children":1554},{},[1555,1561],{"type":42,"tag":86,"props":1556,"children":1558},{"className":1557},[],[1559],{"type":47,"value":1560},"\"hero section @ screenshots\u002Fdesktop\u002Fhomepage.png\"",{"type":47,"value":1562}," (cites screenshot)",{"type":42,"tag":50,"props":1564,"children":1565},{},[1566],{"type":47,"value":1567},"Bad evidence:",{"type":42,"tag":255,"props":1569,"children":1570},{},[1571,1582],{"type":42,"tag":80,"props":1572,"children":1573},{},[1574,1580],{"type":42,"tag":86,"props":1575,"children":1577},{"className":1576},[],[1578],{"type":47,"value":1579},"\"looks like primary\"",{"type":47,"value":1581}," (no citation)",{"type":42,"tag":80,"props":1583,"children":1584},{},[1585,1591],{"type":42,"tag":86,"props":1586,"children":1588},{"className":1587},[],[1589],{"type":47,"value":1590},"\"skill-filled\"",{"type":47,"value":1592}," (placeholder — unacceptable)",{"type":42,"tag":64,"props":1594,"children":1596},{"id":1595},"process",[1597],{"type":47,"value":1598},"Process",{"type":42,"tag":76,"props":1600,"children":1601},{},[1602,1613,1618,1657,1670,1681,1694,1706],{"type":42,"tag":80,"props":1603,"children":1604},{},[1605,1607,1612],{"type":47,"value":1606},"Read the PartialDesignFoundation. Note every path in ",{"type":42,"tag":86,"props":1608,"children":1610},{"className":1609},[],[1611],{"type":47,"value":115},{"type":47,"value":117},{"type":42,"tag":80,"props":1614,"children":1615},{},[1616],{"type":47,"value":1617},"Read aggregate HTML\u002FCSS analysis and the representative HTML excerpt.",{"type":42,"tag":80,"props":1619,"children":1620},{},[1621,1623,1628,1630],{"type":47,"value":1622},"For each slot in ",{"type":42,"tag":86,"props":1624,"children":1626},{"className":1625},[],[1627],{"type":47,"value":115},{"type":47,"value":1629},":\n",{"type":42,"tag":255,"props":1631,"children":1632},{},[1633,1638],{"type":42,"tag":80,"props":1634,"children":1635},{},[1636],{"type":47,"value":1637},"Apply the criteria above.",{"type":42,"tag":80,"props":1639,"children":1640},{},[1641,1643,1648,1650,1655],{"type":47,"value":1642},"If you cannot confidently fill a slot (e.g. no mono family exists), leave it ",{"type":42,"tag":86,"props":1644,"children":1646},{"className":1645},[],[1647],{"type":47,"value":107},{"type":47,"value":1649}," AND remove its path from ",{"type":42,"tag":86,"props":1651,"children":1653},{"className":1652},[],[1654],{"type":47,"value":115},{"type":47,"value":1656},". This communicates \"deliberately empty\" instead of \"forgot to fill.\"",{"type":42,"tag":80,"props":1658,"children":1659},{},[1660,1662,1668],{"type":47,"value":1661},"Populate ",{"type":42,"tag":86,"props":1663,"children":1665},{"className":1664},[],[1666],{"type":47,"value":1667},"components",{"type":47,"value":1669}," with the fixed set above.",{"type":42,"tag":80,"props":1671,"children":1672},{},[1673,1674,1679],{"type":47,"value":1661},{"type":42,"tag":86,"props":1675,"children":1677},{"className":1676},[],[1678],{"type":47,"value":1416},{"type":47,"value":1680}," with any concerns.",{"type":42,"tag":80,"props":1682,"children":1683},{},[1684,1686,1692],{"type":47,"value":1685},"Set ",{"type":42,"tag":86,"props":1687,"children":1689},{"className":1688},[],[1690],{"type":47,"value":1691},"skillTodos: []",{"type":47,"value":1693}," once every remaining slot is filled.",{"type":42,"tag":80,"props":1695,"children":1696},{},[1697,1699,1704],{"type":47,"value":1698},"Invoke ",{"type":42,"tag":86,"props":1700,"children":1702},{"className":1701},[],[1703],{"type":47,"value":181},{"type":47,"value":1705},". If it fails, fix and retry.",{"type":42,"tag":80,"props":1707,"children":1708},{},[1709],{"type":47,"value":1710},"Return the validated JSON to the calling agent.",{"type":42,"tag":64,"props":1712,"children":1714},{"id":1713},"anti-patterns",[1715],{"type":47,"value":1716},"Anti-patterns",{"type":42,"tag":255,"props":1718,"children":1719},{},[1720,1761,1771,1788,1812],{"type":42,"tag":80,"props":1721,"children":1722},{},[1723,1728,1730,1736,1738,1744,1746,1752,1754,1759],{"type":42,"tag":56,"props":1724,"children":1725},{},[1726],{"type":47,"value":1727},"Hallucinating tokens.",{"type":47,"value":1729}," If SP1 didn't observe a ",{"type":42,"tag":86,"props":1731,"children":1733},{"className":1732},[],[1734],{"type":47,"value":1735},"serif",{"type":47,"value":1737}," family but the agent seems to want one, do NOT invent ",{"type":42,"tag":86,"props":1739,"children":1741},{"className":1740},[],[1742],{"type":47,"value":1743},"\"Merriweather\"",{"type":47,"value":1745},". Leave ",{"type":42,"tag":86,"props":1747,"children":1749},{"className":1748},[],[1750],{"type":47,"value":1751},"display: null",{"type":47,"value":1753}," and add an ",{"type":42,"tag":86,"props":1755,"children":1757},{"className":1756},[],[1758],{"type":47,"value":1467},{"type":47,"value":1760}," about font substitution.",{"type":42,"tag":80,"props":1762,"children":1763},{},[1764,1769],{"type":42,"tag":56,"props":1765,"children":1766},{},[1767],{"type":47,"value":1768},"Skipping evidence.",{"type":47,"value":1770}," Every role must cite its source. No bare strings.",{"type":42,"tag":80,"props":1772,"children":1773},{},[1774,1779,1781,1786],{"type":42,"tag":56,"props":1775,"children":1776},{},[1777],{"type":47,"value":1778},"Skipping validate.",{"type":47,"value":1780}," You MUST call ",{"type":42,"tag":86,"props":1782,"children":1784},{"className":1783},[],[1785],{"type":47,"value":181},{"type":47,"value":1787}," before returning.",{"type":42,"tag":80,"props":1789,"children":1790},{},[1791,1796,1798,1803,1805,1810],{"type":42,"tag":56,"props":1792,"children":1793},{},[1794],{"type":47,"value":1795},"Over-confident mapping.",{"type":47,"value":1797}," If two palette entries tie for ",{"type":42,"tag":86,"props":1799,"children":1801},{"className":1800},[],[1802],{"type":47,"value":809},{"type":47,"value":1804},", flag the tie in ",{"type":42,"tag":86,"props":1806,"children":1808},{"className":1807},[],[1809],{"type":47,"value":1416},{"type":47,"value":1811}," rather than silently picking one.",{"type":42,"tag":80,"props":1813,"children":1814},{},[1815,1820],{"type":42,"tag":56,"props":1816,"children":1817},{},[1818],{"type":47,"value":1819},"Duplicating deterministic work.",{"type":47,"value":1821}," Do not override the scaffold's filled slots (surface.base, text.default, etc.) unless they're demonstrably wrong.",{"type":42,"tag":64,"props":1823,"children":1825},{"id":1824},"known-scaffold-pollution-failure-modes-correct-these-every-run",[1826],{"type":47,"value":1827},"Known scaffold-pollution failure modes (correct these every run)",{"type":42,"tag":50,"props":1829,"children":1830},{},[1831,1833,1838,1840,1845],{"type":47,"value":1832},"The deterministic scaffold can be misled by markup that isn't the real page design. These are common enough to check explicitly — when you see them, the slot IS \"demonstrably wrong,\" so correct it against ",{"type":42,"tag":86,"props":1834,"children":1836},{"className":1835},[],[1837],{"type":47,"value":128},{"type":47,"value":1839}," frequency + a screenshot and note the correction in ",{"type":42,"tag":86,"props":1841,"children":1843},{"className":1842},[],[1844],{"type":47,"value":1416},{"type":47,"value":1846},":",{"type":42,"tag":255,"props":1848,"children":1849},{},[1850,1951,1998],{"type":42,"tag":80,"props":1851,"children":1852},{},[1853,1858,1860,1865,1866,1871,1873,1879,1881,1887,1889,1895,1897,1903,1905,1933,1935,1941,1943,1949],{"type":42,"tag":56,"props":1854,"children":1855},{},[1856],{"type":47,"value":1857},"Inverted surface\u002Ftext from a one-off CSS variable.",{"type":47,"value":1859}," The scaffold can fill ",{"type":42,"tag":86,"props":1861,"children":1863},{"className":1862},[],[1864],{"type":47,"value":538},{"type":47,"value":1086},{"type":42,"tag":86,"props":1867,"children":1869},{"className":1868},[],[1870],{"type":47,"value":549},{"type":47,"value":1872}," from a low-frequency ",{"type":42,"tag":86,"props":1874,"children":1876},{"className":1875},[],[1877],{"type":47,"value":1878},":root",{"type":47,"value":1880},"\u002Fcomponent CSS var (e.g. ",{"type":42,"tag":86,"props":1882,"children":1884},{"className":1883},[],[1885],{"type":47,"value":1886},"--tooltip-background-color",{"type":47,"value":1888},") instead of palette frequency — producing ",{"type":42,"tag":86,"props":1890,"children":1892},{"className":1891},[],[1893],{"type":47,"value":1894},"surface.base: \"black\"",{"type":47,"value":1896}," \u002F ",{"type":42,"tag":86,"props":1898,"children":1900},{"className":1899},[],[1901],{"type":47,"value":1902},"text.default: \"white\"",{"type":47,"value":1904}," on a site that's actually white-background\u002Fdark-text. ",{"type":42,"tag":56,"props":1906,"children":1907},{},[1908,1910,1916,1918,1924,1926,1931],{"type":47,"value":1909},"Sanity check: if ",{"type":42,"tag":86,"props":1911,"children":1913},{"className":1912},[],[1914],{"type":47,"value":1915},"surface.base",{"type":47,"value":1917}," is dark or ",{"type":42,"tag":86,"props":1919,"children":1921},{"className":1920},[],[1922],{"type":47,"value":1923},"text.default",{"type":47,"value":1925}," is light, verify against ",{"type":42,"tag":86,"props":1927,"children":1929},{"className":1928},[],[1930],{"type":47,"value":128},{"type":47,"value":1932}," — the dominant high-count entry is the real surface; the darkest high-count entry is the real text.",{"type":47,"value":1934}," Swiftlumber (2026-05-28): scaffold gave black\u002Fwhite from a 1-url tooltip var; palette showed ",{"type":42,"tag":86,"props":1936,"children":1938},{"className":1937},[],[1939],{"type":47,"value":1940},"#ffffff",{"type":47,"value":1942},"×57 \u002F ",{"type":42,"tag":86,"props":1944,"children":1946},{"className":1945},[],[1947],{"type":47,"value":1948},"#000000",{"type":47,"value":1950},"×3 → corrected to #fff\u002F#000.",{"type":42,"tag":80,"props":1952,"children":1953},{},[1954,1966,1967,1973,1975,1981,1983,1989,1991,1996],{"type":42,"tag":56,"props":1955,"children":1956},{},[1957,1959,1965],{"type":47,"value":1958},"10px base font size from a hidden SEO ",{"type":42,"tag":86,"props":1960,"children":1962},{"className":1961},[],[1963],{"type":47,"value":1964},"\u003Cbody>",{"type":47,"value":117},{"type":47,"value":468},{"type":42,"tag":86,"props":1968,"children":1970},{"className":1969},[],[1971],{"type":47,"value":1972},"typography.scale.base",{"type":47,"value":1974}," (and ",{"type":42,"tag":86,"props":1976,"children":1978},{"className":1977},[],[1979],{"type":47,"value":1980},"typography.body.fontSize",{"type":47,"value":1982},") can read ~10px from a visually-hidden SEO body element. Real body copy is ~16px (check ",{"type":42,"tag":86,"props":1984,"children":1986},{"className":1985},[],[1987],{"type":47,"value":1988},"typography.scale.steps.base",{"type":47,"value":1990},"). Reconstruction uses captured per-element sizes, so this rarely changes output — but flag it in ",{"type":42,"tag":86,"props":1992,"children":1994},{"className":1993},[],[1995],{"type":47,"value":1416},{"type":47,"value":1997}," so it isn't trusted downstream.",{"type":42,"tag":80,"props":1999,"children":2000},{},[2001,2006,2008,2013,2015,2020,2022,2028,2029,2035,2037,2042,2044,2050],{"type":42,"tag":56,"props":2002,"children":2003},{},[2004],{"type":47,"value":2005},"Hidden-SEO display font.",{"type":47,"value":2007}," Computed ",{"type":42,"tag":86,"props":2009,"children":2011},{"className":2010},[],[2012],{"type":47,"value":43},{"type":47,"value":2014},"\u002F",{"type":42,"tag":86,"props":2016,"children":2018},{"className":2017},[],[2019],{"type":47,"value":64},{"type":47,"value":2021}," may report a hidden-SEO face (e.g. ",{"type":42,"tag":86,"props":2023,"children":2025},{"className":2024},[],[2026],{"type":47,"value":2027},"orig_sf_pro_display_bold",{"type":47,"value":130},{"type":42,"tag":86,"props":2030,"children":2032},{"className":2031},[],[2033],{"type":47,"value":2034},"wfont_*",{"type":47,"value":2036},") that is NOT the visible heading face. Cross-check ",{"type":42,"tag":86,"props":2038,"children":2040},{"className":2039},[],[2041],{"type":47,"value":184},{"type":47,"value":2043},"\u002Fvisible headings — the real display family often surfaces there (swiftlumber: visible headings are ",{"type":42,"tag":86,"props":2045,"children":2047},{"className":2046},[],[2048],{"type":47,"value":2049},"\"libre baskerville\", serif",{"type":47,"value":2051}," from h3; h1\u002Fh2 were the SEO SF-Pro face).",{"type":42,"tag":64,"props":2053,"children":2055},{"id":2054},"example-abbreviated",[2056],{"type":47,"value":2057},"Example (abbreviated)",{"type":42,"tag":50,"props":2059,"children":2060},{},[2061],{"type":47,"value":2062},"Input partial (relevant slots only):",{"type":42,"tag":2064,"props":2065,"children":2070},"pre",{"className":2066,"code":2067,"language":2068,"meta":2069,"style":2069},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"color\": {\n    \"accent\": { \"primary\": null, \"warning\": null, \"highlight\": null }\n  },\n  \"skillTodos\": [\"color.accent.primary\", \"color.accent.warning\", \"color.accent.highlight\"]\n}\n","json","",[2071],{"type":42,"tag":86,"props":2072,"children":2073},{"__ignoreMap":2069},[2074,2085,2114,2211,2220,2299],{"type":42,"tag":2075,"props":2076,"children":2078},"span",{"class":2077,"line":29},"line",[2079],{"type":42,"tag":2075,"props":2080,"children":2082},{"style":2081},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[2083],{"type":47,"value":2084},"{\n",{"type":42,"tag":2075,"props":2086,"children":2088},{"class":2077,"line":2087},2,[2089,2094,2100,2105,2109],{"type":42,"tag":2075,"props":2090,"children":2091},{"style":2081},[2092],{"type":47,"value":2093},"  \"",{"type":42,"tag":2075,"props":2095,"children":2097},{"style":2096},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[2098],{"type":47,"value":2099},"color",{"type":42,"tag":2075,"props":2101,"children":2102},{"style":2081},[2103],{"type":47,"value":2104},"\"",{"type":42,"tag":2075,"props":2106,"children":2107},{"style":2081},[2108],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2110,"children":2111},{"style":2081},[2112],{"type":47,"value":2113}," {\n",{"type":42,"tag":2075,"props":2115,"children":2117},{"class":2077,"line":2116},3,[2118,2123,2129,2133,2137,2142,2147,2152,2156,2160,2165,2169,2173,2177,2181,2185,2189,2193,2197,2201,2206],{"type":42,"tag":2075,"props":2119,"children":2120},{"style":2081},[2121],{"type":47,"value":2122},"    \"",{"type":42,"tag":2075,"props":2124,"children":2126},{"style":2125},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[2127],{"type":47,"value":2128},"accent",{"type":42,"tag":2075,"props":2130,"children":2131},{"style":2081},[2132],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2134,"children":2135},{"style":2081},[2136],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2138,"children":2139},{"style":2081},[2140],{"type":47,"value":2141}," {",{"type":42,"tag":2075,"props":2143,"children":2144},{"style":2081},[2145],{"type":47,"value":2146}," \"",{"type":42,"tag":2075,"props":2148,"children":2150},{"style":2149},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[2151],{"type":47,"value":809},{"type":42,"tag":2075,"props":2153,"children":2154},{"style":2081},[2155],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2157,"children":2158},{"style":2081},[2159],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2161,"children":2162},{"style":2081},[2163],{"type":47,"value":2164}," null,",{"type":42,"tag":2075,"props":2166,"children":2167},{"style":2081},[2168],{"type":47,"value":2146},{"type":42,"tag":2075,"props":2170,"children":2171},{"style":2149},[2172],{"type":47,"value":843},{"type":42,"tag":2075,"props":2174,"children":2175},{"style":2081},[2176],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2178,"children":2179},{"style":2081},[2180],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2182,"children":2183},{"style":2081},[2184],{"type":47,"value":2164},{"type":42,"tag":2075,"props":2186,"children":2187},{"style":2081},[2188],{"type":47,"value":2146},{"type":42,"tag":2075,"props":2190,"children":2191},{"style":2149},[2192],{"type":47,"value":877},{"type":42,"tag":2075,"props":2194,"children":2195},{"style":2081},[2196],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2198,"children":2199},{"style":2081},[2200],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2202,"children":2203},{"style":2081},[2204],{"type":47,"value":2205}," null",{"type":42,"tag":2075,"props":2207,"children":2208},{"style":2081},[2209],{"type":47,"value":2210}," }\n",{"type":42,"tag":2075,"props":2212,"children":2214},{"class":2077,"line":2213},4,[2215],{"type":42,"tag":2075,"props":2216,"children":2217},{"style":2081},[2218],{"type":47,"value":2219},"  },\n",{"type":42,"tag":2075,"props":2221,"children":2223},{"class":2077,"line":2222},5,[2224,2228,2232,2236,2240,2245,2249,2255,2259,2264,2268,2273,2277,2281,2285,2290,2294],{"type":42,"tag":2075,"props":2225,"children":2226},{"style":2081},[2227],{"type":47,"value":2093},{"type":42,"tag":2075,"props":2229,"children":2230},{"style":2096},[2231],{"type":47,"value":115},{"type":42,"tag":2075,"props":2233,"children":2234},{"style":2081},[2235],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2237,"children":2238},{"style":2081},[2239],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2241,"children":2242},{"style":2081},[2243],{"type":47,"value":2244}," [",{"type":42,"tag":2075,"props":2246,"children":2247},{"style":2081},[2248],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2250,"children":2252},{"style":2251},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[2253],{"type":47,"value":2254},"color.accent.primary",{"type":42,"tag":2075,"props":2256,"children":2257},{"style":2081},[2258],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2260,"children":2261},{"style":2081},[2262],{"type":47,"value":2263},",",{"type":42,"tag":2075,"props":2265,"children":2266},{"style":2081},[2267],{"type":47,"value":2146},{"type":42,"tag":2075,"props":2269,"children":2270},{"style":2251},[2271],{"type":47,"value":2272},"color.accent.warning",{"type":42,"tag":2075,"props":2274,"children":2275},{"style":2081},[2276],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2278,"children":2279},{"style":2081},[2280],{"type":47,"value":2263},{"type":42,"tag":2075,"props":2282,"children":2283},{"style":2081},[2284],{"type":47,"value":2146},{"type":42,"tag":2075,"props":2286,"children":2287},{"style":2251},[2288],{"type":47,"value":2289},"color.accent.highlight",{"type":42,"tag":2075,"props":2291,"children":2292},{"style":2081},[2293],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2295,"children":2296},{"style":2081},[2297],{"type":47,"value":2298},"]\n",{"type":42,"tag":2075,"props":2300,"children":2302},{"class":2077,"line":2301},6,[2303],{"type":42,"tag":2075,"props":2304,"children":2305},{"style":2081},[2306],{"type":47,"value":2307},"}\n",{"type":42,"tag":50,"props":2309,"children":2310},{},[2311],{"type":47,"value":2312},"Screenshot evidence: homepage CTA button is teal; \"Book a Demo\" button is red; headline text has a gold→red gradient.",{"type":42,"tag":50,"props":2314,"children":2315},{},[2316],{"type":47,"value":2317},"Output:",{"type":42,"tag":2064,"props":2319,"children":2321},{"className":2066,"code":2320,"language":2068,"meta":2069,"style":2069},"{\n  \"color\": {\n    \"accent\": {\n      \"primary\": {\n        \"value\": \"#00a4bd\",\n        \"role\": \"primary CTA, link\",\n        \"evidence\": [\n          \"palette[5]: 40\u002F100 urls, 200 occurrences\",\n          \"button.primary@homepage.html computed background\"\n        ]\n      },\n      \"warning\": {\n        \"value\": \"#f2545b\",\n        \"role\": \"urgent CTA (Book a Demo)\",\n        \"evidence\": [\n          \"palette[7]: 30\u002F100 urls\",\n          \"a.cta-book@homepage.html computed background\"\n        ]\n      },\n      \"highlight\": {\n        \"value\": \"#ffc700\",\n        \"role\": \"gradient highlight\",\n        \"evidence\": [\n          \"gradient.headlineAccent uses #ffc700 → #cc0201\",\n          \"h1 span.highlight@homepage.html\"\n        ]\n      }\n    }\n  },\n  \"skillTodos\": []\n}\n",[2322],{"type":42,"tag":86,"props":2323,"children":2324},{"__ignoreMap":2069},[2325,2332,2355,2378,2402,2442,2478,2503,2525,2543,2552,2561,2585,2622,2659,2683,2704,2721,2729,2737,2761,2798,2835,2859,2880,2897,2905,2914,2923,2931,2956],{"type":42,"tag":2075,"props":2326,"children":2327},{"class":2077,"line":29},[2328],{"type":42,"tag":2075,"props":2329,"children":2330},{"style":2081},[2331],{"type":47,"value":2084},{"type":42,"tag":2075,"props":2333,"children":2334},{"class":2077,"line":2087},[2335,2339,2343,2347,2351],{"type":42,"tag":2075,"props":2336,"children":2337},{"style":2081},[2338],{"type":47,"value":2093},{"type":42,"tag":2075,"props":2340,"children":2341},{"style":2096},[2342],{"type":47,"value":2099},{"type":42,"tag":2075,"props":2344,"children":2345},{"style":2081},[2346],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2348,"children":2349},{"style":2081},[2350],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2352,"children":2353},{"style":2081},[2354],{"type":47,"value":2113},{"type":42,"tag":2075,"props":2356,"children":2357},{"class":2077,"line":2116},[2358,2362,2366,2370,2374],{"type":42,"tag":2075,"props":2359,"children":2360},{"style":2081},[2361],{"type":47,"value":2122},{"type":42,"tag":2075,"props":2363,"children":2364},{"style":2125},[2365],{"type":47,"value":2128},{"type":42,"tag":2075,"props":2367,"children":2368},{"style":2081},[2369],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2371,"children":2372},{"style":2081},[2373],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2375,"children":2376},{"style":2081},[2377],{"type":47,"value":2113},{"type":42,"tag":2075,"props":2379,"children":2380},{"class":2077,"line":2213},[2381,2386,2390,2394,2398],{"type":42,"tag":2075,"props":2382,"children":2383},{"style":2081},[2384],{"type":47,"value":2385},"      \"",{"type":42,"tag":2075,"props":2387,"children":2388},{"style":2149},[2389],{"type":47,"value":809},{"type":42,"tag":2075,"props":2391,"children":2392},{"style":2081},[2393],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2395,"children":2396},{"style":2081},[2397],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2399,"children":2400},{"style":2081},[2401],{"type":47,"value":2113},{"type":42,"tag":2075,"props":2403,"children":2404},{"class":2077,"line":2222},[2405,2410,2416,2420,2424,2428,2433,2437],{"type":42,"tag":2075,"props":2406,"children":2407},{"style":2081},[2408],{"type":47,"value":2409},"        \"",{"type":42,"tag":2075,"props":2411,"children":2413},{"style":2412},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[2414],{"type":47,"value":2415},"value",{"type":42,"tag":2075,"props":2417,"children":2418},{"style":2081},[2419],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2421,"children":2422},{"style":2081},[2423],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2425,"children":2426},{"style":2081},[2427],{"type":47,"value":2146},{"type":42,"tag":2075,"props":2429,"children":2430},{"style":2251},[2431],{"type":47,"value":2432},"#00a4bd",{"type":42,"tag":2075,"props":2434,"children":2435},{"style":2081},[2436],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2438,"children":2439},{"style":2081},[2440],{"type":47,"value":2441},",\n",{"type":42,"tag":2075,"props":2443,"children":2444},{"class":2077,"line":2301},[2445,2449,2453,2457,2461,2465,2470,2474],{"type":42,"tag":2075,"props":2446,"children":2447},{"style":2081},[2448],{"type":47,"value":2409},{"type":42,"tag":2075,"props":2450,"children":2451},{"style":2412},[2452],{"type":47,"value":1100},{"type":42,"tag":2075,"props":2454,"children":2455},{"style":2081},[2456],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2458,"children":2459},{"style":2081},[2460],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2462,"children":2463},{"style":2081},[2464],{"type":47,"value":2146},{"type":42,"tag":2075,"props":2466,"children":2467},{"style":2251},[2468],{"type":47,"value":2469},"primary CTA, link",{"type":42,"tag":2075,"props":2471,"children":2472},{"style":2081},[2473],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2475,"children":2476},{"style":2081},[2477],{"type":47,"value":2441},{"type":42,"tag":2075,"props":2479,"children":2481},{"class":2077,"line":2480},7,[2482,2486,2490,2494,2498],{"type":42,"tag":2075,"props":2483,"children":2484},{"style":2081},[2485],{"type":47,"value":2409},{"type":42,"tag":2075,"props":2487,"children":2488},{"style":2412},[2489],{"type":47,"value":1092},{"type":42,"tag":2075,"props":2491,"children":2492},{"style":2081},[2493],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2495,"children":2496},{"style":2081},[2497],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2499,"children":2500},{"style":2081},[2501],{"type":47,"value":2502}," [\n",{"type":42,"tag":2075,"props":2504,"children":2506},{"class":2077,"line":2505},8,[2507,2512,2517,2521],{"type":42,"tag":2075,"props":2508,"children":2509},{"style":2081},[2510],{"type":47,"value":2511},"          \"",{"type":42,"tag":2075,"props":2513,"children":2514},{"style":2251},[2515],{"type":47,"value":2516},"palette[5]: 40\u002F100 urls, 200 occurrences",{"type":42,"tag":2075,"props":2518,"children":2519},{"style":2081},[2520],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2522,"children":2523},{"style":2081},[2524],{"type":47,"value":2441},{"type":42,"tag":2075,"props":2526,"children":2528},{"class":2077,"line":2527},9,[2529,2533,2538],{"type":42,"tag":2075,"props":2530,"children":2531},{"style":2081},[2532],{"type":47,"value":2511},{"type":42,"tag":2075,"props":2534,"children":2535},{"style":2251},[2536],{"type":47,"value":2537},"button.primary@homepage.html computed background",{"type":42,"tag":2075,"props":2539,"children":2540},{"style":2081},[2541],{"type":47,"value":2542},"\"\n",{"type":42,"tag":2075,"props":2544,"children":2546},{"class":2077,"line":2545},10,[2547],{"type":42,"tag":2075,"props":2548,"children":2549},{"style":2081},[2550],{"type":47,"value":2551},"        ]\n",{"type":42,"tag":2075,"props":2553,"children":2555},{"class":2077,"line":2554},11,[2556],{"type":42,"tag":2075,"props":2557,"children":2558},{"style":2081},[2559],{"type":47,"value":2560},"      },\n",{"type":42,"tag":2075,"props":2562,"children":2564},{"class":2077,"line":2563},12,[2565,2569,2573,2577,2581],{"type":42,"tag":2075,"props":2566,"children":2567},{"style":2081},[2568],{"type":47,"value":2385},{"type":42,"tag":2075,"props":2570,"children":2571},{"style":2149},[2572],{"type":47,"value":843},{"type":42,"tag":2075,"props":2574,"children":2575},{"style":2081},[2576],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2578,"children":2579},{"style":2081},[2580],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2582,"children":2583},{"style":2081},[2584],{"type":47,"value":2113},{"type":42,"tag":2075,"props":2586,"children":2588},{"class":2077,"line":2587},13,[2589,2593,2597,2601,2605,2609,2614,2618],{"type":42,"tag":2075,"props":2590,"children":2591},{"style":2081},[2592],{"type":47,"value":2409},{"type":42,"tag":2075,"props":2594,"children":2595},{"style":2412},[2596],{"type":47,"value":2415},{"type":42,"tag":2075,"props":2598,"children":2599},{"style":2081},[2600],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2602,"children":2603},{"style":2081},[2604],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2606,"children":2607},{"style":2081},[2608],{"type":47,"value":2146},{"type":42,"tag":2075,"props":2610,"children":2611},{"style":2251},[2612],{"type":47,"value":2613},"#f2545b",{"type":42,"tag":2075,"props":2615,"children":2616},{"style":2081},[2617],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2619,"children":2620},{"style":2081},[2621],{"type":47,"value":2441},{"type":42,"tag":2075,"props":2623,"children":2625},{"class":2077,"line":2624},14,[2626,2630,2634,2638,2642,2646,2651,2655],{"type":42,"tag":2075,"props":2627,"children":2628},{"style":2081},[2629],{"type":47,"value":2409},{"type":42,"tag":2075,"props":2631,"children":2632},{"style":2412},[2633],{"type":47,"value":1100},{"type":42,"tag":2075,"props":2635,"children":2636},{"style":2081},[2637],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2639,"children":2640},{"style":2081},[2641],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2643,"children":2644},{"style":2081},[2645],{"type":47,"value":2146},{"type":42,"tag":2075,"props":2647,"children":2648},{"style":2251},[2649],{"type":47,"value":2650},"urgent CTA (Book a Demo)",{"type":42,"tag":2075,"props":2652,"children":2653},{"style":2081},[2654],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2656,"children":2657},{"style":2081},[2658],{"type":47,"value":2441},{"type":42,"tag":2075,"props":2660,"children":2662},{"class":2077,"line":2661},15,[2663,2667,2671,2675,2679],{"type":42,"tag":2075,"props":2664,"children":2665},{"style":2081},[2666],{"type":47,"value":2409},{"type":42,"tag":2075,"props":2668,"children":2669},{"style":2412},[2670],{"type":47,"value":1092},{"type":42,"tag":2075,"props":2672,"children":2673},{"style":2081},[2674],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2676,"children":2677},{"style":2081},[2678],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2680,"children":2681},{"style":2081},[2682],{"type":47,"value":2502},{"type":42,"tag":2075,"props":2684,"children":2686},{"class":2077,"line":2685},16,[2687,2691,2696,2700],{"type":42,"tag":2075,"props":2688,"children":2689},{"style":2081},[2690],{"type":47,"value":2511},{"type":42,"tag":2075,"props":2692,"children":2693},{"style":2251},[2694],{"type":47,"value":2695},"palette[7]: 30\u002F100 urls",{"type":42,"tag":2075,"props":2697,"children":2698},{"style":2081},[2699],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2701,"children":2702},{"style":2081},[2703],{"type":47,"value":2441},{"type":42,"tag":2075,"props":2705,"children":2707},{"class":2077,"line":2706},17,[2708,2712,2717],{"type":42,"tag":2075,"props":2709,"children":2710},{"style":2081},[2711],{"type":47,"value":2511},{"type":42,"tag":2075,"props":2713,"children":2714},{"style":2251},[2715],{"type":47,"value":2716},"a.cta-book@homepage.html computed background",{"type":42,"tag":2075,"props":2718,"children":2719},{"style":2081},[2720],{"type":47,"value":2542},{"type":42,"tag":2075,"props":2722,"children":2724},{"class":2077,"line":2723},18,[2725],{"type":42,"tag":2075,"props":2726,"children":2727},{"style":2081},[2728],{"type":47,"value":2551},{"type":42,"tag":2075,"props":2730,"children":2732},{"class":2077,"line":2731},19,[2733],{"type":42,"tag":2075,"props":2734,"children":2735},{"style":2081},[2736],{"type":47,"value":2560},{"type":42,"tag":2075,"props":2738,"children":2740},{"class":2077,"line":2739},20,[2741,2745,2749,2753,2757],{"type":42,"tag":2075,"props":2742,"children":2743},{"style":2081},[2744],{"type":47,"value":2385},{"type":42,"tag":2075,"props":2746,"children":2747},{"style":2149},[2748],{"type":47,"value":877},{"type":42,"tag":2075,"props":2750,"children":2751},{"style":2081},[2752],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2754,"children":2755},{"style":2081},[2756],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2758,"children":2759},{"style":2081},[2760],{"type":47,"value":2113},{"type":42,"tag":2075,"props":2762,"children":2764},{"class":2077,"line":2763},21,[2765,2769,2773,2777,2781,2785,2790,2794],{"type":42,"tag":2075,"props":2766,"children":2767},{"style":2081},[2768],{"type":47,"value":2409},{"type":42,"tag":2075,"props":2770,"children":2771},{"style":2412},[2772],{"type":47,"value":2415},{"type":42,"tag":2075,"props":2774,"children":2775},{"style":2081},[2776],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2778,"children":2779},{"style":2081},[2780],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2782,"children":2783},{"style":2081},[2784],{"type":47,"value":2146},{"type":42,"tag":2075,"props":2786,"children":2787},{"style":2251},[2788],{"type":47,"value":2789},"#ffc700",{"type":42,"tag":2075,"props":2791,"children":2792},{"style":2081},[2793],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2795,"children":2796},{"style":2081},[2797],{"type":47,"value":2441},{"type":42,"tag":2075,"props":2799,"children":2801},{"class":2077,"line":2800},22,[2802,2806,2810,2814,2818,2822,2827,2831],{"type":42,"tag":2075,"props":2803,"children":2804},{"style":2081},[2805],{"type":47,"value":2409},{"type":42,"tag":2075,"props":2807,"children":2808},{"style":2412},[2809],{"type":47,"value":1100},{"type":42,"tag":2075,"props":2811,"children":2812},{"style":2081},[2813],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2815,"children":2816},{"style":2081},[2817],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2819,"children":2820},{"style":2081},[2821],{"type":47,"value":2146},{"type":42,"tag":2075,"props":2823,"children":2824},{"style":2251},[2825],{"type":47,"value":2826},"gradient highlight",{"type":42,"tag":2075,"props":2828,"children":2829},{"style":2081},[2830],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2832,"children":2833},{"style":2081},[2834],{"type":47,"value":2441},{"type":42,"tag":2075,"props":2836,"children":2838},{"class":2077,"line":2837},23,[2839,2843,2847,2851,2855],{"type":42,"tag":2075,"props":2840,"children":2841},{"style":2081},[2842],{"type":47,"value":2409},{"type":42,"tag":2075,"props":2844,"children":2845},{"style":2412},[2846],{"type":47,"value":1092},{"type":42,"tag":2075,"props":2848,"children":2849},{"style":2081},[2850],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2852,"children":2853},{"style":2081},[2854],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2856,"children":2857},{"style":2081},[2858],{"type":47,"value":2502},{"type":42,"tag":2075,"props":2860,"children":2862},{"class":2077,"line":2861},24,[2863,2867,2872,2876],{"type":42,"tag":2075,"props":2864,"children":2865},{"style":2081},[2866],{"type":47,"value":2511},{"type":42,"tag":2075,"props":2868,"children":2869},{"style":2251},[2870],{"type":47,"value":2871},"gradient.headlineAccent uses #ffc700 → #cc0201",{"type":42,"tag":2075,"props":2873,"children":2874},{"style":2081},[2875],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2877,"children":2878},{"style":2081},[2879],{"type":47,"value":2441},{"type":42,"tag":2075,"props":2881,"children":2883},{"class":2077,"line":2882},25,[2884,2888,2893],{"type":42,"tag":2075,"props":2885,"children":2886},{"style":2081},[2887],{"type":47,"value":2511},{"type":42,"tag":2075,"props":2889,"children":2890},{"style":2251},[2891],{"type":47,"value":2892},"h1 span.highlight@homepage.html",{"type":42,"tag":2075,"props":2894,"children":2895},{"style":2081},[2896],{"type":47,"value":2542},{"type":42,"tag":2075,"props":2898,"children":2900},{"class":2077,"line":2899},26,[2901],{"type":42,"tag":2075,"props":2902,"children":2903},{"style":2081},[2904],{"type":47,"value":2551},{"type":42,"tag":2075,"props":2906,"children":2908},{"class":2077,"line":2907},27,[2909],{"type":42,"tag":2075,"props":2910,"children":2911},{"style":2081},[2912],{"type":47,"value":2913},"      }\n",{"type":42,"tag":2075,"props":2915,"children":2917},{"class":2077,"line":2916},28,[2918],{"type":42,"tag":2075,"props":2919,"children":2920},{"style":2081},[2921],{"type":47,"value":2922},"    }\n",{"type":42,"tag":2075,"props":2924,"children":2926},{"class":2077,"line":2925},29,[2927],{"type":42,"tag":2075,"props":2928,"children":2929},{"style":2081},[2930],{"type":47,"value":2219},{"type":42,"tag":2075,"props":2932,"children":2934},{"class":2077,"line":2933},30,[2935,2939,2943,2947,2951],{"type":42,"tag":2075,"props":2936,"children":2937},{"style":2081},[2938],{"type":47,"value":2093},{"type":42,"tag":2075,"props":2940,"children":2941},{"style":2096},[2942],{"type":47,"value":115},{"type":42,"tag":2075,"props":2944,"children":2945},{"style":2081},[2946],{"type":47,"value":2104},{"type":42,"tag":2075,"props":2948,"children":2949},{"style":2081},[2950],{"type":47,"value":1846},{"type":42,"tag":2075,"props":2952,"children":2953},{"style":2081},[2954],{"type":47,"value":2955}," []\n",{"type":42,"tag":2075,"props":2957,"children":2958},{"class":2077,"line":25},[2959],{"type":42,"tag":2075,"props":2960,"children":2961},{"style":2081},[2962],{"type":47,"value":2307},{"type":42,"tag":50,"props":2964,"children":2965},{},[2966,2968,2973],{"type":47,"value":2967},"Then call ",{"type":42,"tag":86,"props":2969,"children":2971},{"className":2970},[],[2972],{"type":47,"value":181},{"type":47,"value":2974}," and return.",{"type":42,"tag":2976,"props":2977,"children":2978},"style",{},[2979],{"type":47,"value":2980},"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":2982,"total":2763},[2983,3002,3019,3034,3047,3054,3072],{"slug":2984,"name":2984,"fn":2985,"description":2986,"org":2987,"tags":2988,"stars":25,"repoUrl":26,"updatedAt":3001},"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},[2989,2992,2995,2998],{"name":2990,"slug":2991,"type":15},"Automation","automation",{"name":2993,"slug":2994,"type":15},"Data Cleaning","data-cleaning",{"name":2996,"slug":2997,"type":15},"Data Engineering","data-engineering",{"name":2999,"slug":3000,"type":15},"WordPress","wordpress","2026-05-09T05:32:13.987972",{"slug":3003,"name":3003,"fn":3004,"description":3005,"org":3006,"tags":3007,"stars":25,"repoUrl":26,"updatedAt":3018},"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},[3008,3011,3014,3017],{"name":3009,"slug":3010,"type":15},"Block Editor","block-editor",{"name":3012,"slug":3013,"type":15},"Content Creation","content-creation",{"name":3015,"slug":3016,"type":15},"HTML","html",{"name":2999,"slug":3000,"type":15},"2026-06-08T08:17:34.212397",{"slug":3020,"name":3020,"fn":3021,"description":3022,"org":3023,"tags":3024,"stars":25,"repoUrl":26,"updatedAt":3033},"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},[3025,3026,3029,3032],{"name":3009,"slug":3010,"type":15},{"name":3027,"slug":3028,"type":15},"Full Site Editing","full-site-editing",{"name":3030,"slug":3031,"type":15},"Plugin Development","plugin-development",{"name":2999,"slug":3000,"type":15},"2026-06-08T08:17:49.413995",{"slug":3035,"name":3035,"fn":3036,"description":3037,"org":3038,"tags":3039,"stars":25,"repoUrl":26,"updatedAt":3046},"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},[3040,3041,3042,3045],{"name":3009,"slug":3010,"type":15},{"name":3027,"slug":3028,"type":15},{"name":3043,"slug":3044,"type":15},"Themes","themes",{"name":2999,"slug":3000,"type":15},"2026-06-08T08:17:50.666611",{"slug":4,"name":4,"fn":5,"description":6,"org":3048,"tags":3049,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3050,3051,3052,3053],{"name":13,"slug":14,"type":15},{"name":23,"slug":24,"type":15},{"name":17,"slug":18,"type":15},{"name":20,"slug":21,"type":15},{"slug":3055,"name":3055,"fn":3056,"description":3057,"org":3058,"tags":3059,"stars":25,"repoUrl":26,"updatedAt":3071},"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},[3060,3063,3066,3069,3070],{"name":3061,"slug":3062,"type":15},"QA","qa",{"name":3064,"slug":3065,"type":15},"Screenshots","screenshots",{"name":3067,"slug":3068,"type":15},"Testing","testing",{"name":3043,"slug":3044,"type":15},{"name":2999,"slug":3000,"type":15},"2026-06-08T08:17:45.698278",{"slug":3073,"name":3073,"fn":3074,"description":3075,"org":3076,"tags":3077,"stars":25,"repoUrl":26,"updatedAt":3086},"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},[3078,3079,3082,3085],{"name":2996,"slug":2997,"type":15},{"name":3080,"slug":3081,"type":15},"Debugging","debugging",{"name":3083,"slug":3084,"type":15},"Logs","logs",{"name":3061,"slug":3062,"type":15},"2026-05-10T05:48:11.267642",{"items":3088,"total":3257},[3089,3108,3120,3134,3151,3166,3176,3191,3206,3217,3230,3246],{"slug":3090,"name":3090,"fn":3091,"description":3092,"org":3093,"tags":3094,"stars":3105,"repoUrl":3106,"updatedAt":3107},"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},[3095,3096,3099,3102],{"name":20,"slug":21,"type":15},{"name":3097,"slug":3098,"type":15},"Productivity","productivity",{"name":3100,"slug":3101,"type":15},"UX Copy","ux-copy",{"name":3103,"slug":3104,"type":15},"UX Design","ux-design",484,"https:\u002F\u002Fgithub.com\u002FAutomattic\u002Fstudio","2026-05-06T05:40:01.516544",{"slug":3109,"name":3109,"fn":3110,"description":3111,"org":3112,"tags":3113,"stars":3105,"repoUrl":3106,"updatedAt":3119},"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},[3114,3115,3117,3118],{"name":3009,"slug":3010,"type":15},{"name":3116,"slug":1084,"type":15},"CSS",{"name":3015,"slug":3016,"type":15},{"name":2999,"slug":3000,"type":15},"2026-05-27T07:01:55.629681",{"slug":3121,"name":3121,"fn":3122,"description":3123,"org":3124,"tags":3125,"stars":3105,"repoUrl":3106,"updatedAt":3133},"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},[3126,3129,3132],{"name":3127,"slug":3128,"type":15},"Pricing","pricing",{"name":3130,"slug":3131,"type":15},"Reference","reference",{"name":2999,"slug":3000,"type":15},"2026-07-02T07:42:33.654791",{"slug":3135,"name":3135,"fn":3136,"description":3137,"org":3138,"tags":3139,"stars":3105,"repoUrl":3106,"updatedAt":3150},"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},[3140,3143,3146,3149],{"name":3141,"slug":3142,"type":15},"CMS","cms",{"name":3144,"slug":3145,"type":15},"Migration","migration",{"name":3147,"slug":3148,"type":15},"Web Development","web-development",{"name":2999,"slug":3000,"type":15},"2026-07-09T06:47:33.454311",{"slug":3152,"name":3152,"fn":3153,"description":3154,"org":3155,"tags":3156,"stars":3105,"repoUrl":3106,"updatedAt":3165},"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},[3157,3160,3161,3164],{"name":3158,"slug":3159,"type":15},"Audit","audit",{"name":20,"slug":21,"type":15},{"name":3162,"slug":3163,"type":15},"Performance","performance",{"name":2999,"slug":3000,"type":15},"2026-05-06T05:40:06.433267",{"slug":3167,"name":3167,"fn":3168,"description":3169,"org":3170,"tags":3171,"stars":3105,"repoUrl":3106,"updatedAt":3175},"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},[3172,3173,3174],{"name":3012,"slug":3013,"type":15},{"name":3030,"slug":3031,"type":15},{"name":2999,"slug":3000,"type":15},"2026-05-27T07:01:58.249105",{"slug":3177,"name":3177,"fn":3178,"description":3179,"org":3180,"tags":3181,"stars":3105,"repoUrl":3106,"updatedAt":3190},"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},[3182,3183,3186,3189],{"name":3158,"slug":3159,"type":15},{"name":3184,"slug":3185,"type":15},"Marketing","marketing",{"name":3187,"slug":3188,"type":15},"SEO","seo",{"name":2999,"slug":3000,"type":15},"2026-05-06T05:40:05.196367",{"slug":3192,"name":3192,"fn":3193,"description":3194,"org":3195,"tags":3196,"stars":3105,"repoUrl":3106,"updatedAt":3205},"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},[3197,3198,3201,3204],{"name":23,"slug":24,"type":15},{"name":3199,"slug":3200,"type":15},"Product Management","product-management",{"name":3202,"slug":3203,"type":15},"Specs","specs",{"name":2999,"slug":3000,"type":15},"2026-05-06T05:40:02.739409",{"slug":3207,"name":3207,"fn":3208,"description":3209,"org":3210,"tags":3211,"stars":3105,"repoUrl":3106,"updatedAt":3216},"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},[3212,3215],{"name":3213,"slug":3214,"type":15},"CLI","cli",{"name":2999,"slug":3000,"type":15},"2026-04-06T18:02:57.150231",{"slug":3218,"name":3218,"fn":3219,"description":3220,"org":3221,"tags":3222,"stars":3105,"repoUrl":3106,"updatedAt":3229},"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},[3223,3226,3227,3228],{"name":3224,"slug":3225,"type":15},"Content Strategy","content-strategy",{"name":2993,"slug":2994,"type":15},{"name":3187,"slug":3188,"type":15},{"name":2999,"slug":3000,"type":15},"2026-05-06T05:40:03.966799",{"slug":3231,"name":3231,"fn":3232,"description":3233,"org":3234,"tags":3235,"stars":3105,"repoUrl":3106,"updatedAt":3245},"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},[3236,3239,3240,3243],{"name":3237,"slug":3238,"type":15},"Animation","animation",{"name":23,"slug":24,"type":15},{"name":3241,"slug":3242,"type":15},"Typography","typography",{"name":3244,"slug":3231,"type":15},"Visual Design","2026-07-24T05:40:57.887452",{"slug":3247,"name":3247,"fn":3248,"description":3249,"org":3250,"tags":3251,"stars":3105,"repoUrl":3106,"updatedAt":3256},"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},[3252,3253,3254,3255],{"name":3080,"slug":3081,"type":15},{"name":20,"slug":21,"type":15},{"name":3064,"slug":3065,"type":15},{"name":3244,"slug":3231,"type":15},"2026-06-06T07:09:59.809812",81]