Consolidate skills from 21 to 18: rename, merge, and fold

- Rename /arrange to /layout for clarity
- Merge /normalize into /polish (design system discovery + cleanup phases)
- Merge /onboard into /harden (onboarding, empty states, progressive disclosure)
- Fold /extract into /impeccable extract sub-mode (reference file, sidebar link)
- Update all counts, cross-references, data files, demos, and metadata
- Remove System category (now empty)

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

content/site/skills/audit.md

@@ -20,7 +20,7 @@ The skill scans your code across five dimensions:
 
 Each dimension gets a 0 to 4 score. Each finding gets a severity: P0 blocks the release, P1 should fix this sprint, P2 is next cycle, P3 is polish. You get back a single document you can paste into a ticket tracker.
 
-Audit does not fix anything. It documents. Route the findings to `/polish`, `/harden`, `/normalize`, or `/optimize` depending on the category.
+Audit does not fix anything. It documents. Route the findings to `/polish`, `/harden`, or `/optimize` depending on the category.
 
 ## Try it
 
@@ -41,7 +41,7 @@ Performance: 3/4 (good)
   ...
 ```
 
-Hand the P0s to `/harden`, the theming and typography P1s to `/normalize` and `/typeset`, the rest to `/polish`.
+Hand the P0s to `/harden`, the theming and typography P1s to `/typeset` and `/polish`, the rest to `/polish`.
 
 ## Pitfalls
 

content/site/skills/bolder.md

@@ -35,6 +35,6 @@ Expected changes:
 
 ## Pitfalls
 
-- **Running it on the wrong page.** Product dashboards, settings, and forms should not be bold. They should be legible. Use `/arrange` or `/polish` instead.
+- **Running it on the wrong page.** Product dashboards, settings, and forms should not be bold. They should be legible. Use `/layout` or `/polish` instead.
 - **Confusing bold with loud.** Bold means committed and confident. Loud means shouting. Bolder is the former. If the result feels aggressive, follow up with `/quieter`.
 - **Pairing it with `/delight` in the same pass.** Delight works best against a stable visual baseline. Bold first, stabilize, then delight.

content/site/skills/distill.md

@@ -41,4 +41,4 @@ Fewer things. Each one clearer.
 
 - **Confusing distill with delete.** Distill removes obstacles. It does not remove features users need. If a user relies on something daily, find a way to keep it quietly, not a way to cut it.
 - **Running it too early.** If the feature is still growing, distilling it now means distilling the same thing again next week. Wait until the shape is stable.
-- **Expecting it to replace hierarchy work.** Sometimes the right fix is not removing things, it is arranging them. Reach for `/arrange` when the problem is layout, not quantity.
+- **Expecting it to replace hierarchy work.** Sometimes the right fix is not removing things, it is arranging them. Reach for `/layout` when the problem is layout, not quantity.

content/site/skills/harden.md

@@ -1,5 +1,5 @@
 ---
-tagline: "Make interfaces production-ready. Edge cases, i18n, error states, overflow."
+tagline: "Make interfaces production-ready. Edge cases, onboarding, i18n, error states, overflow."
 ---
 
 ## When to use it
@@ -10,12 +10,13 @@ Reach for it before launch, before opening to a new market, or any time a bug re
 
 ## How it works
 
-The skill works through four dimensions of real-world resilience:
+The skill works through five dimensions of real-world resilience:
 
 1. **Text and data extremes**. Long text, short text, special characters, emoji, RTL, numbers in the billions, 1000-item lists, zero-data empty states.
 2. **Error scenarios**. Network failures, API 4xx/5xx, validation errors, permission errors, rate limits, concurrent operations.
 3. **Internationalization**. Long translations (German is often 30% longer than English), RTL languages, date and number formats, currency symbols, character sets.
-4. **Device and context**. Touch targets, offline behavior, slow connections, low-power mode.
+4. **Onboarding and empty states**. First-run experiences, empty state design, progressive disclosure, feature discovery. Making the feature work for someone who has never seen it before.
+5. **Device and context**. Touch targets, offline behavior, slow connections, low-power mode.
 
 For each dimension it identifies the failure mode, then applies the concrete fix: overflow handling, proper empty states, informative error UI, i18n-safe layouts, pluralization, sensible fallbacks.
 
@@ -40,5 +41,5 @@ Run it per-page, not all at once. The first run is the biggest; subsequent runs
 ## Pitfalls
 
 - **Waiting for a bug report.** Harden is preventative. If you find yourself fixing the same class of bug twice, run `/harden` across the feature.
-- **Treating error states as an afterthought.** Most hardening work is error UI. Budget time for it, not just a `catch` block.
+- **Treating error and empty states as an afterthought.** Most hardening work is error and empty state UI. Budget time for it, not just a `catch` block.
 - **Skipping i18n because "we are English-only for now".** i18n-safe layouts are still better layouts. Flexible containers, proper text wrapping, generous line-height. None of that hurts English.

content/site/skills/impeccable.md

@@ -16,6 +16,10 @@ The full shape-then-build flow. It starts by running `/shape` internally (a stru
 
 One-time project setup. Runs a short discovery interview about your brand, audience, and aesthetic direction, then writes a `.impeccable.md` file that every future skill call reads automatically. Run this once per project before doing any design work.
 
+### /impeccable extract {#extract}
+
+Pull reusable components, design tokens, and patterns out of your code and into the design system. Finds repeated UI patterns (buttons in 12 places, three card variants, scattered hex colors), extracts them into shared primitives, and migrates all callers. Best used after a product has shipped enough features to reveal the patterns -- premature extraction creates abstractions that do not match reality.
+
 ## How it works
 
 Most AI-generated UIs fail the same way: generic fonts, purple gradients, card grids on card grids, glassmorphism everywhere. `/impeccable` gives your AI a strong point of view. It loads an opinionated design handbook plus a long list of anti-patterns, then pushes the model to commit to a specific aesthetic direction before writing a single line of code.

content/site/skills/layout.md

@@ -0,0 +1,41 @@
+---
+tagline: "Fix layout, spacing, and visual rhythm."
+---
+
+## When to use it
+
+`/layout` is for pages where nothing is technically wrong but nothing is breathing either. Equal padding everywhere, monotonous card grids, content that runs edge to edge, hierarchy that relies on size alone. Reach for it when a layout "feels off" and you cannot articulate why.
+
+Good triggers: "everything feels crowded", "it reads like a wall", "I do not know where to look first".
+
+## How it works
+
+The skill runs through five layout dimensions:
+
+1. **Spacing**: is the spacing scale consistent or are there random 13px gaps, are related elements grouped tightly with generous space between groups, is there any rhythm at all.
+2. **Visual hierarchy**: does the eye land on the primary action within 2 seconds, is the hierarchy doing real work or is everything shouting.
+3. **Grid and structure**: is there an underlying grid or is the layout random, are elements aligned to baselines.
+4. **Rhythm**: does the page alternate between tight and generous spacing, or is everything uniform.
+5. **Density**: is the layout cramped or is it wasteful, does density match the content type.
+
+Fixes usually involve rebuilding the spacing scale, introducing asymmetry, collapsing monotonous grids into a mixed layout with hero and supporting elements, and giving the primary action real space.
+
+## Try it
+
+```
+/layout the settings page
+```
+
+Typical changes:
+
+- Spacing scale unified to 8 / 16 / 24 / 48 / 96px
+- Section breaks at 48px, row gaps at 16px, form field groups at 8px
+- Primary actions pulled out of the form flow with 32px buffer
+- Decorative borders removed, replaced with spacing-driven grouping
+- Sidebar and main column proportions rebalanced (280 / flex vs 25 / 75)
+
+## Pitfalls
+
+- **Confusing arrange with distill.** If the problem is too many things, run `/distill` first. Layout is for arranging what is already the right set.
+- **Expecting it to rescue a broken grid.** If the page has no grid at all, arrange will build one. Just know that the diff is going to be larger than you expect.
+- **Ignoring the hierarchy verdict.** If arrange says "nothing is primary", no amount of spacing work fixes that. You need a content decision, not a layout tweak.

content/site/skills/polish.md

@@ -4,13 +4,13 @@ tagline: "The meticulous final pass between good and great."
 
 ## When to use it
 
-`/polish` is the last thing you run before shipping. It hunts down the small details that separate a shipped feature from a polished one: half-pixel misalignments, inconsistent spacing, forgotten focus states, loading transitions that flash, copy that drifts in tone.
+`/polish` is the last thing you run before shipping. It hunts down the small details that separate a shipped feature from a polished one: half-pixel misalignments, inconsistent spacing, forgotten focus states, loading transitions that flash, copy that drifts in tone. It also aligns the feature with your design system -- replacing hard-coded values with tokens, swapping custom components for shared ones, and fixing any drift from established patterns.
 
-Reach for it when the feature is functionally complete, nothing is broken, and something still feels off.
+Reach for it when the feature is functionally complete, nothing is broken, and something still feels off. Also reach for it when a feature has drifted from the design system and needs to be pulled back in line.
 
 ## How it works
 
-Polish works methodically across six dimensions:
+Polish starts by discovering the design system (tokens, spacing scale, shared components), then works methodically across six dimensions:
 
 1. **Visual alignment and spacing**: pixel-perfect grid adherence, consistent spacing scale, optical alignment on icons.
 2. **Typography**: hierarchy consistency, line length, widows and orphans, kerning on headlines.
@@ -42,5 +42,5 @@ Five small fixes, no rewrites. That is the shape of a good polish pass.
 ## Pitfalls
 
 - **Polishing work that is not done.** If there are TODOs in the code, you are not ready. Run `/polish` on finished features only.
-- **Treating polish as redesign.** Polish refines what exists. If you find yourself rearchitecting a layout, you needed `/critique` or `/arrange` instead.
+- **Treating polish as redesign.** Polish refines what exists. If you find yourself rearchitecting a layout, you needed `/critique` or `/layout` instead.
 - **Running `/polish` without `/audit` first.** Polish catches feel-based issues. Audit catches measurable ones. Use both.

content/site/skills/typeset.md

@@ -38,5 +38,5 @@ Expected diff:
 ## Pitfalls
 
 - **Asking for a new font without context.** Typeset will pick based on the `.impeccable.md` brand voice. If you have not run `/impeccable teach`, the suggestion will be generic.
-- **Reaching for typeset when the issue is layout.** If paragraphs are fine but the page feels cramped, you want `/arrange`.
+- **Reaching for typeset when the issue is layout.** If paragraphs are fine but the page feels cramped, you want `/layout`.
 - **Expecting fluid clamp scales on app UIs.** Typeset uses fixed rem scales for app interfaces. Fluid typography is for marketing and content pages where line length varies dramatically.