@uxelle/skills 0.2.0-beta.2

package/skills/uxelle-design-harness/how-to-page-layout.md

@@ -0,0 +1,203 @@
+# How to: page layout and responsiveness
+
+The home for laying out a React **page body** and making it responsive. (A2UI
+chat surfaces are inherently narrow — see [a2ui.md](a2ui.md).)
+
+Page chrome comes from theme variables (do not invent `uxl-breakpoint-*` singular):
+
+- `--uxl-breakpoints-max-container-width` — cap the body column so large viewports keep side space
+- `--uxl-breakpoints-margin` — padding **around** the body
+- `--uxl-breakpoints-gutter` — gap **between** columns (`fr` grids, card rows)
+
+Stacks inside the column use `--uxl-theme-layout-spacing-*` ([spacing-steps.md](spacing-steps.md)).
+
+## Content column
+
+One capped, centered column carries the page:
+
+```tsx
+<Layout
+  display="flex"
+  flexDirection="column"
+  width="100%"
+  maxWidth="var(--uxl-breakpoints-max-container-width)"
+  mh="auto"
+  p="var(--uxl-breakpoints-margin)"
+  gap="var(--uxl-theme-layout-spacing-medium-12)"
+>
+```
+
+`mh="auto"` centers the column; `medium-12` is the gap between page sections. Cap
+with the token, not a literal (`1120px` / `1600px`), and keep page internals off
+the theme-internal `--uxl-theme-layout-*-gutter` / `*-margin`.
+
+If the host already renders `<main>` (the skip-link target), keep this column a
+`div`; otherwise set `as="main"`.
+
+**One-column reading content** (settings, a form-only view, or a form / FAQ /
+prose section inside a wider page) caps at the **reading measure** rather than the
+container token — see [Reading measure](#reading-measure).
+
+## Reading measure
+
+Text you read in a single column — a form, an FAQ, a paragraph block — is easiest
+to scan at roughly `maxWidth="600px"`. Treat that as one shared measure, applied
+the same way everywhere it appears:
+
+- **Cap the whole section, not the inner control.** Put `width="100%"`,
+  `maxWidth="600px"`, `mh="auto"` on the section wrapper so its heading, body,
+  fields, or list share one left edge and one measure. Capping only the form (or
+  only the accordion) leaves the heading full-width and the block stranded left of
+  center.
+- **Center it.** A block capped narrower than its column must set `mh="auto"`, or
+  it reads as left-aligned and unbalanced against the wider content around it.
+- **Keep the measure consistent across siblings.** When a page stacks reading
+  sections — e.g. an FAQ above a demo form — give them the *same* `600px` measure
+  and centering so they line up as one column instead of each finding its own
+  width.
+- **A whole one-column page** (account settings, a form-only view) caps its page
+  column at `600px` the same way — keep the margin and centering
+  ([recipe-settings-page.md](recipe-settings-page.md)).
+
+Do not apply `600px` to tables, card grids, or mixed / multi-column layouts —
+those keep `--uxl-breakpoints-max-container-width`.
+
+## Columns and cards
+
+```tsx
+<Layout display="grid" gridTemplateColumns="1fr 1fr" gap="var(--uxl-breakpoints-gutter)">
+```
+
+Put gutter on column gaps, margin on the outer padding — not the other way round.
+
+## Responsiveness
+
+Design mobile-first and let layouts reflow up. Reach for methods in this order.
+
+### 1. Intrinsic reflow (primary method)
+
+Prefer fluid CSS that adapts with no breakpoint values and no JS:
+
+- **Grids that reflow by width** — `repeat(auto-fit, minmax(MIN, 1fr))` so the
+  column count follows available space:
+
+```tsx
+<Layout
+  display="grid"
+  gridTemplateColumns="repeat(auto-fit, minmax(16rem, 1fr))"
+  gap="var(--uxl-breakpoints-gutter)"
+>
+```
+
+- **Clusters that wrap** — `flexWrap="wrap"` for chip rows and toolbars that may
+  need a second line.
+- **Fluid measures** — `minmax()` / `clamp()` for column widths.
+- **The chrome tokens** already remap per breakpoint, so the capped column,
+  margin, and gutter tighten on small screens for free.
+
+This covers page columns, card/metric/feature grids, and most cluster wrapping.
+
+### 2. Component-native responsiveness
+
+Prefer components that adapt themselves (`Navigation`, `Sheet`, `Hero`
+`contentDirection`) over app-level logic. Confirm a component's built-in behavior
+in its doc before adding anything.
+
+### 3. Token-driven JS (narrow fallback)
+
+CSS media queries cannot read `var()`, so when a switch is bound to a component
+**prop** and cannot be done with flow — e.g. `ButtonGroup` `direction` row<->column,
+or swapping nav for a drawer — read the theme breakpoint bound and track it. Never
+write the px literal:
+
+```tsx
+import { useEffect, useState } from "react";
+
+// Tracks a theme breakpoint bound. The px comes from the theme, so it stays
+// correct across platforms/themes — do not hardcode it.
+function useBreakpointUp(
+  band: "tablet" | "desktop" | "desktop-plus" = "tablet",
+): boolean {
+  const [up, setUp] = useState(true); // desktop-first default avoids a mobile flash on hydrate
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const min = getComputedStyle(document.documentElement)
+      .getPropertyValue(`--uxl-theme-layout-${band}-screen-width-min`)
+      .trim();
+    if (!min) return;
+    const media = window.matchMedia(`(min-width: ${min})`);
+    const sync = () => setUp(media.matches);
+    sync();
+    media.addEventListener("change", sync);
+    return () => media.removeEventListener("change", sync);
+  }, [band]);
+  return up;
+}
+
+const tabletUp = useBreakpointUp("tablet");
+```
+
+Bands: `tablet` (from `--uxl-theme-layout-tablet-screen-width-min`), `desktop`,
+`desktop-plus`. Use this only where intrinsic reflow cannot express the change.
+
+### Reflow patterns at a glance
+
+- **Grids**: 1 -> 2 -> 3(-4)-up via `auto-fit` / `minmax`; use the JS helper only
+  when a component needs an explicit count.
+- **Header / query clusters**: title over actions, search full-width with
+  filters/export below, when narrow; one row when wide (see below).
+- **Navigation**: collapse to an `IconButton` menu opening a `Sheet` / `Menu`
+  drawer when narrow; verify `Navigation`'s built-in behavior first.
+- **Tables**: `Table` scrolls horizontally when narrow (no stacked-row API); use
+  `PaginationSimple` where full `Pagination` is too wide.
+- **Hero / media**: `Hero` `contentDirection` handles narrow stacking; related-field
+  grids and summary lists collapse to one column.
+- **Touch targets**: catalog controls meet 24x24 CSS px — do not shrink hit areas.
+
+## Keep controls with what they operate
+
+Group a control with the surface it drives; `medium-12` is the gap between
+*sections*, not between a control and its target.
+
+- **Page navigation** (`Navigation` / `NavLink`) changes routes — don't repeat
+  those destinations as in-page tabs.
+- **Data navigation** (tabs that swap a table's rows) sits on that table, in
+  `Table` `topSlot` first — not under the page title. See [recipe-data-table-page.md](recipe-data-table-page.md).
+- **One-row clusters** (title + page actions, search + export): keep
+  `flexWrap="nowrap"` (Layout default). `Lockup` and `Textfield` are `width: 100%`,
+  so let the `Lockup` be the flex sibling that shrinks and put `flexShrink={0}` on
+  the action cluster. Bound a search field with `width="16rem"` `flexShrink={0}`.
+  To stack when tight, switch the header `flexDirection` to `column` below tablet —
+  not `flexWrap="wrap"`.
+- **Related form fields** (first/last name, city/state/ZIP): `display="grid"` with
+  `fr` tracks and `small-4` gap; collapse to one column when narrow. See
+  [recipe-form-section.md](recipe-form-section.md).
+
+## Action clusters
+
+Two or more text `Button`s in a `ButtonGroup` sit in a **row from tablet up** and
+a **column below tablet**, using the `direction` prop (with `fullWidth` when
+stacked). Do not add app CSS `flex-direction` or invented breakpoints.
+
+```tsx
+const tabletUp = useBreakpointUp("tablet");
+
+<ButtonGroup
+  direction={tabletUp ? "row" : "column"}
+  fullWidth={!tabletUp}
+  aria-label="Form actions"
+>
+```
+
+**Switch** (row/column): form Save/Cancel, dialog confirm/cancel, page
+Delete/Upload, banner CTAs with two+ text buttons.
+
+**Stay row** at every width: `Navigation` trailing, a table query bar
+(Filter/Export beside search), icon-only clusters. Do not use the tablet switch to
+restyle card grids — those reflow intrinsically ([recipe-card-grid.md](recipe-card-grid.md)).
+
+## A2UI
+
+Chat adapters allow only `var(--uxl-theme-layout-spacing-*)` (or `0`) — no
+breakpoint chrome tokens and no `matchMedia`. Default to a single column; for
+action clusters use `"direction": "column"`. See [a2ui.md](a2ui.md).

package/skills/uxelle-design-harness/principles.md

@@ -0,0 +1,72 @@
+# Design principles
+
+International Typographic (Swiss) principles, each mapped to a concrete uxElle
+mechanism. These apply to every experience. They are **context-aware**: product
+surfaces are maximally calm and dense-but-legible; marketing surfaces are
+expressive, but within the *same* grid, hierarchy, and limited palette.
+
+## Principles -> mechanism
+
+- **Grid and alignment.** Lay content on one grid: a capped, centered column
+  (`--uxl-breakpoints-max-container-width`, `mh="auto"`, `--uxl-breakpoints-margin`)
+  and `fr` tracks with `--uxl-breakpoints-gutter`. Everything aligns to it.
+  See [how-to-page-layout.md](how-to-page-layout.md).
+- **Hierarchy.** Lead with one clear focal point per view. Exactly one `h1`,
+  unbroken heading ranks, and a small set of `Text` type roles (Display for
+  headlines, Body for copy). Let size and weight — not color — carry rank.
+- **Restraint / minimalism.** Prefer fewer elements. Few type roles, few
+  accents, one dominant brand band per view. If a divider, box, or color is not
+  doing a job, remove it. Whitespace is the default separator.
+- **Whitespace and rhythm.** Space is structural. Use the ramp deliberately:
+  tight stacks `micro`, related controls `small-4`, card/section padding
+  `medium-8`, page-section gaps `medium-12`, hero breathing `large-13`+.
+  See [spacing-steps.md](spacing-steps.md).
+- **Clarity and legibility.** Objective, plain language. Render copy with `Text`
+  so type, line-height, and contrast come from the theme; never set font-size or
+  hex in app CSS.
+- **Consistency.** Compose catalog components and `--uxl-*` tokens, not bespoke
+  markup. The same job looks the same everywhere.
+- **Feedback and state.** Design the empty, loading, and error states, not only
+  the happy path. Use `Banner` / status palettes for messages and
+  `Skeleton` / `Spinner` for pending work. See [recipe-states.md](recipe-states.md).
+- **Responsiveness.** Mobile-first. Build within the breakpoint system with
+  intrinsic CSS (flex-wrap, `minmax`, `auto-fit`) so layouts reflow without px
+  literals. See [how-to-page-layout.md](how-to-page-layout.md).
+- **Color discipline.** Product surfaces stay on `default` / `default-subtle`
+  plus semantic status; marketing surfaces add brand bands for emphasis. Never
+  hardcode color; status is never signaled by color alone. See
+  [how-to-color.md](how-to-color.md).
+- **Objectivity, content-first.** Let real content lead. On marketing surfaces
+  that means concrete proof — metrics, customer/integration logos, testimonials —
+  over decoration.
+
+## Marketing composition (distilled)
+
+A dependable rhythm for a public page, each section mapped to a piece. Keep one
+brand accent, generous section spacing, and a strong grid throughout.
+
+1. **Hero** — value proposition + primary/secondary action + product visual
+   ([recipe-hero.md](recipe-hero.md)).
+2. **Trust bar** — customer or integration logos ([recipe-logo-wall.md](recipe-logo-wall.md)).
+3. **Feature sections** — alternating media + copy, optionally tab-switched
+   ([recipe-feature-section.md](recipe-feature-section.md)).
+4. **Stat tiles** — a few large figures with labels ([recipe-stat-callouts.md](recipe-stat-callouts.md)).
+5. **Testimonials** — quote + attribution ([recipe-testimonial.md](recipe-testimonial.md)).
+6. **Pricing** — comparable tiers with one recommended ([recipe-pricing.md](recipe-pricing.md)).
+7. **Closing CTA** — a single decisive action ([recipe-cta-band.md](recipe-cta-band.md)).
+8. **Footer** — categorized links and legal ([recipe-footer.md](recipe-footer.md)).
+
+The whole flow is assembled in [recipe-landing-page.md](recipe-landing-page.md).
+
+## Product vs marketing
+
+| | Product | Marketing |
+|---|---|---|
+| Palette | `default` / `default-subtle` + status | + brand bands for emphasis |
+| Density | Compact, information-dense | Airy, one idea per band |
+| Type | Restrained; Body-led | Expressive; Display-led headlines |
+| Motion / accents | Minimal | `DynamicAngle*` accents, still restrained |
+| Goal | Get the task done | Build trust and convert |
+
+Same grid, same tokens, same components. The difference is emphasis, not a
+different system.

package/skills/uxelle-design-harness/recipe-app-chrome.md

@@ -0,0 +1,168 @@
+# Recipe: app chrome
+
+## When
+
+React app frame: skip link, [`Navigation`](../uxelle-components/Navigation.md), scrolling `<main>`, optional [`Footer`](../uxelle-components/Footer.md). Serves both product and marketing shells.
+
+## When not
+
+- Not an `AppChrome` / `PageShell` component.
+- Theme CSS and `data-*`: [how-to-host.md](how-to-host.md).
+- A2UI chat surfaces: skip link, 100% viewport shell, and html `data-*` are host-owned. Do not emit this recipe as A2UI. Optional `A2uiNavigation` / `A2uiFooter` only when the host already has a surface.
+
+## Regions
+
+skip link → `Navigation` (header) and/or `NavigationSide` (side rail wrapping `NavigationSideGroup` rows) → `<main id="main-content">` → content column ([how-to-page-layout.md](how-to-page-layout.md)) → optional `Footer` **inside that same `<main>`**
+
+## Spacing
+
+Nav is a catalog component (its own tokens). Main is the scrollport (no page padding). The **page column inside main** uses breakpoint margin / max-container-width (one-column settings may use `600px` — [recipe-settings-page.md](recipe-settings-page.md)). When present, `Footer` sits after that column in the same scrollport.
+
+Do not wrap `Footer` in extra `Layout` padding. Band padding is catalog-owned: two-band footers use `--uxl-breakpoints-padding-large-13`; a **single** band (legal-only, unused slot `null`) uses `--uxl-theme-layout-spacing-small-4` on the block axis. That is the related-controls step, not page-section (`medium-12`) or hero (`large-13`).
+
+## A11y
+
+[how-to-accessibility.md](how-to-accessibility.md) and skip-link CSS in [how-to-host.md](how-to-host.md). One `main`. `aria-current="page"` on the current `NavLink` or `NavigationSideItem` / `NavigationSideSubItem` (`activated`). Decorative `Logo` / `Icon` beside a visible product name: `aria-hidden`.
+
+`NavLink` in `Navigation` is **header** page navigation. `NavigationSide` is the side-rail **chrome** (`<aside>`, or a `<header>` when `mobile`). `NavigationSideGroup` is the **side** navigation landmark for the experience (a named `<nav>` of destination rows) and belongs in `NavigationSide` `centerSlotContent`. Do not wrap `NavigationSide` or `NavigationSideGroup` in another `nav`. Pass `aria-label` when more than one group is on the page. Accordion parents are not destinations — put section landing pages on `NavigationSideSubItem` children. Tabs that only change which rows appear in a table are **data** navigation — put them on the table ([recipe-data-table-page.md](recipe-data-table-page.md)), not in `centerSlot` and not as a second nav under the page title.
+
+## Side rail
+
+Compose `NavigationSide` with `centerSlotContent` of `NavigationSideGroup` + `NavigationSideItem` (optional `accordion` with `NavigationSideSubItem` children). Set `expanded={false}` on `NavigationSide` for the icon-only rail (groups inherit collapsed layout). SSR hosts must pass `mobile={true}` or `mobile={false}` so server and client markup match. Omit `mobile` only in client-only surfaces to follow the theme mobile range. Do not hard-code viewport widths. Trailing slot content on destination rows must be non-interactive. When the mobile layout is shown, the menu control opens a right `Sheet` with the same `centerSlotContent` and `bottomSlotContent` as the rail (labeled rows). Use `menuOpen` / `onMenuOpenChange` to close it after navigation.
+
+## Footer
+
+Optional — omit `Footer` when the page has none; place it **inside** `<main>` after the page column so it scrolls with the page. Pass **only the bands this experience needs**: `null` hides a band (same pattern as Navigation `bottomSlot={null}`), real nodes fill one; never leave a slot off in generated UI (omitted `undefined` fills catalog demo content). Do not wrap `Footer` in extra `p` / `gap` — band padding is catalog-owned (single band `small-4`, two bands the large step).
+
+Footer content architecture — the brand block, categorized link columns, the legal/utility bar, and how to lay each band out as a tidy cluster — lives in [recipe-footer.md](recipe-footer.md).
+
+## React
+
+Import from `@uxelle/components`. Put skip-link CSS in the host stylesheet.
+
+```tsx
+<Layout
+  display="flex"
+  flexDirection="column"
+  height="100%"
+  style={{
+    backgroundColor: "var(--uxl-color-switcher-background)",
+    overflow: "hidden",
+  }}
+>
+  <a className="uxl-skip-link" href="#main-content">
+    Skip to main content
+  </a>
+  <Layout flexShrink={0}>
+    <Navigation
+      bottomSlot={null}
+      leadingSlot={
+        <Text type="Condensed Alt" truncation width={false}>
+          Product name
+        </Text>
+      }
+      centerSlot={
+        <>
+          <NavLink label="Home" href="/" aria-current="page" />
+          <NavLink label="Settings" href="/settings" />
+        </>
+      }
+      trailingSlot={
+        <IconButton emphasis="low" size="small" iconName="search" aria-label="Search" />
+      }
+    />
+  </Layout>
+  <main id="main-content" tabIndex={-1} style={{ flexGrow: 1, minHeight: 0, overflow: "auto" }}>
+    <Layout
+      display="flex"
+      flexDirection="column"
+      width="100%"
+      maxWidth="var(--uxl-breakpoints-max-container-width)"
+      mh="auto"
+      p="var(--uxl-breakpoints-margin)"
+      gap="var(--uxl-theme-layout-spacing-medium-12)"
+    >
+      {/* page body — recipe-page-shell.md / recipe-form-section.md / recipe-data-table-page.md / recipe-settings-page.md */}
+    </Layout>
+    <Footer
+      topMainContent={null}
+      bottomMainContent={
+        <Text type="Body Small" width={false}>
+          © Organization
+        </Text>
+      }
+    />
+  </main>
+</Layout>
+```
+
+## Responsive
+
+- **Primary nav collapses on mobile.** Below tablet, swap the center [`NavLink`](../uxelle-components/NavLink.md) set for an [`IconButton`](../uxelle-components/IconButton.md) (`iconName="menu"`, `aria-label="Menu"`) in `trailingSlot` that opens a [`Sheet`](../uxelle-components/Sheet.md) (or [`Menu`](../uxelle-components/Menu.md)) holding the same destinations as a `List` of `NavLink`s. Confirm `Navigation`'s built-in behavior first and only add the drawer for what it does not handle; switch with `useBreakpointUp("tablet")` ([how-to-page-layout.md](how-to-page-layout.md#responsiveness)).
+- **Trailing utilities stay a row** at every width (search, language, Log in / Register) — [how-to-page-layout.md](how-to-page-layout.md#action-clusters).
+- **Footer** columns wrap intrinsically ([recipe-footer.md](recipe-footer.md)); band padding is catalog-owned. **Content column** reflows through the chrome tokens with nothing to set per breakpoint.
+
+## A2UI
+
+When-not for this recipe. Host owns chrome (skip link, viewport shell, html `data-*`). Catalog adapters: `A2uiNavigation`, `A2uiFooter`, `A2uiBannerAnnouncement` if the surface needs them — no `getUxelleRecipe("app-chrome")`. For the side rail only, `getUxelleRecipe("navigation-side")` from `@uxelle/a2ui`: trailing badges are `A2uiLabelBadge` with `"emphasis": "high"`; the account row is `A2uiList` + `A2uiListItem`. See [a2ui.md](a2ui.md).
+
+## Help and marketing chrome
+
+Use the same `Navigation` when there are **no** primary app links (help center, marketing). Pass `bottomSlot={null}` to hide the secondary bar. Unused **primary** slots must not be omitted — omitted (`undefined`) or `null` on leading/center/trailing still fill catalog demo content (`??`). Pass `centerSlot={false}` when there is no center nav.
+
+Nav trailing (search, language, Log in / Register) stays a **row** at every width — [how-to-page-layout.md](how-to-page-layout.md#action-clusters). Do not stack those controls on mobile.
+
+`Breadcrumbs` belong in the **page column**, not in `Navigation`. Related articles are an in-page `Link` list under the article, not nav or crumbs.
+
+```tsx
+<Navigation
+  bottomSlot={null}
+  leadingSlot={
+    <a href="/" aria-label="Home">
+      <Logo name="generic" width={40} interactive aria-hidden />
+    </a>
+  }
+  centerSlot={false}
+  trailingSlot={
+    <>
+      <LanguageSelector value="EN" />
+      <Button emphasis="low" size="small">
+        <Text type="Button" width>
+          Log in
+        </Text>
+      </Button>
+      <Button emphasis="high" size="small">
+        <Text type="Button" width>
+          Register
+        </Text>
+      </Button>
+    </>
+  }
+/>
+```
+
+In the page column, before the `h1`:
+
+```tsx
+<Breadcrumbs>
+  <Breadcrumb label="Help home" href="/" />
+  <Breadcrumb label="Sending money" href="/sending-money" />
+  <Breadcrumb label="Can I send exact amounts?" />
+</Breadcrumbs>
+```
+
+Last `Breadcrumb` is the current page (`currentPage` or no `href`). Ancestor crumbs pass `href`.
+
+After the article body, related links stay in the page column:
+
+```tsx
+<Layout as="section" display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-small-4)">
+  <Text type="Display Extra Small" as="h2" width={false}>
+    Related articles
+  </Text>
+  <Layout display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-micro-2)">
+    <Link href="/help/batch-payments">Sending exact amounts — Batch payments</Link>
+    <Link href="/help/guaranteed-rate">What if I miss my guaranteed rate?</Link>
+  </Layout>
+</Layout>
+```

package/skills/uxelle-design-harness/recipe-card-grid.md

@@ -0,0 +1,104 @@
+# Recipe: card grid
+
+A shared **piece**: a row of equal cells that reflows by width. Used for feature /
+benefit grids, case-study or product tiles, and dashboard groupings.
+
+Composes [`Card`](../uxelle-components/Card.md) (single content surface) or
+[`ProductCard`](../uxelle-components/ProductCard.md) (fixed top / center / bottom
+regions), plus [`Text`](../uxelle-components/Text.md),
+[`LabelBadge`](../uxelle-components/LabelBadge.md), and
+[`Image`](../uxelle-components/Image.md).
+
+## When
+
+Three-ish comparable cells in a row on a React page — features, benefits, case
+studies, product tiles, or dashboard cards.
+
+## When not
+
+- Not a `CardGrid` component — it is a `Layout` grid of cards.
+- Use `ProductCard` only when the tile needs fixed top / center / bottom regions;
+  otherwise `Card`.
+- Do not use `--uxl-breakpoints-margin` as the gap (that token is page inset) — use
+  `--uxl-breakpoints-gutter`.
+
+## Regions
+
+page column -> grid (`auto-fit` / `minmax` tracks, `gap` = gutter) -> `Card` /
+`ProductCard` cells
+
+## Responsive
+
+Reflows intrinsically — no JS, no breakpoint literals. `repeat(auto-fit,
+minmax(MIN, 1fr))` drops from 3-up to 2-up to 1-up as width shrinks; pick `MIN`
+(e.g. `16rem`) for the smallest comfortable card. Cards fill the row at every width.
+
+## Spacing
+
+`gap="var(--uxl-breakpoints-gutter)"`. Card inner padding is component-owned. The
+page column still uses [how-to-page-layout.md](how-to-page-layout.md).
+
+## A11y
+
+Name the group when the cards are a set (`aria-label` on the grid `Layout`).
+Headings inside cards continue page rank (`h2` under the page `h1`). A `ProductCard`
+CTA names itself; if the whole card is the link, the heading text is the name. See
+[how-to-accessibility.md](how-to-accessibility.md).
+
+## React
+
+Feature / benefit grid (`Card`):
+
+```tsx
+<Layout
+  display="grid"
+  gridTemplateColumns="repeat(auto-fit, minmax(16rem, 1fr))"
+  gap="var(--uxl-breakpoints-gutter)"
+  aria-label="Highlights"
+>
+  <Card
+    cardContentSlot={
+      <Layout display="flex" flexDirection="column" gap="var(--uxl-theme-layout-spacing-small-4)">
+        <Icon iconName="bolt" variant="sharpUnfilled" aria-hidden />
+        <Text type="Display Extra Small" as="h2" width={false}>Fast by default</Text>
+        <Text type="Body Medium" width={false}>Ship in minutes with sensible presets.</Text>
+      </Layout>
+    }
+  />
+  {/* repeat Card cells */}
+</Layout>
+```
+
+Case-study / product tiles (`ProductCard`, media + CTA):
+
+```tsx
+<Layout
+  display="grid"
+  gridTemplateColumns="repeat(auto-fit, minmax(18rem, 1fr))"
+  gap="var(--uxl-breakpoints-gutter)"
+  aria-label="Customer stories"
+>
+  <ProductCard
+    topSlotContent={
+      <>
+        <LabelBadge label="Case study" emphasis="low" />
+        <Text type="Display Extra Small" as="h2" width={false}>40% faster close</Text>
+        <Text type="Body Medium" width={false}>How Northwind cut cycle time.</Text>
+      </>
+    }
+    centerSlotContent={<Image src="/case/northwind.jpg" alt="" aspectRatio="16:9" />}
+    bottomSlotContent={
+      <Button fullWidth emphasis="medium">
+        <Text type="Button" width>Read story</Text>
+      </Button>
+    }
+  />
+  {/* repeat ProductCard cells */}
+</Layout>
+```
+
+## A2UI
+
+`A2uiLayout` has no `gridTemplateColumns` — stack `A2uiCard` / `A2uiProductCard` in
+a column with `var(--uxl-theme-layout-spacing-*)` `gap`. No
+`getUxelleRecipe("card-grid")` ([a2ui.md](a2ui.md)).

package/skills/uxelle-design-harness/recipe-cta-band.md

@@ -0,0 +1,91 @@
+# Recipe: CTA band
+
+A marketing **piece**: a full-width brand band near the end of a page with one
+decisive action. The closing counterpart to the [hero](recipe-hero.md).
+
+Composes [`Layout`](../uxelle-components/Layout.md) (the band),
+[`Lockup`](../uxelle-components/Lockup.md),
+[`ButtonGroup`](../uxelle-components/ButtonGroup.md), and optionally a
+[`DynamicAngle*`](../uxelle-components/DynamicAngleShapeSurface.md) accent.
+
+## When
+
+A single, decisive conversion moment: "Start free," "Talk to sales."
+
+## When not
+
+- One primary action (an optional secondary is fine) — not a menu of links.
+- Section heading is `h2`, not another `h1`.
+- Keep it to one dominant brand band per page; if the hero is loud, this can be
+  quieter, or vice versa.
+
+## Regions
+
+full-bleed `section` (`data-color-switcher`) -> capped inner column -> `Lockup`
+(`h2` + body) + `ButtonGroup`, optional decorative `DynamicAngle*`
+
+## Responsive
+
+The band is full-bleed; the inner column caps with
+`--uxl-breakpoints-max-container-width` and centers. Actions are a row on wide
+viewports and stack `fullWidth` below tablet (`useBreakpointUp("tablet")`). See
+[how-to-page-layout.md](how-to-page-layout.md#action-clusters).
+
+## Spacing
+
+`large-13`+ block padding for the band; `medium-8` between the lockup and actions
+([spacing-steps.md](spacing-steps.md)).
+
+## A11y
+
+Section `h2`; name the region with it. A `DynamicAngle*` accent is decorative
+(`aria-hidden`) and is muted under `prefers-reduced-motion`. Style all text with role
+tokens so contrast holds on the palette. See [how-to-accessibility.md](how-to-accessibility.md).
+
+## Color
+
+Set `data-color-switcher` on the **section** and style with `--uxl-color-switcher-*`
+role tokens — never hardcode hex. Pick the brand palette by the look you want
+([how-to-color.md](how-to-color.md)).
+
+## React
+
+```tsx
+<Layout
+  as="section"
+  data-color-switcher="brand-1"
+  display="flex"
+  justifyContent="center"
+  p="var(--uxl-theme-layout-spacing-large-13)"
+  style={{ backgroundColor: "var(--uxl-color-switcher-background)" }}
+>
+  <Layout
+    display="flex"
+    flexDirection="column"
+    alignItems="center"
+    gap="var(--uxl-theme-layout-spacing-medium-8)"
+    width="100%"
+    maxWidth="var(--uxl-breakpoints-max-container-width)"
+  >
+    <Lockup
+      topSlot={false}
+      title={<Text type="Display Medium" as="h2" width={false}>Ready to ship faster?</Text>}
+      body={<Text type="Body Medium" width={false}>Start free — no card required.</Text>}
+    />
+    <ButtonGroup
+      direction={tabletUp ? "row" : "column"}
+      fullWidth={!tabletUp}
+      aria-label="Get started"
+    >
+      <Button emphasis="high"><Text type="Button" width>Start free</Text></Button>
+      <Button emphasis="medium"><Text type="Button" width>Talk to sales</Text></Button>
+    </ButtonGroup>
+  </Layout>
+</Layout>
+```
+
+## A2UI
+
+No `getUxelleRecipe("cta-band")` — wrap an `A2uiLayout` (with `data-color-switcher`)
+around stacked `A2uiText` and an `A2uiButtonGroup` (`"direction": "column"`). See
+[a2ui.md](a2ui.md).