@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.
- package/README.md +73 -0
- package/commands/accessibility-audit.md +143 -0
- package/commands/api-route.md +203 -0
- package/commands/commit-msg.md +127 -0
- package/commands/dep-check.md +148 -0
- package/commands/design-tokens.md +146 -0
- package/commands/document.md +175 -0
- package/commands/env-setup.md +165 -0
- package/commands/error-boundary.md +254 -0
- package/commands/extract-hook.md +237 -0
- package/commands/figma-to-code.md +152 -0
- package/commands/fix-bug.md +112 -0
- package/commands/migrate.md +174 -0
- package/commands/new-component.md +121 -0
- package/commands/new-page.md +113 -0
- package/commands/optimize.md +120 -0
- package/commands/pre-pr.md +159 -0
- package/commands/prompt-help.md +175 -0
- package/commands/refactor.md +219 -0
- package/commands/responsive-check.md +164 -0
- package/commands/review.md +120 -0
- package/commands/security-check.md +175 -0
- package/commands/sitecore-debug.md +216 -0
- package/commands/test.md +154 -0
- package/commands/token-tips.md +72 -0
- package/commands/type-fix.md +224 -0
- package/commands/understand.md +84 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1425 -0
- package/dist/index.js.map +1 -0
- package/docs-scaffolds/component-doc.md +35 -0
- package/docs-scaffolds/decisions-log.md +15 -0
- package/docs-scaffolds/mistakes-log.md +15 -0
- package/docs-scaffolds/time-log.md +14 -0
- package/guides/figma-workflow.md +135 -0
- package/guides/getting-started.md +61 -0
- package/guides/prompt-playbook.md +64 -0
- package/guides/token-saving-tips.md +50 -0
- package/guides/when-to-use-ai.md +44 -0
- package/package.json +58 -0
- package/templates/claude-md/base.md +173 -0
- package/templates/claude-md/figma.md +62 -0
- package/templates/claude-md/monorepo.md +17 -0
- package/templates/claude-md/nextjs-app-router.md +29 -0
- package/templates/claude-md/nextjs-pages-router.md +28 -0
- package/templates/claude-md/sitecore-xmc.md +46 -0
- package/templates/claude-md/tailwind.md +18 -0
- package/templates/claude-md/typescript.md +19 -0
- package/templates/cursorrules/base.md +84 -0
- package/templates/cursorrules/figma.md +32 -0
- package/templates/cursorrules/monorepo.md +7 -0
- package/templates/cursorrules/nextjs-app-router.md +8 -0
- package/templates/cursorrules/nextjs-pages-router.md +7 -0
- package/templates/cursorrules/sitecore-xmc.md +9 -0
- package/templates/cursorrules/tailwind.md +8 -0
- package/templates/cursorrules/typescript.md +8 -0
- package/templates/header.md +4 -0
- 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
|