@majordigital/create-acorn 1.6.8 → 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 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
 
@@ -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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@majordigital/create-acorn",
3
- "version": "1.6.8",
3
+ "version": "1.7.0",
4
4
  "description": "Interactive starter CLI for Acorn with Storyblok/Prismic/DatoCMS, TypeScript, and Tailwind.",
5
5
  "bin": {
6
6
  "create-acorn": "bin/create-acorn.mjs",
@@ -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