Skip to content

Commit 13daa8d

Browse files
bryantgillespieCopilot
bryantgillespie
and
Copilot
authored
Claudify Website Repo (#219)
* first pass * fancy it up * fix build workflow * Update .claude/skills/pre-review/SKILL.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update .claude/skills/screenshot/SKILL.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update .claude/skills/debug/SKILL.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent 1737714 commit 13daa8d

File tree

15 files changed

+965
-0
lines changed

15 files changed

+965
-0
lines changed

‎.claude/skills/create-plan/SKILL.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
disable-model-invocation: true
3+
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.
4+
argument-hint: "[description of change or GitHub issue number]"
5+
---
6+
7+
# Create Implementation Plan
8+
9+
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.
10+
11+
## Phase 1: Gather Context
12+
13+
1. **Parse the input:**
14+
- If the argument is a number, fetch the issue: `gh issue view <number>`
15+
- Otherwise, treat the argument as a plain-text description of the desired change
16+
17+
2. **Assess what you know.** Check whether you have enough to write a solid plan. You need:
18+
- **What** — the type of change (new feature, enhancement, fix, refactor)
19+
- **Where** — which page(s), section(s), or component(s) are affected
20+
- **Behavior** — what should happen, what should the result look like
21+
- **Visual expectations** — layout, styling, responsive behavior (if applicable)
22+
23+
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:
24+
25+
**Where:**
26+
- Which page or section is this for?
27+
- Is this a new page or a change to an existing one?
28+
29+
**Behavior:**
30+
- What should happen when the user interacts with this?
31+
- What data should be displayed? Where does it come from?
32+
33+
**Visual:**
34+
- Do you have a screenshot, mockup, or reference URL? (paste an image or file path)
35+
- Should this match an existing section on the site? Which one?
36+
- Any specific desktop vs. mobile differences?
37+
38+
**Scope:**
39+
- Is this a one-off or should it be reusable?
40+
- Are there edge cases to handle (empty states, long text, missing data)?
41+
42+
4. **If the input is already detailed enough, skip the interview** and move to Phase 2.
43+
44+
## Phase 2: Visual References
45+
46+
- If the user provides screenshots or mockups → use the Read tool to view them and reference in the plan
47+
- 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."
48+
- If the change involves an existing page → suggest using `/screenshot <path>` to capture current state for reference
49+
- If the user provides a reference URL → note it in the plan for the implementer
50+
51+
## Phase 3: Explore the Codebase
52+
53+
Use Glob, Grep, and Read tools to understand what files and patterns are relevant. Pay attention to:
54+
- Existing components in `app/components/` — especially `Base/` and `Block/`
55+
- Page structure in `app/pages/`
56+
- Types in `types/schema.ts`
57+
- Styling patterns in similar existing components
58+
59+
## Phase 4: Produce the Plan
60+
61+
**Enter plan mode** and write the plan following the template in `.docs/plan-template.md`. The plan must include:
62+
- Summary of the change
63+
- Files to modify/create
64+
- Step-by-step implementation approach
65+
- Existing patterns to follow (with file paths)
66+
- Visual references (if provided)
67+
- Unresolved questions (if any remain)
68+
69+
**Exit plan mode** when the plan is ready for approval.
70+
71+
## Important
72+
73+
- **Interview first, plan second.** A vague request → interview. A detailed request → skip to explore.
74+
- Keep interview rounds short and focused. Don't ask everything at once.
75+
- Reference existing patterns and components — don't reinvent what exists
76+
- Keep plans concrete and actionable, not abstract
77+
- Call out risks or trade-offs
78+
- 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‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
disable-model-invocation: true
3+
description: Debug page issues using browser diagnostics. Opens the page, gathers console/network errors, traces to source, fixes, and verifies.
4+
argument-hint: "[url path or description of issue]"
5+
---
6+
7+
# Debug Page Issue
8+
9+
Open the browser, gather diagnostics, find the root cause, fix it, and verify the fix.
10+
11+
## Context
12+
13+
Current branch:
14+
```
15+
`! git branch --show-current`
16+
```
17+
18+
Changed files:
19+
```
20+
`! git diff --name-only main...HEAD`
21+
```
22+
23+
## Steps
24+
25+
1. **Check browser access:**
26+
- Run `which agent-browser` to check availability
27+
- If available → **agent-browser mode** (opens pages automatically)
28+
- If not → **MCP-only mode** (user must have the page open in their browser)
29+
- Tell the user which mode you're using
30+
31+
2. **Parse arguments:**
32+
- URL path (e.g., `/pricing`) → debug that specific page
33+
- Text description (e.g., "images not loading on homepage") → infer page from description and git diff
34+
- No args → ask the user what issue they're seeing and which page
35+
36+
3. **Start dev server** (agent-browser mode only, skip if already running):
37+
```bash
38+
pnpm dev &
39+
DEV_PID=$!
40+
for i in {1..30}; do curl -s -o /dev/null http://localhost:3000 && break || sleep 2; done
41+
```
42+
43+
4. **Open the page** (agent-browser mode only):
44+
```bash
45+
agent-browser open "http://localhost:3000<path>"
46+
agent-browser wait --load networkidle
47+
```
48+
49+
5. **Gather diagnostics** — run these MCP tools (work in both modes):
50+
- `mcp__browser-tools__getConsoleErrors` — JS runtime errors, Vue warnings
51+
- `mcp__browser-tools__getConsoleLogs` — all console output
52+
- `mcp__browser-tools__getNetworkErrors` — failed API calls, 404s, CORS issues
53+
- `mcp__browser-tools__getNetworkLogs` — all network activity
54+
- `mcp__browser-tools__takeScreenshot` — current visual state
55+
56+
6. **Analyze and trace to source:**
57+
- **Network errors** → check `server/api/` routes, check `app/plugins/directus.ts` for API config
58+
- **Console errors** → use Grep to find the error source in `app/components/`, read the file
59+
- **Vue warnings** → check component props, data fetching in the relevant `Block*.vue` or `Base*.vue`
60+
- **Visual issues** → read component styles, check responsive breakpoints (50rem, 68rem)
61+
- **API errors** → check Directus query fields, permissions, collection names in `types/schema.ts`
62+
63+
7. **Fix the issue:**
64+
- Make the minimal code change to resolve the root cause
65+
- Follow project conventions (scoped SCSS, `<script setup lang="ts">`, etc.)
66+
67+
8. **Verify the fix:**
68+
- **Agent-browser mode:** reload the page and re-run diagnostics
69+
```bash
70+
agent-browser open "http://localhost:3000<path>"
71+
agent-browser wait --load networkidle
72+
```
73+
- **MCP-only mode:** ask the user to refresh, then re-run `getConsoleErrors` and `getNetworkErrors`
74+
- Take a screenshot to confirm visual state
75+
76+
9. **Optional audits** (if user passes flags):
77+
- `--perf` → run `mcp__browser-tools__runPerformanceAudit`
78+
- `--a11y` → run `mcp__browser-tools__runAccessibilityAudit`
79+
80+
10. **Clean up:**
81+
- Kill dev server if this skill started it: `kill $DEV_PID`
82+
- Wipe browser logs: `mcp__browser-tools__wipeLogs`
83+
84+
11. **Output a debug report:**
85+
86+
```markdown
87+
## Debug Report: <page>
88+
89+
### Issues Found
90+
- **Console Error:** `<error message>` in `<file>:<line>`
91+
- **Network Error:** `<method> <url>` returned `<status>`
92+
93+
### Changes Made
94+
- <description of fix> in `<file path>`
95+
96+
### Verification
97+
- Console errors: 0
98+
- Network errors: 0
99+
- Screenshot confirms fix
100+
```
101+
102+
## Key Files
103+
104+
- `app/plugins/directus.ts` — Directus SDK client, retry logic, rate limiting
105+
- `app/components/Block/*.vue` — CMS block components (most common issue source)
106+
- `app/components/Base/*.vue` — reusable UI primitives
107+
- `server/api/` — Nitro server routes
108+
- `types/schema.ts` — Directus collection types
109+
110+
## Important
111+
112+
- Always kill the dev server if you started it, even if debugging fails
113+
- Don't add `console.log` — the project ESLint config forbids it
114+
- Keep fixes minimal — only change what's needed to resolve the issue
115+
- 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‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
disable-model-invocation: true
3+
description: Review current changes for code quality, Vue patterns, styling, and security issues before submitting a PR.
4+
---
5+
6+
# Pre-Review Changes
7+
8+
Review the current changes before submitting a PR.
9+
10+
## Context
11+
12+
Current diff:
13+
```
14+
`! git diff`
15+
```
16+
17+
Commit log on this branch:
18+
```
19+
`! git log --oneline main..HEAD`
20+
```
21+
22+
## Steps
23+
24+
1. **Run automated checks:**
25+
- Run `pnpm lint` and report results
26+
- Run `pnpm typecheck` and report results
27+
28+
2. **Review the diff** for issues across these categories:
29+
30+
**Code quality:**
31+
- `console.log` or `debugger` statements
32+
- Nested ternaries
33+
- Duplicated code — logic, markup, or styles repeated across or within files
34+
- Overly complex code that could be simplified without losing functionality (long functions, deep nesting, unnecessary abstractions)
35+
36+
**Vue patterns:**
37+
- Missing `scoped` attribute on `<style>` tags
38+
- Missing TypeScript types (untyped props, `any` usage)
39+
- Not using existing Base components (`BaseButton`, `BaseCard`, etc.) when applicable
40+
- Reactive state that should be computed properties
41+
- Missing `key` attributes on `v-for` loops
42+
- Direct DOM manipulation instead of Vue reactivity
43+
- Props mutation (modifying props directly instead of emitting events)
44+
45+
**Styling:**
46+
- Inline styles instead of scoped SCSS
47+
- Hardcoded colors, spacing, or font sizes instead of `--space-*` / CSS custom properties
48+
- Missing responsive handling for tablet (`50rem`) and desktop (`68rem`) breakpoints
49+
50+
**Security:**
51+
- `v-html` with unsanitized or user-controlled content
52+
- Interpolating raw URLs or external data without validation
53+
- Exposed API keys, tokens, or secrets
54+
55+
3. **Output a review summary:**
56+
57+
```
58+
## Pre-Review Results
59+
60+
**Lint:** ✅ Pass / ❌ Fail
61+
**Typecheck:** ✅ Pass / ❌ Fail
62+
63+
### Issues Found
64+
- [ ] issue description (file:line)
65+
66+
### Looks Good
67+
- brief summary of what the changes do correctly
68+
```
69+
70+
4. If there are issues, offer to fix them automatically.
71+
72+
## Important
73+
74+
- Be specific — reference exact files and line numbers
75+
- Don't flag things that are pre-existing (not in the diff)
76+
- Focus on the project conventions in AGENTS.md

‎.claude/skills/screenshot/SKILL.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
disable-model-invocation: true
3+
description: Capture desktop and mobile screenshots of pages using agent-browser. Supports before/after comparison.
4+
argument-hint: "[url paths or --compare]"
5+
---
6+
7+
# Screenshot Pages
8+
9+
Capture screenshots of pages affected by current changes using `agent-browser`.
10+
11+
## Context
12+
13+
Current branch:
14+
```
15+
`! git branch --show-current`
16+
```
17+
18+
Changed files:
19+
```
20+
`! git diff --name-only main...HEAD`
21+
```
22+
23+
## Steps
24+
25+
1. **Check prerequisites:**
26+
- Verify `agent-browser` is available: `which agent-browser`
27+
- If not installed, tell the user to install it: `npm install -g @anthropic-ai/agent-browser`
28+
- Ensure `.screenshots/` directory exists: `mkdir -p .screenshots`
29+
30+
2. **Parse arguments:**
31+
- If URL paths provided (e.g., `/pricing /features`) → screenshot those pages
32+
- If `--compare` flag → do before/after comparison (see step 5)
33+
- 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.
34+
35+
3. **Start dev server** in background:
36+
```bash
37+
pnpm dev &
38+
DEV_PID=$!
39+
```
40+
Wait for `http://localhost:3000` to respond:
41+
```bash
42+
for i in {1..30}; do curl -s -o /dev/null http://localhost:3000 && break || sleep 2; done
43+
```
44+
45+
4. **Capture screenshots** for each page path:
46+
```bash
47+
# Desktop (1440x900)
48+
agent-browser open "http://localhost:3000<path>"
49+
agent-browser wait --load networkidle
50+
agent-browser set viewport 1440 900
51+
agent-browser screenshot ".screenshots/<name>-desktop.png" --full
52+
53+
# Mobile (390x844)
54+
agent-browser set viewport 390 844
55+
agent-browser screenshot ".screenshots/<name>-mobile.png" --full
56+
```
57+
- For the homepage `/`, use `home` as the name
58+
- For other paths like `/pricing`, use the last segment as the name (e.g., `pricing`)
59+
60+
5. **Before/after mode** (when `--compare` is passed):
61+
- First, stash current changes: `git stash`
62+
- Restart dev server, wait for it
63+
- Screenshot each page with `-before-desktop.png` / `-before-mobile.png` suffixes
64+
- Restore changes: `git stash pop`
65+
- Restart dev server, wait for it
66+
- Screenshot each page with `-after-desktop.png` / `-after-mobile.png` suffixes
67+
68+
6. **Kill dev server:**
69+
```bash
70+
kill $DEV_PID
71+
```
72+
73+
7. **Output results** as a markdown table.
74+
75+
## Output Format
76+
77+
For standard mode:
78+
```markdown
79+
## Screenshots
80+
81+
| Page | Desktop | Mobile |
82+
|------|---------|--------|
83+
| /pricing | ![desktop](.screenshots/pricing-desktop.png) | ![mobile](.screenshots/pricing-mobile.png) |
84+
```
85+
86+
For compare mode:
87+
```markdown
88+
## Screenshots (Before / After)
89+
90+
### /pricing
91+
| Viewport | Before | After |
92+
|----------|--------|-------|
93+
| Desktop | ![before](.screenshots/pricing-before-desktop.png) | ![after](.screenshots/pricing-after-desktop.png) |
94+
| Mobile | ![before](.screenshots/pricing-before-mobile.png) | ![after](.screenshots/pricing-after-mobile.png) |
95+
```
96+
97+
## Important
98+
99+
- Always kill the dev server when done, even if something fails
100+
- Screenshots go in `.screenshots/` at the repo root (already gitignored)
101+
- If `agent-browser` commands fail, suggest the user check that the browser agent is running

0 commit comments

Comments
 (0)