Update to Tembi Intelligence

{
  "description": "Restyle an existing standalone HTML report, dashboard, or data visualization into Tembi's visual brand (the EIP / ecom-new-frontend look) while preserving all data, copy, and charts. Use this whenever the user wants to convert, transform, restyle, re-skin, \"tembi-fy\", or apply Tembi branding to one or more `.html` files — including phrases like \"make this report look like Tembi\", \"convert these dashboards to our styling\", \"apply our brand to this HTML\", or \"restyle this with the frontend design system\". Also use it when the user drops HTML report files and asks to \"transform\" or \"convert\" them with no other target named. Works for plain-CSS reports and for chart-library dashboards (Plotly, D3/topojson, inline SVG). Not for building a report from scratch (this restyles existing markup) and not for restyling the live ecom-new-frontend app itself.",
  "included_files": [
    {
      "relative_path": "assets/carrier-colors.json",
      "size_in_bytes": 3329
    },
    {
      "relative_path": "assets/tembi-logo.svg",
      "size_in_bytes": 2378
    },
    {
      "relative_path": "assets/tembi-restyle-fingerprint.json",
      "size_in_bytes": 726
    },
    {
      "relative_path": "assets/tembi-tokens.css",
      "size_in_bytes": 3629
    },
    {
      "relative_path": "references/design-system.md",
      "size_in_bytes": 4817
    },
    {
      "relative_path": "references/frameworks.md",
      "size_in_bytes": 5446
    },
    {
      "relative_path": "scripts/restyle_sig.py",
      "size_in_bytes": 5823
    }
  ],
  "name": "report-to-tembi-style",
  "skill_md_contents": "---\nname: report-to-tembi-style\ndescription: >-\n  Restyle an existing standalone HTML report, dashboard, or data visualization\n  into Tembi's visual brand (the EIP / ecom-new-frontend look) while preserving\n  all data, copy, and charts. Use this whenever the user wants to convert,\n  transform, restyle, re-skin, \"tembi-fy\", or apply Tembi branding to one or\n  more `.html` files — including phrases like \"make this report look like\n  Tembi\", \"convert these dashboards to our styling\", \"apply our brand to this\n  HTML\", or \"restyle this with the frontend design system\". Also use it when the\n  user drops HTML report files and asks to \"transform\" or \"convert\" them with no\n  other target named. Works for plain-CSS reports and for chart-library\n  dashboards (Plotly, D3/topojson, inline SVG). Not for building a report from\n  scratch (this restyles existing markup) and not for restyling the live\n  ecom-new-frontend app itself.\n---\n\n# HTML → Tembi style\n\nConvert an existing standalone HTML report/dashboard so it looks like it came out\nof Tembi's product, **without touching the data or the narrative**. The data,\nnumbers, copy, and chart logic are the client's deliverable and must survive\nverbatim — your job is purely presentation: palette, type, chrome, chart colors,\nlogo.\n\n## The one rule that matters most\n\n**Restyle, never recompute.** Don't change numbers, labels, copy, chart math, or\nwhich data points are shown. If you find yourself editing a value inside a `DATA`\nconst or a `<td>`, stop — that's out of scope. You touch CSS, color literals, the\n`<style>` block, fonts, and the header/footer chrome. Nothing else.\n\n## Step 0 — Confirm three decisions before writing anything\n\nThese change the whole job, so ask up front (one `AskUserQuestion` with all three\nis ideal) unless the user already answered:\n\n1. **Output location** — new folder in the repo (e.g. `reports/`), beside the\n   originals, or overwrite in place. Default: a new folder; never overwrite an\n   original unless told to.\n2. **Restyle depth** — *token swap* (keep each file's layout/structure, only swap\n   colors/fonts/cards) vs *unify into one shared Tembi template* (normalize\n   several files onto one header/card/chart style). Token swap is faster and\n   lower-risk; unify is right when restyling a set that should look like siblings.\n3. **Accent handling for data series** — if the report charts carriers/brands,\n   confirm: carrier data series use the **canonical carrier color map**\n   (`assets/carrier-colors.json`); Tembi green is UI chrome only (eyebrows,\n   KPIs, positive deltas, borders, active tabs). For non-carrier categorical\n   series (e.g. markets/regions), pick a distinct categorical triad that does\n   **not** collide with the brand green or a carrier blue.\n\n## Step 1 — Inspect before reading\n\nReports are often huge because of embedded data (geojson, a multi-MB `DATA`\nconst). Reading the whole file will blow your context. First profile it:\n\n```bash\nwc -c FILE; wc -l FILE\nawk '{ if(length>2000) print NR\": \"length }' FILE   # find giant data lines\n```\n\nIf one line is enormous, it's the data — **never read it**. Read only the template\n(head/`<style>`/body/scripts) with `sed -n` ranges that skip the data line.\n\nA file too big to `Read` is also too big to `Edit` (Edit requires a prior Read).\nFor those, transform with a **script** (Python is easiest) doing targeted\nstring/regex substitutions and writing the output to the new location. See\n`references/frameworks.md` → \"Large / minified files\".\n\n## Step 2 — Identify the framework\n\nHow a report draws its visuals decides what you restyle beyond the `<style>` block:\n\n- **Plain CSS / inline SVG** — restyle the `<style>` block and any inline `fill=`\n  / `stroke=` / `style=\"background:…\"` color literals.\n- **Plotly** — restyle the `<style>` block **and** the color literals scattered in\n  the JS `layout`/`trace` objects (geo colors, `paper_bgcolor`, font color,\n  colorbar tick color, `colorscale`, marker line). Replace named colorscales like\n  `\"YlGnBu\"`/`\"Blues\"` with a Tembi green scale.\n- **D3 / topojson** — usually CSS-variable-driven; remapping `:root` plus any\n  hardcoded `.attr(\"fill\", …)` literals is enough.\n\n`references/frameworks.md` has the exact keys/patterns per framework.\n\n## Step 3 — Apply the Tembi design system\n\nThe canonical tokens live in `assets/tembi-tokens.css` — copy that `:root` block in\n(or map the file's existing variables onto these values). Full reference and the\n\"why\" behind each token is in `references/design-system.md`. The essentials:\n\n- **Light theme only.** White / `#F9FAFB` surfaces, `#101828` ink, `#475467`\n  muted, `#98A2B3` faint, `#EAECF0` lines. If the source is dark-themed, this is\n  the biggest change — flip every dark surface/text value.\n- **Fonts:** Inter (body + headings, weights 400–800) + IBM Plex Mono (numbers,\n  axis labels, eyebrows, tabular figures). Add the Google Fonts `<link>`. Source\n  fonts (Space Grotesk, Fraunces, Nunito Sans, etc.) get replaced.\n- **Green is chrome, not data.** `#32D594` / `#12B775` for accents, CTAs, positive\n  deltas, active states, borders. Never recolor a rival's data series green.\n- **Cards:** white, `1px #EAECF0` border, 12px radius, soft shadow\n  `0 1px 2px rgba(16,24,40,.04),0 8px 28px rgba(16,24,40,.05)`.\n- **Logo:** embed `assets/tembi-logo.svg` inline in the header (and footer if the\n  source had a wordmark there). Recolor its `fill` to `#101828` on light chrome or\n  `#12B775` on a muted footer. Pair with a small green dot.\n\n## Step 4 — Carrier colors (only if the report charts carriers)\n\n`assets/carrier-colors.json` is the source of truth for delivery-carrier brand\ncolors. Look carriers up **case-insensitively** (keys are mostly lowercase\nsnake_case; a few are capitalized, e.g. `Smartposti`). Some values are null —\nfall back to a neutral gray for those.\n\nThe subject carrier of a report keeps its own canonical color too — it does **not**\nbecome Tembi green. Green stays UI-only.\n\n**Contrast:** some carrier colors are pale (e.g. `lietuvos_pastas #FFDD00`). On a\nwhite background or inside a colored fill, give them a darker text color or a\nsubtle border so they stay legible.\n\n## Step 5 — Verify in the browser\n\nStatic HTML still needs a server for the preview tools. Start one rooted at the\noutput folder and check each file:\n\n```bash\npython3 -m http.server 8848 --directory <output-folder>\n```\n\nThen with the preview MCP (or Playwright): load each page, check\n`preview_console_logs` for **errors** (zero expected), and confirm charts rendered\nby querying the DOM (count SVG paths / bars / map traces) and reading computed\nstyles (`preview_inspect`) to confirm colors resolved to Tembi tokens — screenshots\nalone are unreliable for color. A screenshot is good for catching layout breaks.\nIterate on anything broken before reporting done.\n\n## Step 6 — Stamp every output (required, last step)\n\nThe analytics reports endpoint **rejects any report that isn't a validated Tembi\nrestyle** (`POST /reports` → 422). So the final step on every file is to stamp it —\ndo this only after the restyle is complete and verified, and re-stamp after any\nlater edit:\n\n```bash\npython3 scripts/restyle_sig.py stamp <file.html>          # overwrite in place\npython3 scripts/restyle_sig.py validate <file.html>       # exit 0 = will pass the server\n```\n\nThe stamp is a `<meta name=\"tembi-restyle\" content=\"v=1;ts=…;hash=…\">` tag injected\ninto `<head>`. The `hash` is a SHA-256 over the file's content with the stamp tag\nremoved (no secret) — it binds the stamp to the exact markup. The server re-runs the\nsame check `scripts/restyle_sig.py validate` performs:\n\n1. The Tembi fingerprint is present — Inter + IBM Plex Mono, the canonical `:root`\n   tokens, the embedded logo, and no leftover source-theme markers.\n2. The stamp's hash matches the current content.\n\nEditing a stamped file (changing a number, copy, anything) breaks the hash, so a\nfile edited without re-running the skill is rejected. **If you edit after stamping,\nre-run `stamp`.** The fingerprint the validator checks is\n`assets/tembi-restyle-fingerprint.json` — the same values as `assets/tembi-tokens.css`.\n\n## What \"done\" looks like\n\nEach restyled file: Inter + mono fonts, white background, green chrome, Tembi logo,\ncanonical carrier colors on data series, all original numbers/copy/charts intact,\nzero console errors, **and a valid `tembi-restyle` stamp** (`scripts/restyle_sig.py\nvalidate` exits 0). If you unified several files, an `index.html` landing page\nlinking them is a nice touch. Tell the user exactly what changed (palette, fonts,\nlogo, chart recolor), explicitly that no data was altered, and that each file is\nstamped and will pass the server's validation.\n\n## References\n\n- `references/design-system.md` — full Tembi token table, fonts, component specs,\n  and where each value comes from in `ecom-new-frontend`.\n- `references/frameworks.md` — per-framework restyle recipes (plain CSS, Plotly,\n  D3) and the large/minified-file script-transform pattern.\n- `assets/tembi-tokens.css` — drop-in `:root` + base component CSS.\n- `assets/tembi-logo.svg` — the Tembi wordmark to embed inline.\n- `assets/carrier-colors.json` — canonical carrier brand-color map.\n- `assets/tembi-restyle-fingerprint.json` — markers the stamp + server validator\n  check (fonts, tokens, logo signature, forbidden source markers). Source of truth;\n  a vendored copy lives in `api-flexible-analytics` next to the server validator.\n- `scripts/restyle_sig.py` — `stamp` / `validate` CLI + importable logic (Step 6).\n"
}