cdxtheme-theme

name

cdxtheme-theme

description

Generate and pack CDXTheme packages for codex and WorkBuddy desktop apps. Use when creating theme source (theme.json, codex/*.css + workbuddy/*.css partials, images), packing `.cdxtheme` packages, polishing Codex Chat/Work/home/detail composers, translating theme-owned display copy (default English), debugging light-skin ink/layout with probes, or when the user runs /cdxtheme-theme. Follow Theme generation order and Theme debugging methods in this skill. Does not own apply/restore as primary workflows but documents the pack→apply loop for iteration.

CDXTheme Theme

Instruction-only skill for generating theme source and packing portable .cdxtheme packages. Do not recreate injectors, launch scripts, package parsers, or application patchers here.

Supported targets:

App id	CSS host scope	Starter partials (source of truth)	Merged (pack input)
codex	html.cdxtheme-host-codex + html.cdxtheme-codex-skin (+ #cdxtheme-codex-skin-chrome)	assets/theme-starter/codex/*.css	codex.css
workbuddy	html.cdxtheme-host-workbuddy	assets/theme-starter/workbuddy/*.css	workbuddy.css

Named images use CSS variables --cdxtheme-image-<name> (for example --cdxtheme-image-hero).

Codex chrome overlay id is #cdxtheme-codex-skin-chrome (home: .dream-home-shell). See references/css-templates.md and references/codex.md.

Layout

cdxtheme-theme/
├── SKILL.md                 # this file — route, generate, pack, checklist
├── assets/theme-starter/    # neutral starter (theme.json + codex/ + workbuddy/ partials)
│   ├── theme.json
│   ├── codex/               # split Codex CSS (edit these; see CSS partials)
│   ├── workbuddy/           # split WorkBuddy CSS
│   ├── codex.css            # generated by merge-css / theme pack
│   └── workbuddy.css        # generated by merge-css / theme pack
├── scripts/probe/           # reusable CDP probe JS + /path/to/run.sh (layout debug)
└── references/
    ├── cli.md               # pack / apply / merge-css / package format
    ├── codex.md             # Codex Chat/Work/detail/composer (primary)
    ├── css-templates.md     # copy-paste CSS snippets
    └── workbuddy.md         # WorkBuddy notes

Route the request

1. Decide whether the user wants generate, pack, debug/polish, or both generate+verify.
2. Read references/cli.md before pack (and apply if iterating live).
3. For generate / layout polish, read references/css-templates.md.
4. Follow:
   • Generate order: Theme generation order
   • Debug methods: Theme debugging methods
5. Target notes:
   • codex (Chat/Work/detail/composer): references/codex.md
   • workbuddy: references/workbuddy.md

Skill variables (resolve before running)

Variable	Meaning	Resolve via
theme-dir	Directory that contains one theme’s theme.json + codex/ + workbuddy/ + assets/	Host project AGENTS.md (or cwd). Not a fixed monorepo path.
/path/to/cdxthemex	CDXTheme CLI binary	Host AGENTS.md
/path/to/run.sh	Probe wrapper	Host AGENTS.md

theme-dir is project-relative. This skill works in either layout:

Host project	Typical theme-dir
Single-theme repo (this skill lives next to one skin)	. or ./ (repo root is the theme)
Multi-theme monorepo (many skins under src/)	src/<theme-id> (e.g. src/manchester-city-fc)

Always resolve theme-dir from the host project’s AGENTS.md before pack/apply. Never hardcode src/… inside this skill.

theme-dir/                 # VAR — one theme tree
├── theme.json
├── codex/
├── workbuddy/
└── assets/

CSS partials (token-efficient authoring)

Starter CSS is split by region/function so agents edit only the relevant file instead of loading a 2k-line monolith.

Rules

1. Edit partials under codex/ and workbuddy/ — never hand-edit generated root codex.css / workbuddy.css.
2. Recolor / new brand: only open codex/00-palette.css and workbuddy/00-palette.css (primary --theme-*, light + dark). Keep both apps in sync. Host bridges live in 01-host-bridges.css (usually leave). After light recolors: Light-skin verify order.
3. Pack merges partials in memory by default (embeds into .cdxtheme; does not write root CSS):

/path/to/cdxthemex theme pack theme-dir -o output/<theme-id>.cdxtheme --force
# merges codex/ + workbuddy/ partials in memory into the package (no root CSS written)
# skip merge with --no-merge-css

/path/to/cdxthemex theme merge-css theme-dir          # optional: write root codex.css / workbuddy.css
/path/to/cdxthemex theme merge-css theme-dir -t codex

4. Merge order = alphabetical filename (hence 00-, 01- prefixes). Do not rename without understanding order.
5. theme.json still points at the merged files ("css": "codex.css").

codex/ partial map

File	Role	When to open
00-palette.css	Primary palette only (light default + dark overrides)	Recolor / generate brand
00-tokens.css	Semantic aliases, layout constants, decorative copy vars	Rare overrides; not brand hex
01-host-bridges.css	Host VS Code / color-token bridges → --theme-*	Ink/surface host mismatches
01-shell.css	Body bg/texture/top stripe, sidebar (.app-shell-left-panel), main surface + header tint	Shell surfaces, page wash, sidebar ink
02-chrome.css	Injected dream chrome: brand chip, signature, sparkles, polaroid, ribbon (Chat home + conversation detail half-cover on composer)	Overlay polish, ribbon half-cover
03-home.css	Home flex stack, hero banner (Chat/Work heights), welcome title, Chat suggestion cards	Home layout / hero / suggestions
04-composer.css	HOME fixed composer + DETAIL relative; containing-block safety	Composer pin bugs
05-work.css	Work hero title, missions, mode toggle, util chips, fixed util+composer stack	Work tab / missions / bottom stack
06-settings.css	Settings rail/cards readability + hide dream chrome (ribbon/polaroid; sparkles stay)	Settings / Scheduled / Plugins

workbuddy/ partial map

File	Role	When to open
00-palette.css	Primary palette light + dark via body/html host classes (:has(body.light|dark), html.light|dark, …)	Generating / recoloring / dual-mode
00-tokens.css	Semantic aliases + layout knobs (composer/header/tabs/topbar/home-max) + badge/title fallbacks	Layout sizes / copy vars
01-shell.css	Full-bleed shell, top stripe, sidebar, topbar collapse, .user-menu-popover	Shell / sidebar / account menu
02-home.css	Main fill, centered .chat-container, hero (dark glass scrim), left scene tabs	WorkBuddy home / dark hero
03-composer.css	Composer; rebind host _mainArea_*; opaque footer; menus; polaroid hidden	Composer contrast / dark input

Read budget (examples)

Task	Read these only
New brand recolor	codex/00-palette.css, workbuddy/00-palette.css, theme.json
Light/dark dual palette	00-palette.css only (both modes)
Light-skin ink / Settings cards	01-host-bridges.css + 01-shell.css / 06-settings.css + probes B
Work util stack	codex/05-work.css (+ maybe 04-composer.css)
Chat ribbon	codex/02-chrome.css
Home hero layout	codex/03-home.css
WorkBuddy home / composer	workbuddy/00-tokens.css + 02-home.css + 03-composer.css
WorkBuddy topbar / sidebar	workbuddy/01-shell.css

Theme generation order (end-to-end)

Agents must follow this order when creating a new theme. Do not skip steps or reverse pack/verify.

Source of truth (required)

Allowed base	Forbidden base
.agents/skills/cdxtheme-theme/assets/theme-starter/	Any already-shipped livery (e.g. ferrari-f1-team, mercedes-f1) — resolve real paths via AGENTS.md

• Always generate from theme-starter. Recolor --theme-* tokens, rewrite theme.json copy, add assets — keep starter layout contracts.
• Do not copy an existing shipped theme and search-replace brand colors (forks outdated livery CSS, drops layout fixes).
• Existing packaged liveries are visual examples only, not bases.

Ordered steps

1. Scaffold
2. theme.json (id / displayName / version int / copy / images / targets / baseTheme)
3. Primary --theme-* in 00-palette.css (light + dark; codex + workbuddy in sync)
4. Host bridges (starter 00-tokens — usually leave)
5. Theme-owned copy + decorative CSS labels
6. Assets (hero, …)
7. Pack → apply
8. Layout verify (Chat home / Work home / detail)
9. Light-skin contrast probes (if light)
10. Bump version (int) when redistributing

1. Scaffold

# Multi-theme monorepo: theme-dir = src/<theme-id>
# Single-theme project: theme-dir = .  (copy starter files into repo root carefully)
cp -R .agents/skills/cdxtheme-theme/assets/theme-starter/. theme-dir/
# or: cp -R …/theme-starter src/<theme-id>   when AGENTS maps theme-dir → src/<theme-id>

Never edit the skill’s theme-starter in place as a shipped theme.

2. theme.json

Field	Rule
id	Stable package slug (may equal folder name when multi-theme)
displayName	Human title
version	Integer only (e.g. 1). Not "1.0.0"
copy.*	Theme-owned strings; default English unless user names a language
images	Paths under assets/ (e.g. "hero": "assets/hero.jpg")
targets	Only apps this package supports (codex, workbuddy, or both)
baseTheme.mode	light or dark — must match tokens color-scheme

3. Primary color tokens (00-palette.css)

Edit only:

• codex/00-palette.css
• workbuddy/00-palette.css

Set the full primary palette for light and dark (see Color tokens). Keep codex and workbuddy in sync. Do not scatter hex through other partials; do not hand-edit generated root codex.css / workbuddy.css.

Optional decorative labels stay in 00-tokens.css: --theme-eyebrow, --theme-eyebrow-work, --theme-panel-label, --theme-badge.

4. Host bridges (starter already includes)

Starter codex/01-host-bridges.css bridges VS Code / color-token surfaces to --theme-* so both light and dark palettes stay readable. Prefer leaving bridges alone; only recolor 00-palette.css.

Sidebar/settings layout contracts live in 01-shell.css + 06-settings.css (.app-shell-left-panel, not only aside). After light recolors still run Light-skin verify order.

5. Copy language

Author theme-owned visible strings in the target language (default English). See Display language. Prefer theme.json → copy over one-off CSS content languages.

6. Assets

Place art under theme-dir/assets/, declare in images, reference as var(--cdxtheme-image-<name>). No remote url(http…).

7. Pack → apply

/path/to/cdxthemex theme pack theme-dir -o output/<theme-id>.cdxtheme --force
/path/to/cdxthemex apply -t ./output/<theme-id>.cdxtheme

Pack auto-merges partials in memory (no need to write root CSS unless debugging). Use --force when replacing an existing package.

8. Layout verify

/path/to/cdxthemex verify layout

/path/to/run.sh set-mode chat
/path/to/run.sh chat-layout
/path/to/run.sh go-work-home   # or set-mode work + go-work-home
/path/to/run.sh work-layout

Must check Chat home, Work home, and conversation detail (detail composer is relative, not fixed).

9. Light-skin contrast probes (if light)

token-bridge → sidebar-ink → contrast-scan → (open Settings) → settings-contrast

See Theme debugging methods.

10. Redistribute

Bump version by +1 integer when shipping a new package. Do not use semver strings.

Minimal source layout

theme-dir/
├── theme.json
├── codex/                 # edit partials here
│   ├── 00-palette.css       # primary --theme-* (light + dark)
│   ├── 00-tokens.css        # aliases, layout constants, copy vars
│   ├── 01-host-bridges.css  # host VS Code / color-token bridges
│   ├── 01-shell.css
│   ├── 02-chrome.css
│   ├── 03-home.css
│   ├── 04-composer.css
│   ├── 05-work.css
│   └── 06-settings.css
├── workbuddy/
│   ├── 00-palette.css
│   ├── 00-tokens.css
│   ├── 01-shell.css
│   ├── 02-home.css
│   └── 03-composer.css
├── codex.css              # generated — pack input (optional on disk)
├── workbuddy.css          # generated — pack input (optional on disk)
└── assets/
    ├── hero.png
    └── texture.png

Omit a target (partials dir + targets entry + merged css) when the package should not support that app.

Guardrails while generating

• Prefer stable selectors: data-composer-navigation-target, roles, aria-label (include zh where UI is localized).
• Decorative overlays: pointer-events: none.
• No external @import, remote url(http…), theme JS, or event handlers.
• Use cdxtheme-* only for host classes, chrome ids, image CSS variables.
• Do not edit layout sizes, composer pin, Work stack, ribbon math unless fixing a proven bug.

Color tokens (--theme-* — edit these)

Starter body rules use only var(--theme-…) / color-mix(…, var(--theme-…), …) for colors. When generating a theme, change codex/00-palette.css and workbuddy/00-palette.css only — do not scatter hex through other partials; do not hand-edit generated root CSS.

Primary palette (required recolor) — 00-palette.css

Token	Role	Starter light	Starter dark
--theme-accent	Primary brand	#7867a8	#9b8bc9
--theme-accent-hot	Lighter / highlight	#9b8bc9	#c4b5e8
--theme-accent-deep	Darker gradient end	#5c4d8a	#7a6aad
--theme-accent-2	Secondary (metal / stripe)	#9a93a8	#8a8498
--theme-accent-2-hot	Secondary highlight	#c8c2d4	#c8c2d4
--theme-accent-3	Tertiary stripe / badge	#c45c8a	#d47a9e
--theme-text	Primary ink	#2f2b3a	#f0eef6
--theme-muted	Secondary ink	#756f82	#a8a2b5
--theme-bg	Deepest page bg	#f0eef6	#121018
--theme-bg-elevated	Elevated surface	#f8f7fc	#1a1722
--theme-panel	Cards / solid panels	#ffffff	#221e2c
--theme-panel-mid	Mid panel / chips	#f4f1fa	#2a2536
--theme-on-accent	Text on accent fills	#ffffff

Dark applies when host has .electron-dark / data-color-scheme="dark", or prefers-color-scheme: dark (unless .electron-light / data-color-scheme="light").

Light recolor QA: still run Light-skin verify order (host bridges are in 01-host-bridges.css, but palette contrast can still break).

Dark recolor tip: keep light ink on dark panels; set --theme-on-accent dark only when accent is light enough.

Semantic aliases (usually leave)

Derived from the primary palette via color-mix / aliases:

Token	Typical use
--theme-surface / --theme-surface-strong	Main surfaces
--theme-sidebar	Left rail
--theme-border	Borders from accent alpha
--theme-shadow	Elevation shadows from black alpha
--theme-accent-soft / --theme-accent-strong	Soft fill / strong accent

Body rules also use color-mix(in srgb, var(--theme-accent) N%, transparent) for one-off alphas — still driven by the primary tokens.

Layout constants (not brand colors)

Token	Default	Purpose
--theme-composer-bottom	24px	Codex home fixed composer / Work stack bottom inset
--theme-chat-composer-height	60px	Codex Chat ribbon half-cover math
--theme-composer-chips-gap	24px	WorkBuddy chips → input-slot min gap
--theme-composer-height	260px	WorkBuddy home composer total height
--theme-input-slot-height	200px	WorkBuddy input card (+ select-workspace footer)
--theme-header-height	228px	WorkBuddy hero height
--theme-tabs-height	52px	WorkBuddy scene-tabs row
--theme-home-max	900px	WorkBuddy centered .chat-container max width
--theme-workbuddy-topbar	24px	WorkBuddy host topbar height

Decorative CSS copy tokens (theme-owned)

Prefer theme.json → copy when the runtime maps it. Starter also defines CSS-only labels:

Token / copy field	Where used
--theme-eyebrow	Chat hero h1::before
--theme-eyebrow-work	Work hero title eyebrow
--theme-panel-label	Work mission list panel header
--theme-badge	Polaroid badge / corner badge
copy.brandTitle / --dream-brand-title	Brand chip + WorkBuddy header
copy.tagline / --dream-tagline	Hero tagline
copy.projectLabel / --dream-project-label	Project strip label
copy.projectPrefix / --dream-project-prefix	Project chip prefix
copy.ribbon	Ribbon emoji/glyph

Pack a theme

1. Confirm theme-dir/ has a valid theme.json and every CSS path declared under targets.
2. If you edited partials, either run theme merge-css or rely on pack auto-merge (merges {stem}/*.css → path in targets.*.css).
3. Pack with the CDXTheme CLI (see references/cli.md):

# from repo root — resolve /path/to/cdxthemex via AGENTS.md
/path/to/cdxthemex theme merge-css theme-dir   # optional; pack also merges
/path/to/cdxthemex theme pack theme-dir -o output/<theme-id>.cdxtheme --force

4. Re-pack after CSS or image changes; bump version as an integer when redistributed (e.g. 4, not "1.0.4").
5. Use --force when intentionally replacing an existing output file.

Theme debugging methods

Codex must be running with remote debugging (default CDP port 9335). Resolve CLI/probe paths via repo AGENTS.md.

Full probe catalog: scripts/probe/README.md.

Universal fix loop

Every CSS/token change:

edit partials → pack --force → apply → probe / verify → (repeat) → bump version int if shipping

/path/to/cdxthemex theme pack theme-dir -o output/<theme-id>.cdxtheme --force
/path/to/cdxthemex apply -t ./output/<theme-id>.cdxtheme

Optional: screenshot, inject verify

/path/to/cdxthemex screenshot -o /tmp/chat.jpg --tab chat
/path/to/cdxthemex screenshot -o /tmp/work.jpg --tab work
/path/to/cdxthemex verify inject -t ./output/<theme-id>.cdxtheme

A. Layout debug (Chat / Work / composer)

Use when hero is mid-page, composer floats wrong, util overlaps missions, etc.

/path/to/cdxthemex verify layout

# Chat home
/path/to/run.sh set-mode chat
/path/to/run.sh chat-layout

# Work home (mode toggle alone is not enough if inside a task)
/path/to/run.sh go-work-home
/path/to/run.sh work-layout

# Navigation discovery / hero mid-page root cause
/path/to/run.sh discover-nav
/path/to/run.sh hero-row-tree

Probe	Healthy signals
chat-layout	dreamHome: true; composer position: fixed; gaps.composerFromViewportBottom ≈ 24; hero near header
work-layout	gaps.orderOK: true; missionsToUtil > 0; hero short; composerBefore.display often none on Work
verify layout	Chat + Work composers present; no fatal layout failures

Which partial to open:

Symptom	Partial
Home hero / flex / suggestions	codex/03-home.css
Composer pin / detail relative	codex/04-composer.css
Work util stack / missions	codex/05-work.css
Ribbon / polaroid / chrome	codex/02-chrome.css
Shell wash / sidebar surface	codex/01-shell.css
Settings chrome leaks	codex/06-settings.css

Also run the Codex checklist.

B. Light-skin verify order (ink / surfaces)

Required after recolor or any polish on color-scheme: light themes. Host keeps dark-theme defaults (white ink, dark panels).

pack → apply → token-bridge → sidebar-ink → contrast-scan
→ (manually open Settings) → settings-contrast

/path/to/cdxthemex theme pack theme-dir -o output/<theme-id>.cdxtheme --force
/path/to/cdxthemex apply -t ./output/<theme-id>.cdxtheme

/path/to/run.sh token-bridge
# expect: ok true; suspectWhiteInk / suspectDarkSurfaces empty

/path/to/run.sh sidebar-ink
# expect: whiteishCount 0 on every .app-shell-left-panel rail

/path/to/run.sh contrast-scan
# expect: whiteInkCount 0; darkSurfaceCount 0 (or only intentional dark chrome)

# open Settings in Codex UI, then:
/path/to/run.sh settings-contrast
# expect: darkCardCount 0; tokens.panel light; section cards near white

Step	Probe	Catches
1	token-bridge	Missing host bridges (--vscode-foreground, --color-background-panel, elevated surfaces)
2	sidebar-ink	White labels on light rail; .sidebar-foreground-muted remap from white vscode fg
3	contrast-scan	Remaining white ink or dark solid cards in the viewport
4	settings-contrast	Settings div.app-shell-left-panel + section cards on dark --color-background-panel

C. Symptom → probe → fix map

User / visual symptom	Run	Fix in theme (prefer tokens)
Sidebar labels white / invisible	sidebar-ink, token-bridge	Bridge --vscode-foreground + force ink under .app-shell-left-panel and .sidebar-foreground-muted
Settings left nav unreadable	settings-contrast, sidebar-ink	Selectors on .app-shell-left-panel (Settings is a div, not only aside); light rail bg
Settings section dark + dark text	settings-contrast, token-bridge	Bridge --color-background-panel / elevated surfaces; optional 06-settings.css card rules
Broad hard-to-read UI after recolor	contrast-scan	Complete 00-palette.css + host bridges in 01-host-bridges.css
Composer mid-page / wrong pin	chat-layout / detail visual check	04-composer.css — home fixed + detail relative; no transform on ancestors
Work util over missions	work-layout	05-work.css fixed util+composer stack
Hero mid-page / overlap	hero-row-tree, chat-layout	03-home.css flex stack; kill grid-rows-2 + -mt-16
Ribbon off-center / missing	visual + chat-layout	02-chrome.css; keep translateX(-50%)
Wrong language on badges / eyebrows	visual	theme.json copy + --theme-eyebrow* (theme-owned only)

D. Host traps (do not “fix” by forking liveries)

Trap	Mechanism	Fix location
White sidebar ink	.sidebar-foreground-muted { --color-token-foreground: color-mix(…, var(--vscode-foreground)) } while vscode fg is white	01-host-bridges.css + shell ink overrides
Settings rail still dark	Host dark glass on div.app-shell-left-panel	Shell/settings: .app-shell-left-panel, not only aside
Settings cards dark	Inline background-color: var(--color-background-panel, …) default dark	Bridge --color-background-panel (+ elevated) in 01-host-bridges.css
Incomplete recolor	Layout CSS uses --theme-accent-hot, --theme-panel, --theme-white, …	Full primary palette in both 00-palette.css files (light + dark)
Invalid nested var	e.g. var(--theme-var(--theme-white))	Use var(--theme-white) / var(--theme-on-accent)

E. Dark themes

Dark skins set light ink + dark panels intentionally. Do not force light --color-background-panel / dark text bridges. Still run layout probes (chat-layout / work-layout). Use contrast-scan only to find accidental low contrast (e.g. dark text left on dark cards).

Display language (theme-owned text)

Default: English. When generating or polishing themes, automatically put every theme-owned string that appears on screen into the target language.

Translate / author (theme-owned)	Do not rewrite (host-owned)
theme.json copy: brandTitle, brandSubtitle, signature, tagline, projectLabel, projectPrefix, ribbon label	Native Chat/Work titles, mission row body, model pickers, system menus
CSS content: "…" eyebrows, panel headers, polaroid badges, decorative labels	DOM welcome / Work question (app i18n; never invent the question via content)
Any other label only the theme injects	Conversation / user content

Workflow:

1. Default: English. Author theme-owned display strings in English unless the user explicitly requests another language.
2. If the user names a language, translate/author all theme-owned strings into that language.
3. Prefer theme.json → copy for shared strings; keep CSS content in the same language (or driven by copy vars when runtime provides them).
4. Selectors that match host chrome may include non-English aria-label values for locale coverage — that is matching only, not rewriting host UI text.

Codex checklist (from production themes)

When authoring or repairing Codex CSS, verify:

Check	Why
Home column is flex stack; kill grid-rows-2 + -mt-16 (match min-h-0 flex-1 and legacy min-h-full)	Native layout overlaps hero + second column; stale selectors leave hero mid-grid
Work hero at top + shorter than Chat; hide composer ::before on Work	Util stack clutter / banner not under titlebar
Home composer uses fixed + --cdxtheme-composer-* + bottom var	Home flex parks composer mid-page
Detail composer is relative 100% width	content-visibility: auto traps fixed
No transform/filter on composer or its ancestors	Breaks fixed pin (double offset)
Work util + composer pinned as one bottom stack (util above)	Fixed composer alone leaves util mid-page over missions
Work hides empty hero > .absolute; Chat nth-child(2) scoped	Chat-era absolute rail steals Work space
Utility chips style button, not label as 20px badge	Crushes Plugins / model text
Prefer data-composer-navigation-target (+ locale labels)	English-only aria-label misses localized host chrome
Chat model vs Work model selectors are separate	Shared attrs double-hit both
Work measurement span out of layout	Inflates model chip width
Chat shell not forced tall; card min-height skips list rows	Empty band / tall Work rows
Ribbon float keeps translateX(-50%)	Stay centered above composer
Chat ribbon half-covers input (z-index > composer)	Optional polish: bottom = bottom + chat-height − half-ribbon
Polaroid tucked on Work	Bottom polaroid crushes missions / stack
Theme-owned copy is target language (default EN)	Avoid mixed-language labels / leftover Chinese-only CSS content
Light skins: run Light-skin verify order after recolor	Host dark leftovers → white sidebar ink / dark Settings cards

Details: references/codex.md. Templates: references/css-templates.md. Probes: scripts/probe/README.md.

Out of scope

Do not use this skill to rebuild injectors, patch app.asar, or invent package formats. Runtime apply/restore/launch are CLI features documented in references/cli.md but not the primary output of theme generation.

Guardrails

• Keep packages declaration-only (manifest + CSS + images). No theme JavaScript.
• Scope every rule under html.cdxtheme-host-<app-id> (or :root.cdxtheme-host-<app-id>).
• Treat theme packages as untrusted input; block remote CSS resources.
• Preserve native navigation, composer, menus, focus, and accessibility behavior.
• Do not upload private reference images to an unapproved image service.
• Do not patch application bundles, app.asar, or host installers from this skill.