diff --git a/.claude/skills/create-plan/SKILL.md b/.claude/skills/create-plan/SKILL.md
new file mode 100644
index 00000000..e78eb594
--- /dev/null
+++ b/.claude/skills/create-plan/SKILL.md
@@ -0,0 +1,78 @@
+---
+disable-model-invocation: true
+description: Create an implementation plan for a website change from a text description or GitHub issue number. Interviews the user to fill gaps before planning.
+argument-hint: "[description of change or GitHub issue number]"
+---
+
+# Create Implementation Plan
+
+You are helping a team member plan a website change. Your input is either a text description or a GitHub issue number. Your job is to produce a great plan — but only after you have enough context to do so.
+
+## Phase 1: Gather Context
+
+1. **Parse the input:**
+   - If the argument is a number, fetch the issue: `gh issue view <number>`
+   - Otherwise, treat the argument as a plain-text description of the desired change
+
+2. **Assess what you know.** Check whether you have enough to write a solid plan. You need:
+   - **What** — the type of change (new feature, enhancement, fix, refactor)
+   - **Where** — which page(s), section(s), or component(s) are affected
+   - **Behavior** — what should happen, what should the result look like
+   - **Visual expectations** — layout, styling, responsive behavior (if applicable)
+
+3. **If gaps exist, interview the user.** Use `AskUserQuestion` with 1-3 targeted questions per round. Max 2-3 rounds before moving forward with what you have. Example questions by gap type:
+
+   **Where:**
+   - Which page or section is this for?
+   - Is this a new page or a change to an existing one?
+
+   **Behavior:**
+   - What should happen when the user interacts with this?
+   - What data should be displayed? Where does it come from?
+
+   **Visual:**
+   - Do you have a screenshot, mockup, or reference URL? (paste an image or file path)
+   - Should this match an existing section on the site? Which one?
+   - Any specific desktop vs. mobile differences?
+
+   **Scope:**
+   - Is this a one-off or should it be reusable?
+   - Are there edge cases to handle (empty states, long text, missing data)?
+
+4. **If the input is already detailed enough, skip the interview** and move to Phase 2.
+
+## Phase 2: Visual References
+
+- If the user provides screenshots or mockups → use the Read tool to view them and reference in the plan
+- If no visuals provided but the change is visual → ask once: "Do you have a screenshot or mockup? If not, no worries — I'll base the plan on your description."
+- If the change involves an existing page → suggest using `/screenshot <path>` to capture current state for reference
+- If the user provides a reference URL → note it in the plan for the implementer
+
+## Phase 3: Explore the Codebase
+
+Use Glob, Grep, and Read tools to understand what files and patterns are relevant. Pay attention to:
+- Existing components in `app/components/` — especially `Base/` and `Block/`
+- Page structure in `app/pages/`
+- Types in `types/schema.ts`
+- Styling patterns in similar existing components
+
+## Phase 4: Produce the Plan
+
+**Enter plan mode** and write the plan following the template in `.docs/plan-template.md`. The plan must include:
+- Summary of the change
+- Files to modify/create
+- Step-by-step implementation approach
+- Existing patterns to follow (with file paths)
+- Visual references (if provided)
+- Unresolved questions (if any remain)
+
+**Exit plan mode** when the plan is ready for approval.
+
+## Important
+
+- **Interview first, plan second.** A vague request → interview. A detailed request → skip to explore.
+- Keep interview rounds short and focused. Don't ask everything at once.
+- Reference existing patterns and components — don't reinvent what exists
+- Keep plans concrete and actionable, not abstract
+- Call out risks or trade-offs
+- If the change is content-only (text, images), tell the user it should be done in the Directus CMS instead
diff --git a/.claude/skills/debug/SKILL.md b/.claude/skills/debug/SKILL.md
new file mode 100644
index 00000000..fdebef51
--- /dev/null
+++ b/.claude/skills/debug/SKILL.md
@@ -0,0 +1,115 @@
+---
+disable-model-invocation: true
+description: Debug page issues using browser diagnostics. Opens the page, gathers console/network errors, traces to source, fixes, and verifies.
+argument-hint: "[url path or description of issue]"
+---
+
+# Debug Page Issue
+
+Open the browser, gather diagnostics, find the root cause, fix it, and verify the fix.
+
+## Context
+
+Current branch:
+```
+`! git branch --show-current`
+```
+
+Changed files:
+```
+`! git diff --name-only main...HEAD`
+```
+
+## Steps
+
+1. **Check browser access:**
+   - Run `which agent-browser` to check availability
+   - If available → **agent-browser mode** (opens pages automatically)
+   - If not → **MCP-only mode** (user must have the page open in their browser)
+   - Tell the user which mode you're using
+
+2. **Parse arguments:**
+   - URL path (e.g., `/pricing`) → debug that specific page
+   - Text description (e.g., "images not loading on homepage") → infer page from description and git diff
+   - No args → ask the user what issue they're seeing and which page
+
+3. **Start dev server** (agent-browser mode only, skip if already running):
+   ```bash
+   pnpm dev &
+   DEV_PID=$!
+   for i in {1..30}; do curl -s -o /dev/null http://localhost:3000 && break || sleep 2; done
+   ```
+
+4. **Open the page** (agent-browser mode only):
+   ```bash
+   agent-browser open "http://localhost:3000<path>"
+   agent-browser wait --load networkidle
+   ```
+
+5. **Gather diagnostics** — run these MCP tools (work in both modes):
+   - `mcp__browser-tools__getConsoleErrors` — JS runtime errors, Vue warnings
+   - `mcp__browser-tools__getConsoleLogs` — all console output
+   - `mcp__browser-tools__getNetworkErrors` — failed API calls, 404s, CORS issues
+   - `mcp__browser-tools__getNetworkLogs` — all network activity
+   - `mcp__browser-tools__takeScreenshot` — current visual state
+
+6. **Analyze and trace to source:**
+   - **Network errors** → check `server/api/` routes, check `app/plugins/directus.ts` for API config
+   - **Console errors** → use Grep to find the error source in `app/components/`, read the file
+   - **Vue warnings** → check component props, data fetching in the relevant `Block*.vue` or `Base*.vue`
+   - **Visual issues** → read component styles, check responsive breakpoints (50rem, 68rem)
+   - **API errors** → check Directus query fields, permissions, collection names in `types/schema.ts`
+
+7. **Fix the issue:**
+   - Make the minimal code change to resolve the root cause
+   - Follow project conventions (scoped SCSS, `<script setup lang="ts">`, etc.)
+
+8. **Verify the fix:**
+   - **Agent-browser mode:** reload the page and re-run diagnostics
+     ```bash
+     agent-browser open "http://localhost:3000<path>"
+     agent-browser wait --load networkidle
+     ```
+   - **MCP-only mode:** ask the user to refresh, then re-run `getConsoleErrors` and `getNetworkErrors`
+   - Take a screenshot to confirm visual state
+
+9. **Optional audits** (if user passes flags):
+   - `--perf` → run `mcp__browser-tools__runPerformanceAudit`
+   - `--a11y` → run `mcp__browser-tools__runAccessibilityAudit`
+
+10. **Clean up:**
+    - Kill dev server if this skill started it: `kill $DEV_PID`
+    - Wipe browser logs: `mcp__browser-tools__wipeLogs`
+
+11. **Output a debug report:**
+
+```markdown
+## Debug Report: <page>
+
+### Issues Found
+- **Console Error:** `<error message>` in `<file>:<line>`
+- **Network Error:** `<method> <url>` returned `<status>`
+
+### Changes Made
+- <description of fix> in `<file path>`
+
+### Verification
+- Console errors: 0
+- Network errors: 0
+- Screenshot confirms fix
+```
+
+## Key Files
+
+- `app/plugins/directus.ts` — Directus SDK client, retry logic, rate limiting
+- `app/components/Block/*.vue` — CMS block components (most common issue source)
+- `app/components/Base/*.vue` — reusable UI primitives
+- `server/api/` — Nitro server routes
+- `types/schema.ts` — Directus collection types
+
+## Important
+
+- Always kill the dev server if you started it, even if debugging fails
+- Don't add `console.log` — the project ESLint config forbids it
+- Keep fixes minimal — only change what's needed to resolve the issue
+- If you can't determine the root cause, report what you found and ask the user for more context
diff --git a/.claude/skills/pre-review/SKILL.md b/.claude/skills/pre-review/SKILL.md
new file mode 100644
index 00000000..8f8a2b21
--- /dev/null
+++ b/.claude/skills/pre-review/SKILL.md
@@ -0,0 +1,76 @@
+---
+disable-model-invocation: true
+description: Review current changes for code quality, Vue patterns, styling, and security issues before submitting a PR.
+---
+
+# Pre-Review Changes
+
+Review the current changes before submitting a PR.
+
+## Context
+
+Current diff:
+```
+`! git diff`
+```
+
+Commit log on this branch:
+```
+`! git log --oneline main..HEAD`
+```
+
+## Steps
+
+1. **Run automated checks:**
+   - Run `pnpm lint` and report results
+   - Run `pnpm typecheck` and report results
+
+2. **Review the diff** for issues across these categories:
+
+   **Code quality:**
+   - `console.log` or `debugger` statements
+   - Nested ternaries
+   - Duplicated code — logic, markup, or styles repeated across or within files
+   - Overly complex code that could be simplified without losing functionality (long functions, deep nesting, unnecessary abstractions)
+
+   **Vue patterns:**
+   - Missing `scoped` attribute on `<style>` tags
+   - Missing TypeScript types (untyped props, `any` usage)
+   - Not using existing Base components (`BaseButton`, `BaseCard`, etc.) when applicable
+   - Reactive state that should be computed properties
+   - Missing `key` attributes on `v-for` loops
+   - Direct DOM manipulation instead of Vue reactivity
+   - Props mutation (modifying props directly instead of emitting events)
+
+   **Styling:**
+   - Inline styles instead of scoped SCSS
+   - Hardcoded colors, spacing, or font sizes instead of `--space-*` / CSS custom properties
+   - Missing responsive handling for tablet (`50rem`) and desktop (`68rem`) breakpoints
+
+   **Security:**
+   - `v-html` with unsanitized or user-controlled content
+   - Interpolating raw URLs or external data without validation
+   - Exposed API keys, tokens, or secrets
+
+3. **Output a review summary:**
+
+   ```
+   ## Pre-Review Results
+
+   **Lint:** ✅ Pass / ❌ Fail
+   **Typecheck:** ✅ Pass / ❌ Fail
+
+   ### Issues Found
+   - [ ] issue description (file:line)
+
+   ### Looks Good
+   - brief summary of what the changes do correctly
+   ```
+
+4. If there are issues, offer to fix them automatically.
+
+## Important
+
+- Be specific — reference exact files and line numbers
+- Don't flag things that are pre-existing (not in the diff)
+- Focus on the project conventions in AGENTS.md
diff --git a/.claude/skills/screenshot/SKILL.md b/.claude/skills/screenshot/SKILL.md
new file mode 100644
index 00000000..bd639902
--- /dev/null
+++ b/.claude/skills/screenshot/SKILL.md
@@ -0,0 +1,101 @@
+---
+disable-model-invocation: true
+description: Capture desktop and mobile screenshots of pages using agent-browser. Supports before/after comparison.
+argument-hint: "[url paths or --compare]"
+---
+
+# Screenshot Pages
+
+Capture screenshots of pages affected by current changes using `agent-browser`.
+
+## Context
+
+Current branch:
+```
+`! git branch --show-current`
+```
+
+Changed files:
+```
+`! git diff --name-only main...HEAD`
+```
+
+## Steps
+
+1. **Check prerequisites:**
+   - Verify `agent-browser` is available: `which agent-browser`
+   - If not installed, tell the user to install it: `npm install -g @anthropic-ai/agent-browser`
+   - Ensure `.screenshots/` directory exists: `mkdir -p .screenshots`
+
+2. **Parse arguments:**
+   - If URL paths provided (e.g., `/pricing /features`) → screenshot those pages
+   - If `--compare` flag → do before/after comparison (see step 5)
+   - If no args → infer affected pages from the git diff. Look at changed files in `app/pages/` to determine routes. If changes are only in components/blocks, ask the user which pages to screenshot.
+
+3. **Start dev server** in background:
+   ```bash
+   pnpm dev &
+   DEV_PID=$!
+   ```
+   Wait for `http://localhost:3000` to respond:
+   ```bash
+   for i in {1..30}; do curl -s -o /dev/null http://localhost:3000 && break || sleep 2; done
+   ```
+
+4. **Capture screenshots** for each page path:
+   ```bash
+   # Desktop (1440x900)
+   agent-browser open "http://localhost:3000<path>"
+   agent-browser wait --load networkidle
+   agent-browser set viewport 1440 900
+   agent-browser screenshot ".screenshots/<name>-desktop.png" --full
+
+   # Mobile (390x844)
+   agent-browser set viewport 390 844
+   agent-browser screenshot ".screenshots/<name>-mobile.png" --full
+   ```
+   - For the homepage `/`, use `home` as the name
+   - For other paths like `/pricing`, use the last segment as the name (e.g., `pricing`)
+
+5. **Before/after mode** (when `--compare` is passed):
+   - First, stash current changes: `git stash`
+   - Restart dev server, wait for it
+   - Screenshot each page with `-before-desktop.png` / `-before-mobile.png` suffixes
+   - Restore changes: `git stash pop`
+   - Restart dev server, wait for it
+   - Screenshot each page with `-after-desktop.png` / `-after-mobile.png` suffixes
+
+6. **Kill dev server:**
+   ```bash
+   kill $DEV_PID
+   ```
+
+7. **Output results** as a markdown table.
+
+## Output Format
+
+For standard mode:
+```markdown
+## Screenshots
+
+| Page | Desktop | Mobile |
+|------|---------|--------|
+| /pricing | ![desktop](.screenshots/pricing-desktop.png) | ![mobile](.screenshots/pricing-mobile.png) |
+```
+
+For compare mode:
+```markdown
+## Screenshots (Before / After)
+
+### /pricing
+| Viewport | Before | After |
+|----------|--------|-------|
+| Desktop | ![before](.screenshots/pricing-before-desktop.png) | ![after](.screenshots/pricing-after-desktop.png) |
+| Mobile | ![before](.screenshots/pricing-before-mobile.png) | ![after](.screenshots/pricing-after-mobile.png) |
+```
+
+## Important
+
+- Always kill the dev server when done, even if something fails
+- Screenshots go in `.screenshots/` at the repo root (already gitignored)
+- If `agent-browser` commands fail, suggest the user check that the browser agent is running
diff --git a/.claude/skills/submit-pr/SKILL.md b/.claude/skills/submit-pr/SKILL.md
new file mode 100644
index 00000000..19101c42
--- /dev/null
+++ b/.claude/skills/submit-pr/SKILL.md
@@ -0,0 +1,68 @@
+---
+disable-model-invocation: true
+description: Create a pull request for the current branch with automated checks and screenshot uploads.
+---
+
+# Submit Pull Request
+
+Create a pull request for the current branch.
+
+## Context
+
+Current branch:
+```
+`! git branch --show-current`
+```
+
+Diff against main:
+```
+`! git diff main...HEAD`
+```
+
+Commit log:
+```
+`! git log --oneline main..HEAD`
+```
+
+## Steps
+
+1. **Check prerequisites:**
+   - Verify there are commits ahead of `main`
+   - Verify the working tree is clean (no uncommitted changes). If dirty, ask user whether to commit first.
+   - Verify lint and typecheck pass. If not, ask user whether to fix or proceed anyway.
+
+2. **Push the branch** to origin if not already pushed:
+   ```bash
+   git push -u origin HEAD
+   ```
+
+3. **Draft the PR description** using the template in `.docs/pr-template.md`. Fill in:
+   - Summary from the commit log and diff
+   - What changed (files and components)
+   - How to test (based on what was modified)
+
+4. **Create the PR** targeting `main`:
+   ```bash
+   gh pr create --title "<title>" --body "<body>"
+   ```
+
+5. **Attach screenshots** if `.screenshots/*.png` files exist:
+   - After creating the PR, build a markdown comment with the screenshot images
+   - Upload and comment using:
+     ```bash
+     gh pr comment <PR_NUMBER> --body "$(cat <<'EOF'
+     ## Screenshots
+
+     <markdown table with image references>
+     EOF
+     )"
+     ```
+   - Clean up: `rm -rf .screenshots/`
+
+6. **Output the PR URL** so the user can share it with reviewers.
+
+## Important
+
+- PR title: under 72 chars, use conventional commit prefix (feat:, fix:, etc.)
+- Keep the description concise but complete
+- Always target `main` unless told otherwise
diff --git a/.docs/claude-code-guide.md b/.docs/claude-code-guide.md
new file mode 100644
index 00000000..16fa21c8
--- /dev/null
+++ b/.docs/claude-code-guide.md
@@ -0,0 +1,116 @@
+# Claude Code Guide for the Website Team
+
+A guide for using Claude Code to make changes to the Directus marketing website.
+
+## What is Claude Code?
+
+Claude Code is an AI-powered coding assistant that runs in your terminal. It can read your codebase, write code, run commands, and help you submit pull requests — all through natural language conversation.
+
+## Getting Started
+
+### 1. Install Claude Code
+
+```bash
+npm install -g @anthropic-ai/claude-code
+```
+
+You'll need to authenticate with your team account. Ask a team lead for access if you don't have it.
+
+### 2. Clone the repo and open it
+
+```bash
+git clone https://github.com/directus/website.git
+cd website
+claude
+```
+
+This drops you into an interactive session where you can ask Claude to make changes.
+
+### 3. Install dependencies (first time only)
+
+```bash
+pnpm install
+```
+
+## Workflow: Skills
+
+The recommended workflow uses three skills (slash commands) that guide you through the full process:
+
+### Step 1: Plan your change
+
+```
+/create-plan Add a compact variant to the Header block
+```
+
+Or reference a GitHub issue:
+
+```
+/create-plan 42
+```
+
+Claude will explore the codebase, ask clarifying questions, and produce a structured implementation plan for your approval.
+
+### Step 2: Implement
+
+Once you approve the plan, Claude implements it. You can also make changes conversationally:
+
+```
+> Make the changes from the plan
+```
+
+### Step 2b: Capture screenshots (optional)
+
+```
+/screenshot /pricing /features
+```
+
+Spins up the dev server, captures desktop and mobile screenshots of the specified pages, and saves them to `.screenshots/`. Use `--compare` for before/after screenshots. When you run `/submit-pr`, any screenshots are automatically uploaded as a PR comment.
+
+### Step 3: Review before submitting
+
+```
+/pre-review
+```
+
+Runs lint + typecheck and reviews your diff for common issues (missing scoped styles, console.logs, etc.). Fix any issues before proceeding.
+
+### Step 4: Submit a PR
+
+```
+/submit-pr
+```
+
+Pushes your branch, creates a PR targeting `main` with a structured description, and gives you the PR URL.
+
+### Step 5: Get a review
+
+Add the `claude` label to your PR on GitHub. This triggers an automated code review that will post comments on your PR. A team dev will also review and approve before merge.
+
+## What Happens After You Push
+
+1. **CI Checks** run automatically (lint, typecheck, build) — all must pass
+2. **Deploy Preview** — Netlify creates a preview URL so you can see your changes live
+3. **Claude Review** — add the `claude` label for an automated code review
+4. **Human Review** — a dev reviews and merges your PR
+
+### Debugging issues
+
+```
+/debug /pricing
+```
+
+Opens the page in the browser, checks for console errors, network failures, and visual issues. Traces errors to source code, fixes them, and verifies the fix. Works with `agent-browser` (automatic) or MCP browser tools (manual — you keep the page open).
+
+## Tips
+
+- **Be specific.** "Make the header bigger" is vague. "Increase the header font size on desktop from 3rem to 3.5rem" is better.
+- **Ask Claude to explain.** If you don't understand something, ask: "What does this component do?" or "How does the block system work?"
+- **Don't worry about breaking things.** CI checks catch most issues, deploy previews let you verify visually, and a dev reviews before merge.
+- **Use existing components.** Before asking Claude to build something new, ask: "Is there an existing component for X?" The `Base/` directory has reusable primitives.
+- **Run checks locally.** `pnpm lint` and `pnpm typecheck` catch issues before you push.
+
+## Common Gotchas
+
+- **Content vs. code changes.** If you're updating text, images, or page content — that's done in the Directus CMS admin, not in this repo. This repo is for layout, styling, and functionality changes.
+- **Environment variables.** You'll need a `.env` file for local development. Ask a dev for the values.
+- **Node version.** This project uses Node 20. Use `nvm use 20` if you have nvm installed.
diff --git a/.docs/plan-template.md b/.docs/plan-template.md
new file mode 100644
index 00000000..bba5db89
--- /dev/null
+++ b/.docs/plan-template.md
@@ -0,0 +1,42 @@
+# Plan: [Title]
+
+## Summary
+
+Brief description of what this change does and why.
+
+## Files to Change
+
+| File | Action | Description |
+|------|--------|-------------|
+| `path/to/file` | modify/create | what changes |
+
+## Implementation Steps
+
+1. Step one
+2. Step two
+3. ...
+
+## Existing Patterns to Follow
+
+- Reference to existing components, utilities, or conventions that this change should match
+
+## Scope
+
+What's included in this change.
+
+## Out of Scope
+
+What's explicitly NOT included (to set expectations and prevent scope creep).
+
+## Acceptance Criteria
+
+- [ ] Criterion one
+- [ ] Criterion two
+
+## Risks / Trade-offs
+
+- Any risks, edge cases, or trade-offs to be aware of
+
+## Unresolved Questions
+
+- Questions that need answers before implementation (if any)
diff --git a/.docs/pr-template.md b/.docs/pr-template.md
new file mode 100644
index 00000000..7c52732e
--- /dev/null
+++ b/.docs/pr-template.md
@@ -0,0 +1,25 @@
+## Summary
+
+<!-- 1-3 sentences: what changed and why -->
+
+## What Changed
+
+<!-- List of files/components modified and what was done to each -->
+
+-
+
+## How to Test
+
+<!-- Steps for a reviewer to verify the changes -->
+
+1. Open the deploy preview
+2. Navigate to ...
+3. Verify ...
+
+## Screenshots
+
+<!-- Before/after if applicable, or delete this section -->
+
+## Deploy Preview
+
+<!-- Netlify deploy preview link (auto-generated after push) -->
diff --git a/.docs/vue-best-practices.md b/.docs/vue-best-practices.md
new file mode 100644
index 00000000..a21203eb
--- /dev/null
+++ b/.docs/vue-best-practices.md
@@ -0,0 +1,119 @@
+# Vue Component Best Practices
+
+Conventions and patterns for Vue components in this project.
+
+## Component Structure
+
+Every component should follow this order:
+
+```vue
+<script setup lang="ts">
+// 1. Imports (auto-imported by Nuxt, so usually minimal)
+// 2. Props
+// 3. Emits
+// 4. Composables
+// 5. Reactive state
+// 6. Computed properties
+// 7. Functions
+// 8. Lifecycle hooks / watchers
+</script>
+
+<template>
+  <!-- Single root element preferred -->
+</template>
+
+<style lang="scss" scoped>
+/* Styles always scoped */
+</style>
+```
+
+## Props
+
+Use `defineProps<T>()` with TypeScript interfaces. Use `withDefaults()` when defaults are needed.
+
+```vue
+<script setup lang="ts">
+// Props destructure is enabled in this project
+const { title, variant = 'default' } = defineProps<{
+	title: string;
+	variant?: 'default' | 'compact';
+}>();
+</script>
+```
+
+## Styling
+
+- Always use `<style lang="scss" scoped>`
+- Use CSS custom properties from `app/assets/css/vars.css` for colors, spacing, fonts
+- Use `--space-*` tokens for spacing (not hardcoded `px`/`rem` values)
+- Responsive breakpoints: `50rem` (tablet), `68rem` (desktop)
+
+```scss
+.container {
+	padding: var(--space-4);
+
+	@media (width > 50rem) {
+		padding: var(--space-6);
+	}
+
+	@media (width > 68rem) {
+		padding: var(--space-8);
+	}
+}
+```
+
+## Base Components
+
+Always use existing Base components instead of raw HTML for common patterns:
+
+| Component | Use for |
+|-----------|---------|
+| `BaseButton` | Buttons and button-like links |
+| `BaseCard` | Card layouts |
+| `BaseContainer` | Page-width containers |
+| `BaseHeading` | Section headings |
+| `BaseText` | Body text blocks |
+| `BaseIcon` | Icons |
+| `BaseBadge` | Badges and tags |
+| `BaseMedia` | Images and video |
+
+## Data Fetching
+
+Block components receive a `uuid` prop and fetch their own data:
+
+```vue
+<script setup lang="ts">
+const { uuid } = defineProps<{ uuid: string }>();
+
+const { data: block } = useAsyncData(uuid, () => {
+	// fetch from Directus API
+});
+</script>
+```
+
+## Composables
+
+Prefer [VueUse](https://vueuse.org) over writing custom composables for common browser APIs:
+
+| Instead of | Use |
+|------------|-----|
+| Custom `ResizeObserver` | `useResizeObserver` |
+| Custom `IntersectionObserver` | `useIntersectionObserver` |
+| Custom keyboard listeners | `useEventListener` / `useMagicKeys` |
+| Custom `matchMedia` | `useMediaQuery` |
+| Custom scroll listener | `useScroll` / `useElementVisibility` |
+| Custom `localStorage` wrapper | `useLocalStorage` |
+| Custom clipboard handling | `useClipboard` |
+| Custom debounce/throttle | `useDebounceFn` / `useThrottleFn` |
+
+VueUse is auto-imported by Nuxt — no import statements needed.
+
+## Common Mistakes to Avoid
+
+- Missing `scoped` on `<style>` tags — styles leak globally
+- Using `console.log` or `debugger` — ESLint will reject these
+- Nested ternaries — use `if`/`else` or computed properties instead
+- Hardcoded colors/spacing — use CSS custom properties
+- Creating new primitives when a Base component exists
+- Using `any` type — provide proper TypeScript types
+- Inline styles — use scoped SCSS instead
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 00000000..bcfce194
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,15 @@
+## What Changed
+
+<!-- Describe what this PR does -->
+
+## How to Test
+
+<!-- Include the Netlify deploy preview URL once available -->
+
+- Deploy preview: <!-- URL will be added by Netlify -->
+
+## Checklist
+
+- [ ] `pnpm lint` passes
+- [ ] `pnpm typecheck` passes
+- [ ] Verified changes in deploy preview
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
new file mode 100644
index 00000000..17e890f0
--- /dev/null
+++ b/.github/workflows/build.yaml
@@ -0,0 +1,35 @@
+name: Build
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: build-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NODE_OPTIONS: --max_old_space_size=6144
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Prepare
+        uses: ./.github/actions/prepare
+
+      - name: Run Build
+        run: pnpm build
+        env:
+          DIRECTUS_URL: ${{ secrets.DIRECTUS_URL }}
+          DIRECTUS_TV_URL: ${{ secrets.DIRECTUS_TV_URL }}
+          DIRECTUS_MARKETPLACE_REGISTRY_URL: ${{ secrets.DIRECTUS_MARKETPLACE_REGISTRY_URL }}
+          DIRECTUS_MARKETPLACE_REGISTRY_TOKEN: ${{ secrets.DIRECTUS_MARKETPLACE_REGISTRY_TOKEN }}
diff --git a/.github/workflows/claude-review.yaml b/.github/workflows/claude-review.yaml
new file mode 100644
index 00000000..861a326f
--- /dev/null
+++ b/.github/workflows/claude-review.yaml
@@ -0,0 +1,62 @@
+name: Claude Code Review
+
+on:
+  pull_request_target:
+    types: [labeled]
+
+jobs:
+  review:
+    if: github.event.label.name == 'claude'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 1
+
+      - name: PR Review
+        uses: anthropics/claude-code-action@v1
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+          track_progress: true
+          prompt: |
+            REPO: ${{ github.repository }}
+            PR NUMBER: ${{ github.event.pull_request.number }}
+
+            Be extremely concise. Sacrifice grammar for brevity.
+
+            ## Step 1: Risk Assessment
+
+            Evaluate the PR and apply exactly one label — `low-risk` or `high-risk`.
+
+            **low-risk:** styling, CSS, copy, Base component changes, docs, assets
+            **high-risk:** server routes, nuxt config, modules, type definitions, CI/CD, package deps, composables used broadly, layouts, middleware, plugins
+
+            Use judgment — a one-line style fix in a composable is still low-risk. Consider blast radius, not just file path.
+
+            Apply the label to the PR using `gh pr edit` with `--add-label`. Remove the other risk label if present. Post a one-line comment with your risk assessment and reasoning.
+
+            ## Step 2: Code Review
+
+            Review with focus on:
+
+            1. **Code Quality** — Vue/Nuxt best practices, reuse of existing Base/Block components, readability
+            2. **Styling** — scoped SCSS, CSS custom properties, responsive breakpoints (50rem/68rem), no hardcoded values
+            3. **TypeScript** — proper prop typing, minimal `any`
+            4. **Security** — no exposed secrets/internal URLs, safe data handling
+            5. **Performance** — no unnecessary re-renders/watchers, efficient data fetching
+
+            Inline comments for specific issues. Top-level comment for general observations. Keep it short.
+
+          claude_args: |
+            --allowedTools "mcp__github_inline_comment__create_inline_comment,Bash(gh pr comment:*),Bash(gh pr diff:*),Bash(gh pr view:*),Bash(gh pr edit:*),Bash(gh issue edit:*)"
+
+      - name: Remove claude label
+        if: always()
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: gh pr edit ${{ github.event.pull_request.number }} --remove-label claude --repo ${{ github.repository }}
diff --git a/.gitignore b/.gitignore
index 834734e7..c60c278e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,5 +14,7 @@ dist
 .vscode
 .eslintcache
 .gitpod.yml
+# Screenshots
+.screenshots/
 # Local Netlify folder
 .netlify
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..2c947979
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,110 @@
+# Directus Website
+
+## Overview
+
+Marketing website for [directus.io](https://directus.io) built with Nuxt 4 and Directus CMS. Pages are composed of reusable block components that render content from the Directus API.
+
+## Tech Stack
+
+- **Framework:** Nuxt 4 (app/ directory convention)
+- **CMS:** Directus (headless, all content via API)
+- **Styling:** Scoped SCSS with CSS custom properties (no Tailwind)
+- **Hosting:** Netlify (deploy previews on PRs)
+- **CI:** GitHub Actions (lint, typecheck, build)
+
+## Project Structure
+
+```
+app/
+├── components/
+│   ├── Base/          # Reusable UI primitives (Button, Card, Container, etc.)
+│   ├── Block/         # CMS block components (Header, RichText, CardGroup, etc.)
+│   ├── Nav/           # Navigation components
+│   └── ...
+├── composables/       # Vue composables
+├── layouts/           # Page layouts
+├── pages/             # File-based routing
+├── plugins/
+└── utils/
+server/                # Nitro server routes
+types/                 # TypeScript type definitions
+```
+
+## Architecture: Block System
+
+Pages are built from **sections** containing **blocks**. Content editors compose pages in Directus; the app renders them:
+
+1. `PageBuilder.vue` receives sections from the CMS
+2. Each section renders via `PageSection.vue` (handles background, spacing)
+3. Blocks render via `BaseBlock.vue` which maps `block_*` collection types to `Block*.vue` components
+
+**To add a new block:**
+1. Create `app/components/Block/YourBlock.vue`
+2. Register it in `app/components/Base/Block.vue` in the `components` map
+3. Add the corresponding `block_*` type to `types/schema.ts` `BlockType`
+4. The block receives a `uuid` prop and fetches its own data from Directus
+
+## Conventions
+
+### Components
+- Use `<script setup lang="ts">` with TypeScript
+- Props use `defineProps<T>()` with `withDefaults()` when needed
+- Vue props destructure is enabled (`vue.propsDestructure: true`)
+- Component names: PascalCase, auto-imported by Nuxt
+
+### Styling
+- Scoped SCSS (`<style lang="scss" scoped>`)
+- CSS custom properties for theming (defined in `app/assets/css/vars.css`)
+- Responsive breakpoints: `50rem` (tablet), `68rem` (desktop)
+- Spacing uses `--space-*` tokens
+
+### Code Quality
+- No `console.log` or `debugger` (ESLint errors)
+- No nested ternaries
+- Prettier: 120 char width, single quotes, tabs
+- Blank lines between blocks/imports/multiline statements (enforced by ESLint)
+
+## Before Submitting
+
+Always run these commands and fix any issues before committing:
+
+```bash
+pnpm lint
+pnpm typecheck
+```
+
+## Common Tasks
+
+### Modifying an existing block
+1. Find the block in `app/components/Block/`
+2. Read the component to understand its props and data fetching
+3. Make changes, keeping existing patterns
+4. Run lint + typecheck
+
+### Modifying page layout or routing
+1. Pages live in `app/pages/` using file-based routing
+2. Most pages use the `[...permalink].vue` catch-all which renders CMS content
+3. Dedicated pages exist for blog, case studies, features, team, etc.
+
+### Working with Base components
+- `BaseButton`, `BaseCard`, `BaseContainer`, `BaseHeading`, `BaseText` etc. are in `app/components/Base/`
+- Always use existing Base components instead of creating new primitives
+- Check what's available before building something new
+
+## References
+
+- [Vue Best Practices](.docs/vue-best-practices.md) — component conventions and patterns for this project
+
+## Pull Requests
+
+Use the PR template when opening pull requests. Include a deploy preview link so reviewers can verify changes visually.
+
+### Handling Change Requests (AI Agents Only)
+
+When an AI agent is triggered to resolve change requests or feedback on a pull request, it must create a **Sub-PR** (a new pull request targeting the original PR branch) instead of pushing commits directly to the PR branch.
+
+**Why Sub-PRs:**
+- Reviewers can evaluate AI-generated fixes in isolation
+- Clear separation between original work and revisions
+- Easier rollback if AI-generated fixes introduce issues
+- Additional review checkpoint for AI changes
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 120000
index 00000000..47dc3e3d
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1 @@
+AGENTS.md
\ No newline at end of file