srcdev-nuxt-components 9.0.15 → 9.0.17

package/.claude/skills/components/page-hero-highlights.md

@@ -0,0 +1,224 @@
+# PageHeroHighlights Component
+
+## Overview
+
+`PageHeroHighlights` is a page-level layout template that creates a "hero + highlights strip" grid. It has:
+
+- A **header zone** — full edge-to-edge background, content drives the row height
+- A **highlights strip** — straddles the header/content boundary (overlaps both), sits above via `z-index`
+- A **content zone** — background fills behind the highlights strip, actual content sits below it
+
+The layout uses a 4-row CSS Grid with `subgrid` — no `translate`, negative margins, or absolute positioning.
+
+## Props
+
+| Prop                    | Type                                                                | Default     | Description                                                                                                                     |
+| ----------------------- | ------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `tag`                   | `"div" \| "section" \| "main"`                                      | `"div"`     | Root element tag                                                                                                                |
+| `highlightsEqualWidths` | `boolean`                                                           | `false`     | Equal-width grid columns for highlight items                                                                                    |
+| `highlightsJustify`     | `"start" \| "center" \| "end" \| "space-between" \| "space-around"` | `"start"`   | Alignment of highlight items along the main axis                                                                                |
+| `maxWidth`              | `string`                                                            | `undefined` | Cap the central content column (e.g. `"1064px"`). Gutters grow to enforce the constraint; below this width they hold at `16px`. |
+| `contentAlign`          | `"start" \| "center"`                                               | `"center"`  | When `maxWidth` is set: `"center"` grows gutters equally; `"start"` pins content to the left with a fixed `16px` left gutter.   |
+| `styleClassPassthrough` | `string \| string[]`                                                | `[]`        | Extra classes on the root element                                                                                               |
+
+## Slots
+
+| Slot         | Slot props              | Purpose                             |
+| ------------ | ----------------------- | ----------------------------------- |
+| `header`     | `{ headingId: string }` | Header zone — text, title, subtitle |
+| `highlights` | —                       | Highlight cards in the strip        |
+| `content`    | —                       | Page body content below the strip   |
+
+## Basic usage
+
+```vue
+<PageHeroHighlights>
+  <template #header>
+    <p class="page-heading-1">Dashboard</p>
+    <p class="page-body-normal">Overview of your account activity.</p>
+  </template>
+
+  <template #highlights>
+    <div class="card">Total Revenue: £24,500</div>
+    <div class="card">Active Users: 1,284</div>
+    <div class="card">Open Tasks: 37</div>
+  </template>
+
+  <template #content>
+    <p class="page-heading-2">Recent Activity</p>
+  </template>
+</PageHeroHighlights>
+```
+
+## Composition with other library components
+
+Each slot accepts any content, but these library components are natural fits:
+
+| Slot          | Component                         | Notes                                                                                           |
+| ------------- | --------------------------------- | ----------------------------------------------------------------------------------------------- |
+| `#header`     | `HeroText`                        | Heading with accent text, icon, and configurable size — wires `headingId` for `aria-labelledby` |
+| `#highlights` | `ServicesCard` (×n)               | Portrait cards with image, title, description, and CTA slot                                     |
+| `#highlights` | `LayoutGridByCols` wrapping cards | When you want a responsive column grid rather than a single row of cards                        |
+| `#content`    | Any content component             | Below the straddle — safe to use `LayoutRow`, `ServicesSection`, etc.                           |
+
+Example with `HeroText` in the header slot:
+
+```vue
+<PageHeroHighlights tag="section" max-width="1064px">
+  <template #header="{ headingId }">
+    <HeroText :heading-id="headingId" text="Welcome back" accent-text="Simon" />
+  </template>
+
+  <template #highlights>
+    <ServicesCard v-for="item in highlights" :key="item.id" v-bind="item">
+      <template #actions>
+        <LinkText :href="item.href">View</LinkText>
+      </template>
+    </ServicesCard>
+  </template>
+
+  <template #content>
+    <!-- page body -->
+  </template>
+</PageHeroHighlights>
+```
+
+## With aria-labelledby (section tag)
+
+When `tag="section"`, `aria-labelledby` is set automatically. Wire the heading id via the scoped slot prop:
+
+```vue
+<PageHeroHighlights tag="section">
+  <template #header="{ headingId }">
+    <h1 :id="headingId" class="page-heading-1">Dashboard</h1>
+  </template>
+  ...
+</PageHeroHighlights>
+```
+
+See [component-aria-landmark.md](../component-aria-landmark.md) for the full pattern.
+
+## Equal-width highlights
+
+By default, highlight items size to their content (`flex-wrap`). Pass `:highlights-equal-widths="true"` to switch to a grid where all items share equal column widths:
+
+```vue
+<PageHeroHighlights :highlights-equal-widths="true">
+  ...
+</PageHeroHighlights>
+```
+
+## Constraining the central column width
+
+Pass `max-width` to cap the content column. The gutters grow to enforce it — full-bleed backgrounds are unaffected and `subgrid` continues to work. Use `content-align` to pin to the left or centre:
+
+```vue
+<!-- Centred, capped at 1064px -->
+<PageHeroHighlights max-width="1064px" content-align="center">...</PageHeroHighlights>
+
+<!-- Left-pinned, capped at 1064px (right side takes remaining space) -->
+<PageHeroHighlights max-width="1064px" content-align="start">...</PageHeroHighlights>
+```
+
+See [css-grid-max-width-gutters.md](../css-grid-max-width-gutters.md) for the full pattern explanation.
+
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. The block below lists every available CSS custom property — update the values you need and delete the rest.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<PageHeroHighlights :style-class-passthrough="['my-page-hero']">
+  ...
+</PageHeroHighlights>
+
+<style>
+/* ─── PageHeroHighlights local overrides ────────────────────────────
+   Update values as needed. Delete tokens you are not overriding.
+   ─────────────────────────────────────────────────────────────────── */
+.page-hero-highlights {
+  &.my-page-hero {
+    /* Header zone */
+    /* --header-row-background-colour: darkblue; */
+
+    /* Highlights strip */
+    /* --highlights-row-item-gap: 1rem; */
+    /* --highlights-row-initial-item-offset: 1.2rem; */
+
+    /* Highlight cards */
+    /* --highlight-rows-gap: 1.2rem; */
+    /* --highlight-title-height: 1fr; */ /* see: highlight-title-baseline prop */
+    /* --highlight-padding-block-start: 1.2rem; */
+    /* --highlight-padding: 1.2rem; */
+    /* --highlight-background-color: white; */
+    /* --highlight-border: 1px solid black; */
+    /* --highlight-border-radius: 8px; */
+    /* --highlight-color: black; */
+
+    /* Content zone */
+    /* --content-row-background-color: var(--slate-01); */ /* transparent */
+    /* --content-row-start-gap: 1.2rem; */
+    /* --content-row-end-gap: 1.2rem; */
+
+    /* Content slot decorative border */
+    /* --content-slot-margin-block-start: 2.4rem; */
+    /* --content-slot-margin: var(--highlights-row-initial-item-offset); */
+    /* --content-slot-background-color: var(--slate-00); */
+    /* --content-slot-border: 1px solid var(--slate-06); */
+    /* --content-slot-border-radius: 0.8rem; */
+    /* --content-slot-outline: 1px solid var(--slate-02); */
+
+    /* When using :highlight-title-baseline="true" */
+    /* &.highlight-title-baseline { */
+    /*   --highlight-title-height: 4rem; */ /* proportional value preferred */
+    /*   --highlight-padding-block-start: 0; */
+    /* } */
+  }
+}
+</style>
+```
+
+> **Note:** The minimum gutter width (`16px`) and layout behaviour are not overridable via CSS custom properties. Use the `max-width` and `content-align` props to control column constraints.
+
+## Grid structure (reference)
+
+```text
+col:  [gutter] [centre] [gutter]
+row1: header content (height driven by slot)
+row2: highlights top half  ← highlights spans rows 2–3, z-index: 1
+row3: highlights bottom half
+row4: page content (never underflows highlights)
+```
+
+`.header-row` spans cols 1–3, rows 1–2 (edge-to-edge bg). `.header-slot` is placed in row 1 only.
+`.content-row` spans cols 1–3, rows 3–4 (bg fills behind highlights; `.content-slot` is placed in row 4 only). The decorative border behind `.content-slot` is rendered via `.content-row:before` — there is no separate DOM element for it.
+
+## Layout pitfall: do not use `grid-template-rows: subgrid` inside `.highlights-row`
+
+The `.highlights-row` element spans rows 2–3 of the parent grid (the "straddle"). If you add an inner grid to `.highlights-row` (e.g. to extend `equal-widths` behaviour) and include `grid-template-rows: subgrid`, auto-placed items will only occupy row 1 of the subgrid (= parent row 2). Parent row 3 collapses to 0-height, destroying the straddle effect — `.content-row` appears immediately below the highlights instead of overlapping it.
+
+```css
+/* ❌ — breaks the straddle when items are auto-placed by column flow */
+&.equal-widths {
+  display: grid;
+  grid-template-rows: subgrid; /* row 3 collapses */
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+}
+
+/* ✅ — single implicit row; items stretch to fill combined height of rows 2–3 */
+&.equal-widths {
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+}
+```
+
+## Notes
+
+- Component is auto-imported in Nuxt — no import needed.
+- Lives in `app/components/04.templates/page-hero-highlights/`.
+- Storybook title: `"Templates/PageHeroHighlights"`.
+- **Minimum gutter is fixed at `16px`** — it is baked into the `gridColumns` computed and cannot be overridden by a CSS custom property. If a consumer needs a different minimum (e.g. `24px`), it requires a prop or a fork of the component.
+- **`contentAlign` has no effect without `maxWidth`** — both sides always hold `16px` when `maxWidth` is not set.

package/.claude/skills/components/services-card.md

@@ -53,6 +53,34 @@ The `actions` slot receives `serviceData` as a scoped prop so the consumer can c
 </ServicesCard>
 ```
 
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<ServicesCard :style-class-passthrough="['my-card']" :service-data="service">
+  ...
+</ServicesCard>
+
+<style>
+/* ─── ServicesCard local overrides ─────────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.services-card {
+  &.my-card {
+    /* Geometry — image */
+    /* .image-wrapper { border-radius: 1.2rem; } */
+
+    /* Colours */
+    /* .description { color: var(--brand-text-secondary); } */
+  }
+}
+</style>
+```
+
 ## Notes
 
 - Component is auto-imported in Nuxt — no import needed.

package/.claude/skills/components/services-section.md

@@ -104,6 +104,31 @@ Both slots receive `serviceData` as a scoped prop.
 </ServicesSection>
 ```
 
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<ServicesSection :style-class-passthrough="['my-section']" :service-data="service">
+  ...
+</ServicesSection>
+
+<style>
+/* ─── ServicesSection local overrides ──────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.services-section {
+  &.my-section {
+    /* Geometry — image wrapper */
+    /* .image-wrapper { border-radius: 1.2rem; } */
+  }
+}
+</style>
+```
+
 ## Notes
 
 - Component is auto-imported in Nuxt — no import needed.

package/.claude/skills/components/stepper-list.md

@@ -0,0 +1,227 @@
+# StepperList Component
+
+## Overview
+
+`StepperList` is a numbered/stepped list component where each item has a visual indicator (a counter bubble or custom icon) and a content area. Indicators can optionally be connected by a vertical line between them. The number of items is controlled by the `itemCount` prop — content is filled via **dynamic named slots**.
+
+---
+
+## Dynamic slot pattern
+
+`StepperList` generates slots based on `itemCount`. For `itemCount="3"` the following slots exist:
+
+| Slot | Purpose |
+|------|---------|
+| `#item-0` | Content of the first list item |
+| `#item-1` | Content of the second list item |
+| `#item-2` | Content of the third list item |
+| `#indicator-0` | Custom indicator replacing the default counter bubble for item 0 |
+| `#indicator-1` | Custom indicator replacing the default counter bubble for item 1 |
+| … | … |
+
+**Rules:**
+- Slots are always **zero-indexed**: first item = `item-0`, last item = `item-{itemCount - 1}`.
+- `item-{n}` slots are required if you want content in each row.
+- `indicator-{n}` slots are **optional**. When omitted, a CSS counter bubble is rendered automatically. When provided, the custom content replaces the counter entirely — the CSS counter is hidden for that item only.
+- You can mix custom indicators and counter bubbles across items in the same list.
+- Always set `itemCount` to match the number of `#item-*` slots you provide.
+
+---
+
+## Props reference
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `itemCount` | `number` | — | **Required.** Controls how many `<li>` elements are rendered and which slots exist. |
+| `tag` | `"ul" \| "ol"` | `"ul"` | Use `"ol"` for sequentially meaningful content (recipes, instructions). |
+| `indicatorAlignment` | `"top" \| "center"` | `"top"` | Vertical alignment of the indicator relative to each item's content. `"center"` suits single-line items; `"top"` suits multi-line content. |
+| `indicatorVariant` | `"disc" \| "circle" \| "square"` | `"disc"` | Visual style of the auto-generated counter bubble. |
+| `indicatorSize` | `string` | `"3rem"` | Any valid CSS length — controls the width/height of the indicator bubble. |
+| `connected` | `boolean` | `true` | Draws a vertical connector line between indicators. JS measures indicator positions to calculate the line height precisely. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root element. |
+
+---
+
+## Usage examples
+
+### Basic counter list (no indicator slots)
+
+```vue
+<StepperList :itemCount="3" indicatorVariant="disc">
+  <template #item-0><p>Plan your project goals</p></template>
+  <template #item-1><p>Set up your development environment</p></template>
+  <template #item-2><p>Ship and monitor</p></template>
+</StepperList>
+```
+
+Counter bubbles are rendered automatically via CSS — no `#indicator-*` slots needed.
+
+### Ordered list with connectors
+
+```vue
+<StepperList tag="ol" :itemCount="4" :connected="true" indicatorVariant="circle">
+  <template #item-0><p>Preheat the oven to 180°C</p></template>
+  <template #item-1><p>Sift together the flour and baking powder</p></template>
+  <template #item-2><p>Cream the butter and sugar until fluffy</p></template>
+  <template #item-3><p>Bake for 25–30 minutes</p></template>
+</StepperList>
+```
+
+### Custom indicator icons (SVG)
+
+```vue
+<StepperList :itemCount="3">
+  <template #indicator-0>
+    <svg class="indicator-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  </template>
+  <template #item-0><p>Identity verified</p></template>
+
+  <template #indicator-1>
+    <svg class="indicator-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  </template>
+  <template #item-1><p>Payment confirmed</p></template>
+
+  <template #indicator-2>
+    <svg class="indicator-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
+    </svg>
+  </template>
+  <template #item-2><p>Awaiting email confirmation</p></template>
+</StepperList>
+```
+
+Custom indicator SVGs should use the `indicator-icon` class — it applies `color: var(--stepper-list-icon)` and sizes the icon to match `indicatorSize`.
+
+### Mixed — custom icons for completed steps, counters for pending
+
+```vue
+<StepperList :itemCount="4" :connected="true">
+  <!-- Completed steps: custom checkmark icon -->
+  <template #indicator-0>
+    <svg class="indicator-icon" ...>...</svg>
+  </template>
+  <template #item-0><p>Account created</p></template>
+
+  <template #indicator-1>
+    <svg class="indicator-icon" ...>...</svg>
+  </template>
+  <template #item-1><p>Email verified</p></template>
+
+  <!-- Pending steps: no indicator slot → CSS counter bubble shown -->
+  <template #item-2><p>Choose a plan</p></template>
+  <template #item-3><p>Start building</p></template>
+</StepperList>
+```
+
+### Rich item content (heading + body)
+
+```vue
+<StepperList tag="ol" :itemCount="3">
+  <template #item-0>
+    <div>
+      <strong>Create your account</strong>
+      <p style="margin: 0.25rem 0 0">Enter your email and choose a password.</p>
+    </div>
+  </template>
+  <template #item-1>
+    <div>
+      <strong>Verify your email</strong>
+      <p style="margin: 0.25rem 0 0">Click the link we sent to your inbox.</p>
+    </div>
+  </template>
+  <template #item-2>
+    <div>
+      <strong>Start building</strong>
+      <p style="margin: 0.25rem 0 0">You're all set — open your dashboard.</p>
+    </div>
+  </template>
+</StepperList>
+```
+
+---
+
+## CSS custom properties
+
+Override these in your consuming component or theme to restyle the indicators and connectors:
+
+| Property | Used by |
+|----------|---------|
+| `--stepper-list-counter-disc-background` | Disc variant counter bubble background |
+| `--stepper-list-counter-disc-text` | Disc variant counter number colour |
+| `--stepper-list-counter-disc-border` | Disc variant counter border colour |
+| `--stepper-list-counter-circle-background` | Circle variant counter bubble background |
+| `--stepper-list-counter-circle-text` | Circle variant counter number colour |
+| `--stepper-list-counter-circle-border` | Circle variant counter border colour |
+| `--stepper-list-counter-square-background` | Square variant counter bubble background |
+| `--stepper-list-counter-square-text` | Square variant counter number colour |
+| `--stepper-list-counter-square-border` | Square variant counter border colour |
+| `--stepper-list-connector-color` | Connector line colour (defaults to `currentColor`) |
+| `--stepper-list-icon` | Icon colour for custom `indicator-icon` SVGs |
+
+---
+
+## Connector behaviour
+
+- Connectors are drawn as `::after` pseudo-elements on each `<li>` except the last.
+- JS (`ResizeObserver`) measures the bottom of each indicator and the top of the next to set `--_connector-top` and `--_connector-height` precisely, keeping the line flush between bubbles regardless of content height.
+- Before JS runs (SSR / initial paint), CSS fallback values approximate the correct position for `indicatorAlignment="top"`.
+- If `connected="false"`, no connectors are rendered and JS measurement is skipped.
+- Connectors recalculate automatically when `itemCount`, `connected`, or `indicatorAlignment` props change.
+
+---
+
+## Local style override scaffold
+
+When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+```vue
+<StepperList :style-class-passthrough="['my-stepper']" :item-count="3">
+  ...
+</StepperList>
+
+<style>
+/* ─── StepperList local overrides ──────────────────────────────────
+   Colours, borders, geometry only — do not override behaviour.
+   Delete this block if no overrides are needed.
+   ─────────────────────────────────────────────────────────────────── */
+.stepper-list {
+  &.my-stepper {
+    /* Counter bubble — disc variant */
+    /* --stepper-list-counter-disc-background: var(--brand-primary); */
+    /* --stepper-list-counter-disc-text: white; */
+    /* --stepper-list-counter-disc-border: transparent; */
+
+    /* Counter bubble — circle variant */
+    /* --stepper-list-counter-circle-background: transparent; */
+    /* --stepper-list-counter-circle-text: var(--brand-primary); */
+    /* --stepper-list-counter-circle-border: var(--brand-primary); */
+
+    /* Counter bubble — square variant */
+    /* --stepper-list-counter-square-background: var(--brand-primary); */
+    /* --stepper-list-counter-square-text: white; */
+    /* --stepper-list-counter-square-border: transparent; */
+
+    /* Custom indicator icon colour */
+    /* --stepper-list-icon: var(--brand-primary); */
+
+    /* Connector line */
+    /* --stepper-list-connector-color: var(--brand-primary); */
+  }
+}
+</style>
+```
+
+---
+
+## Notes
+
+- Always keep `itemCount` in sync with the number of `#item-*` slots you provide — mismatches will render empty `<li>` rows.
+- Slot names are **zero-indexed** — `#item-0` not `#item-1`.
+- The `indicator-icon` class is defined inside the component CSS and sizes the SVG to `var(--_counter-size)` (driven by `indicatorSize`). Always add it to custom SVGs.
+- Auto-imported in Nuxt — no manual import needed.

package/.claude/skills/css-grid-max-width-gutters.md

@@ -0,0 +1,67 @@
+# CSS Grid — Max Width via Growing Gutters
+
+## Overview
+
+A pattern for capping the width of a central grid column without breaking full-bleed backgrounds. Instead of capping the column with `max-width`, the gutters grow to enforce the constraint. The centre column stays `1fr` and the layout never breaks.
+
+## The problem with capping the centre column
+
+Using `minmax(0, 1064px)` on the centre column caps its width but doesn't distribute the leftover space — it simply goes unused. Full-bleed backgrounds on adjacent rows break, and you lose the ability to use `subgrid`.
+
+## The pattern
+
+Grow the gutters instead:
+
+```css
+grid-template-columns: max(MIN_GUTTER, (100% - MAX_WIDTH) / 2) 1fr max(MIN_GUTTER, (100% - MAX_WIDTH) / 2);
+```
+
+- When the container is **narrower** than `MAX_WIDTH`: `(100% - MAX_WIDTH) / 2` is negative, `max()` clamps back to `MIN_GUTTER`. Gutters hold their minimum.
+- When the container is **wider** than `MAX_WIDTH`: gutters grow equally, enforcing the cap. The centre column never exceeds `MAX_WIDTH`.
+
+## Start-aligned variant
+
+When you want the content pinned to one side (e.g. left-aligned editorial layout):
+
+```css
+grid-template-columns: MIN_GUTTER minmax(0, MAX_WIDTH) 1fr;
+```
+
+Left gutter stays fixed, content column is capped at `MAX_WIDTH`, remaining space goes to the right.
+
+## In Vue with a prop
+
+Because `v-bind()` in `<style>` can't be nested inside CSS functions like `max()`, build the column string as a computed and bind the whole value:
+
+```ts
+// Props
+interface Props {
+  maxWidth?: string;        // e.g. "1064px"
+  contentAlign?: "start" | "center";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxWidth: undefined,
+  contentAlign: "center",
+});
+
+// Computed column string
+const gridColumns = computed(() => {
+  if (!props.maxWidth) return "16px 1fr 16px";
+  if (props.contentAlign === "start") return `16px minmax(0, ${props.maxWidth}) 1fr`;
+  return `max(16px, (100% - ${props.maxWidth}) / 2) 1fr max(16px, (100% - ${props.maxWidth}) / 2)`;
+});
+```
+
+```css
+.component {
+  display: grid;
+  grid-template-columns: v-bind(gridColumns);
+}
+```
+
+## Notes
+
+- `subgrid` on child elements still works — the column count doesn't change, only the gutter widths.
+- The minimum gutter (e.g. `16px`) is always enforced, so narrow viewports are safe without media queries.
+- `contentAlign` has no effect when `maxWidth` is not set — fall through to the fixed-gutter default.

package/.claude/skills/index.md

@@ -23,15 +23,27 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── storybook-add-font.md       — add a new font to Storybook
 ├── testing-add-unit-test.md    — create a Vitest unit test with snapshots
 ├── testing-add-playwright.md   — create a Playwright visual regression test
-├── theming-override-default.md — override the default theme with a custom colour scale
-├── colour-scheme-disable.md   — disable light/dark scheme support in a consumer app
+├── theming-override-default.md      — override the default theme with a custom colour scale
+├── colour-scheme-disable.md         — disable light/dark scheme support in a consumer app
+├── component-dynamic-slots.md        — named dynamic slots ($slots iteration) vs indexed dynamic slots (itemCount pattern)
+├── component-local-style-override.md — styleClassPassthrough + scoped style block for per-usage visual customisation
+├── component-prop-driven-container-layout.md — vary CSS grid layout inside @container queries using data-* attribute selectors
+├── css-grid-max-width-gutters.md             — cap a centre grid column width by growing gutters, with start/center alignment variants
+├── component-aria-landmark.md        — useAriaLabelledById composable: aria-labelledby for section/main/article/aside tags
+├── component-export-types.md         — move inline component types to app/types/components/ barrel for consumer imports
 └── components/
+    ├── accordian-core.md       — AccordianCore indexed dynamic slots (accordian-{n}-summary/icon/content), exclusive-open grouping
     ├── eyebrow-text.md         — EyebrowText props, usage patterns, styling
     ├── hero-text.md            — HeroText props, usage patterns, styling
+    ├── layout-grid-by-cols.md  — LayoutGridByCols dynamic slots (item-{n}), props, column/gap/breakpoint decisions
     ├── layout-row.md           — LayoutRow variant guide, width/margin decisions, usage patterns
     ├── link-text.md            — LinkText props, slots, usage patterns, styling
+    ├── page-hero-highlights.md — PageHeroHighlights template: hero + highlights strip grid, CSS custom property theming
     ├── services-card.md        — ServicesCard props, actions slot, usage patterns
-    └── services-section.md     — ServicesSection props, summary-link/cta slots, summary vs full mode
+    ├── services-section.md     — ServicesSection props, summary-link/cta slots, summary vs full mode
+    ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
+    ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
+    └── expanding-panel.md      — ExpandingPanel v-model, forceOpened, slots (summary/icon/content), ARIA wiring
 ```
 
 ## Skill file template