@@ -21,65 +21,54 @@ Key paths:
 
 ## Mode A — Add a new settings page
 
-1. **Navigation.** In `navigation.ts`: add the id to the `SettingsSection` union,
-   then a `NavigationItem` with `label` AND a one-line `description` (verb-first,
-   ~40–55 chars, product voice per `.claude/rules/constitution.md`). Place it in
-   the right `section` group and set any gating flags (`requiresHosted`,
-   `requiresEnterprise`, etc.).
-2. **Wire the switch.** Add the component to the `effectiveSection` render switch
-   in `settings/[section]/settings.tsx` (lazy `dynamic(...)` like its siblings).
+1. **Navigation.** In `navigation.ts`: add the id to `UnifiedSettingsSection`, then a
+   `SETTINGS_SECTION_REGISTRY` entry with `label`, `icon`, and
+   `unified: { id, description, group, order }` (description verb-first, ~40–55 chars,
+   product voice per `.claude/rules/constitution.md`). Set gating flags
+   (`requiresHosted`, `requiresEnterprise`, …) on `unified`, and add `planes` only if the
+   section also exists on a standalone plane.
+2. **Wire the switch.** Register the module in `SECTION_MODULES`
+   (`settings/section-warmers.ts`), then add
+   `const X = dynamic(() => SECTION_MODULES.x().then((m) => m.X))` and its case in the
+   `effectiveSection` switch in `settings/[section]/settings.tsx`.
 3. **Build the body inside `SettingsPanel`** per the rule's canonical page shape:
    `actions`, `search`, `children`, modal siblings in a fragment.
-4. **If the page has editable state**, wire the shared save/discard stack — put
-   `SaveDiscardActions` (dirty-gated Discard+Save chips) in `actions`, and call
-   `useSettingsUnsavedGuard({ isDirty })` **before any early-return gate**.
-   Detail sub-views additionally route the back chip through
-   `guard.guardBack(closeFn)` and render the shared `UnsavedChangesModal`. Never
-   hand-roll a Save button, a `beforeunload`, or an "Unsaved changes" modal —
-   they're centralized. See the "Save / Discard + unsaved-changes guard" section
-   in `.claude/rules/sim-settings-pages.md`.
-5. **Verify:** `cd apps/sim && bun run type-check`; `bunx biome check --write <file>`.
+4. **If the page has editable state**, wire the shared save/discard stack exactly as in
+   `.claude/rules/sim-settings-pages.md` "Save / Discard + unsaved-changes guard"
+   (`saveDiscardActions()`, `useSettingsUnsavedGuard` before any early return).
+5. **Verify:** the local gate in the root `CLAUDE.md` ("How your work is checked").
 
 ## Mode B — Audit existing settings pages
 
 For each page component, confirm the checklist in `.claude/rules/sim-settings-pages.md`:
 
 1. Find hand-rolled shells that should be `SettingsPanel`:
-   `git grep -n "flex h-full flex-col bg-\[var(--bg)\]" -- 'apps/sim/**/settings/' 'apps/sim/ee/'`
-   — every match should be either `settings-panel.tsx`, a **detail sub-view**
-   (has a `<Chip leftIcon={ArrowLeft}>` back button), or an entitlement/loading
-   **gate** early-return. Anything else is a page that still needs migrating.
-2. Find hand-rolled title blocks (should be 0 outside detail views):
-   `git grep -n "text-\[var(--text-body)\] text-lg" -- 'apps/sim/**/settings/' 'apps/sim/ee/'`
-3. Find literal pixel text sizes (should be 0 — see "Text-scale tokens" in
-   `.claude/rules/sim-settings-pages.md` for the token map and the row
-   title/subtitle pairing convention):
-   `git grep -nE "text-\[1[0-8]px\]" -- 'apps/sim/**/settings/' 'apps/sim/ee/'` — should
-   be 0. Display type above the scale (`text-[40px]` hero headings) is deliberate
-   and out of scope.
-4. Confirm each page imports `SettingsPanel` and that its `NavigationItem` has an
+   `git grep -n "flex h-full flex-col bg-\[var(--bg)\]" -- 'apps/sim/**/settings/**' 'apps/sim/ee/'`
+   — every match should be the settings shell (`settings/layout.tsx`),
+   `CredentialDetailLayout` (the `settings/secrets/[credentialId]` exception), or an
+   entitlement/loading gate. A detail sub-view is never a match: it passes
+   `back={{ text, icon: ArrowLeft, onSelect }}` to `SettingsPanel`. Anything else is a
+   violation: render it through `SettingsPanel`.
+2. Find hand-rolled title blocks (should match only `settings-header.tsx`, the shell):
+   `git grep -n "text-\[var(--text-body)\] text-lg" -- 'apps/sim/**/settings/**' 'apps/sim/ee/'`
+3. Find literal pixel text sizes (should be 0 — see "Text Scale" in
+   `.claude/rules/sim-styling.md`):
+   `git grep -nE "text-\[1[0-8]px\]" -- 'apps/sim/**/settings/**' 'apps/sim/ee/'`.
+   Display type above the scale (`text-[40px]` hero headings) is deliberate and out of
+   scope.
+4. Confirm each page imports `SettingsPanel` and that its registry entry has an
    accurate `description` of consistent length with its peers.
-   - Editable pages: confirm Save/Discard go through `SaveDiscardActions` and
+   - Editable pages: confirm Save/Discard go through `saveDiscardActions()` and
      dirty is wired via `useSettingsUnsavedGuard` (called before early-return
      gates) — flag any hand-rolled Save button, `beforeunload`, or unsaved modal.
-     `git grep -n "beforeunload" -- 'apps/sim/**/settings/' 'apps/sim/ee/'`
+     `git grep -n "beforeunload" -- 'apps/sim/**/settings/**' 'apps/sim/ee/'`
      should only hit the centralized `use-settings-before-unload.ts`.
-5. When migrating a page, change ONLY the structural shell→`SettingsPanel` swap:
-   move header chips to `actions`, the standalone search to `search`, delete the
-   `<h1>` title block, replace the three closing `</div>` (column/scroll/shell)
-   with `</SettingsPanel>`, and keep modal siblings in a `<>` fragment. Do NOT
-   touch handlers, state, queries, conditional rendering, or detail/gate returns.
-   Drop per-page `gap-*`/`pt-*` on the content column in favor of the panel default.
-6. When fixing literal pixel text sizes, replace ONLY the size class with its
-   exact-pixel-equivalent named token (e.g. `text-[12px]` → `text-caption`,
-   never a different size) — this must render pixel-identical, not restyle the
-   page. Leave color tokens (`--text-primary` vs `--text-body`, etc.) untouched
-   unless they're also being changed for an unrelated, deliberate reason.
-7. Remove now-unused imports (`ChipInput`/`Search`) ONLY after grepping that
-   they are not still used elsewhere in the file (e.g. by a detail view).
-8. **Verify the whole sweep:** `bun run type-check`, `biome check` on every touched
-   file, and run the affected pages' tests. Diff each file against the base and
-   confirm the change is purely structural before shipping.
+5. Fix each finding with the smallest structural change that satisfies the checklist;
+   do not touch handlers, state, queries, or gate returns. A pixel-size fix swaps
+   only the size class for its exact-pixel token (`text-[12px]` → `text-caption`).
+6. **Verify the whole sweep:** the local gate in the root `CLAUDE.md`, plus the
+   affected pages' tests. Diff each file against the base and confirm the change is
+   purely structural before shipping.
 
 ## Mode C — Migrate list rows to `SettingsResourceRow`
 
@@ -91,20 +80,13 @@ contract. Then, per page:
    Every match outside `settings-resource-row.tsx` is either a row to migrate or a
    genuinely different shape (multi-line body, tabular columns, a grid) that stays
    bespoke — decide which, and say so.
-2. Replace the row *and* its wrapper: a `<button>`/`<Link>` around the row becomes
-   `onClick`/`href` on the row itself. Wrapping the row is what the primitive
-   exists to stop — it is also invalid HTML once `trailing` holds a control.
-3. Sort the trailing content: interactive → `trailing`, decorative → `badge`.
-   Getting this backwards makes the row's right edge a dead zone.
-4. Add `navigable` only if the row opens a detail page, and `clickLabel` always.
-5. Drop the container's `-mx-2` — the row now owns the bleed. Use
-   `RESOURCE_LIST_STACK` / `RESOURCE_LIST_GRID`; do not hand-write the gap.
-6. Unlike Mode B, this migration **may** change conditional rendering: a
-   `<button disabled={!can}>` becomes `onClick={can ? … : undefined}` +
-   `navigable={can}`, which renders a plain non-interactive row. Verify the gated
-   state has no clickable affordance left.
-7. Check what the old row rendered *beside* the title (a badge, a timestamp, a
+2. Convert the row and its wrapper per "The resource row" (props, `trailing` vs
+   `badge`, bleed, `navigable`/`clickLabel`). Unlike Mode B, this conversion **may**
+   change conditional rendering (a permission gate becomes
+   `onClick={can ? … : undefined}` + `navigable={can}`); verify the gated state has no
+   clickable affordance left.
+3. Check what the hand-rolled row rendered *beside* the title (a badge, a timestamp, a
    transport label). The row's title truncates as one unit, so anything folded
    into it can be ellipsised away — move it to `description` or `badge`.
-8. Verify: `bun run type-check`, `biome check`, the page's tests, and a diff read of
+4. Verify: the local gate, the page's tests, and a diff read of
    every converted block for lost props, conditions, and `key` placement.
@@ -4,7 +4,7 @@ source: https://github.com/leonxlnx/taste-skill — skills/taste-skill/SKILL.md
 description: Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
 ---
 
-> **In this repo:** Tailwind 4 (CSS-first config in `apps/sim/app/_styles/globals.css`); animation via `import { motion } from 'framer-motion'` (not `motion/react` — rewrite every `motion/react` import in the samples below); icons from `@sim/emcn/icons`; colors through the CSS-variable tokens in `.claude/rules/sim-styling.md` (no hardcoded `text-gray-*`/hex/`zinc` utilities, no paired `dark:` utilities). This note overrides any conflicting guidance or code sample anywhere in this file.
+> **In this repo:** Tailwind 4 (CSS-first config in `apps/sim/app/_styles/globals.css`); animation via `import { motion } from 'framer-motion'` (not `motion/react` — rewrite every `motion/react` import in the samples below); icons from `@sim/emcn/icons`; colors through the CSS-variable tokens in `.claude/rules/sim-styling.md` (no hardcoded `text-gray-*`/hex/`zinc` utilities, no paired `dark:` utilities). This note overrides any conflicting guidance or code sample anywhere in this file. Fonts are fixed (Season body, Inter, Martian Mono); never introduce new families. Font weight is only `font-normal`/`font-medium`/`font-semibold`. Elevation uses the `shadow-subtle|medium|overlay|card` tokens. Type size uses named tokens, never `text-[Npx]`. Product forms use `ChipModalField`. Use `bunx`, never `npx`. Do not add GSAP, Lenis, Three, or shadcn. Landing copy and SEO follow `.claude/rules/constitution.md` and `.claude/rules/landing-seo-geo.md`.
 
 # tasteskill: Anti-Slop Frontend Skill
 
 
@@ -32,7 +32,7 @@ This codebase uses **emcn**, a custom component library built on Radix UI primit
 
 ## Design Tokens
 
-Use CSS variable pattern (`text-[var(--text-primary)]`), never Tailwind semantics (`text-muted-foreground`) or hardcoded colors (`text-gray-500`, `#333`).
+Use CSS variable pattern (`text-[var(--text-body)]`), never Tailwind semantics (`text-muted-foreground`) or hardcoded colors (`text-gray-500`, `#333`).
 
 **Text**: `--text-primary`, `--text-secondary`, `--text-tertiary`, `--text-muted`, `--text-body` (canonical value text), `--text-icon`, `--text-placeholder`, `--text-subtle`, `--text-inverse`, `--text-error`
 **Surfaces**: `--bg`, `--surface-1` through `--surface-7`, `--surface-hover`, `--surface-active`
@@ -42,22 +42,13 @@ Use CSS variable pattern (`text-[var(--text-primary)]`), never Tailwind semantic
 **Shadows**: `shadow-subtle`, `shadow-medium`, `shadow-overlay`, `shadow-card`
 **Badges**: `--badge-*` semantic families (success/error/gray/blue/purple/orange/amber/teal/cyan/pink, each with `-bg`/`-text`)
 
-## Buttons
+## Buttons and chips
 
-Intent-to-variant mapping (read the actual `buttonVariants` in `packages/emcn/src/components/button/button.tsx` for the full variant set — it exposes more than listed here):
-
-| Action | Variant |
-|--------|---------|
-| Toolbar, icon-only | `ghost` |
-| Create, save, submit | `primary` |
-| Cancel, close | `default` |
-| Delete, remove | `destructive` |
-| Selected state | `active` |
-| Toggle | `outline` |
+Header/action chrome is `Chip`/`ChipLink` (variants `primary`, `destructive`, `outline`, `border`, `border-shadow`, bare). Selection and toggles use the `active` prop, never a variant. A single-resource Delete is a plain chip behind `ChipConfirmModal`; `destructive` is only for at-scale actions (`.claude/rules/sim-settings-pages.md` "Deleting a resource"). `Button` is only for icon-only toolbar controls (`ghost`/`quiet`, `size='icon'`).
 
 ## Delete/Remove Confirmations
 
-`ChipModal` `size='sm'`, title "Delete/Remove {ItemType}", destructive confirm button, plain Cancel (follow the chip footer layout in `.claude/rules/emcn-components.md`). Use `text-[var(--text-error)]` for irreversible warnings.
+Use `ChipConfirmModal` (title "Delete/Remove {ItemType}", `confirm={{ label, onClick }}`, which defaults to destructive). Keep its fail-safe `defaultAction='dismiss'` per `.claude/rules/emcn-components.md` "Modal keyboard defaults". Put irreversible-consequence copy in `text`.
 
 ## Toast
 
 
@@ -6,6 +6,8 @@ description: This skill encodes Emil Kowalski's philosophy on UI polish, compone
 
 # Design Engineering
 
+> **In this repo:** emcn owns component chrome (press states, tooltip/popover/menu animation, easing): apply these principles by proposing changes in `packages/emcn`, not per call site, and add no global CSS variables or keyframes (CLAUDE.md "Styling and EMCN"). Animation uses `import { motion } from 'framer-motion'`. Gate touch-unsafe hover with the `hover-hover:` Tailwind variant (plain `hover:` is intentionally ungated). `.claude/rules/sim-styling.md` and `.claude/rules/emcn-components.md` win on any conflict.
+
 You are a design engineer with the craft sensibility. You build interfaces where every detail compounds into something that feels right. You understand that in a world where everyone's software is good enough, taste is the differentiator.
 
 ## Core Philosophy
 
@@ -49,7 +49,7 @@ Animate contextual icons with opacity, scale, and blur instead of toggling visib
 
 ### 8. Font Smoothing
 
-Apply `-webkit-font-smoothing: antialiased` to the root layout on macOS for crisper text.
+Apply `-webkit-font-smoothing: antialiased` to the root layout on macOS for crisper text. In this repo, do not add root-level smoothing or other global styles (CLAUDE.md "Styling and EMCN"); raise it as a design-system proposal instead.
 
 ### 9. Tabular Numbers
 
@@ -61,7 +61,7 @@ Use `text-wrap: balance` on headings. Use `text-wrap: pretty` for body text to a
 
 ### 11. Image Outlines
 
-Add a subtle 1px low-opacity outline to images (`outline-black/10` light, `outline-white/10` dark); see surfaces.md.
+Add a subtle 1px low-opacity outline to images; see surfaces.md. In this repo, use the `--border` token (`outline-[var(--border)]`), not raw black/white alphas.
 
 ### 12. Scale on Press
 
@@ -119,7 +119,7 @@ Present changes as markdown tables with **Before** and **After** columns, one ta
 #### Scale on press
 | Before | After |
 | --- | --- |
-| `<button className="...">` | Added `active:scale-[0.96] transition-transform` |
+| `Chip` has no press affordance | Proposed in `packages/emcn/src/components/chip/chip.tsx` (`chipVariants`): `active:scale-[0.96] transition-transform` |
 | `scale(0.9)` on press | Raised to `scale(0.96)` — anything below `0.95` feels exaggerated |
 
 Rows should cite the specific file and the specific property that changed when it isn't obvious from the snippet. If a principle was reviewed but nothing needed to change, omit that table entirely — empty tables add noise.
 
@@ -1,5 +1,7 @@
 # Animations
 
+> In this repo: `import { motion, AnimatePresence } from 'framer-motion'`; never `motion/react`.
+
 Interruptible animations, enter/exit transitions, and contextual icon animations.
 
 ## Interruptible Animations
 
@@ -29,7 +29,7 @@ Read these before analyzing:
 Enforce `.claude/rules/sim-queries.md` (key factory with `all` + plural prefixes, `signal` forwarding, named `staleTime` constants reused by prefetches, `keepPreviousData` only on variable keys, `requestJson` boundary). Additionally:
 - Key factories live next to their hooks — except a factory, standalone fetcher/mapper, or `staleTime` constant that a server module (a `prefetch.ts`, route, block, trigger) imports, which must live in a non-`'use client'` module under `hooks/queries/utils/` per `.claude/rules/sim-queries.md` (a `'use client'` export called from the server crashes SSR)
 - Use `enabled` to prevent queries from running without required params
-- Warm data for hover/focus intent with `queryClient.prefetchQuery` and shared `queryOptions`; never temporarily enable a mounted hidden observer, which can remain active after focus restoration and refetch data for closed UI
+- Warm data for hover/focus intent with `prefetchQueryOnIntent(queryClient, sharedQueryOptions)` (`hooks/queries/utils/prefetch-query-on-intent.ts`, which cleans up a speculative failure per `sim-react-performance.md`); never temporarily enable a mounted hidden observer, which can remain active after focus restoration and refetch data for closed UI
 - When gating a query by view or modal state, move every consumer to the active query too: imperative refresh/pagination, loading and error feedback, and data-derived controls must never read a disabled query or placeholder data from a previous key
 - Compose caller-controlled `enabled` options with required-param guards (`Boolean(id) && (options?.enabled ?? true)`). Never spread options after an internal guard, because `{ enabled: true }` can silently re-enable an invalid request.
 - A disabled query can still report `isPending: true`. Aggregate loading state only for queries that are applicable/enabled, or an optional query can hold the whole surface in a permanent loading state.
 
@@ -32,7 +32,7 @@ This codebase's convention: **TSDoc for documentation; an inline `//` only for a
 
 - A `//` comment that explains a **non-obvious why**: a workaround for an upstream bug, an ordering constraint, a perf reason, a spec/edge-case the code can't self-document (`// first-match wins — matches the old find() semantics`).
 - Existing TSDoc `/** ... */` blocks on declarations — leave them (only tighten if verbose).
-- `// boundary-raw-fetch:`, `// double-cast-allowed:`, `// boundary-raw-json:`, `// untyped-response:`, `// migration-safe:`, `// rq-lint-allow:`, `// client-boundary-allow:` and any other `<kebab-tag>: <reason>` annotation a script under `scripts/` greps for, in line-comment or block-comment form (e.g. the `/** svg-path-precision-exception: ... */` directive on icon paths) — these are load-bearing, never touch them.
+- `// boundary-raw-fetch:`, `// double-cast-allowed:`, `// boundary-raw-json:`, `// untyped-response:`, `-- migration-safe:` (SQL migrations), `// rq-lint-allow:`, `// client-boundary-allow:` and any other `<kebab-tag>: <reason>` annotation a script under `scripts/` greps for, in line-comment or block-comment form (e.g. the `/** svg-path-precision-exception: ... */` directive on icon paths) — these are load-bearing, never touch them.
 - `// biome-ignore`, `// eslint-disable`, `// @ts-expect-error` and other tooling directives.
 - `// TODO` / `// FIXME` that point at real, still-open work.