chore: config cleanup and dependency upgrades

CLAUDE.md → .claude/CLAUDE.md

@@ -6,15 +6,13 @@ The project uses British English - strictly.
 
 ## Tech Stack
 
-- **Next.js 16** with App Router (not Pages Router)
-- **React 19.2.0** (latest with new features like Actions, `use` hook)
-- **React Compiler** enabled for automatic optimisations
-- **TypeScript 5** with strict mode
-- **Tailwind CSS v4** with PostCSS
-- **CI/CD** Vitest, Playwright, GitHub Actions, Vercel
-- **Biome** for linting/formatting (replaces ESLint + Prettier)
-- **Lefthook** for Git hooks (pre-commit: lint, typecheck, unit tests; pre-push: E2E tests)
-- **Clerk** for authentication (installed via shadcn/ui CLI with `@clerk/themes`)
+- **Framework**: Next.js 16 (React 19, App Router, React Compiler, TypeScript 6)
+- **Styling**: Tailwind CSS 4
+- **Auth**: Clerk 7 (`@clerk/nextjs`, `@clerk/ui` shadcn theme)
+- **Testing**: Vitest 4 + Testing Library (unit), Playwright 1.58 (E2E)
+- **Quality**: Biome 2.4 (lint + format, replaces ESLint/Prettier)
+- **Git Hooks**: Lefthook 2.1 (pre-commit: lint, typecheck, unit; pre-push: E2E)
+- **Deployment**: Vercel (Preview on PR, Production on merge)
 
 ## Key Commands
 
@@ -59,6 +57,9 @@ npx shadcn@latest --help                  # CLI help
 - Tailwind v4 uses `@import "tailwindcss"` syntax (not `@tailwind` directives)
 - Next.js 16 Dynamic route `params` is a Promise - must await: `{ params }: { params: Promise<{ id: string }> }`
 - Next.js 16 Middleware renamed to Proxy - `middleware.ts` → `proxy.ts` (but still uses `clerkMiddleware()` function)
+- `cacheComponents` enabled - uncached async data must be in `<Suspense>` or marked `"use cache"`
+- `cacheComponents` enabled - route segment configs deprecated (`dynamic`, `revalidate`, `fetchCache`)
+- `cacheComponents` enabled - Edge Runtime not supported
 
 ## Authentication (Clerk)
 

.claude/commands/coderabbit.md

@@ -9,19 +9,19 @@ allowed-tools: Bash(gh api:*), Read, Glob, Grep
 Parse `$1` to extract owner, repo, and comment ID.
 
 ```bash
-# strips analysis chain
+# strips analysis chain, includes diff context
 gh api repos/OWNER/REPO/pulls/comments/COMMENT_ID \
-  --jq '.body | gsub("<details>\\s*<summary>🧩 Analysis chain</summary>[\\s\\S]*?</details>\\s*"; "")' \
-  > z_rabbit_comment.md
+  --jq '"## Diff context\n\n```diff\n" + .diff_hunk + "\n```\n\n## Comment\n\n" + (.body | gsub("<details>\\s*<summary>🧩 Analysis chain</summary>[\\s\\S]*?</details>\\s*"; ""))' \
+  > x_coderabbit_COMMENT_ID.md
 ```
 
-**Important:** Write `z_rabbit_comment.md` to the project root (current working directory), not `/tmp/`.
+**Important:** Write `x_coderabbit_COMMENT_ID.md` to the project root.
 
 ## 2. Evaluate
 
 CodeRabbit AI is not always right.
 
-Evaluate the comment `z_rabbit_comment.md` against the context of our codebase and files it references. Assess:
+Evaluate the comment `x_coderabbit_COMMENT_ID.md` against the context of our codebase and files it references. Assess:
 
 | Criterion | Question |
 |-----------|----------|
@@ -43,3 +43,17 @@ Evaluate the comment `z_rabbit_comment.md` against the context of our codebase a
 ## Output Format
 
 Well structured, use emojis, if using tables keep width <100 chars for readability.
+
+## Replying to CodeRabbit on GitHub
+
+When you recommend skipping a fix, ask whether the user would like to reply to CodeRabbit.
+
+To reply to a PR review comment, use `in_reply_to` on the pull comments endpoint:
+
+```bash
+gh api repos/OWNER/REPO/pulls/PULL_NUMBER/comments \
+  -f body="@coderabbitai ..." \
+  -F in_reply_to=COMMENT_ID
+```
+
+Never reply to a CodeRabbit comment unless confirmed by the user.

.claude/commands/commit.md

@@ -1,36 +1,36 @@
 ---
-description: Create git commit for staged changes using template
+description: Create git commit message following template
+argument-hint: "[additional instructions]"
 ---
 
 # Create a clear Git commit message for **staged** changes
 
+Additional user instructions: $ARGUMENTS
+
 1. Analyse staged changes with commands in `<commit_context>` tags
-2. Apply commit template `<template>` with appropriate `<main_prefix>`
-3. Adhere to rules in `<rules>` tags
+2. Read and adhere to these rules in `<rules>` tags
+3. Apply commit template `<template>` with appropriate `<main_prefix>`
 
 <commit_context>
 
 - Branch context: `git branch --show-current`
-- Files changed: `git diff --cached --name-status`
 - Change volume: `git diff --cached --stat`
 - Detailed changes: `git diff --cached`
+- Recent commits: `git log --oneline -4`
 </commit_context>
 
 <template>
 
 [main_prefix]: [brief main summary in imperative mood]
 
-[Logical Group Name 1]:
-
+[Section heading]:
 - [Significant changes and impact over minor details]
-- ["Just enough detail" for collective project evolution]
-
-[Logical Group Name n (if needed)]:
+- [Write for someone reading this git log in 6 months]
 
+[Additional section (for multi-concern commits)]:
 - [etc.]
 
-[2-3 terse sentences of why / benefit / impact. Wrap at 90 characters]
-
+[2-3 terse sentences of why / benefit / impact]
 </template>
 
 <main_prefix>
@@ -44,16 +44,13 @@ description: Create git commit for staged changes using template
 - `refactor:` code changes that neither fix bugs nor add features
 - `style:` code formatting, visual consistency, linting fixes; no functional change
 - `chore:` dev workflow, workspace config, dependency updates, dev tools e.g. `.vscode/**/*`, `pyproject.toml`, `.gitignore`
-- `docs:` documentation changes only e.g. `README.md`, `docs/**/*.md`, `x_docs/**/*.md`
+- `docs:` documentation changes only e.g. `README.md`, `docs/**/*`, `.xdocs/**/*`
 - `feat:` new feature for users (adds functionality)
 </main_prefix>
 
 <rules>
-
 - Use British spelling
-- Use factual tone, avoid hyperbolic language
-- Avoid marketing adjectives (comprehensive, complete, enhanced, improved, etc.)
-- Use fitting amount of detail proportional to commit scope
-- Wrap the terse sentences so that no line exceeds 90 characters
-
+- Use factual tone - no hyperbole or marketing adjectives
+- Scale detail to commit scope (sections not needed for small changes)
+- Wrap text at 80-90 characters (NOT the git convention of 60-65)
 </rules>

.claude/settings.json

@@ -1,27 +1,9 @@
 {
   "permissions": {
     "allow": [
-      "mcp__ide__getDiagnostics",
+      "Bash(cat:*)",
       "Bash(claude mcp get:*)",
       "Bash(claude mcp list)",
-      "mcp__playwright__browser_click",
-      "mcp__playwright__browser_close",
-      "mcp__playwright__browser_console_messages",
-      "mcp__playwright__browser_evaluate",
-      "mcp__playwright__browser_fill_form",
-      "mcp__playwright__browser_hover",
-      "mcp__playwright__browser_navigate",
-      "mcp__playwright__browser_navigate_back",
-      "mcp__playwright__browser_network_requests",
-      "mcp__playwright__browser_press_key",
-      "mcp__playwright__browser_resize",
-      "mcp__playwright__browser_run_code",
-      "mcp__playwright__browser_snapshot",
-      "mcp__playwright__browser_tabs",
-      "mcp__playwright__browser_take_screenshot",
-      "mcp__playwright__browser_type",
-      "mcp__playwright__browser_wait_for",
-      "Bash(cat:*)",
       "Bash(echo:*)",
       "Bash(find:*)",
       "Bash(lsof:*)",
@@ -60,41 +42,39 @@
       "Bash(vercel open)",
       "Bash(vercel project ls:*)",
       "Bash(vercel whoami)",
-      "WebFetch(domain:biomejs.dev)",
-      "WebFetch(domain:docs.github.com)",
-      "WebFetch(domain:github.com)",
-      "WebFetch(domain:lefthook.dev)",
-      "WebFetch(domain:nextjs.org)",
-      "WebFetch(domain:playwright.dev)",
-      "WebFetch(domain:tailwindcss.com)",
-      "WebFetch(domain:ui.shadcn.com)",
-      "WebFetch(domain:vercel.com)",
-      "WebFetch(domain:vitest.dev)"
+      "mcp__ide__getDiagnostics",
+      "mcp__playwright__browser_click",
+      "mcp__playwright__browser_close",
+      "mcp__playwright__browser_console_messages",
+      "mcp__playwright__browser_evaluate",
+      "mcp__playwright__browser_fill_form",
+      "mcp__playwright__browser_hover",
+      "mcp__playwright__browser_navigate",
+      "mcp__playwright__browser_navigate_back",
+      "mcp__playwright__browser_network_requests",
+      "mcp__playwright__browser_press_key",
+      "mcp__playwright__browser_resize",
+      "mcp__playwright__browser_run_code",
+      "mcp__playwright__browser_snapshot",
+      "mcp__playwright__browser_tabs",
+      "mcp__playwright__browser_take_screenshot",
+      "mcp__playwright__browser_type",
+      "mcp__playwright__browser_wait_for"
     ],
-    "deny": ["Read(**/.env)", "Read(**/.envrc)", "Read(x_docs/DONE/**)"],
+    "deny": ["Read(**/.env)", "Read(**/.envrc)", "Read(.xdocs/DONE/**)"],
     "ask": []
   },
   "enabledPlugins": {
-    "playwright-skill@playwright-skill": false,
-    "skill-creator@my-claude-plugins": false,
-    "frontend-design@my-claude-plugins": false,
-    "tailwindcss@my-claude-plugins": false,
-    "shadcn-ui@my-claude-plugins": true,
+    "shadcn-ui@my-claude-marketplace": true,
     "feature-dev@claude-plugins-official": true,
     "code-review@claude-plugins-official": true,
-    "pr-review-toolkit@claude-plugins-official": true
+    "code-simplifier@claude-plugins-official": true
   },
   "extraKnownMarketplaces": {
-    "playwright-skill": {
-      "source": {
-        "source": "github",
-        "repo": "lackeyjb/playwright-skill"
-      }
-    },
-    "my-claude-plugins": {
+    "my-claude-marketplace": {
       "source": {
         "source": "github",
-        "repo": "michellepace/my-claude-plugins"
+        "repo": "michellepace/my-claude-marketplace"
       }
     },
     "claude-plugins-official": {

.gitignore

@@ -42,4 +42,4 @@ next-env.d.ts
 .playwright-mcp/
 
 # Temporary docs
-x_docs/temp/
+.xdocs/temp/

.markdownlint-cli2.yaml

@@ -0,0 +1,17 @@
+# Configuration for markdownlint-cli2 and VSCode/Cursor extension
+# Extension: davidanson.vscode-markdownlint
+
+ignores:
+  - "node_modules/**"
+
+# Disable only the rules that interfere with practical markdown writing
+config:
+  MD013: false  # Line length (inappropriate for markdown)
+  MD024: false  # Allow duplicate headings ("### Example", "### Example")
+  MD033: false  # Allow inline HTML (<details>, <tags>, etc.)
+  MD036: false  # Allow emphasis (bold/italic) without treating it as heading
+  MD040: false  # Fenced code blocks don't need language specified
+  MD028: false  # Allow blank lines between blockquotes (attributed quotes)
+  MD041: false  # First line doesn't need to be h1
+  MD060: false  # Table column style (compact tables are fine)
+  MD032: false  # Lists in templates don't need surrounding blank lines

.mcp.json

@@ -8,6 +8,13 @@
     "shadcn": {
       "command": "npx",
       "args": ["shadcn@latest", "mcp"]
+    },
+    "Ref": {
+      "type": "http",
+      "url": "https://api.ref.tools/mcp",
+      "headers": {
+        "x-ref-api-key": "${API_KEY_MCP_REF}"
+      }
     }
   }
 }

.vscode/settings.json

@@ -1,15 +1,9 @@
 {
   // General editor settings
+  "editor.minimap.enabled": false,
+  "editor.wordWrap": "on",
   "window.commandCenter": true,
   "editor.colorDecorators": true,
-  "files.associations": { "*.css": "tailwindcss" }, // recommended by tailwind
-  "editor.quickSuggestions": { "strings": "on" }, // recommended by tailwind
-  "files.exclude": {
-    "**/.next": true, // Hide Next.js build output
-    "**/node_modules": true, // Hide npm installed dependencies
-    "next-env.d.ts": true, // Hide Next.js file (uneditable)
-    "tsconfig.tsbuildinfo": true // Hide TypeScript build info file
-  },
 
   // Markdownlint: Markdown linting (matches CodeRabbit)
   "[markdown]": {
@@ -18,11 +12,20 @@
     }
   },
 
+  // TAILWIND
+  "files.associations": { "*.css": "tailwindcss" }, // recommended by tailwind
+  "editor.quickSuggestions": { "strings": "on" }, // recommended by tailwind
+  "files.exclude": {
+    "**/.next": true, // Hide Next.js build output
+    "**/node_modules": true, // Hide npm installed dependencies
+    "next-env.d.ts": true, // Hide Next.js file (uneditable)
+    "tsconfig.tsbuildinfo": true // Hide TypeScript build info file
+  },
   // Tailwind CSS IntelliSense
   "tailwindCSS.experimental.configFile": "app/globals.css", // required
   "tailwindCSS.validate": true, // linting
 
-  // Biome: formatting, linting, import organization
+  // Biome: formatting, linting, import organisation
   "editor.defaultFormatter": "biomejs.biome",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {

x_docs/figma/nav-over-breakpoints.md → .xdocs/figma/nav-over-breakpoints.md

@@ -1,6 +1,6 @@
 # Target: Ho Nav (and layout) Should Work At Different Breakpoints
 
-The image [nav-over-breakpoints.jpg](x_docs/figma/nav-over-breakpoints.jpg) contains 5 screenshots of the target UI for navigation. The content of this document describes what the image shows visually. This content is concerned with layout more than UI details like text, link names etc. The five screenshots in the image are taken on the ask-questions page of the implemented course project follow along. It is my goal to pragmatically align to this following elegant and best practices.
+The image [nav-over-breakpoints.jpg](.xdocs/figma/nav-over-breakpoints.jpg) contains 5 screenshots of the target UI for navigation. The content of this document describes what the image shows visually. This content is concerned with layout more than UI details like text, link names etc. The five screenshots in the image are taken on the ask-questions page of the implemented course project follow along. It is my goal to pragmatically align to this following elegant and best practices.
 
 ---