# ResponsiveJS documentation

One page per question — start from what you're trying to do.

| Your question | The page |
| --- | --- |
| **I have a site — is it right?** | **[Getting started](getting-started)** — one command, nothing installed, every width judged |
| **I have a site and want to keep it right** | **[Adopting r$](adopting)** — measure → pin a contract → gate it in CI → only then write constructs |
| Why this and not `clamp()` / Percy / axe? | [Why r$](why) — the honest comparison, and when not to use it |
| Something does not behave | [Troubleshooting](troubleshooting) — by symptom |
| **Teach me — I'll build along** | **[The tutorial](tutorial)** — empty page → fluid, measured, contract-pinned landing in 7 steps (~30 min) |
| How does the model work? | [Concepts](concepts) — `value = f(width)`, snapshots, the oracle, CSS-first |
| **How do I author responsive behavior in JS/TS?** | **[The runtime guide](guides/runtime)** — `r$.`: every construct's purpose, gradual examples, customizing & debugging |
| What's the pattern for MY problem? | [The pattern catalog](guides/case-studies) — every construct on a real problem, organized by what you're building; three unpacked end to end |
| **How do I validate/score a page?** | **[The design guide](guides/validation)** — `r$(page)`: measure → model → judge, `analyze()`, contracts, cutting false positives |
| How do I test all of this? | [Testing responsive behavior](guides/testing) — what's unit-testable vs what needs a browser, patterns and traps |
| How do I wire it into CI? | [CI guide](guides/ci) — pipelines, SARIF, baselines strategy |
| What's the exact signature of X? | API reference: [runtime](api/runtime) · [design](api/design) · [contract](api/contract) · [cli](api/cli) · [core](api/core) · [adapters](api/adapters) |
| How do I use it in React / Vue / Angular? | [Adapters reference](api/adapters) — the lifecycle, per framework |
| I have no build step (CMS, plain HTML) | [`runtime/global`](api/runtime#no-build-step) — one `<script>`, `window.r$` |
| A live page using everything | [Fluid landing example](https://github.com/AleSaiani/ResponsiveJS/blob/main/examples/landing) — run it, resize it, read its tutorial |
| The oracle inside DevTools | [The r$ devtool](https://github.com/AleSaiani/ResponsiveJS/blob/main/packages/devtool) — sweep, curve inspector, score HUD, contract recorder (load unpacked) |

**For AI agents** (compact, exact I/O — different documents on purpose):

- [Validation reference](agents/validation-reference) — commands, exit codes, report JSON
  shapes, the 27 constraints, contract skeleton, the fix loop
- [Authoring reference](agents/authoring-reference) — invariants, signatures, construct
  chooser, the minimal correct pattern
- [r$ for AI agents](guides/agents) — the narrative guide: drivers (CDP/eval/agent-browser),
  contracts as instructions

The aesthetic score is grounded in Ngo, Teo & Byrne (2003), *Modelling interface aesthetics*,
and Birkhoff (1933), *Aesthetic Measure* — see [api/core.md](api/core#aesthetics--the-17-metric-score).