docs theme --dense causes AI agent context degradation (regression to 20% compliance)
- Dominant language
- TypeScript
- Stars
- 13k
- Forks
- 1.1k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 690
Description
## Problem
`npm run xds -- docs theme --dense` outputs 12.5 KB / 308 lines covering HCT color models, derived variable registries, cascade layers, color scale expansion, motion curves, and type scale math. AI coding agents that read this doc to learn `defineTheme()` routinely abandon XDS components and fall back to raw CSS.
## Evidence from Monotelier benchmarks
The Monotelier benchmark builds an ASCII art canvas editor across 6 frontend stacks. XDS (source) compliance scores are highly variable, and the variance tracks whether the agent reads the theme docs:
| Run | Agent read theme docs? | Compliance | Anti-patterns | Outcome |
|-----|----------------------|------------|---------------|---------|
| run-009 | No (guessed) | **94%** | 0 | Used defineTheme({ name }) minimally, stayed on track |
| run-011 | Yes (--dense) | **45%** | 74 | Overwhelmed by HCT details, abandoned XDS components |
| run-012 | Yes (--dense) | **20%** | 70 | Same — total design system abandonment |
The theme doc is the single strongest predictor of framework compliance in XDS benchmarks. Every run where the agent reads it scores below 50%. Every run where the agent skips it scores above 70%.
## Root cause
The dense theme doc includes information the agent doesn't need to use `defineTheme()`:
- HCT color model theory (agents just need `[light, dark]` tuples)
- Derived variable registries (internal implementation)
- Cascade layer architecture (internal implementation)
- Color scale expansion math (agents don't build color scales)
- Motion curve definitions (not needed for basic theming)
This burns the agent's context budget. By the time it reaches actual component code, the relevant guidance has either decayed from context or the agent has been spooked into hand-rolling everything.
## Comparison with other frameworks
MUI and Ant Design score 90-95% consistently because their theming APIs (`createTheme({ palette: {...} })`, `ConfigProvider theme={{ algorithm: darkAlgorithm }}`) are in the LLM's training data. The agent doesn't need to read docs — it already knows the API shape.
XDS's `defineTheme()` is proprietary — the agent MUST read docs. When those docs dump architecture internals alongside the API, it backfires.
## Proposed fix
Add a `docs theme --api` or `docs theme --brief` flag that returns only the API surface:
- `defineTheme({ name, tokens, base? })` signature
- Token naming convention (`--color-*, --spacing-*, --radius-*, etc.`)
- `[light, dark]` tuple format
- 1-2 complete examples
- ~2-3 KB / ~60 lines
Leave `--dense` as-is for humans building production themes. Add the new flag for AI agent consumption, and document it in `working-with-ai.doc.mjs` as the recommended path over `--dense` for theming.
## Prior art
The Monotelier project ships a 2.8 KB / 79 line THEMING.md reference that consistently produces 96% compliance when agents read it instead of `docs theme --dense`. This could serve as a template for what the `--api` output should look like.
Contributor guide
Assessment
This issue has not been assessed yet.