# prop-for-that — JS runtime state in CSS A dev-toolkit default (added 2026-06-14). [prop-for-that](https://github.com/argyleink/prop-for-that) by Adam Argyle exposes what JavaScript knows but CSS can't see — pointer, viewport, element size/visibility, online/network, battery, FPS, sensors, media playback, form/field state, image/video color — as `--live-*` (reactive) and `--const-*` (write-once) CSS custom properties. CSS then reacts with `var()`/`calc()` (continuous) or `@container style()` (discrete), no JS in the animation path. Zero deps, SSR-safe, MIT. Pinned at **v0.7.2 (pre-1.0)**. ## Where it lives in my toolkit - **Claude Code skill:** `~/.claude/skills/prop-for-that/` — `SKILL.md` (decision-first) + `reference.md` (full catalog, native-first table, copy-paste recipes). Auto-triggers when I build web/PWA UI that should react in CSS. - **claude.ai scaffolder:** recipe baked into `~/.config/claude-project/instructions/code.md` (web/PWA) and a perf-caveated pointer in `wordpress.md`, so new projects inherit it. - **Design spec:** `~/docs/superpowers/specs/2026-06-14-prop-for-that-toolkit-default-design.md`. ## The one rule: native CSS first Don't add JS for state CSS already exposes — scroll → `animation-timeline: scroll()/view()`, size → container queries, dark mode → `prefers-color-scheme`/`light-dark()`, reduced motion → `prefers-reduced-motion`, hover/touch → `@media (hover)`/`(pointer:)`, field validity → `:user-valid`, installed PWA → `@media (display-mode: standalone)`. Reach for the library only for the genuinely JS-only stuff (pointer coordinates, connectivity, battery, sensors, char-count/fill, form counts, media playback, image color, visual-viewport pinch-zoom). ## Fit - **Strong:** live-browser PWAs/sites (e.g. the Outpost PWA). - **Caveated:** WordPress front-ends ship JS to every visitor — justify per-effect; `/head` constants are cheap and safe site-wide. - **Non-fit:** Remotion / deterministic renderers, SSR-only output, Node CLIs. ## Links - Docs: https://prop-for-that.netlify.app/docsite/ - Plugin reference: https://prop-for-that.netlify.app/docsite/reference/plugins/ - llms.txt: https://prop-for-that.netlify.app/llms.txt