# ResponsiveJS (r$)

> Author responsive behavior CSS cannot express — `value = f(width)` — then measure the
> rendered page and fail CI when it disagrees. Linear values compile to a static `clamp()`,
> so the common case ships as CSS with zero runtime JavaScript.

Every link below is source markdown, not rendered HTML. `llms-full.txt` is all of it in one file.

## Start here

- [Getting started](https://responsivejs.com/docs/getting-started.md): ResponsiveJS (r$) is one model — value = f(width) — with two halves: author responsive behavior CSS can't express, verify the rendered result with measurements.
- [Adopting r$ in a site you already have](https://responsivejs.com/docs/adopting.md): The tutorial builds a page from nothing. This is the other path: you have a codebase, media queries you did not write, and no appetite for a rewrite. Nothing here asks you to ch…
- [Tutorial — from empty page to validated, fluid landing](https://responsivejs.com/docs/tutorial.md): Build a real page with every core construct, one step at a time. Each step: what you're about to gain, the code, what actually happened, and a checkpoint you can see. At the end…
- [Why r$ — and when not to](https://responsivejs.com/docs/why.md): The honest version, because you are going to ask anyway.
- [Concepts — the model in practice](https://responsivejs.com/docs/concepts.md): One idea holds the whole lineage together: the screen is a parametric Cartesian plane, and every layout property is a function of width — viewport or container.
- [Troubleshooting — by symptom](https://responsivejs.com/docs/troubleshooting.md): Start from what you are seeing, not from what you think is broken. Every entry names the cause and the fix; most of these were bugs we shipped ourselves first.
- [ResponsiveJS documentation](https://responsivejs.com/docs/index.md): One page per question — start from what you're trying to do.

## Guides

- [Using r$ in JavaScript / TypeScript — the runtime guide](https://responsivejs.com/docs/guides/runtime.md): This is the guide to @responsivejs/runtime: what each API is for, how the pieces fit, and worked examples that grow from one line to a real page. Prefer building along? The tuto…
- [The pattern catalog — every construct, on a real problem](https://responsivejs.com/docs/guides/case-studies.md): One pattern per real-world problem, organized by what you're building. Each: the problem, the construct, what it replaces. New here? Do the tutorial first — it builds a page wit…
- [Validating with r$ — the design guide](https://responsivejs.com/docs/guides/validation.md): This is the guide to @responsivejs/design: what the validation side of r$ is for, how measuring works, and worked examples that grow from five lines to contracts in CI. The API …
- [Testing responsive behavior](https://responsivejs.com/docs/guides/testing.md): How to test code that uses r$ — what belongs in unit tests, what genuinely needs a browser, and the patterns (and traps) we learned building r$'s own suite.
- [Guide — responsive regression in CI](https://responsivejs.com/docs/guides/ci.md): Three escalating setups, all built on Playwright.
- [Guide — r$ for AI agents (AX)](https://responsivejs.com/docs/guides/agents.md): r$ is built to be the judgment in an agent loop: an agent (or its browser tool) is the arm; analyze()/verifyContract() are the eyes and the verdict. Everything the oracle emits …

## Reference

- [API — @responsivejs/runtime](https://responsivejs.com/docs/api/runtime.md): The authoring half: reactive value = f(width), CSS-first. Depends only on @responsivejs/core. Subpaths: /signals, /curves, /layout, /typography, /geometry (everything is also re…
- [API — @responsivejs/design](https://responsivejs.com/docs/api/design.md): The validation oracle. Peers (both optional): @playwright/test (only the driver needs it), axe-core (only a11y needs it). The /browser subpath is driver-free by construction.
- [API — @responsivejs/contract](https://responsivejs.com/docs/api/contract.md): The design-contract DSL: the spec lives here (types, registry, builder, loader, JSON Schema); execution (verifyContract, recordBaseline) lives in @responsivejs/design and is re-…
- [@responsivejs/cli — the `rjs` command line](https://responsivejs.com/docs/api/cli.md): The zero-setup surface of r$: point it at any URL and get the full oracle — constraints, aesthetic score, a11y — as console output, JSON, or SARIF. Exit codes make it CI- and ag…
- [API — framework adapters (React · Vue · Angular)](https://responsivejs.com/docs/api/adapters.md): The constructs are framework-agnostic and identical everywhere: r$.fluid(16, 32) is the same value in all three. What an adapter adds is the lifecycle — apply when the element e…
- [API — @responsivejs/core](https://responsivejs.com/docs/api/core.md): Pure math, zero dependencies, browser-safe. Every module is a subpath export (@responsivejs/core/rect, …); the root re-exports the data-model types flat and the math modules as …

## Machine-readable I/O

- [Agent reference — authoring with @responsivejs/runtime](https://responsivejs.com/docs/agents/authoring-reference.md): Compact rules + exact signatures for writing runtime code. Human-oriented docs: runtime guide · API.
- [Agent reference — validation I/O](https://responsivejs.com/docs/agents/validation-reference.md): Exact shapes and decision rules for driving r$ programmatically. Human-oriented docs: design guide.