@majordigital/create-acorn 1.6.7 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -0
- package/bin/create-acorn.mjs +39 -1
- package/package.json +1 -1
- package/template/.claude/commands/audit-accessibility-motion.md +161 -0
- package/template/.claude/commands/audit-analytics-conversion.md +149 -0
- package/template/.claude/commands/audit-code-maintainability.md +149 -0
- package/template/.claude/commands/audit-documentation-onboarding.md +172 -0
- package/template/.claude/commands/audit-edge-api-resilience.md +156 -0
- package/template/.claude/commands/audit-headless-cms.md +241 -0
- package/template/.claude/commands/audit-i18n-localization.md +173 -0
- package/template/.claude/commands/audit-performance-metrics.md +176 -0
- package/template/.claude/commands/audit-security-compliance.md +144 -0
- package/template/.claude/commands/audit-seo-semantic.md +214 -0
- package/template/scripts/check-links.mjs +7 -0
package/README.md
CHANGED
|
@@ -65,6 +65,31 @@ npx @majordigital/create-acorn@latest --add-pre-deploy
|
|
|
65
65
|
|
|
66
66
|
The `--add-pre-deploy` flag copies the scripts, installs the dependencies (`lighthouse`, `chrome-launcher`, `playwright`, `linkinator`), and adds the npm scripts to your `package.json`. It skips silently if the tooling is already present.
|
|
67
67
|
|
|
68
|
+
## AI Audit Commands
|
|
69
|
+
|
|
70
|
+
Every Acorn project ships with 10 specialised audit slash commands for Claude Code, sourced from the [`ai-claude-boilerplate`](https://github.com/MajorDigital/ai-claude-boilerplate):
|
|
71
|
+
|
|
72
|
+
| Command | Focus |
|
|
73
|
+
|---------|-------|
|
|
74
|
+
| `/audit-accessibility-motion` | A11y compliance and motion/animation safety |
|
|
75
|
+
| `/audit-analytics-conversion` | Analytics setup and conversion tracking |
|
|
76
|
+
| `/audit-code-maintainability` | Code quality and maintainability |
|
|
77
|
+
| `/audit-documentation-onboarding` | Docs completeness and developer onboarding |
|
|
78
|
+
| `/audit-edge-api-resilience` | Edge/API error handling and resilience |
|
|
79
|
+
| `/audit-headless-cms` | CMS integration patterns and content modelling |
|
|
80
|
+
| `/audit-i18n-localization` | Internationalisation and localisation readiness |
|
|
81
|
+
| `/audit-performance-metrics` | Performance and Core Web Vitals |
|
|
82
|
+
| `/audit-security-compliance` | Security posture and compliance |
|
|
83
|
+
| `/audit-seo-semantic` | SEO and semantic markup |
|
|
84
|
+
|
|
85
|
+
### Adding audit commands to an existing project
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
npx @majordigital/create-acorn@latest --add-audit
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
The `--add-audit` flag copies all 10 audit commands into the project's `.claude/commands/`. It skips if they are already installed.
|
|
92
|
+
|
|
68
93
|
## Acorn Component Architecture
|
|
69
94
|
|
|
70
95
|
The Acorn library follows a layered component hierarchy designed for consistency and reuse across projects:
|
|
@@ -121,6 +146,7 @@ Beyond the component library, every project includes:
|
|
|
121
146
|
| `scripts/check-links.mjs` | Broken internal link crawler using linkinator |
|
|
122
147
|
| `scripts/cleanup-screenshots.mjs` | Removes pre-deploy artifacts older than 1 month |
|
|
123
148
|
| `.claude/commands/pre-deploy.md` | `/pre-deploy` slash command for Claude Code |
|
|
149
|
+
| `.claude/commands/audit-*.md` | 10 `/audit-*` slash commands for Claude Code |
|
|
124
150
|
|
|
125
151
|
## npm
|
|
126
152
|
|
package/bin/create-acorn.mjs
CHANGED
|
@@ -4,7 +4,7 @@ import readline from 'node:readline';
|
|
|
4
4
|
import { argv, exit } from 'node:process';
|
|
5
5
|
import { spawn } from 'node:child_process';
|
|
6
6
|
import { basename, join, dirname } from 'node:path';
|
|
7
|
-
import { readFileSync, writeFileSync, cpSync, rmSync, mkdirSync, existsSync } from 'node:fs';
|
|
7
|
+
import { readFileSync, writeFileSync, cpSync, rmSync, mkdirSync, existsSync, readdirSync } from 'node:fs';
|
|
8
8
|
import { fileURLToPath } from 'node:url';
|
|
9
9
|
|
|
10
10
|
const CMS_CHOICES = [
|
|
@@ -147,6 +147,35 @@ async function setupPreDeploy() {
|
|
|
147
147
|
console.log('');
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
+
function setupAuditCommands() {
|
|
151
|
+
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
152
|
+
const commandsSrc = join(__dirname, '..', 'template', '.claude', 'commands');
|
|
153
|
+
const commandsDest = join(process.cwd(), '.claude', 'commands');
|
|
154
|
+
|
|
155
|
+
const auditFiles = readdirSync(commandsSrc).filter((f) => f.startsWith('audit-') && f.endsWith('.md'));
|
|
156
|
+
if (auditFiles.length === 0) {
|
|
157
|
+
console.log('Warning: No audit commands found in the package — skipping.');
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
const alreadyInstalled = auditFiles.every((f) => existsSync(join(commandsDest, f)));
|
|
162
|
+
if (alreadyInstalled) {
|
|
163
|
+
console.log('Audit commands already installed — skipping.');
|
|
164
|
+
console.log('');
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
mkdirSync(commandsDest, { recursive: true });
|
|
169
|
+
for (const file of auditFiles) {
|
|
170
|
+
cpSync(join(commandsSrc, file), join(commandsDest, file), { force: true });
|
|
171
|
+
}
|
|
172
|
+
console.log(`Copied ${auditFiles.length} audit commands to .claude/commands/:`);
|
|
173
|
+
for (const file of auditFiles) {
|
|
174
|
+
console.log(` /${file.replace(/\.md$/, '')}`);
|
|
175
|
+
}
|
|
176
|
+
console.log('');
|
|
177
|
+
}
|
|
178
|
+
|
|
150
179
|
async function setupNextApp() {
|
|
151
180
|
console.log('Setting up Next.js 15 project...');
|
|
152
181
|
console.log('');
|
|
@@ -1119,6 +1148,15 @@ async function main() {
|
|
|
1119
1148
|
return;
|
|
1120
1149
|
}
|
|
1121
1150
|
|
|
1151
|
+
// Standalone audit commands install — run in the current directory, no full setup needed
|
|
1152
|
+
if (argv.includes('--add-audit')) {
|
|
1153
|
+
console.log('Adding audit commands to the current project...');
|
|
1154
|
+
console.log('');
|
|
1155
|
+
setupAuditCommands();
|
|
1156
|
+
console.log('Done. Run any /audit-* command in Claude Code to start an audit.');
|
|
1157
|
+
return;
|
|
1158
|
+
}
|
|
1159
|
+
|
|
1122
1160
|
// Prompt for project name first
|
|
1123
1161
|
const nameFromFlag = parseFlag('name');
|
|
1124
1162
|
let projectDir = nameFromFlag;
|
package/package.json
CHANGED
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: "Run an Accessibility & Motion audit on the current project (Module 3)"
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Audit: Accessibility & Motion
|
|
6
|
+
|
|
7
|
+
**Role:** WCAG 2.1 Compliance Auditor & Interaction Designer
|
|
8
|
+
|
|
9
|
+
**Objective:** Perform an exhaustive, multi-layered accessibility audit. Do not limit yourself to the items listed — explore the file structure dynamically and execute terminal commands to uncover deep-seated issues.
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Pre-Flight
|
|
14
|
+
|
|
15
|
+
Before starting, confirm:
|
|
16
|
+
- The local dev server is running at http://localhost:3000 (required for axe runtime scan)
|
|
17
|
+
- Install tooling if absent: `npm install -D @axe-core/cli`
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Audit Workflow
|
|
22
|
+
|
|
23
|
+
You MUST follow all phases in order. **Do NOT implement any fixes before the Stop & Review stage.**
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
### Phase 1: Static Analysis
|
|
28
|
+
|
|
29
|
+
Inspect the codebase using Grep, Glob, and Read tools. Discover files dynamically — do not assume locations.
|
|
30
|
+
|
|
31
|
+
**1. Runtime Accessibility Scan**
|
|
32
|
+
- Run: `npx axe http://localhost:3000 --reporter=json`
|
|
33
|
+
- If the server isn't running, note this and skip to static analysis. Record the error log.
|
|
34
|
+
- Report all WCAG 2.1 Level AA violations with element selectors and impact levels.
|
|
35
|
+
- Also test key inner pages if accessible (e.g., a product page, a form page).
|
|
36
|
+
|
|
37
|
+
**2. Semantic HTML & Heading Hierarchy**
|
|
38
|
+
- Scan component files for:
|
|
39
|
+
- More than one `<h1>` per page (should be exactly one per route)
|
|
40
|
+
- Skipped heading levels (e.g., `<h1>` → `<h3>` with no `<h2>` in between)
|
|
41
|
+
- Use of `<div>` or `<span>` for structural content that should be `<section>`, `<article>`, `<aside>`, `<nav>`, or `<main>`
|
|
42
|
+
- Missing `<main>` landmark in root layout
|
|
43
|
+
|
|
44
|
+
**3. Interactive Elements**
|
|
45
|
+
- Search for `onClick` handlers on non-interactive elements (`div`, `span`, `p`).
|
|
46
|
+
- For each: verify a keyboard-accessible alternative exists (`role="button"` + `tabIndex={0}` + `onKeyDown`).
|
|
47
|
+
- Check modals and dialogs for focus-trapping: when a modal opens, keyboard focus must stay inside it.
|
|
48
|
+
- Verify all interactive elements have visible focus styles (not `outline: none` without a replacement).
|
|
49
|
+
|
|
50
|
+
**4. Motion & Animation (Framer Motion)**
|
|
51
|
+
- Search the codebase for `framer-motion`, `motion.`, and `AnimatePresence`.
|
|
52
|
+
- For every animated component, verify:
|
|
53
|
+
- Content is visible without JavaScript (CSS-based initial visibility or `initial` state set to visible)
|
|
54
|
+
- No critical content is hidden by `opacity: 0` or `y: 40` with no CSS fallback
|
|
55
|
+
- Animations respect `prefers-reduced-motion` — check for `useReducedMotion()` hook or a media query check
|
|
56
|
+
- Flag any animation where the initial state hides content that may not animate in (e.g., if JS fails).
|
|
57
|
+
|
|
58
|
+
**5. Images & Alt Text**
|
|
59
|
+
- Scan for `<img>` tags and `<Image>` / `<PrismicNextImage>` components.
|
|
60
|
+
- Flag any image without an `alt` attribute.
|
|
61
|
+
- Flag images with `alt=""` that appear to be meaningful (not decorative).
|
|
62
|
+
- Check icon buttons: verify they have `aria-label` if the icon carries meaning.
|
|
63
|
+
|
|
64
|
+
**6. Form Accessibility**
|
|
65
|
+
- Inspect all form components. Verify:
|
|
66
|
+
- Every `<input>`, `<select>`, `<textarea>` has an associated `<label>` (via `htmlFor` or `aria-label`)
|
|
67
|
+
- Error messages are associated with their input via `aria-describedby`
|
|
68
|
+
- Required fields use `aria-required="true"` or the `required` attribute
|
|
69
|
+
- Success/error state changes are announced to screen readers (via `role="alert"` or `aria-live`)
|
|
70
|
+
|
|
71
|
+
**7. Skip Navigation**
|
|
72
|
+
- Verify a "Skip to main content" link exists and is the first focusable element on the page.
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
### Phase 2: Research (Run in Parallel)
|
|
77
|
+
|
|
78
|
+
**First**, read `.agents/patterns/accessibility-motion.md` if it exists. Use it as a baseline — skip re-researching topics already covered unless the file is older than 3 months.
|
|
79
|
+
|
|
80
|
+
Launch a research subagent to fetch current best practices. The subagent should search for:
|
|
81
|
+
- WCAG 2.1 Level AA compliance checklist (2025–2026)
|
|
82
|
+
- Framer Motion `prefers-reduced-motion` implementation patterns
|
|
83
|
+
- Next.js 15 accessibility best practices
|
|
84
|
+
- Focus management in React modals and dialogs
|
|
85
|
+
|
|
86
|
+
Compile findings as a reference list with URLs.
|
|
87
|
+
|
|
88
|
+
**Then**, create or update `.agents/patterns/accessibility-motion.md` with any new research findings, best practices, code examples, and reference URLs. Pattern files should be refreshed every 3 months to stay current with evolving standards.
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
### Phase 3: Findings & Checklist
|
|
93
|
+
|
|
94
|
+
Combine Phase 1 and Phase 2 results. For every issue found:
|
|
95
|
+
- Assign a severity: **CRITICAL** / **HIGH** / **MEDIUM** / **LOW**
|
|
96
|
+
- Include the exact file path and line number where possible
|
|
97
|
+
- State the recommended fix
|
|
98
|
+
|
|
99
|
+
Save the full audit report to `.agents/audits/accessibility-motion-{YYYY-MM-DD}.md`.
|
|
100
|
+
|
|
101
|
+
Also create a condensed implementation checklist at `.agents/checklist/accessibility-motion-{YYYY-MM-DD}.md` — group items by severity tier with commit-and-review gates between each tier. After implementing each tier: stage all changes (`git add`) but do **NOT** commit. Tell the user the changes are staged for review, and **wait for explicit approval** before proceeding to the next tier. The user will review the diff, commit themselves, and tell the agent when to continue. Reference existing files in `.agents/checklist/` for the pattern.
|
|
102
|
+
|
|
103
|
+
Save the full audit report to `.agents/audits/accessibility-motion-{YYYY-MM-DD}.md`:
|
|
104
|
+
|
|
105
|
+
```markdown
|
|
106
|
+
# Accessibility & Motion Audit — {date}
|
|
107
|
+
|
|
108
|
+
## Summary
|
|
109
|
+
Brief overview of audit scope and key findings.
|
|
110
|
+
|
|
111
|
+
## Research References
|
|
112
|
+
- [Source](url) — why it's relevant
|
|
113
|
+
|
|
114
|
+
## Findings Checklist
|
|
115
|
+
|
|
116
|
+
- [ ] **[CRITICAL]** Missing alt text on hero image — `src/slices/Hero/HeroDefault.tsx:18`
|
|
117
|
+
- Fix: Add `alt` field to PrismicNextImage from Prismic metadata
|
|
118
|
+
- [ ] **[HIGH]** onClick on `<div>` without keyboard handler — `src/ui/components/Card/CardDefault.tsx:34`
|
|
119
|
+
- Fix: ...
|
|
120
|
+
|
|
121
|
+
## Command Outputs
|
|
122
|
+
- `npx axe http://localhost:3000`: {result summary or error log}
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
---
|
|
126
|
+
|
|
127
|
+
### 🛑 STOP & REVIEW
|
|
128
|
+
|
|
129
|
+
**Do not proceed past this point until the user explicitly approves.**
|
|
130
|
+
|
|
131
|
+
Present to the user:
|
|
132
|
+
1. The full findings checklist
|
|
133
|
+
2. Each proposed fix with file and line reference
|
|
134
|
+
3. Research references used
|
|
135
|
+
|
|
136
|
+
Then ask:
|
|
137
|
+
> "I've completed the Accessibility & Motion audit. The checklist has been saved to `.agents/audits/accessibility-motion-{date}.md`. Shall I proceed with implementing the fixes above?"
|
|
138
|
+
|
|
139
|
+
**Wait for explicit confirmation before continuing.**
|
|
140
|
+
|
|
141
|
+
---
|
|
142
|
+
|
|
143
|
+
### Phase 4: Implementation
|
|
144
|
+
|
|
145
|
+
After user approval, implement each approved fix in priority order. For each fix:
|
|
146
|
+
- Make the change using Edit tools
|
|
147
|
+
- Run `npm run check` after every meaningful change
|
|
148
|
+
- **Update the checklist immediately** — mark completed items with `[x]` in `.agents/checklist/accessibility-motion-{YYYY-MM-DD}.md` as each item is implemented, not at the end
|
|
149
|
+
- If the user skips or rejects an item, add it to the **Skipped / Rejected Changes** section at the bottom of the checklist using a heading + bullet format per item (e.g., `### #N — Item name` with `- **Status:**` and `- **Reason:**`)
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
### Phase 5: Update Checklist
|
|
154
|
+
|
|
155
|
+
After all tiers are complete:
|
|
156
|
+
- Verify every item is accounted for: completed `[x]`, deferred `[ ]` with reason, or logged in the Skipped / Rejected Changes section
|
|
157
|
+
- Update the status line:
|
|
158
|
+
```
|
|
159
|
+
## Status: {Complete / Partially Complete — N items deferred, M items skipped}
|
|
160
|
+
```
|
|
161
|
+
- If any items were skipped or rejected, save the Skipped / Rejected Changes section to `.agents/checklist/skipped/accessibility-motion-{YYYY-MM-DD}.md` so future audits don't re-suggest rejected changes
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: "Run an Analytics & Conversion Tracking audit on the current project (Module 7)"
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Audit: Analytics & Conversion
|
|
6
|
+
|
|
7
|
+
**Role:** Marketing Technologist & Data Architect
|
|
8
|
+
|
|
9
|
+
**Objective:** Perform an exhaustive audit of data layer integrity, tracking accuracy, and consent compliance. Do not limit yourself to the items listed — explore the file structure dynamically and run terminal commands to find deep-seated issues.
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Audit Workflow
|
|
14
|
+
|
|
15
|
+
You MUST follow all phases in order. **Do NOT implement any fixes before the Stop & Review stage.**
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
### Phase 1: Static Analysis
|
|
20
|
+
|
|
21
|
+
Inspect the codebase using Grep, Glob, and Read tools. Discover files dynamically — do not assume locations.
|
|
22
|
+
|
|
23
|
+
**1. Data Layer Audit**
|
|
24
|
+
- Search for `dataLayer.push(` across all files. If found:
|
|
25
|
+
- List every push call with its event name and payload shape
|
|
26
|
+
- Check event naming consistency: are they `camelCase`, `snake_case`, or mixed? Flag inconsistencies
|
|
27
|
+
- Verify no PII (email addresses, phone numbers, names) is passed in dataLayer objects or as URL parameters
|
|
28
|
+
- If `dataLayer` is not used, identify the analytics platform in use (Plausible, Google Analytics, Segment, etc.) and audit its equivalent tracking calls
|
|
29
|
+
|
|
30
|
+
**2. Plausible / Custom Analytics Audit**
|
|
31
|
+
- Search for `plausible(` or equivalent analytics event calls
|
|
32
|
+
- For each event call, verify:
|
|
33
|
+
- The event fires after a successful action (API response, not just on click)
|
|
34
|
+
- Event names are consistent (e.g., all camelCase: `formSubmissionContact`, not mixed with `form_submission_contact`)
|
|
35
|
+
- No PII is passed in the event payload or goal properties
|
|
36
|
+
- Check if all 8 form types have analytics events on successful submission
|
|
37
|
+
- Verify file downloads are tracked (e.g., application images, product manuals)
|
|
38
|
+
|
|
39
|
+
**3. Conversion Event Attribution**
|
|
40
|
+
- Search for form submission handlers. For each form:
|
|
41
|
+
- Confirm the analytics event fires only after a successful API response (not on click, not on form submit before validation)
|
|
42
|
+
- Verify error states do NOT trigger conversion events
|
|
43
|
+
- Check that the success message is shown before/alongside the event fire (not delayed by tracking)
|
|
44
|
+
|
|
45
|
+
**4. Consent Integration**
|
|
46
|
+
- Verify tracking scripts respect user consent state.
|
|
47
|
+
- Check if analytics providers are only initialized after consent is granted.
|
|
48
|
+
- Search for any tracking call that fires unconditionally on page load (before consent resolution).
|
|
49
|
+
|
|
50
|
+
**5. Custom Tracking Hooks**
|
|
51
|
+
- Search for custom analytics hooks (e.g., `useAnalytics`, `useTracking`, `usePlausible`).
|
|
52
|
+
- If found, verify:
|
|
53
|
+
- They check consent state before firing events
|
|
54
|
+
- They are used consistently across all form types and key interactions
|
|
55
|
+
- There are no redundant event fires (same event triggered twice)
|
|
56
|
+
|
|
57
|
+
**6. URL Parameter PII Check**
|
|
58
|
+
- Search for `router.push`, `redirect()`, and `window.location` usage.
|
|
59
|
+
- Flag any case where email, phone, or name values are appended to URL query strings.
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
### Phase 2: Research (Run in Parallel)
|
|
64
|
+
|
|
65
|
+
**First**, read `.agents/patterns/analytics-conversion.md` if it exists. Use it as a baseline — skip re-researching topics already covered unless the file is older than 3 months.
|
|
66
|
+
|
|
67
|
+
Launch a research subagent to fetch current best practices. The subagent should search for:
|
|
68
|
+
- Plausible Analytics event tracking best practices (2025–2026)
|
|
69
|
+
- GDPR-compliant analytics implementation patterns
|
|
70
|
+
- Google Consent Mode V2 and analytics firing order
|
|
71
|
+
- Attribution best practices: tracking on API success vs click
|
|
72
|
+
|
|
73
|
+
Compile findings as a reference list with URLs.
|
|
74
|
+
|
|
75
|
+
**Then**, create or update `.agents/patterns/analytics-conversion.md` with any new research findings, best practices, code examples, and reference URLs. Pattern files should be refreshed every 3 months to stay current with evolving standards.
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
### Phase 3: Findings & Checklist
|
|
80
|
+
|
|
81
|
+
Combine Phase 1 and Phase 2 results. For every issue found:
|
|
82
|
+
- Assign a severity: **CRITICAL** / **HIGH** / **MEDIUM** / **LOW**
|
|
83
|
+
- Include the exact file path and line number
|
|
84
|
+
- State the recommended fix
|
|
85
|
+
|
|
86
|
+
Save the full audit report to `.agents/audits/analytics-conversion-{YYYY-MM-DD}.md`.
|
|
87
|
+
|
|
88
|
+
Also create a condensed implementation checklist at `.agents/checklist/analytics-conversion-{YYYY-MM-DD}.md` — group items by severity tier with commit-and-review gates between each tier. After implementing each tier: stage all changes (`git add`) but do **NOT** commit. Tell the user the changes are staged for review, and **wait for explicit approval** before proceeding to the next tier. The user will review the diff, commit themselves, and tell the agent when to continue. Reference existing files in `.agents/checklist/` for the pattern.
|
|
89
|
+
|
|
90
|
+
Save the full audit report to `.agents/audits/analytics-conversion-{YYYY-MM-DD}.md`:
|
|
91
|
+
|
|
92
|
+
```markdown
|
|
93
|
+
# Analytics & Conversion Audit — {date}
|
|
94
|
+
|
|
95
|
+
## Summary
|
|
96
|
+
Brief overview of analytics platform(s) in use, forms tracked, and key findings.
|
|
97
|
+
|
|
98
|
+
## Research References
|
|
99
|
+
- [Source](url) — why it's relevant
|
|
100
|
+
|
|
101
|
+
## Findings Checklist
|
|
102
|
+
|
|
103
|
+
- [ ] **[CRITICAL]** Email address passed in analytics event payload — `src/ui/components/Form/ContactForm.tsx:87`
|
|
104
|
+
- Fix: Remove `email` field from Plausible event properties
|
|
105
|
+
- [ ] **[HIGH]** Analytics event fires on form submit, not on API success — `src/ui/components/Form/DemoForm.tsx:102`
|
|
106
|
+
- Fix: Move `plausible()` call inside the `.then()` block of the API response
|
|
107
|
+
|
|
108
|
+
## Command Outputs
|
|
109
|
+
- Analytics event search: {files found / not found}
|
|
110
|
+
- PII URL parameter check: {result}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
### 🛑 STOP & REVIEW
|
|
116
|
+
|
|
117
|
+
**Do not proceed past this point until the user explicitly approves.**
|
|
118
|
+
|
|
119
|
+
Present to the user:
|
|
120
|
+
1. The full findings checklist
|
|
121
|
+
2. Each proposed fix with file and line reference
|
|
122
|
+
3. Research references used
|
|
123
|
+
|
|
124
|
+
Then ask:
|
|
125
|
+
> "I've completed the Analytics & Conversion audit. The checklist has been saved to `.agents/audits/analytics-conversion-{date}.md`. Shall I proceed with implementing the fixes above?"
|
|
126
|
+
|
|
127
|
+
**Wait for explicit confirmation before continuing.**
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
### Phase 4: Implementation
|
|
132
|
+
|
|
133
|
+
After user approval, implement each approved fix in priority order. For each fix:
|
|
134
|
+
- Make the change using Edit tools
|
|
135
|
+
- Run `npm run check` after every meaningful change
|
|
136
|
+
- **Update the checklist immediately** — mark completed items with `[x]` in `.agents/checklist/analytics-conversion-{YYYY-MM-DD}.md` as each item is implemented, not at the end
|
|
137
|
+
- If the user skips or rejects an item, add it to the **Skipped / Rejected Changes** section at the bottom of the checklist using a heading + bullet format per item (e.g., `### #N — Item name` with `- **Status:**` and `- **Reason:**`)
|
|
138
|
+
|
|
139
|
+
---
|
|
140
|
+
|
|
141
|
+
### Phase 5: Update Checklist
|
|
142
|
+
|
|
143
|
+
After all tiers are complete:
|
|
144
|
+
- Verify every item is accounted for: completed `[x]`, deferred `[ ]` with reason, or logged in the Skipped / Rejected Changes section
|
|
145
|
+
- Update the status line:
|
|
146
|
+
```
|
|
147
|
+
## Status: {Complete / Partially Complete — N items deferred, M items skipped}
|
|
148
|
+
```
|
|
149
|
+
- If any items were skipped or rejected, save the Skipped / Rejected Changes section to `.agents/checklist/skipped/analytics-conversion-{YYYY-MM-DD}.md` so future audits don't re-suggest rejected changes
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: "Run a Code Maintainability audit on the current project (Module 6)"
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Audit: Code Maintainability
|
|
6
|
+
|
|
7
|
+
**Role:** Lead Developer Experience (DX) Engineer & Software Quality Auditor
|
|
8
|
+
|
|
9
|
+
**Objective:** Perform an exhaustive audit of code quality, maintainability, and architectural consistency. Do not limit yourself to the items listed — explore the file structure dynamically and run terminal commands to uncover deep-seated issues.
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Audit Workflow
|
|
14
|
+
|
|
15
|
+
You MUST follow all phases in order. **Do NOT implement any fixes before the Stop & Review stage.**
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
### Phase 1: Static Analysis & Tooling
|
|
20
|
+
|
|
21
|
+
**1. Linting & Formatting**
|
|
22
|
+
- Run: `npx biome check .`
|
|
23
|
+
- Record the full output. Identify the top 3–5 recurring architectural or style violations.
|
|
24
|
+
- Note any rules that are disabled project-wide — evaluate if they should be re-enabled.
|
|
25
|
+
- Run: `npm run check` (project-specific lint command if configured). Record results.
|
|
26
|
+
|
|
27
|
+
**2. Cyclomatic Complexity — Large Files**
|
|
28
|
+
- Search for files exceeding 250 lines of code. List all flagged files with their line counts.
|
|
29
|
+
- For each large file, review:
|
|
30
|
+
- Can it be split into smaller, focused modules?
|
|
31
|
+
- Does it have a single clear responsibility?
|
|
32
|
+
- Are there nested conditionals or deeply branched logic that could be simplified?
|
|
33
|
+
|
|
34
|
+
**3. DRY Violations — Duplicate Patterns**
|
|
35
|
+
- Scan CMS slice/blok components for repeated data-transformation patterns:
|
|
36
|
+
- Repeated theme resolution logic (should use a shared utility)
|
|
37
|
+
- Repeated URL/link building logic
|
|
38
|
+
- Repeated date formatting or data-shaping code
|
|
39
|
+
- Near-identical component structures that differ by only one prop
|
|
40
|
+
- Flag any utility function or hook that is copy-pasted across 3+ files instead of being shared.
|
|
41
|
+
|
|
42
|
+
**4. Type Safety**
|
|
43
|
+
- Search for TypeScript `any` usage across the codebase. Flag files with multiple `any` annotations.
|
|
44
|
+
- Check for missing return types on exported functions.
|
|
45
|
+
- Verify that `strict: true` is active in `tsconfig.json`.
|
|
46
|
+
- Flag use of `// @ts-ignore` or `// @ts-expect-error` — each should have a documented reason.
|
|
47
|
+
|
|
48
|
+
**5. Dead Code**
|
|
49
|
+
- Search for exported functions, components, or types that appear unused across the codebase.
|
|
50
|
+
- Identify commented-out code blocks that should be removed.
|
|
51
|
+
- Check for `console.log`, `console.warn`, or `console.error` statements left in production code.
|
|
52
|
+
|
|
53
|
+
**6. Dependency Health**
|
|
54
|
+
- Review `package.json`. Flag:
|
|
55
|
+
- Packages listed in both `dependencies` and `devDependencies`
|
|
56
|
+
- Packages with `*` or overly loose version ranges
|
|
57
|
+
- Packages that appear unused (not imported anywhere in `src/`)
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
### Phase 2: Research (Run in Parallel)
|
|
62
|
+
|
|
63
|
+
**First**, read `.agents/patterns/code-maintainability.md` if it exists. Use it as a baseline — skip re-researching topics already covered unless the file is older than 3 months.
|
|
64
|
+
|
|
65
|
+
Launch a research subagent to fetch current best practices. The subagent should search for:
|
|
66
|
+
- Biome 2.x configuration best practices (2025–2026)
|
|
67
|
+
- Next.js 15 code organization and maintainability patterns
|
|
68
|
+
- TypeScript strict mode best practices
|
|
69
|
+
- DRY principles for CMS-driven React component architectures
|
|
70
|
+
|
|
71
|
+
Compile findings as a reference list with URLs.
|
|
72
|
+
|
|
73
|
+
**Then**, create or update `.agents/patterns/code-maintainability.md` with any new research findings, best practices, code examples, and reference URLs. Pattern files should be refreshed every 3 months to stay current with evolving standards.
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
### Phase 3: Findings & Checklist
|
|
78
|
+
|
|
79
|
+
Combine Phase 1 and Phase 2 results. For every issue found:
|
|
80
|
+
- Assign a severity: **CRITICAL** / **HIGH** / **MEDIUM** / **LOW**
|
|
81
|
+
- Include the exact file path and line numbers
|
|
82
|
+
- State the recommended fix
|
|
83
|
+
|
|
84
|
+
Save the full audit report to `.agents/audits/code-maintainability-{YYYY-MM-DD}.md`.
|
|
85
|
+
|
|
86
|
+
Also create a condensed implementation checklist at `.agents/checklist/code-maintainability-{YYYY-MM-DD}.md` — group items by severity tier with commit-and-review gates between each tier. After implementing each tier: stage all changes (`git add`) but do **NOT** commit. Tell the user the changes are staged for review, and **wait for explicit approval** before proceeding to the next tier. The user will review the diff, commit themselves, and tell the agent when to continue. Reference existing files in `.agents/checklist/` for the pattern.
|
|
87
|
+
|
|
88
|
+
Save the full audit report to `.agents/audits/code-maintainability-{YYYY-MM-DD}.md`:
|
|
89
|
+
|
|
90
|
+
```markdown
|
|
91
|
+
# Code Maintainability Audit — {date}
|
|
92
|
+
|
|
93
|
+
## Summary
|
|
94
|
+
Brief overview of audit scope and key findings.
|
|
95
|
+
|
|
96
|
+
## Research References
|
|
97
|
+
- [Source](url) — why it's relevant
|
|
98
|
+
|
|
99
|
+
## Findings Checklist
|
|
100
|
+
|
|
101
|
+
- [ ] **[HIGH]** Theme resolution duplicated in 6 slice files — should use shared `getThemeClass()` — `src/slices/`
|
|
102
|
+
- Fix: Ensure all slices import from `src/lib/utils.ts` — remove inline logic
|
|
103
|
+
- [ ] **[MEDIUM]** File exceeds 250 lines — `src/ui/components/Form/ContactForm.tsx` (312 lines)
|
|
104
|
+
- Fix: Extract form field components into separate files
|
|
105
|
+
|
|
106
|
+
## Command Outputs
|
|
107
|
+
- `npx biome check .`: {top violations summary or error log}
|
|
108
|
+
- `npm run check`: {result}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
### 🛑 STOP & REVIEW
|
|
114
|
+
|
|
115
|
+
**Do not proceed past this point until the user explicitly approves.**
|
|
116
|
+
|
|
117
|
+
Present to the user:
|
|
118
|
+
1. The full findings checklist
|
|
119
|
+
2. Each proposed fix with file and line reference
|
|
120
|
+
3. The top recurring Biome violations
|
|
121
|
+
4. Research references used
|
|
122
|
+
|
|
123
|
+
Then ask:
|
|
124
|
+
> "I've completed the Code Maintainability audit. The checklist has been saved to `.agents/audits/code-maintainability-{date}.md`. Shall I proceed with implementing the fixes above?"
|
|
125
|
+
|
|
126
|
+
**Wait for explicit confirmation before continuing.**
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
### Phase 4: Implementation
|
|
131
|
+
|
|
132
|
+
After user approval, implement each approved fix in priority order. For each fix:
|
|
133
|
+
- Make the change using Edit tools
|
|
134
|
+
- Run `npm run check` after every meaningful change
|
|
135
|
+
- For refactors that touch multiple files, verify imports are correct after changes
|
|
136
|
+
- **Update the checklist immediately** — mark completed items with `[x]` in `.agents/checklist/code-maintainability-{YYYY-MM-DD}.md` as each item is implemented, not at the end
|
|
137
|
+
- If the user skips or rejects an item, add it to the **Skipped / Rejected Changes** section at the bottom of the checklist using a heading + bullet format per item (e.g., `### #N — Item name` with `- **Status:**` and `- **Reason:**`)
|
|
138
|
+
|
|
139
|
+
---
|
|
140
|
+
|
|
141
|
+
### Phase 5: Update Checklist
|
|
142
|
+
|
|
143
|
+
After all tiers are complete:
|
|
144
|
+
- Verify every item is accounted for: completed `[x]`, deferred `[ ]` with reason, or logged in the Skipped / Rejected Changes section
|
|
145
|
+
- Update the status line:
|
|
146
|
+
```
|
|
147
|
+
## Status: {Complete / Partially Complete — N items deferred, M items skipped}
|
|
148
|
+
```
|
|
149
|
+
- If any items were skipped or rejected, save the Skipped / Rejected Changes section to `.agents/checklist/skipped/code-maintainability-{YYYY-MM-DD}.md` so future audits don't re-suggest rejected changes
|