monomind 1.16.6 → 1.16.8

package/packages/@monomind/cli/.claude/skills/monodesign/bolder.md

@@ -0,0 +1,50 @@
+---
+name: monodesign-bolder
+description: Make a timid, generic, or bland design more confident, distinctive, and visually committed — without crossing into gratuitous loudness.
+type: design-sub-command
+argument-hint: "[target page, component, or design]"
+user-invocable: true
+---
+
+# Monodesign: Bolder
+
+Make a timid, generic, or bland design more confident and distinctive. Read `reference/bolder.md` from the monodesign skill directory for the full protocol.
+
+## Assess What's Timid
+
+Identify what's making the design feel safe and generic:
+
+1. **Color timidity**: everything is neutral, muted, or generic. The accent color appears on <5% of the surface
+2. **Scale timidity**: headings are a safe 2rem when they could be 5rem. White space is the same everywhere
+3. **Typography timidity**: Inter at 400 weight, barely distinguished hierarchy, no personality
+4. **Composition timidity**: centered cards, symmetric grids, equal padding everywhere
+5. **Commitment timidity**: design feels like it's avoiding choices — trying to work for everyone
+
+## Bold Interventions (choose by diagnosis)
+
+**Color commitment**
+- Move from Restrained to Committed strategy: push one color to 30–60% of the surface
+- Use the brand color as a background, not just an accent
+- Commit to dark or light — don't hedge with a light-gray-on-white page
+
+**Scale expansion**
+- Increase heading scale: hero headlines at 4–6rem with tight tracking (-0.02 to -0.03em)
+- Introduce asymmetric spacing — some sections breathe, others are tight
+- Use a large number, quote, or visual element as an anchor on the page
+
+**Typographic commitment**
+- Switch from invisible system fonts to a distinctive typeface
+- Introduce strong weight contrast (900 + 400, not 600 + 400)
+- Use a display typeface for headings that doesn't appear in the body
+
+**Composition**
+- Break the centered-container pattern: allow some elements to bleed to the edge
+- Use a grid that isn't 12-equal-columns
+- Introduce intentional asymmetry in feature layouts
+
+## Rules
+
+- Bolder ≠ noisier. Every bold choice must serve the hierarchy and brand
+- Don't ban everything from the absolute-bans list just because the design is now bolder — those bans apply at any boldness level
+- If the project has a DESIGN.md, bold moves must be consistent with it, not contrary to it
+- Verify that the bolder version still passes accessibility contrast requirements

package/packages/@monomind/cli/.claude/skills/monodesign/clarify.md

@@ -0,0 +1,64 @@
+---
+name: monodesign-clarify
+description: Fix confusing, ambiguous, or hard-to-understand UI — improve information architecture, navigation labels, empty states, error messages, and cognitive load without a full redesign.
+type: design-sub-command
+argument-hint: "[target page, flow, or interaction]"
+user-invocable: true
+---
+
+# Monodesign: Clarify
+
+Fix confusing or ambiguous UI. Read `reference/clarify.md` and `reference/cognitive-load.md` from the monodesign skill directory for the full protocol.
+
+## Diagnosis: What's Confusing?
+
+**Navigation and labeling**
+- Labels that describe what something IS instead of what it DOES ("Analytics" vs. "See how your campaigns are performing")
+- Navigation items with scope too broad (everything is "Settings")
+- Tabs and menus that require trying each option to understand them
+
+**Information architecture**
+- Related things that aren't grouped together
+- Same concept appearing in multiple places with slightly different names
+- Forms that ask for information before explaining why it's needed
+
+**Feedback and state**
+- Actions without confirmation that they worked
+- Loading states that don't indicate progress or expected duration
+- Errors that describe what happened technically, not what the user should do next
+- Empty states that are blank (not "nothing here yet", just nothing)
+
+**Cognitive load**
+- Too many choices presented simultaneously without hierarchy
+- Options that require domain knowledge to distinguish
+- Visual complexity that masks the primary action
+
+## Clarification Techniques
+
+**Labels**
+- Action-oriented labels on buttons ("Save changes" not "OK")
+- Descriptive labels on navigation ("Payment history" not "Payments")
+- Contextual tooltips on technical terms (hover, not always-visible)
+
+**Progressive disclosure**
+- Show the most common case first; reveal complexity on demand
+- Advanced settings behind a clear "Show advanced" toggle
+- Multi-step flows that reveal the next step only after the current one
+
+**Feedback patterns**
+- Inline validation as the user types, not only on submit
+- Clear success/error states with next-step guidance
+- Progress indicators for multi-step processes
+
+**Copy**
+- Error messages: [what happened] + [why] + [what to do]
+- Empty states: [what will appear here] + [how to add it]
+- Confirm dialogs: [what will happen] + primary action + escape
+
+## Output
+
+Specific code changes that reduce confusion:
+- Updated labels with rationale
+- Added/improved empty states
+- Better error messages
+- Simplified information architecture

package/packages/@monomind/cli/.claude/skills/monodesign/colorize.md

@@ -0,0 +1,68 @@
+---
+name: monodesign-colorize
+description: Apply or rework the color system — brand color extraction, OKLCH palette construction, token architecture, dark/light mode, and contrast verification.
+type: design-sub-command
+argument-hint: "[target or brand description]"
+user-invocable: true
+---
+
+# Monodesign: Colorize
+
+Apply or rebuild the color system. Read `reference/colorize.md` and `reference/color-and-contrast.md` from the monodesign skill directory for the full protocol.
+
+## Color Strategy (choose one before picking colors)
+
+| Strategy | Surface area | When to use |
+|---|---|---|
+| **Restrained** | Tinted neutrals + one accent ≤10% | Product default; brand minimalism |
+| **Committed** | One saturated color at 30–60% of surface | Brand default for identity-driven pages |
+| **Full palette** | 3–4 named roles, used deliberately | Brand campaigns; data visualization |
+| **Drenched** | Surface IS the color | Brand heroes, campaign pages |
+
+## OKLCH Rules
+
+- Use OKLCH everywhere. Never `#000` or `#fff` — tint every neutral toward the brand hue (chroma 0.005–0.01)
+- Reduce chroma as lightness approaches 0 or 100 (high chroma at extremes looks garish)
+- Tinted neutrals: add 0.005–0.015 chroma toward the brand's hue, not toward generic warmth
+- Gray text on colored background looks washed out — use a darker shade of the bg hue or transparency
+
+## Theme Decision
+
+Dark vs. light is never a default. Write one sentence of physical scene: who uses this, where, under what ambient light, in what mood. If the sentence doesn't force dark or light, it's not concrete enough. Add detail until it does.
+
+## Contrast Verification (required)
+
+- Body text: ≥4.5:1 against its background
+- Large text (≥18px or bold ≥14px): ≥3:1
+- Placeholder text: same 4.5:1 (not the muted-gray default)
+
+The most common failure: muted gray body text on a tinted near-white. If contrast is close, bump body color toward the ink end.
+
+## Anti-Cream Rule
+
+The warm-neutral band (OKLCH L 0.84–0.97, C < 0.06, hue 40–100) reads as cream/sand/paper regardless of what you call it. If the brief is "warm, editorial, refined" — that is NOT a license to use a near-white warm-tinted background. Warmth is carried by accent + typography + imagery. Pick: (a) a saturated brand color as body, (b) a true off-white at chroma 0, or (c) a darker mid-tone tinted neutral.
+
+## Token Architecture
+
+```css
+:root {
+  /* Brand */
+  --color-brand: oklch(/* primary */);
+  --color-brand-muted: oklch(/* lower chroma */);
+  
+  /* Surfaces */
+  --color-bg: oklch(/* page ground */);
+  --color-surface: oklch(/* panels */);
+  --color-surface-raised: oklch(/* cards */);
+  
+  /* Text */
+  --color-ink: oklch(/* headings */);
+  --color-body: oklch(/* body */);
+  --color-muted: oklch(/* captions */);
+  --color-faint: oklch(/* disabled */);
+  
+  /* Interactive */
+  --color-accent: oklch(/* CTA, links */);
+  --color-accent-hover: oklch(/* hover state */);
+}
+```

package/packages/@monomind/cli/.claude/skills/monodesign/craft.md

@@ -0,0 +1,51 @@
+---
+name: monodesign-craft
+description: Build a feature with impeccable UX and UI quality — shape the design, land the visual direction, build real production code, inspect and improve in-browser until it meets a high-end studio bar.
+type: design-sub-command
+argument-hint: "[feature description]"
+user-invocable: true
+---
+
+# Monodesign: Craft
+
+Build a feature with impeccable UX and UI quality. Real working code, committed design choices, exceptional craft.
+
+**Gates — do not compress.** Craft requires all setup gates to pass before writing code:
+1. PRODUCT.md and DESIGN.md loaded
+2. Register identified (brand or product) and matching reference loaded
+3. Shape brief confirmed by user
+
+Read `reference/craft.md` from the monodesign skill directory for the full flow.
+
+## Step 0: Project Foundation
+
+Before shape, before code: determine what kind of project you're working in.
+
+Check for:
+- An existing framework (`astro.config.mjs`, `next.config.js`, `vite.config.js`, etc.) — **if found, use it**
+- Existing component library or design system — read what's there before adding to it
+- Existing icon set — use what's already in the project; don't introduce a second set
+
+If greenfield with no framework, ask the user:
+- Astro (for content-led brand sites, landing pages)
+- SvelteKit / Next.js / Nuxt (app surfaces, significant interactivity)
+- Single index.html (one-shot demo, prototype)
+
+## Step 1: Shape the Design
+
+Run `/monodesign shape` if no confirmed brief exists. Stop and wait for explicit brief confirmation before writing code. Shape confirmation is NOT a green light to code; it's the green light to confirm direction.
+
+## Step 2: Implement
+
+With a confirmed brief:
+1. Load `reference/craft.md` for the full implementation protocol
+2. Follow the register-specific implementation guide (brand.md or product.md)
+3. Apply all shared design laws from the monodesign SKILL.md
+4. Verify visually using browser automation — don't assume it looks right
+5. Iterate until it meets the approved direction
+
+## Quality bar
+
+Produce ready-to-ship, production-grade code. Not a prototype. Not a starting point. Beautiful, responsive, fast, precise, bug-free, on-brand. Take attention to detail seriously.
+
+**The AI slop test**: if someone could look at this and say "AI made that" without doubt, it's failed. Cross-register failures are the absolute bans in the design laws.

package/packages/@monomind/cli/.claude/skills/monodesign/critique.md

@@ -0,0 +1,66 @@
+---
+name: monodesign-critique
+description: Provide an expert design critique — honest, specific, prioritized feedback on what's working, what's failing, and exactly how to fix it. The design director review.
+type: design-sub-command
+argument-hint: "[target URL, screenshot, or codebase path]"
+user-invocable: true
+---
+
+# Monodesign: Critique
+
+Provide an expert design critique. Honest, specific, and prioritized. Read `reference/critique.md` from the monodesign skill directory for the full protocol.
+
+## Voice
+
+Critique speaks with the voice of an experienced design director — not a checklist tool. It identifies what's actually wrong, explains why it's wrong in terms of user experience or brand damage, and says specifically what to do instead. Not: "The typography could be improved." Yes: "The heading is using Inter 500 at 2rem — this reads as a system default. Set it to your display typeface at 3.5rem 700 with -0.025em tracking."
+
+## Critique Dimensions
+
+**Visual hierarchy**
+- Can a first-time user identify the primary action without thinking?
+- Is the most important information visually loudest?
+- Is there a clear reading path (F-pattern, Z-pattern, or single column)?
+
+**Brand coherence**
+- Does this look like it belongs to the product's brand family?
+- Could it be any company's product, or does it have a specific identity?
+- Does it pass the AI slop test? (If someone could say "AI made that" without doubt, it's failed)
+
+**Information architecture**
+- Is related information grouped? Is unrelated information separated?
+- Is the navigation structure consistent with user mental models?
+- Are labels accurate and specific?
+
+**Interaction design**
+- Are interactive elements visually distinct from non-interactive ones?
+- Are states visible? (hover, active, loading, error, disabled)
+- Is the user always clear on what will happen before they act?
+
+**Technical implementation**
+- Are there obvious anti-patterns present? (Gradient text, side-stripe borders, glassmorphism as default, identical card grids)
+- Contrast failures
+- Broken responsive behavior
+
+## Critique Format
+
+```markdown
+# Design Critique: [Feature/Page]
+
+## What's working
+[2–3 specific things that are genuinely good]
+
+## Critical issues (fix before ship)
+### [Issue title]
+**What**: [specific description with element reference]
+**Why it matters**: [user impact or brand damage]
+**Fix**: [exact prescription — not "improve typography", but "set h1 to Geist 800 at 4rem"]
+
+## High priority
+...
+
+## Medium priority
+...
+
+## The single most important fix
+[If they fix only one thing, it should be this]
+```

package/packages/@monomind/cli/.claude/skills/monodesign/delight.md

@@ -0,0 +1,47 @@
+---
+name: monodesign-delight
+description: Add moments of delight, whimsy, and personality to interfaces — micro-interactions, easter eggs, playful copy, unexpected moments that make users smile without sacrificing usability.
+type: design-sub-command
+argument-hint: "[target component, empty state, interaction, or whole product]"
+user-invocable: true
+---
+
+# Monodesign: Delight
+
+Add moments of delight, whimsy, and personality. Read `reference/delight.md` from the monodesign skill directory for the full protocol.
+
+## Philosophy
+
+Delight is not decoration. It's the feeling a user gets when the product treats them as a human, not a task-completer. The best delight is:
+- **Discovered, not announced** — it rewards exploration, it doesn't interrupt
+- **Appropriate to context** — a playful empty state is right; a playful error message on a failed payment is wrong
+- **Consistent with brand personality** — delight that contradicts the brand voice creates whiplash
+
+## Where Delight Lives
+
+**Empty states**
+The most underdesigned surface in almost every product. When a user has no data, they're often new and uncertain. An empty state that's warm, encouraging, and occasionally charming turns uncertainty into curiosity.
+
+**Micro-interactions**
+The moments that feel physical: a button that compresses on press, a toggle that snaps, a checkbox that checks with a tiny satisfying arc, a completion animation that celebrates without being overwrought.
+
+**Copy**
+Delight isn't always visual. An error message that says "Hmm, that didn't work — here's what we know:" treats the user as a collaborator. Copy that has a voice (specific to this product, not generic SaaS) is delightful in itself.
+
+**Easter eggs**
+Hidden interactions that reward the curious. The konami code that does something silly. A hover state that's unexpectedly specific. A tooltip that breaks the fourth wall once.
+
+**Loading states**
+Instead of a spinning circle, something that's interesting to watch. A progress animation that tells you something about what the product is doing.
+
+## Delight Hierarchy
+
+Rate each idea against:
+1. **Does it interrupt the user's task?** If yes, cut it. Delight never gets in the way.
+2. **Is it consistent with the brand personality?** A product that's "expert, decisive, editorial" shouldn't have cartoon characters.
+3. **Does it degrade gracefully?** The primary function must work even if the delightful layer fails.
+4. **Will it get old?** Animations that play every time something happens become annoying. Use sparingly.
+
+## Implementation
+
+Read `reference/delight.md` for specific delight patterns by component type (empty states, interactions, copy formulas, animation recipes).

package/packages/@monomind/cli/.claude/skills/monodesign/distill.md

@@ -0,0 +1,56 @@
+---
+name: monodesign-distill
+description: Simplify an over-designed, cluttered, or complexity-burdened interface — remove what doesn't earn its place, reveal the essential structure underneath.
+type: design-sub-command
+argument-hint: "[target page, flow, or component]"
+user-invocable: true
+---
+
+# Monodesign: Distill
+
+Simplify an over-designed or cluttered interface. Read `reference/distill.md` from the monodesign skill directory for the full protocol.
+
+## Philosophy
+
+Every element on a page is a claim on the user's attention. When too many claims compete equally, the user's attention costs rise and comprehension falls. Distill removes the claims that can't justify their cost.
+
+## Assess the Clutter
+
+Walk through the interface and identify:
+
+**Structural complexity**
+- How many distinct visual layers exist? (More than 3 is usually too many)
+- How many columns? (Sometimes 1 column is the right answer)
+- Are there containers-within-containers? (Nested cards are always wrong)
+- Is the Z-axis used purposefully or as a decoration?
+
+**Information redundancy**
+- Is the same information shown twice? (Heading + tooltip + label that all say the same thing)
+- Are there labels that label things that are already obvious from context?
+- Are there intros that restate the page title?
+
+**Visual noise**
+- Decorative dividers between every section when whitespace would suffice
+- Icon + text where one alone would communicate equally well
+- Background patterns, textures, or gradients that add nothing
+
+**Navigation complexity**
+- Are there paths that lead nowhere useful?
+- Are there settings no one changes?
+- Are there features that serve < 5% of users in the primary navigation?
+
+## Distillation Protocol
+
+1. **List every element** on the target surface (visual inventory)
+2. **For each element, ask**: if this were removed, would a first-time user notice something missing? If no: remove it
+3. **Consolidate redundant information** into one canonical location
+4. **Increase whitespace** where elements were removed — don't fill the vacuum with something else
+5. **Verify the essential path** still works and is faster than before
+
+## Output
+
+A version of the interface that is measurably simpler:
+- Fewer distinct visual elements on screen at once
+- Clearer visual hierarchy (the important thing is visually louder than the less-important thing)
+- Faster to scan for a first-time user
+- No functionality removed from the primary user path

package/packages/@monomind/cli/.claude/skills/monodesign/document.md

@@ -0,0 +1,80 @@
+---
+name: monodesign-document
+description: Create or update DESIGN.md — extract and codify the design system from the codebase into a portable, AI-readable design reference that anchors all future monodesign work.
+type: design-sub-command
+argument-hint: "[project path]"
+user-invocable: true
+---
+
+# Monodesign: Document
+
+Create or update `DESIGN.md` — the design system reference for this project. Every `/monodesign` sub-command uses DESIGN.md to make on-brand decisions without asking the same questions repeatedly.
+
+DESIGN.md is the portable export of the project's design system: colors, typography, spacing, components, and conventions — extracted from what's actually in the code, not invented.
+
+Read `reference/document.md` from the monodesign skill directory for the full protocol.
+
+## Discovery
+
+**Extract from codebase:**
+```bash
+# Find CSS custom properties
+grep -r "^--" src/ --include="*.css" --include="*.scss" -h | sort -u
+
+# Find font declarations
+grep -r "font-family\|@font-face\|@import.*font" src/ -h | sort -u
+
+# Find color values
+grep -rE "#[0-9a-fA-F]{3,8}|oklch\(|rgb\(|hsl\(" src/ -h | sort -u | head -50
+```
+
+**Also read:**
+- `tailwind.config.js/ts` — theme configuration
+- `tokens.css`, `theme.css`, `variables.css`, or equivalent
+- A representative component to understand CSS conventions
+
+## DESIGN.md Structure
+
+```markdown
+# Design System
+
+## Brand Identity
+**Name**: [product name]
+**System**: [design system name, e.g. "Neo kinpaku system"]
+**Strategy**: [Restrained | Committed | Full palette | Drenched]
+**Theme**: [dark | light | both]
+
+## Colors (OKLCH)
+
+### Brand
+| Token | Value | Use |
+|---|---|---|
+| --color-brand | oklch(…) | Primary accent |
+| --color-brand-muted | oklch(…) | Secondary accent |
+
+### Surfaces
+[table]
+
+### Text
+[table]
+
+## Typography
+
+| Role | Font | Size | Weight | Line Height |
+|---|---|---|---|---|
+| Display | [family] | clamp(3rem, 5vw, 5rem) | 800 | 1.1 |
+| Heading 1 | … | … | … | … |
+| Body | … | 1rem | 400 | 1.6 |
+| Caption | … | 0.875rem | 400 | 1.4 |
+
+## Spacing Scale
+[4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128]
+
+## Components
+[Brief description of key shared components and their variants]
+
+## Conventions
+- File naming: [convention]
+- Token naming: [convention]  
+- Component import style: [named/default/barrel]
+```

package/packages/@monomind/cli/.claude/skills/monodesign/extract.md

@@ -0,0 +1,74 @@
+---
+name: monodesign-extract
+description: Extract an implicit design system from an existing codebase — discover tokens, components, patterns, and conventions already present, then codify them into a formal system.
+type: design-sub-command
+argument-hint: "[target codebase path or project]"
+user-invocable: true
+---
+
+# Monodesign: Extract
+
+Extract a design system from an existing codebase. Read `reference/extract.md` and `reference/token-architecture.md` from the monodesign skill directory for the full protocol.
+
+## Philosophy
+
+Every codebase with more than a few pages has an implicit design system — inconsistencies, but also patterns that have emerged over time. Extract makes the implicit explicit, without inventing a new system on top of what exists.
+
+## Discovery Phase
+
+**Color inventory**
+- Collect all color values used in the codebase (grep for `#`, `rgb`, `hsl`, `oklch`)
+- Group by apparent purpose (backgrounds, text, accents, borders, shadows)
+- Identify the brand anchor color(s)
+- Spot inconsistencies (5 slightly different grays)
+
+**Typography inventory**
+- Collect all font-family, font-size, font-weight, line-height, letter-spacing values
+- Map to semantic roles (heading-xl, heading-lg, body, caption, etc.)
+- Identify the type scale (if any)
+
+**Spacing inventory**
+- Collect all padding, margin, gap values
+- Identify if a consistent scale exists (4/8/16/24/32/48...)
+- Spot outliers
+
+**Component inventory**
+- List all recurring UI patterns (buttons, inputs, cards, badges, modals)
+- Note variants (primary/secondary/ghost buttons, etc.)
+- Identify inconsistent implementations of the same component
+
+## Codification
+
+**Token architecture** (CSS custom properties):
+```css
+:root {
+  /* Colors */
+  --color-brand-[scale]: oklch(…);
+  --color-surface-[level]: oklch(…);
+  --color-ink-[weight]: oklch(…);
+  
+  /* Type scale */
+  --text-[size]: [value];
+  --font-[role]: [family];
+  
+  /* Spacing scale */
+  --space-[size]: [rem];
+  
+  /* Radius */
+  --radius-[size]: [rem];
+}
+```
+
+**Component documentation**
+For each identified component: props, variants, states, example usage.
+
+## Output: DESIGN.md
+
+Write a `DESIGN.md` at the project root capturing:
+- Brand colors with OKLCH values
+- Type scale and font families
+- Spacing scale
+- Key components with their states
+- Design conventions (rounded vs. sharp, dense vs. airy, etc.)
+
+This becomes the anchor for all future `/monodesign` work on this project.

package/packages/@monomind/cli/.claude/skills/monodesign/harden.md

@@ -0,0 +1,65 @@
+---
+name: monodesign-harden
+description: Fix accessibility violations, keyboard navigation gaps, semantic HTML issues, ARIA problems, and contrast failures — bring the interface to WCAG AA compliance.
+type: design-sub-command
+argument-hint: "[target page or component]"
+user-invocable: true
+---
+
+# Monodesign: Harden
+
+Fix accessibility and robustness issues. Read `reference/harden.md` from the monodesign skill directory for the full protocol.
+
+## Accessibility Targets
+
+**WCAG AA** is the floor:
+- Body text: ≥4.5:1 contrast ratio
+- Large text (≥18px or bold ≥14px): ≥3:1
+- Interactive element focus indicators: ≥3:1 against adjacent colors
+- No information conveyed by color alone
+
+**Keyboard navigation**
+- Every interactive element reachable by Tab in logical order
+- Visible focus ring on every focused element (never `outline: none` without a replacement)
+- No keyboard traps
+- Escape closes modals and dropdowns
+- Arrow keys navigate within a group (menu items, radio buttons, tabs)
+
+**Semantic HTML**
+- Heading hierarchy is sequential (h1 → h2 → h3, no skipping)
+- Landmark roles present (main, nav, aside, footer)
+- Interactive elements use native elements (button, a, input) not div
+- Forms have labels associated with inputs (via for/id or wrapping label)
+
+**ARIA**
+- Used only when native semantics can't convey the role
+- `aria-label` on icon-only buttons
+- `aria-expanded`, `aria-controls` on toggle buttons
+- `aria-live` on dynamic content that updates without page reload
+- `role="status"` or `role="alert"` on notification areas
+
+**Images**
+- Decorative images: `alt=""`
+- Informative images: alt describes the information (not "image of...")
+- Icon images: alt is the icon's semantic meaning
+
+## Hardening Checklist
+
+```
+[ ] Run automated check: `npx axe <url>` or equivalent
+[ ] Tab through entire page — every interactive element reachable
+[ ] Check all headings form a logical hierarchy
+[ ] Verify all contrast ratios pass
+[ ] Test all interactive elements with keyboard only
+[ ] Verify screen reader announces dynamic content
+[ ] Check all forms have properly associated labels
+[ ] Test at 200% zoom — nothing overlaps or disappears
+[ ] Verify reduced motion preference is respected
+```
+
+## Never
+
+- `outline: none` or `outline: 0` without a replacement focus indicator
+- `tabindex="-1"` on focusable elements without a keyboard alternative
+- Color as the only differentiator between states
+- ARIA roles that contradict the HTML semantics (role="button" on an anchor that navigates)