@daydreamui/good-css 0.0.0-stage → 0.3.0

package/knowledge/recipes/styles-that-apply-only-when-a-scroller-overflows.md

@@ -0,0 +1,99 @@
+---
+topic: "good-css-styles-that-apply-only-when-a-scroller-overflows"
+title: "Styles that apply only when a scroller overflows"
+tier: "reference"
+tags:
+  - "good-css"
+  - "scroll"
+  - "viewport"
+  - "styles"
+  - "apply"
+  - "only"
+  - "when"
+  - "scroller"
+  - "overflows"
+summary: "Use it on any row that may or may not fit, such as tabs, a toolbar or a table wrapper. It fades the edges only when there is something to scroll to. It replaces a `ResizeObserver` that compares `scrollWidth` with `clientWidth`."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Styles that apply only when a scroller overflows
+
+Use it on any row that may or may not fit, such as tabs, a toolbar or a table wrapper. It fades the edges only when there is something to scroll to. It replaces a `ResizeObserver` that compares `scrollWidth` with `clientWidth`.
+
+```css
+@keyframes overflowing {
+  from, to { --fade: 2rem; }
+}
+
+.scroller {
+  --fade: 0px;
+  overflow-x: auto;
+  animation: overflowing linear;
+  animation-timeline: scroll(self inline);
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    #000 var(--fade),
+    #000 calc(100% - var(--fade)),
+    transparent
+  );
+}
+```
+
+To fade only the side that still has content, register the two lengths and give the keyframes different ends:
+
+```css
+@property --fade-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --fade-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@keyframes edges {
+  from { --fade-start: 0px; --fade-end: 2rem; }
+  10%, 90% { --fade-start: 2rem; --fade-end: 2rem; }
+  to { --fade-start: 2rem; --fade-end: 0px; }
+}
+
+.scroller-edges {
+  overflow-x: auto;
+  animation: edges linear;
+  animation-timeline: scroll(self inline);
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    #000 var(--fade-start),
+    #000 calc(100% - var(--fade-end)),
+    transparent
+  );
+}
+```
+
+Why it works:
+
+- A scroll timeline is inactive while its scroller has nothing to scroll. An animation on an inactive timeline has no effect, so the keyframes apply only when the content overflows.
+- In the first block `from` and `to` hold the same value. Scroll position changes nothing and the animation is an on/off switch.
+- The keyframes set a custom property, and custom properties inherit. The scroller and everything inside it can read the result.
+- A mask fades the content itself, so it works over any background. An overlay gradient has to match the color behind it.
+
+Rules:
+
+- Write `animation-timeline` after `animation`. The shorthand resets the timeline.
+- Declare the default outside the keyframes, as `--fade: 0px` does here.
+- Any value can go in the keyframes, including keywords. Stripe flips its navigation to `row-reverse` this way when a translation is too long to fit.
+- Write no fallback. Firefox has no scroll timelines, so the row scrolls there without the fade.
+
+Support: `animation-timeline` in Chrome 115 and Safari 26. Firefox has it in Nightly only.
+
+- Borrowed from: Stripe, in the navigation on stripe.com · Bramus Van Damme, [Detect if an element can scroll or not with only CSS](https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not/)
+- Docs: [MDN: scroll()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/scroll)
+
+Source: [Good CSS](https://good-css.com/specimen/styles-that-apply-only-when-a-scroller-overflows), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#styles-that-apply-only-when-a-scroller-overflows).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/subgrid-rows-shared-across-cards.md

@@ -0,0 +1,51 @@
+---
+topic: "good-css-subgrid-rows-shared-across-cards"
+title: "Subgrid rows shared across cards"
+tier: "reference"
+tags:
+  - "good-css"
+  - "layout"
+  - "subgrid"
+  - "rows"
+  - "shared"
+  - "across"
+  - "cards"
+summary: "Use it when cards in a row have parts that should line up, such as title, body and footer, whatever the length of their content."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Subgrid rows shared across cards
+
+Use it when cards in a row have parts that should line up, such as title, body and footer, whatever the length of their content.
+
+```css
+.cards {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+}
+
+.card {
+  display: grid;
+  grid-row: span 3;
+  grid-template-rows: subgrid;
+  row-gap: 0.5rem;
+}
+```
+
+Why it works:
+
+- Each card spans three rows of the parent grid and adopts those tracks. The tallest title in a row sets the title height for every card in that row.
+
+Rules:
+
+- The span must equal the number of parts in the card. Without `grid-row: span N` every part piles into one row.
+- Set `row-gap` on the card, or it inherits the parent's gap between its parts.
+
+Support: Chrome 117, Firefox 71, Safari 16.
+
+- Borrowed from: Josh W. Comeau, [Brand New Layouts with CSS Subgrid](https://www.joshwcomeau.com/css/subgrid/), 2025-11-25 · Kevin Powell, [Subgrid & Container Queries change how we can create layouts](https://www.youtube.com/watch?v=Zddz_R1RnfM), 2023-10-26
+
+Source: [Good CSS](https://good-css.com/specimen/subgrid-rows-shared-across-cards), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#subgrid-rows-shared-across-cards).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/tabular-numbers.md

@@ -0,0 +1,40 @@
+---
+topic: "good-css-tabular-numbers"
+title: "Tabular numbers"
+tier: "reference"
+tags:
+  - "good-css"
+  - "text"
+  - "media"
+  - "tabular"
+  - "numbers"
+summary: "Use it on any number that changes or sits in a column, such as prices, tables, timers and counters."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Tabular numbers
+
+Use it on any number that changes or sits in a column, such as prices, tables, timers and counters.
+
+```css
+.price,
+td,
+time { font-variant-numeric: tabular-nums; }
+```
+
+Why it works:
+
+- Every digit gets the same width, so columns line up and a ticking value does not shift its neighbors.
+
+Rules:
+
+- Do not set it globally. Proportional digits read better in prose.
+- The font must ship tabular figures, or nothing changes.
+
+Support: Chrome 52, Firefox 34, Safari 9.1.
+
+- Borrowed from: Rauno Freiberg, [Web Interface Guidelines](https://interfaces.rauno.me/) · [Vercel Web Interface Guidelines](https://vercel.com/design/guidelines)
+
+Source: [Good CSS](https://good-css.com/specimen/tabular-numbers), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#tabular-numbers).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/textarea-that-grows-with-its-content.md

@@ -0,0 +1,73 @@
+---
+topic: "good-css-textarea-that-grows-with-its-content"
+title: "Textarea that grows with its content"
+tier: "reference"
+tags:
+  - "good-css"
+  - "interaction"
+  - "textarea"
+  - "grows"
+  - "content"
+summary: "Use it for any multi-line input, such as a chat composer or a comment box. `field-sizing: content` sizes the textarea to its text, so there is no auto-grow script and no hidden mirror element."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Textarea that grows with its content
+
+Use it for any multi-line input, such as a chat composer or a comment box. `field-sizing: content` sizes the textarea to its text, so there is no auto-grow script and no hidden mirror element.
+
+```css
+textarea {
+  field-sizing: content;
+  min-height: 3lh;
+  max-height: 12lh;
+  resize: none;
+}
+```
+
+The height snaps to each new line. To animate it, wrap the textarea and let a `ResizeObserver` copy its height onto the wrapper. The wrapper transitions.
+
+```html
+<div class="field"><textarea></textarea></div>
+```
+
+```css
+.field {
+  box-sizing: content-box;
+  overflow: clip;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .field { transition: height 0.2s var(--ease-out, ease-out); }
+}
+```
+
+```js
+const textarea = document.querySelector(".field textarea");
+
+new ResizeObserver(([entry]) => {
+  textarea.parentElement.style.height = `${entry.borderBoxSize[0].blockSize}px`;
+}).observe(textarea);
+```
+
+Why it works:
+
+- The browser measures the text itself, so the size is right on first paint, on paste and on window resize.
+- The textarea reaches its final height at once. Only the wrapper animates, and it clips the textarea until it catches up.
+- `lh` is one line at the element's own line-height. `min-height: 3lh` means three lines at any font size.
+
+Rules:
+
+- Bound it with `min-height` and `max-height`. A fixed `height` brings the fixed size back. Past `max-height` the textarea scrolls.
+- Put the border and background on the wrapper and leave the textarea bare. The box the user sees must be the one that animates.
+- Keep the wrapper `content-box`. The observer writes the textarea's full height, and a `border-box` wrapper would subtract its own border from it.
+- Write no fallback. A browser without `field-sizing` shows a fixed textarea that scrolls.
+
+Support: Chrome 123, Safari 26.2, Firefox 152. Baseline newly available since June 2026.
+
+- Borrowed from: Jhey Tompkins, @jh3yy on X, 2026-10-01
+- Docs: [MDN: field-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/field-sizing) · Adam Argyle, [CSS field-sizing](https://developer.chrome.com/docs/css-ui/css-field-sizing) · [MDN: ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+
+Source: [Good CSS](https://good-css.com/specimen/textarea-that-grows-with-its-content), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#textarea-that-grows-with-its-content).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/the-reset.md

@@ -0,0 +1,96 @@
+---
+topic: "good-css-the-reset"
+title: "The reset"
+tier: "reference"
+tags:
+  - "good-css"
+  - "foundations"
+  - "reset"
+summary: "Start every new project with it. In an existing project add one rule at a time and look at the result, because `min-width: 0` and the font rules change how things already render."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# The reset
+
+Start every new project with it. In an existing project add one rule at a time and look at the result, because `min-width: 0` and the font rules change how things already render.
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+:root {
+  interpolate-size: allow-keywords;
+  scrollbar-gutter: stable;
+  text-wrap: pretty;
+  overflow-wrap: break-word;
+  font-synthesis: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  margin: 0;
+  min-height: 100svh;
+}
+
+h1, h2, h3, h4 { text-wrap: balance; }
+
+img, svg, video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+input, textarea, select { font-size: max(16px, 1rem); }
+
+button, a, [role="button"] { touch-action: manipulation; }
+
+button, [role="button"] {
+  user-select: none;
+  -webkit-user-select: none;
+}
+```
+
+Why it works:
+
+- `min-width: 0` lets flex and grid items shrink below their content. Their default is `min-width: auto`, which is why a long word or a wide child overflows a grid.
+- `interpolate-size: allow-keywords` turns on transitions to and from `auto` for the whole page. [Accordion that animates its height](https://good-css.com/#accordion-that-animates-its-height) depends on it.
+- `text-wrap: pretty` tells the browser to spend more effort on line breaks. It avoids a last line that holds one short word, and Safari also evens out the ragged edge. The property inherits, so `:root` reaches every element.
+- `text-wrap: balance` gives headings lines of similar length.
+- `font-synthesis: none` stops the browser from faking a bold or italic that the font file lacks.
+- The two smoothing rules switch macOS from subpixel to grayscale antialiasing. Text renders thinner and matches the weight shown in Figma. Other systems ignore them.
+- `100svh` is the viewport height with the mobile browser toolbars showing, so the page never sits behind them. `100dvh` changes as the toolbar moves and re-lays out the page each time.
+- `scrollbar-gutter: stable` reserves the scrollbar's space. The page does not shift sideways when a modal locks scrolling or when content grows past one screen.
+- `overflow-wrap: break-word` breaks a word that cannot fit on a line, such as a URL, where it would otherwise run out of its box. [Long text that wraps, truncates or clamps](https://good-css.com/#long-text-that-wraps-truncates-or-clamps) has the rest.
+- `-webkit-text-size-adjust: 100%` stops iOS from inflating text in landscape.
+- `-webkit-tap-highlight-color: transparent` removes the gray flash iOS and Android paint over a tapped element.
+- Inputs at 16px or more stop iOS Safari from zooming the page on focus. It does not zoom back out.
+- `touch-action: manipulation` tells the browser the element never double-tap zooms, so `click` fires without the wait.
+- `user-select: none` on controls stops a long press from selecting a button's label.
+
+Rules:
+
+- Load every weight and style the design uses. With `font-synthesis: none` a missing bold renders as regular.
+- With `min-width: 0` on everything, a sized image, icon or avatar in a flex row shrinks to make room for the text beside it. Give it `flex: none`.
+- The reset removes the tap highlight, so every pressable element needs its own `:active` state. [Press feedback](https://good-css.com/#press-feedback) has it.
+- Never fix input zoom with `user-scalable=no` or `maximum-scale=1`. That takes zoom away from people who need it.
+- Keep `user-select: none` to controls. Never set it on `body` or on links, because people copy text.
+- Text the user types inherits `pretty`, in `textarea` and `contenteditable`. If lines shift while typing, set `text-wrap: stable` on that element.
+- The reserved gutter puts centered content slightly off-center on a page too short to scroll. Chris Coyier documents this. Accept it.
+- `svh` is for documents and heroes. An app shell with UI pinned to the bottom uses `height: 100dvh`, so it tracks the toolbar. Emil Kowalski draws this line in his mobile-native skill.
+
+Support: `text-wrap: pretty` in Chrome 117 and Safari 26, ignored by Firefox. `scrollbar-gutter` in Chrome 94, Firefox 97, Safari 18.2. `interpolate-size` in Chrome 129 only. The rest works everywhere.
+
+- Borrowed from: Travis Arnold, @souporserious on X, 2025-04-02, "2025 CSS Reset" · Ayomidé Daniel, @aydahnizzy on X, 2025-10-10, for the font rules · `text-wrap: pretty` on everything is a house rule · Kevin Powell, [3 modern CSS properties to add to your reset](https://www.youtube.com/watch?v=qI5rXLJnxco), 2026-04-02, for `svh` and the gutter · Emil Kowalski, [mobile-native skill](https://github.com/emilkowalski/skills/blob/main/skills/mobile-native/SKILL.md), for the touch rules · Chris Coyier, [The Downsides of scrollbar-gutter: stable](https://blog.master.dev/the-downsides-of-scrollbar-gutter-stable-and-one-weird-trick/), 2025-12-03 · Ahmad Shadeed, [Defensive CSS](https://defensivecss.dev/), for `overflow-wrap` and the `flex: none` rule
+- Background: Jen Simmons, [Better typography with text-wrap pretty](https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/) · Adam Argyle, [CSS text-wrap: pretty](https://developer.chrome.com/blog/css-text-wrap-pretty)
+- Docs: [MDN: text-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-wrap) · [MDN: font-synthesis](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-synthesis) · [MDN: font-smooth](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-smooth)
+
+Source: [Good CSS](https://good-css.com/specimen/the-reset), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#the-reset).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/transition-a-custom-property-with-property.md

@@ -0,0 +1,70 @@
+---
+topic: "good-css-transition-a-custom-property-with-property"
+title: "Transition a custom property with @property"
+tier: "reference"
+tags:
+  - "good-css"
+  - "motion"
+  - "transition"
+  - "custom"
+  - "property"
+summary: "Use it when one state change should drive several values together, or when a script feeds a number such as pointer position or progress into CSS and the result should ease."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Transition a custom property with `@property`
+
+Use it when one state change should drive several values together, or when a script feeds a number such as pointer position or progress into CSS and the result should ease.
+
+```css
+@property --progress {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+.card:focus-within { --progress: 1; }
+
+@media (hover: hover) and (pointer: fine) {
+  .card:hover { --progress: 1; }
+}
+
+.card .icon {
+  display: inline-block;
+  rotate: calc(var(--progress) * 90deg);
+}
+
+.card .bar {
+  transform-origin: left;
+  scale: calc(0.25 + var(--progress) * 0.75) 1;
+}
+
+.card .more { opacity: var(--progress); }
+
+@media (prefers-reduced-motion: no-preference) {
+  .card { transition: --progress 0.3s var(--ease-out, ease-out); }
+}
+```
+
+Why it works:
+
+- An unregistered custom property is a string, and a string cannot be interpolated. Registering it with a `syntax` gives it a type, and the browser then transitions it like any number.
+- One transition with one easing drives every dependent value. The children derive theirs with `calc()`, so the parts stay in step.
+- `inherits: true` passes the number down to the children that use it.
+
+Rules:
+
+- `initial-value` is required for every syntax except `"*"`.
+- `rotate`, `scale` and `translate` do nothing on an inline element. Give the element `display: inline-block` or another box type first.
+- A registration is global. Register each name once and keep the names specific.
+- A script only writes the variable, as in `el.style.setProperty("--x", "40%")`. The easing and duration stay in CSS.
+- Other useful types are `<length-percentage>` for a gradient position and `<angle>` for a conic gradient.
+
+Support: Chrome 85, Firefox 128, Safari 16.4.
+
+- Borrowed from: Stripe, on the stripe.com home page and its sales contact page
+- Docs: [MDN: @property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@property)
+
+Source: [Good CSS](https://good-css.com/specimen/transition-a-custom-property-with-property), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#transition-a-custom-property-with-property).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/whole-card-clickable-from-one-link.md

@@ -0,0 +1,71 @@
+---
+topic: "good-css-whole-card-clickable-from-one-link"
+title: "Whole card clickable from one link"
+tier: "reference"
+tags:
+  - "good-css"
+  - "interaction"
+  - "whole"
+  - "card"
+  - "clickable"
+  - "one"
+  - "link"
+summary: "Use it for cards, list rows and tiles where the whole area should navigate. It replaces an `<a>` wrapped around the card, which makes a screen reader read every word as the link text, and it replaces a click handler on a `div`."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Whole card clickable from one link
+
+Use it for cards, list rows and tiles where the whole area should navigate. It replaces an `<a>` wrapped around the card, which makes a screen reader read every word as the link text, and it replaces a click handler on a `div`.
+
+```html
+<article class="card">
+  <h3><a class="card-link" href="/reports/q3">Quarterly report</a></h3>
+  <p>Revenue grew in every region.</p>
+  <button type="button">Save</button>
+</article>
+```
+
+```css
+.card { position: relative; }
+
+.card-link::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.card-link:focus-visible { outline: 2px solid transparent; }
+
+.card:has(.card-link:focus-visible) {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.card :is(button, a:not(.card-link)) {
+  position: relative;
+  z-index: 1;
+}
+```
+
+Why it works:
+
+- The pseudo-element belongs to the link and covers the card, so a click anywhere activates the link. It is a real link, so open in new tab and the status bar URL still work.
+- The link text stays short. A screen reader announces "Quarterly report" and not the whole card.
+- `:has()` moves the focus ring from the small link to the card it activates.
+- Other controls sit above the overlay and keep their own clicks.
+
+Rules:
+
+- No element between the card and the link may be positioned. The overlay would size itself to that element.
+- The link's own ring is made transparent, never removed, as [One focus ring with `:focus-visible`](https://good-css.com/#one-focus-ring-with-focus-visible) requires. Write the full `2px solid transparent`. Safari ignores `outline-color` on its default ring.
+- Text under the overlay cannot be selected. Accept it.
+- Put hover styles on `.card:hover`, inside the query from [Hover styles only where hover exists](https://good-css.com/#hover-styles-only-where-hover-exists).
+
+Support: Chrome 105, Firefox 121, Safari 15.4.
+
+- Borrowed from: Heydon Pickering, [Cards](https://inclusive-components.design/cards/), for the stretched `::after` · Stripe, for moving the focus ring to the card with `:has()`
+
+Source: [Good CSS](https://good-css.com/specimen/whole-card-clickable-from-one-link), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#whole-card-clickable-from-one-link).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/upstream-guidance.md

@@ -0,0 +1,72 @@
+---
+topic: "good-css-upstream-guidance"
+title: "Good CSS scope and exclusions"
+tier: "reference"
+tags:
+  - "good-css"
+  - "scope"
+  - "exclusions"
+summary: "Upstream principles, intentionally excluded techniques, deferred ideas, and references."
+---
+
+# good-css
+
+Strong opinions about modern CSS technique, borrowed from experts, for agents to know and reach for.
+
+Each one is described in plain CSS because that is the common language. None of them depends on a class name, a file layout or a framework: the properties and values are the technique. Write them in whatever the project already uses, whether that is a stylesheet, Tailwind utilities or StyleX objects. Names in the examples are illustrative.
+
+The bias throughout: one declaration that adapts on its own beats a set of breakpoints, and a CSS feature beats a script. JavaScript appears only where it makes the result nicer, and the CSS works without it.
+
+Every entry has the same shape: when to use it, the CSS, why it works, the rules, and who it is borrowed from.
+
+## Foundations
+
+## Layout
+
+## Spacing and shape
+
+## Text and media
+
+## Interaction
+
+## Motion
+
+## Show and hide
+
+## Scroll and viewport
+
+## Left out on purpose
+
+Decided on 2026-10-01. Do not add these back.
+
+- **The layout half of Travis Arnold's reset.** `* { grid-area: 1 / 1 / 1 / 1 }`, a 12-column grid on `body`, and `display: contents` on `div` and every sectioning element. It stacks everything in one cell and removes the box of every container, which breaks [Content grid with breakouts](https://good-css.com/#content-grid-with-breakouts) and any component that styles a `div`.
+- **`* { text-box: trim-both cap alphabetic }`** in the reset. It shrinks every text block. A one-line paragraph at 16px/1.5 went from 25px tall to 11px and a button from 40px to 27px. [Label centered on its letters with `text-box`](https://good-css.com/#label-centered-on-its-letters-with-text-box) is the scoped version, for labels only.
+- **`text-rendering: optimizeLegibility`.** MDN recommends `auto` for body text.
+
+## Next
+
+Held for later:
+
+- Scroll-driven reveal with `animation-timeline: view()`. Chrome and Safari 26 have it. Firefox does not.
+- Customizable `<select>` with `appearance: base-select`. Safari 27 shipped it in September 2026 and Firefox has it behind a flag.
+- One `box-shadow` built from independent layers, from Stripe's docs site. Marked maybe on 2026-10-01.
+
+## References
+
+Cloned into `refs/`, which git ignores. They drive decisions here and are not copied wholesale.
+
+How to write a skill, for when this list becomes one:
+
+- Matt Pocock, [mattpocock/skills](https://github.com/mattpocock/skills) at `refs/mattpocock-skills`
+- poteto, [cursor/plugins, pstack/skills](https://github.com/cursor/plugins/tree/main/pstack/skills) at `refs/cursor-plugins/pstack/skills`
+- Emil Kowalski, [emilkowalski/skills](https://github.com/emilkowalski/skills) at `refs/emilkowalski-skills`
+
+What comes from Emil Kowalski, and what stays with him:
+
+- This list borrows the declarations every project should ship: [Motion tokens](https://good-css.com/#motion-tokens), [Press feedback](https://good-css.com/#press-feedback), the touch rules in [The reset](https://good-css.com/#the-reset), [Content clear of the notch](https://good-css.com/#content-clear-of-the-notch) and [Hover styles only where hover exists](https://good-css.com/#hover-styles-only-where-hover-exists).
+- His skills keep the judgment. Use them directly for deciding whether something should animate, designing or reviewing motion, springs, gestures and drag, and checking a web app on a real phone. The ones to reach for are `animate`, `review-animations`, `improve-animations`, `find-animation-opportunities` and `mobile-native`.
+- When the two disagree on a value, his skill wins and this list gets corrected.
+
+Source: [Good CSS](https://good-css.com), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/manifest.json

@@ -0,0 +1,12 @@
+{
+  "id": "daydream.good-css",
+  "name": "Good CSS",
+  "description": "Pinned CSS techniques and playgrounds that agents read before they author or review CSS.",
+  "version": "0.3.0",
+  "api": "3.1",
+  "contributes": {
+    "knowledge": "knowledge",
+    "instructions": "Good CSS supplies locally pinned CSS techniques and editable playgrounds. Before authoring or reviewing CSS, read daydream.good-css/procedures.md with knowledge_read, then search for the task's techniques with knowledge_search and read the matching recipes. The procedures link Daydream preview constraints. This plugin registers no lint gates."
+  },
+  "built": "dist/index.js"
+}

package/package.json

@@ -1,6 +1,17 @@
 {
   "name": "@daydreamui/good-css",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.0",
+  "type": "module",
+  "description": "Pinned CSS techniques and playgrounds that agents read before they author or review CSS.",
+  "keywords": [
+    "daydream-plugin"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/martinbavio/daydream-plugins.git",
+    "directory": "plugins/daydream.good-css"
+  }
+}

package/playgrounds/base.css

@@ -0,0 +1,57 @@
+/* Teaching fixture only; recipe declarations live in the other sheet. */
+* {
+  box-sizing: border-box;
+}
+html {
+  background: #f5f4ef;
+  color: #26352d;
+  font:
+    16px/1.5 system-ui,
+    sans-serif;
+}
+body {
+  margin: 0;
+  padding: 1.5rem;
+}
+h1,
+h2,
+p {
+  margin: 0;
+}
+h1 {
+  font-size: 1.5rem;
+  margin-block-end: 1.5rem;
+}
+h2 {
+  font-size: 1.2rem;
+}
+article,
+aside,
+.main,
+.panel {
+  padding: 1rem;
+  background: #e0e8df;
+}
+section > h2 {
+  padding: 1rem;
+  background: #d2decd;
+}
+footer {
+  padding: 0.5rem;
+  background: #c9d8c5;
+}
+.slot {
+  margin-block: 1rem;
+}
+.card {
+  overflow-wrap: anywhere;
+}
+.card > * {
+  margin: 0;
+}
+.cards h2 {
+  background: #c9d8c5;
+}
+.cards p {
+  background: #eaf0e7;
+}