Teach 2.0's plain CSS in the Boost guidelines and skills

2.0.0 took Tailwind out of the stack, but the texts Boost copies into
every application still taught its utilities: the core guideline said
"built on Tailwind CSS", the always-on material-3 guideline wrote every
rule as `bg-primary`, `type-*`, `rounded-corner-*`, `state-layer` and
`medium:`, and both skills' tables and examples did the same. None of
those classes exists in 2.0's stylesheets, so an agent following the
guideline wrote markup that compiled to nothing. Found moving ReStride
onto 2.0: its CLAUDE.md, and SealShare's, carry these texts.

The guidelines and skills now teach what 2.0 has: component and layout
component props (`gap="space200"`, `hide-from="medium"`), the `md-type-*`,
`md-ink-*` and interaction classes, and `--md-sys-*` tokens in the
application's own CSS, with breakpoints as range media queries.
UPGRADE.md §1, §2 and §4 describe the finished move instead of the
in-between state, and header comments that pointed at the removed
tokens/utilities.css and tailwind.css, or called a component "still
Tailwind", say what is true now.

BoostVocabularyTest runs DesignGuard over the code in every shipped
guideline and skill (fenced Blade and CSS, and each inline class list),
so a text that teaches a class the stylesheets do not define fails the
suite; it finds 268 violations in the texts as 2.0.0 shipped them. The
guard's own table of what it reports is exempt. BoostResourcesTest now
asks the design skill for each breakpoint's prop value and media query
instead of the removed `medium:` variants.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

resources/css/components/field.css

@@ -62,9 +62,9 @@
      * under half the `large` breakpoint's 1200px, a little over half the `expanded` one's, and holds
      * about the 70 characters body-large reads best at — a measure of text, so it is in rem and grows
      * with the text. It is a ceiling, not a width — a narrower pane still gets a narrower field. A
-     * width rule from the call site beats it, because an application's CSS and a utility both
-     * outrank this layer, and `full` takes it off for a field that really is the width of its pane (a
-     * search-and-filter row, an editor). Below `medium` nothing is bounded. */
+     * width rule from the call site beats it, because an application's CSS outranks this layer, and
+     * `full` takes it off for a field that really is the width of its pane (a search-and-filter row,
+     * an editor). Below `medium` nothing is bounded. */
     @media (width >= 600px) {
         [data-md-field]:not([data-md-full]) {
             max-width: 40rem;

resources/css/components/menu.css

@@ -26,7 +26,7 @@
  * `--material-menu-surface`/`--material-menu-ink`, which the sheet's own copy of the list falls
  * back to instead (it is not a descendant of the popover).
  *
- * `sheet-at-compact`'s bottom sheet is `<x-bottom-sheet>` (still Tailwind): `[data-md-menu-sheet]`
+ * `sheet-at-compact`'s bottom sheet is `<x-bottom-sheet>` (bottom-sheet.css): `[data-md-menu-sheet]`
  * cancels its 24px padding and restyles a submenu to open in place under its item instead of
  * beside it (M3 calls submenus "best suited to large screens").
  *

resources/css/components/progress.css

@@ -11,9 +11,8 @@
  *
  * Linear mirrors in a right-to-left document unconditionally — M3's own rule for this indicator,
  * not the `mirror-rtl` a caller opts an icon into. The sizing here is a default only: an
- * application's own class, unlayered or in Tailwind's `utilities` layer, always outranks
- * `material.components`, so `w-*`/`size-*` still narrows or grows the indicator exactly as it did
- * before this file existed.
+ * application's own unlayered class always outranks `material.components`, so an `inline-size` or
+ * `block-size` of its own narrows or grows the indicator.
  *
  * resources/js/progress.js reads and writes `data-md-value`, `data-md-max`, `data-md-circular`,
  * `data-md-wavy` and `data-md-thick` — ProgressIndicator.kt, WavyProgressIndicator.kt and its

resources/css/foundation.css

@@ -26,7 +26,7 @@
  *
  * An application still building Tailwind keeps it in a separate entry and opens both entries with
  * `@layer properties, theme, base, material, components, utilities;`, so the `material` layers sit
- * above Tailwind's preflight and below its utilities (resources/css/tailwind.css's header).
+ * above Tailwind's preflight and below its utilities.
  */
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

resources/css/foundation/interaction.css

@@ -22,11 +22,10 @@
  * M3 never lets colour alone mark a link (docs/reference/m3/styles.md § Typography); give it
  * `md-ink-primary` where it should also read as primary.
  *
- * The same declarations as the `state-layer`, `focus-ring`, `touch-target` and `link` utilities
- * (tokens/utilities.css) the components still written in Tailwind use, but for two: the dragged
- * hook is `data-md-dragged` where the utility reads `data-dragged`, and `md-touch-target` is px
- * where the utility reads 3rem. In `material.base`, so a component's own rules, the text classes
- * and an application's rules all outrank them.
+ * They replace 1.x's `state-layer`, `focus-ring`, `touch-target` and `link` utilities, but for two
+ * changes: the dragged hook is `data-md-dragged` where the utility read `data-dragged`, and
+ * `md-touch-target` is px where the utility read 3rem. In `material.base`, so a component's own
+ * rules, the text classes and an application's rules all outrank them.
  */
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

resources/css/text.css

@@ -1,7 +1,7 @@
 /*
  * The text classes: a fixed, documented set for text on plain elements. A component sets its own
  * type and ink; these are for the headings, paragraphs and captions an application writes around
- * them, and the set the package's own views use for text once they leave Tailwind.
+ * them, and the set the package's own views use for their own text.
  *
  * Type — one per text element, the whole style at once (size, line height, weight, tracking;
  * tokens/type.css), never assembled by hand. Roles from docs/reference/m3/styles.md § Typography:
@@ -49,8 +49,7 @@
  *                             gives the eye
  *
  * In `material.text`, above every component: a text class on a component's root or on an element
- * inside it wins over the component's own type and ink. The `md-type-*` declarations are the
- * `type-*` utilities' (tokens/utilities.css), which the components still written in Tailwind use.
+ * inside it wins over the component's own type and ink.
  */
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

resources/css/tokens/state.css

@@ -6,7 +6,7 @@
  * and a disabled container at 12%.
  *
  * The classes that draw them are foundation/interaction.css (`md-state-layer`, `md-focus-ring`,
- * `md-touch-target`, `md-link`), and utilities.css for the components still written in Tailwind.
+ * `md-touch-target`, `md-link`).
  * The tokens sit in `material.tokens`, so an application's own unlayered declaration wins.
  */
 

resources/css/tokens/type.css

@@ -10,8 +10,8 @@
  *     <h2 class="md-type-title-lg">…</h2>
  *     <p class="md-type-emphasized-headline-md md-tabular">…</p>
  *
- * The `md-type-*` classes are text.css; the `type-*` utilities of the components still written in
- * Tailwind are utilities.css, with the same declarations.
+ * The `md-type-*` classes are text.css. An application's own CSS sets a style whole the same way,
+ * `font: var(--md-sys-typescale-title-lg)` with its `-tracking` as `letter-spacing`.
  *
  * The brand typeface is Google Sans Flex (font.css). Emphasized styles are one weight step
  * heavier and fully rounded ("ROND" 100) — the axis that typeface exists for, verified by