Claudify Website Repo

.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

.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

.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

.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