@mikulgohil/ai-kit 1.0.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.
Files changed (58) hide show
  1. package/README.md +73 -0
  2. package/commands/accessibility-audit.md +143 -0
  3. package/commands/api-route.md +203 -0
  4. package/commands/commit-msg.md +127 -0
  5. package/commands/dep-check.md +148 -0
  6. package/commands/design-tokens.md +146 -0
  7. package/commands/document.md +175 -0
  8. package/commands/env-setup.md +165 -0
  9. package/commands/error-boundary.md +254 -0
  10. package/commands/extract-hook.md +237 -0
  11. package/commands/figma-to-code.md +152 -0
  12. package/commands/fix-bug.md +112 -0
  13. package/commands/migrate.md +174 -0
  14. package/commands/new-component.md +121 -0
  15. package/commands/new-page.md +113 -0
  16. package/commands/optimize.md +120 -0
  17. package/commands/pre-pr.md +159 -0
  18. package/commands/prompt-help.md +175 -0
  19. package/commands/refactor.md +219 -0
  20. package/commands/responsive-check.md +164 -0
  21. package/commands/review.md +120 -0
  22. package/commands/security-check.md +175 -0
  23. package/commands/sitecore-debug.md +216 -0
  24. package/commands/test.md +154 -0
  25. package/commands/token-tips.md +72 -0
  26. package/commands/type-fix.md +224 -0
  27. package/commands/understand.md +84 -0
  28. package/dist/index.d.ts +2 -0
  29. package/dist/index.js +1425 -0
  30. package/dist/index.js.map +1 -0
  31. package/docs-scaffolds/component-doc.md +35 -0
  32. package/docs-scaffolds/decisions-log.md +15 -0
  33. package/docs-scaffolds/mistakes-log.md +15 -0
  34. package/docs-scaffolds/time-log.md +14 -0
  35. package/guides/figma-workflow.md +135 -0
  36. package/guides/getting-started.md +61 -0
  37. package/guides/prompt-playbook.md +64 -0
  38. package/guides/token-saving-tips.md +50 -0
  39. package/guides/when-to-use-ai.md +44 -0
  40. package/package.json +58 -0
  41. package/templates/claude-md/base.md +173 -0
  42. package/templates/claude-md/figma.md +62 -0
  43. package/templates/claude-md/monorepo.md +17 -0
  44. package/templates/claude-md/nextjs-app-router.md +29 -0
  45. package/templates/claude-md/nextjs-pages-router.md +28 -0
  46. package/templates/claude-md/sitecore-xmc.md +46 -0
  47. package/templates/claude-md/tailwind.md +18 -0
  48. package/templates/claude-md/typescript.md +19 -0
  49. package/templates/cursorrules/base.md +84 -0
  50. package/templates/cursorrules/figma.md +32 -0
  51. package/templates/cursorrules/monorepo.md +7 -0
  52. package/templates/cursorrules/nextjs-app-router.md +8 -0
  53. package/templates/cursorrules/nextjs-pages-router.md +7 -0
  54. package/templates/cursorrules/sitecore-xmc.md +9 -0
  55. package/templates/cursorrules/tailwind.md +8 -0
  56. package/templates/cursorrules/typescript.md +8 -0
  57. package/templates/header.md +4 -0
  58. package/templates/token-dashboard.html +732 -0
package/README.md ADDED
@@ -0,0 +1,73 @@
1
+ # ai-kit
2
+
3
+ AI-assisted development setup kit. Auto-detects your tech stack and generates tailored CLAUDE.md, .cursorrules, slash commands, and developer guides.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npx ai-kit init
9
+ ```
10
+
11
+ Requires Node >= 18.
12
+
13
+ ## What Gets Generated
14
+
15
+ Running `init` scans your project and produces:
16
+
17
+ - **CLAUDE.md** — Project-aware rules and conventions for Claude Code
18
+ - **.cursorrules** — Equivalent rules for Cursor AI
19
+ - **.claude/commands/** — 25 slash commands across 5 categories: getting started, building, quality & review, maintenance, workflow
20
+ - **ai-kit/guides/** — 5 developer guides: getting-started, prompt-playbook, when-to-use-ai, token-saving-tips, figma-workflow
21
+ - **docs/** — 3 doc scaffolds: mistakes-log, decisions-log, time-log
22
+
23
+ ## Commands
24
+
25
+ | Command | Description |
26
+ |---------|-------------|
27
+ | `ai-kit init [path]` | Scan project and generate all configs |
28
+ | `ai-kit update [path]` | Re-scan and update existing generated files |
29
+ | `ai-kit reset [path]` | Remove all AI Kit generated files |
30
+
31
+ `path` defaults to the current directory if omitted.
32
+
33
+ ## Supported Stacks
34
+
35
+ **Frameworks** — Next.js (App Router, Pages Router, Hybrid), React
36
+
37
+ **CMS** — Sitecore XM Cloud, Sitecore JSS
38
+
39
+ **Styling** — Tailwind CSS, SCSS, CSS Modules, styled-components
40
+
41
+ **Language** — TypeScript (with strict mode detection)
42
+
43
+ **Monorepos** — Turborepo, Nx, Lerna, pnpm workspaces
44
+
45
+ **Design** — Figma MCP, design tokens, visual tests
46
+
47
+ **Package managers** — npm, pnpm, yarn, bun
48
+
49
+ ## Updating and Resetting
50
+
51
+ To pick up new dependencies or config changes after your stack evolves:
52
+
53
+ ```bash
54
+ npx ai-kit update
55
+ ```
56
+
57
+ To remove all generated files and start clean:
58
+
59
+ ```bash
60
+ npx ai-kit reset
61
+ ```
62
+
63
+ ## Further Reading
64
+
65
+ Detailed usage is covered in the generated guides under `ai-kit/guides/` after running `init`. Start with `getting-started.md`.
66
+
67
+ ## Repository
68
+
69
+ [https://github.com/mikulgohil/ai-kit](https://github.com/mikulgohil/ai-kit)
70
+
71
+ ## License
72
+
73
+ MIT
@@ -0,0 +1,143 @@
1
+ # Accessibility Audit
2
+
3
+ > **Role**: You are a senior accessibility engineer, certified in WCAG 2.1 AA/AAA compliance. You have deep experience auditing React and Next.js applications for screen reader compatibility, keyboard navigation, and visual accessibility.
4
+ > **Goal**: Scan the target file(s) for every accessibility violation, report each one with its WCAG reference, and provide the exact code fix.
5
+
6
+ ## Mandatory Steps
7
+
8
+ You MUST follow these steps in order. Do not skip any step.
9
+
10
+ 1. **Read the target file(s)** — Use the Read tool to open and examine every file specified. Do not analyze from memory or assumptions.
11
+ 2. **Check Semantic HTML** — Look for `<div>` or `<span>` used as interactive elements (buttons, links, navigation), missing landmark elements (`<main>`, `<nav>`, `<header>`, `<footer>`), and heading levels that skip (e.g., `<h1>` then `<h3>` with no `<h2>`).
12
+ 3. **Check ARIA Attributes** — Look for interactive elements without accessible names, icon-only buttons missing `aria-label`, custom dropdowns/modals missing `role`/`aria-expanded`/`aria-haspopup`, and missing `aria-live` regions for dynamic content.
13
+ 4. **Check Keyboard Navigation** — Look for click handlers without keyboard equivalents, custom components that can't be focused, missing focus traps in modals, missing `:focus-visible` styles, and tab order that doesn't match visual order.
14
+ 5. **Check Images and Media** — Look for `<img>` and `next/image` without `alt` text, decorative images that should have `alt=""`, videos without captions, and SVG icons not hidden from screen readers.
15
+ 6. **Check Color and Contrast** — Look for text that doesn't meet 4.5:1 contrast ratio, large text that doesn't meet 3:1, information conveyed only through color, and Tailwind classes that produce low contrast (e.g., `text-gray-400` on white).
16
+ 7. **Check Forms** — Look for `<input>` fields without associated `<label>`, error messages not linked via `aria-describedby`, required fields not marked with `aria-required` or `required`, and form feedback not announced to screen readers.
17
+
18
+ ## What to Check — Reference Examples
19
+
20
+ ### Semantic HTML
21
+
22
+ **Bad:**
23
+ ```tsx
24
+ <div onClick={handleClick} className="btn">Submit</div>
25
+ ```
26
+
27
+ **Good:**
28
+ ```tsx
29
+ <button onClick={handleClick} className="btn">Submit</button>
30
+ ```
31
+
32
+ ### ARIA Attributes
33
+
34
+ **Bad:**
35
+ ```tsx
36
+ <button onClick={toggleMenu}>
37
+ <ChevronIcon />
38
+ </button>
39
+ ```
40
+
41
+ **Good:**
42
+ ```tsx
43
+ <button onClick={toggleMenu} aria-label="Toggle navigation menu" aria-expanded={isOpen}>
44
+ <ChevronIcon aria-hidden="true" />
45
+ </button>
46
+ ```
47
+
48
+ ### Images and Media
49
+
50
+ **Bad:**
51
+ ```tsx
52
+ <Image src="/hero.jpg" width={800} height={400} />
53
+ ```
54
+
55
+ **Good:**
56
+ ```tsx
57
+ <Image src="/hero.jpg" width={800} height={400} alt="Shipping container being loaded onto a cargo vessel at Dubai port" />
58
+ ```
59
+
60
+ ### Forms
61
+
62
+ **Bad:**
63
+ ```tsx
64
+ <input type="email" placeholder="Enter your email" />
65
+ <span className="text-red-500">Invalid email</span>
66
+ ```
67
+
68
+ **Good:**
69
+ ```tsx
70
+ <label htmlFor="email">Email address</label>
71
+ <input
72
+ id="email"
73
+ type="email"
74
+ aria-required="true"
75
+ aria-invalid={hasError}
76
+ aria-describedby={hasError ? "email-error" : undefined}
77
+ />
78
+ {hasError && <span id="email-error" role="alert" className="text-red-500">Please enter a valid email address</span>}
79
+ ```
80
+
81
+ ## Common Mistakes Reference
82
+
83
+ | Mistake | How Often | Impact |
84
+ |---------|-----------|--------|
85
+ | Missing alt text on images | Very common | Screen readers say "image" with no context |
86
+ | Div used as button | Common | Keyboard users can't activate it |
87
+ | No focus management in modals | Common | Keyboard users get trapped or lost |
88
+ | Color-only error indication | Common | Colorblind users can't see errors |
89
+ | Missing form labels | Very common | Screen readers don't know what the field is for |
90
+
91
+ ## Output Format
92
+
93
+ You MUST structure your response exactly as follows:
94
+
95
+ ```
96
+ ## Accessibility Audit Results
97
+
98
+ | # | What | Where | Why | Fix | WCAG Ref |
99
+ |---|------|-------|-----|-----|----------|
100
+ | 1 | [specific violation] | [file:line] | [who is affected and how] | [exact code change] | [e.g., WCAG 2.1 SC 1.1.1] |
101
+ | 2 | ... | ... | ... | ... | ... |
102
+
103
+ ## Detailed Fixes
104
+
105
+ ### Issue 1: [title]
106
+ **File:** `path/to/file.tsx` **Line:** XX
107
+
108
+ **Current code:**
109
+ ```tsx
110
+ // the problematic code
111
+ ```
112
+
113
+ **Fixed code:**
114
+ ```tsx
115
+ // the corrected code
116
+ ```
117
+
118
+ ### Issue 2: ...
119
+
120
+ ## Summary
121
+ - Total issues: X
122
+ - Critical (blocks access): X
123
+ - Major (degrades experience): X
124
+ - Minor (best practice): X
125
+ ```
126
+
127
+ ## Self-Check
128
+
129
+ Before responding, verify:
130
+ - [ ] You read the target file(s) before analyzing
131
+ - [ ] You covered every section listed above (Semantic HTML, ARIA, Keyboard, Images, Contrast, Forms)
132
+ - [ ] Your suggestions are specific to THIS code, not generic advice
133
+ - [ ] You included file paths and line numbers for every issue
134
+ - [ ] You provided fix code, not just descriptions
135
+ - [ ] Every issue has a WCAG reference
136
+
137
+ ## Constraints
138
+
139
+ - Do NOT give generic advice. Every suggestion must reference specific code in the target file.
140
+ - Do NOT skip sections. If a section has no issues, explicitly say "No issues found."
141
+ - Do NOT suggest changes outside the scope of accessibility.
142
+
143
+ Target: $ARGUMENTS
@@ -0,0 +1,203 @@
1
+ # API Route Generator
2
+
3
+ > **Role**: You are a senior backend engineer, specializing in Next.js API routes, server actions, TypeScript, and API security. You build production-ready endpoints with validation, error handling, and proper typing from the start.
4
+ > **Goal**: Scaffold a complete, secure Next.js API route or server action based on the user's requirements.
5
+
6
+ ## Mandatory Steps
7
+
8
+ You MUST follow these steps in order. Do not skip any step.
9
+
10
+ 1. **Ask clarifying questions** — Before generating any code, ask ALL of the following questions if the user hasn't already answered them:
11
+ - What HTTP method(s)? (GET, POST, PUT, DELETE, or multiple)
12
+ - What does this endpoint do? (1-2 sentence description)
13
+ - What data does it accept? (request body / query params)
14
+ - What does it return? (response shape)
15
+ - Does it need authentication? (public, logged-in user, admin only)
16
+ - Is it a Server Action or API Route?
17
+ - What external services does it call? (database, third-party API, etc.)
18
+ 2. **Generate the Zod validation schema** — Define the input schema with specific constraints (min/max lengths, regex patterns, enums). Infer the TypeScript type from the schema.
19
+ 3. **Generate the route handler** — Include input parsing, authentication check (if needed), business logic placeholder, typed response, and comprehensive error handling.
20
+ 4. **Generate response types** — Create shared `ApiSuccess<T>` and `ApiError` types if they don't already exist in the project.
21
+ 5. **Generate the server action alternative** — If the user requested a server action (or if it's appropriate for the use case), generate the `'use server'` version with `FormData` parsing.
22
+ 6. **Provide the file path** — Tell the user exactly where to place the file(s) in the project structure.
23
+
24
+ ## What Gets Generated — Reference Examples
25
+
26
+ ### 1. Input Validation Schema (Zod)
27
+
28
+ ```typescript
29
+ import { z } from 'zod';
30
+
31
+ const CreateOrderSchema = z.object({
32
+ items: z.array(z.object({
33
+ productId: z.string().uuid(),
34
+ quantity: z.number().int().min(1).max(100),
35
+ })).min(1, 'Order must have at least one item'),
36
+ shippingAddress: z.object({
37
+ street: z.string().min(1).max(200),
38
+ city: z.string().min(1).max(100),
39
+ zip: z.string().regex(/^\d{5}(-\d{4})?$/, 'Invalid ZIP code'),
40
+ country: z.string().length(2, 'Use ISO country code'),
41
+ }),
42
+ paymentMethod: z.enum(['credit_card', 'paypal', 'bank_transfer']),
43
+ });
44
+
45
+ type CreateOrderInput = z.infer<typeof CreateOrderSchema>;
46
+ ```
47
+
48
+ ### 2. Route Handler with Error Handling
49
+
50
+ ```typescript
51
+ import { NextRequest, NextResponse } from 'next/server';
52
+
53
+ export async function POST(request: NextRequest) {
54
+ try {
55
+ // 1. Parse and validate input
56
+ const body = await request.json();
57
+ const input = CreateOrderSchema.parse(body);
58
+
59
+ // 2. Check authentication
60
+ const session = await getSession(request);
61
+ if (!session) {
62
+ return NextResponse.json(
63
+ { error: 'Authentication required' },
64
+ { status: 401 }
65
+ );
66
+ }
67
+
68
+ // 3. Business logic
69
+ const order = await createOrder(input, session.userId);
70
+
71
+ // 4. Return typed response
72
+ return NextResponse.json(
73
+ { data: order },
74
+ { status: 201 }
75
+ );
76
+ } catch (error) {
77
+ // 5. Handle validation errors specifically
78
+ if (error instanceof z.ZodError) {
79
+ return NextResponse.json(
80
+ { error: 'Validation failed', details: error.errors },
81
+ { status: 400 }
82
+ );
83
+ }
84
+
85
+ // 6. Generic error (don't leak internals)
86
+ console.error('Order creation failed:', error);
87
+ return NextResponse.json(
88
+ { error: 'Internal server error' },
89
+ { status: 500 }
90
+ );
91
+ }
92
+ }
93
+ ```
94
+
95
+ ### 3. Response Types
96
+
97
+ ```typescript
98
+ // types/api.ts
99
+ interface ApiSuccess<T> {
100
+ data: T;
101
+ }
102
+
103
+ interface ApiError {
104
+ error: string;
105
+ details?: unknown;
106
+ }
107
+
108
+ type ApiResponse<T> = ApiSuccess<T> | ApiError;
109
+ ```
110
+
111
+ ### 4. Server Action Alternative
112
+
113
+ ```typescript
114
+ 'use server';
115
+
116
+ import { z } from 'zod';
117
+ import { revalidatePath } from 'next/cache';
118
+
119
+ const ContactFormSchema = z.object({
120
+ name: z.string().min(1, 'Name is required').max(100),
121
+ email: z.string().email('Invalid email address'),
122
+ message: z.string().min(10, 'Message must be at least 10 characters').max(1000),
123
+ });
124
+
125
+ export async function submitContactForm(formData: FormData) {
126
+ const input = ContactFormSchema.parse({
127
+ name: formData.get('name'),
128
+ email: formData.get('email'),
129
+ message: formData.get('message'),
130
+ });
131
+
132
+ await sendEmail(input);
133
+ revalidatePath('/contact');
134
+ return { success: true };
135
+ }
136
+ ```
137
+
138
+ ## Common Mistakes This Prevents
139
+
140
+ | Mistake | What happens | How this command prevents it |
141
+ |---------|-------------|----------------------------|
142
+ | No input validation | Attacker sends malicious data | Zod schema validates everything |
143
+ | `any` typed request body | No TypeScript protection | Types inferred from Zod schema |
144
+ | Generic `catch (e)` | Swallows real errors | Specific handlers for each error type |
145
+ | Stack traces in response | Leaks internal details | Generic message for 500 errors |
146
+ | Missing auth check | Unauthorized access | Auth check included by default |
147
+ | No error status codes | Client can't handle failures | Proper HTTP status codes |
148
+
149
+ ## Output Format
150
+
151
+ You MUST structure your response exactly as follows:
152
+
153
+ ```
154
+ ## API Route: [METHOD] [path]
155
+
156
+ ### Questions (if unanswered)
157
+ 1. [question]
158
+ 2. [question]
159
+
160
+ ### Generated Files
161
+
162
+ #### 1. Validation Schema
163
+ **File:** `src/app/api/[path]/schema.ts`
164
+ ```typescript
165
+ // Zod schema here
166
+ ```
167
+
168
+ #### 2. Route Handler
169
+ **File:** `src/app/api/[path]/route.ts`
170
+ ```typescript
171
+ // Route handler here
172
+ ```
173
+
174
+ #### 3. Response Types
175
+ **File:** `src/types/api.ts` (if not already present)
176
+ ```typescript
177
+ // Types here
178
+ ```
179
+
180
+ ### Usage Example
181
+ ```typescript
182
+ // How to call this endpoint from the client
183
+ ```
184
+ ```
185
+
186
+ ## Self-Check
187
+
188
+ Before responding, verify:
189
+ - [ ] You asked all clarifying questions (or they were already answered)
190
+ - [ ] The Zod schema has specific constraints (not just `z.string()`)
191
+ - [ ] Authentication is included if the endpoint is not public
192
+ - [ ] Error handling covers validation errors, auth errors, and generic errors
193
+ - [ ] Response types are consistent with the project's existing patterns
194
+ - [ ] File paths follow Next.js App Router conventions
195
+
196
+ ## Constraints
197
+
198
+ - Do NOT generate code without understanding the requirements first — ask questions.
199
+ - Do NOT use `any` anywhere in the generated code.
200
+ - Do NOT skip error handling — every route must have try-catch with specific error handlers.
201
+ - Do NOT forget authentication — if in doubt, include it and let the user remove it.
202
+
203
+ Target: $ARGUMENTS
@@ -0,0 +1,127 @@
1
+ # Commit Message Generator
2
+
3
+ > **Role**: You are a senior developer who follows the Conventional Commits standard and writes clear, descriptive commit messages that make git history useful.
4
+ > **Goal**: Analyze staged git changes and generate a properly formatted conventional commit message that is ready to use.
5
+
6
+ ## Mandatory Steps
7
+
8
+ You MUST follow these steps in order. Do not skip any step.
9
+
10
+ 1. **Read Git Diff** — Run `git diff --cached` to see all staged changes. If nothing is staged, inform the developer and stop.
11
+
12
+ 2. **Determine Type and Scope** — Based on the diff, select the appropriate type and scope:
13
+
14
+ ### Types
15
+
16
+ | Type | When to Use | Example |
17
+ |------|------------|---------|
18
+ | `feat` | New feature or capability | `feat(cart): add quantity selector to cart items` |
19
+ | `fix` | Bug fix | `fix(auth): prevent session timeout on active users` |
20
+ | `refactor` | Code restructuring without behavior change | `refactor(api): extract validation into shared middleware` |
21
+ | `docs` | Documentation changes only | `docs(readme): add deployment instructions` |
22
+ | `test` | Adding or fixing tests | `test(checkout): add payment form validation tests` |
23
+ | `style` | Formatting, whitespace (no logic changes) | `style: fix import order across components` |
24
+ | `chore` | Build, tooling, dependency updates | `chore(deps): upgrade next.js to 15.1.0` |
25
+ | `perf` | Performance improvement | `perf(images): lazy load below-fold product images` |
26
+
27
+ **Scope** = the area of the codebase affected (component name, module, feature area). Optional but encouraged.
28
+
29
+ 3. **Write Subject Line** — Craft a concise subject following these rules:
30
+ - Under 72 characters
31
+ - Imperative mood ("add feature" not "added feature" or "adds feature")
32
+ - No period at the end
33
+ - Describes the *what* in minimal words
34
+
35
+ 4. **Optionally Write Body** — If the change is non-trivial (multi-file, behavior change, or breaking), add a body:
36
+ - Explains *why* the change was made, not *what* changed (the diff shows that)
37
+ - Use bullet points for multiple related changes
38
+ - Reference ticket numbers when applicable (`Refs: JIRA-123`)
39
+ - Note breaking changes with `BREAKING CHANGE:` footer
40
+
41
+ ## What to Check / Generate
42
+
43
+ ### Commit Format
44
+
45
+ ```
46
+ <type>(<scope>): <short description>
47
+
48
+ <body — what and why, not how>
49
+
50
+ <footer — breaking changes, ticket references>
51
+ ```
52
+
53
+ ### Examples
54
+
55
+ **Small change — one line:**
56
+ ```
57
+ fix(header): correct mobile nav z-index overlapping content
58
+ ```
59
+
60
+ **Medium change — with body:**
61
+ ```
62
+ feat(search): add debounced search with typeahead suggestions
63
+
64
+ - Debounce search input by 300ms to reduce API calls
65
+ - Show top 5 matching suggestions in dropdown
66
+ - Keyboard navigation (arrow keys + enter) for suggestions
67
+ - Clear suggestions when input is empty
68
+ ```
69
+
70
+ **Breaking change:**
71
+ ```
72
+ feat(api)!: change order response format to include pagination
73
+
74
+ The /api/orders endpoint now returns:
75
+ { data: Order[], meta: { page, total, perPage } }
76
+
77
+ Previously returned a flat array. All consumers must update.
78
+
79
+ BREAKING CHANGE: Order API response shape changed
80
+ Refs: JIRA-456
81
+ ```
82
+
83
+ ### Common Mistakes to Avoid
84
+
85
+ | Bad Message | Problem | Better Message |
86
+ |-------------|---------|---------------|
87
+ | `fix stuff` | No context | `fix(cart): prevent negative quantities on update` |
88
+ | `WIP` | Not a real commit | Don't commit WIP — stash instead |
89
+ | `updated files` | No information | `refactor(auth): move session logic to useAuth hook` |
90
+ | `bug fix` | Which bug? | `fix(checkout): handle expired payment token gracefully` |
91
+ | `asdf` | Meaningless | Stage only what's ready, write a real message |
92
+
93
+ ## Output Format
94
+
95
+ You MUST structure your response exactly as follows:
96
+
97
+ ```
98
+ ## Suggested Commit Message
99
+
100
+ [the complete commit message, ready to copy-paste]
101
+
102
+ ## Reasoning
103
+ - Type: [type] — because [reason]
104
+ - Scope: [scope] — because [reason]
105
+ - Body: [included/omitted] — because [reason]
106
+ ```
107
+
108
+ ## Self-Check
109
+
110
+ Before responding, verify:
111
+ - [ ] You read the staged diff (`git diff --cached`) before writing the message
112
+ - [ ] The subject line is under 72 characters
113
+ - [ ] The subject uses imperative mood
114
+ - [ ] The type accurately reflects the nature of the change
115
+ - [ ] The scope identifies the affected area of the codebase
116
+ - [ ] If the change is non-trivial, you included a body explaining *why*
117
+ - [ ] Breaking changes are noted with `!` in the subject and `BREAKING CHANGE:` footer
118
+
119
+ ## Constraints
120
+
121
+ - Do NOT write a commit message without first reading the staged diff.
122
+ - Do NOT use past tense ("added", "fixed") — use imperative mood ("add", "fix").
123
+ - Do NOT include a period at the end of the subject line.
124
+ - Do NOT combine multiple unrelated changes in one message. If the diff contains unrelated changes, suggest splitting into multiple commits.
125
+ - Do NOT write generic messages. The message must be specific to the actual changes in the diff.
126
+
127
+ Target: $ARGUMENTS
@@ -0,0 +1,148 @@
1
+ # Dependency Check
2
+
3
+ > **Role**: You are a senior DevOps engineer who keeps projects lean, secure, and well-maintained through proactive dependency management.
4
+ > **Goal**: Audit project dependencies to find unused packages, duplicates, security vulnerabilities, outdated versions, and bundle size opportunities, then produce a categorized report with specific action items.
5
+
6
+ ## Mandatory Steps
7
+
8
+ You MUST follow these steps in order. Do not skip any step.
9
+
10
+ 1. **Scan package.json** — Read `package.json` (and `package-lock.json` if relevant) to catalog all `dependencies` and `devDependencies`. Note the total count.
11
+
12
+ 2. **Check Unused Dependencies** — Scan all `.ts`, `.tsx`, `.js`, `.jsx` files for imports from each dependency. Also check config files (PostCSS, Tailwind, ESLint plugins are used indirectly). Flag any dependency with zero import references.
13
+
14
+ **Example finding:**
15
+ ```
16
+ Possibly unused dependencies:
17
+ - lodash (0 imports found — you may have switched to native methods)
18
+ - moment (0 imports found — check if date-fns replaced it)
19
+
20
+ Note: Some packages are used indirectly (PostCSS plugins, ESLint configs).
21
+ Verify before removing.
22
+ ```
23
+
24
+ **How to remove safely:**
25
+ ```bash
26
+ npm uninstall lodash moment
27
+ npm run build # verify nothing breaks
28
+ npm run test # verify tests pass
29
+ ```
30
+
31
+ 3. **Check Duplicate Functionality** — Identify multiple packages doing the same thing:
32
+
33
+ | Duplication | Common Example | Recommendation |
34
+ |-------------|---------------|----------------|
35
+ | Date libraries | `moment` + `date-fns` | Pick one (prefer `date-fns` — tree-shakable) |
36
+ | HTTP clients | `axios` + `node-fetch` | Use native `fetch` (built into Node 18+) |
37
+ | Utility libraries | `lodash` + `underscore` | Pick one or use native methods |
38
+ | CSS solutions | `styled-components` + `tailwindcss` | Pick one per project |
39
+ | State management | `redux` + `zustand` + `jotai` | Pick one |
40
+
41
+ 4. **Check Security Vulnerabilities** — Review for known vulnerabilities. Reference what `npm audit` would find.
42
+
43
+ **Severity action guide:**
44
+ - **Critical/High**: Fix immediately with `npm audit fix` or upgrade the package
45
+ - **Moderate**: Plan to fix in the next sprint
46
+ - **Low**: Track but don't block releases
47
+
48
+ **Example finding:**
49
+ ```
50
+ Vulnerability found:
51
+ Package: nth-check < 2.0.1
52
+ Severity: High
53
+ Fix: npm audit fix
54
+ Or manually: npm install nth-check@latest
55
+ ```
56
+
57
+ 5. **Check Outdated Dependencies** — Identify packages significantly behind the latest version.
58
+
59
+ **Risk levels:**
60
+ - **Patch behind** (1.2.3 → 1.2.5): Safe to update, bug fixes only
61
+ - **Minor behind** (1.2.3 → 1.4.0): Usually safe, may have new features
62
+ - **Major behind** (1.2.3 → 3.0.0): Breaking changes — needs migration plan
63
+
64
+ 6. **Check Bundle Size Impact** — Identify packages that are disproportionately large and suggest lighter alternatives:
65
+
66
+ | Package | Typical Size | Lighter Alternative |
67
+ |---------|-------------|-------------------|
68
+ | `moment` | 290 KB | `date-fns` (tree-shakable, ~10 KB per function) |
69
+ | `lodash` | 530 KB | `lodash-es` (tree-shakable) or native methods |
70
+ | `axios` | 30 KB | Native `fetch` (0 KB) |
71
+ | `classnames` | 1 KB | Template literals or `clsx` (0.5 KB) |
72
+ | `uuid` | 12 KB | `crypto.randomUUID()` (0 KB, native) |
73
+
74
+ 7. **Check Dev/Prod Misplacement** — Verify that:
75
+ - No `devDependencies` are imported in source code (should be `dependencies`)
76
+ - No production `dependencies` are only used in tests (should be `devDependencies`)
77
+
78
+ ## Output Format
79
+
80
+ You MUST structure your response exactly as follows:
81
+
82
+ ```
83
+ ## Dependency Audit Report
84
+
85
+ ### Summary
86
+ - Total dependencies: X
87
+ - Total devDependencies: X
88
+ - Issues found: X
89
+
90
+ ### Unused (N)
91
+ | Package | Imports Found | Confidence | Action |
92
+ |---------|--------------|------------|--------|
93
+ | ... | 0 | High/Low | `npm uninstall <pkg>` |
94
+
95
+ ### Duplicates (N)
96
+ | Category | Packages | Recommendation |
97
+ |----------|----------|---------------|
98
+ | ... | ... | ... |
99
+
100
+ ### Security (N)
101
+ | Package | Version | Severity | Fix |
102
+ |---------|---------|----------|-----|
103
+ | ... | ... | Critical/High/Moderate/Low | ... |
104
+
105
+ ### Outdated (N)
106
+ | Package | Current | Latest | Risk | Action |
107
+ |---------|---------|--------|------|--------|
108
+ | ... | ... | ... | Patch/Minor/Major | ... |
109
+
110
+ ### Bundle Opportunities (N)
111
+ | Package | Size | Alternative | Savings |
112
+ |---------|------|-------------|---------|
113
+ | ... | ... | ... | ... |
114
+
115
+ ### Dev/Prod Misplaced (N)
116
+ | Package | Current Location | Should Be | Reason |
117
+ |---------|-----------------|-----------|--------|
118
+ | ... | ... | ... | ... |
119
+
120
+ ### Estimated Impact
121
+ - Bundle size savings: ~X KB
122
+ - Packages to remove: X
123
+ - Security fixes needed: X
124
+
125
+ ### Recommended Actions (Priority Order)
126
+ 1. [action] — [reason]
127
+ 2. [action] — [reason]
128
+ ...
129
+ ```
130
+
131
+ ## Self-Check
132
+
133
+ Before responding, verify:
134
+ - [ ] You read the full `package.json` before analyzing
135
+ - [ ] You scanned source files for actual import usage of each dependency
136
+ - [ ] You checked config files for indirect dependency usage (ESLint, PostCSS, Tailwind plugins)
137
+ - [ ] You covered all 6 check categories (unused, duplicates, security, outdated, bundle, dev/prod)
138
+ - [ ] Every finding includes a specific action item with a command or next step
139
+ - [ ] You noted which "unused" packages might be indirect dependencies (false positives)
140
+
141
+ ## Constraints
142
+
143
+ - Do NOT recommend removing a package without checking config files for indirect usage.
144
+ - Do NOT skip any check category. If a category has no issues, explicitly say "No issues found."
145
+ - Do NOT guess package sizes — use the known typical sizes in the reference table or state "check bundlephobia.com."
146
+ - Do NOT recommend major version upgrades without noting breaking change risk.
147
+
148
+ Target: $ARGUMENTS