@mikulgohil/ai-kit 1.1.0 → 1.3.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 (41) hide show
  1. package/README.md +85 -12
  2. package/agents/architect.md +79 -0
  3. package/agents/build-resolver.md +54 -0
  4. package/agents/code-reviewer.md +60 -0
  5. package/agents/doc-updater.md +46 -0
  6. package/agents/e2e-runner.md +64 -0
  7. package/agents/planner.md +56 -0
  8. package/agents/refactor-cleaner.md +58 -0
  9. package/agents/security-reviewer.md +67 -0
  10. package/agents/sitecore-specialist.md +96 -0
  11. package/agents/tdd-guide.md +115 -0
  12. package/commands/checkpoint.md +78 -0
  13. package/commands/harness-audit.md +73 -0
  14. package/commands/middleware.md +80 -0
  15. package/commands/orchestrate.md +67 -0
  16. package/commands/quality-gate-check.md +109 -0
  17. package/commands/quality-gate.md +82 -0
  18. package/commands/resume-session.md +40 -0
  19. package/commands/save-session.md +65 -0
  20. package/commands/search-first.md +60 -0
  21. package/commands/server-action.md +93 -0
  22. package/commands/sitecore-debug.md +58 -0
  23. package/contexts/dev.md +35 -0
  24. package/contexts/research.md +56 -0
  25. package/contexts/review.md +49 -0
  26. package/dist/index.js +891 -119
  27. package/dist/index.js.map +1 -1
  28. package/guides/getting-started.md +74 -21
  29. package/guides/hooks-and-agents.md +124 -0
  30. package/package.json +9 -4
  31. package/templates/claude-md/nextjs-app-router.md +35 -1
  32. package/templates/claude-md/sitecore-xmc.md +99 -2
  33. package/templates/claude-md/typescript.md +79 -1
  34. package/templates/cursorrules/nextjs-app-router.md +6 -1
  35. package/templates/cursorrules/sitecore-xmc.md +5 -1
  36. package/templates/cursorrules/typescript.md +6 -1
  37. package/commands/ci-fix.md +0 -102
  38. package/commands/db-migrate.md +0 -138
  39. package/commands/dependency-graph.md +0 -138
  40. package/commands/docker-debug.md +0 -111
  41. package/commands/visual-diff.md +0 -131
@@ -4,11 +4,14 @@
4
4
 
5
5
  `ai-kit init` scanned your project and generated AI configuration files tailored to your tech stack. Here's what was created:
6
6
 
7
- | File | Purpose |
8
- |------|---------|
7
+ | File / Directory | Purpose |
8
+ |-----------------|---------|
9
9
  | `CLAUDE.md` | Rules for Claude Code — tells the AI about your project |
10
10
  | `.cursorrules` | Rules for Cursor — same purpose, Cursor format |
11
- | `.claude/commands/` | Slash commands — pre-built workflows for common tasks |
11
+ | `.claude/skills/` | Skills — pre-built workflows for common tasks |
12
+ | `.claude/agents/` | Agents — specialized AI assistants for delegation |
13
+ | `.claude/contexts/` | Context modes — dev, review, and research modes |
14
+ | `.claude/settings.local.json` | Hooks — automated checks that run as you code |
12
15
  | `ai-kit/guides/` | Guides — tips and playbooks for using AI effectively |
13
16
  | `docs/` | Doc templates — for tracking decisions and mistakes |
14
17
  | `ai-kit.config.json` | Config — what AI Kit detected and generated |
@@ -16,7 +19,7 @@
16
19
  ## First Thing to Do
17
20
 
18
21
  ### If you use Claude Code:
19
- Run the `/prompt-help` command. It's an interactive prompt builder that asks you all the right questions before generating a perfect prompt. No more "fix this" and getting garbage output.
22
+ Run the `/prompt-help` command. It's an interactive prompt builder that asks you all the right questions before generating a perfect prompt.
20
23
 
21
24
  ```
22
25
  /prompt-help
@@ -25,18 +28,67 @@ Run the `/prompt-help` command. It's an interactive prompt builder that asks you
25
28
  ### If you use Cursor:
26
29
  Open any file and use Cmd+K or the chat panel. The `.cursorrules` file is automatically loaded and gives Cursor context about your project.
27
30
 
28
- ## Available Slash Commands (Claude Code)
31
+ ## Available Skills (Claude Code)
29
32
 
30
- | Command | What it does |
31
- |---------|-------------|
33
+ ### Getting Started
34
+ | Skill | What it does |
35
+ |-------|-------------|
32
36
  | `/prompt-help` | Interactive prompt builder — **start here** |
33
- | `/review` | Deep code review as a Senior Engineer |
34
- | `/fix-bug` | Guided bug fix workflow |
37
+ | `/understand` | Explain code in detail |
38
+ | `/token-tips` | Token usage optimization |
39
+
40
+ ### Building
41
+ | Skill | What it does |
42
+ |-------|-------------|
35
43
  | `/new-component` | Scaffold a new component |
36
44
  | `/new-page` | Create a new page/route |
37
- | `/understand` | Explain code in detail |
45
+ | `/api-route` | Scaffold an API route |
46
+ | `/figma-to-code` | Implement Figma designs |
47
+
48
+ ### Quality & Review
49
+ | Skill | What it does |
50
+ |-------|-------------|
51
+ | `/review` | Deep code review |
52
+ | `/fix-bug` | Guided bug fix workflow |
38
53
  | `/test` | Generate tests |
39
- | `/optimize` | Performance optimization |
54
+ | `/quality-gate` | Run ALL quality checks at once |
55
+ | `/security-check` | Security vulnerability scan |
56
+ | `/accessibility-audit` | WCAG 2.1 AA audit |
57
+
58
+ ### Session & Learning (NEW in v1.2.0)
59
+ | Skill | What it does |
60
+ |-------|-------------|
61
+ | `/save-session` | Save current session for later resumption |
62
+ | `/resume-session` | Pick up where you left off |
63
+ | `/checkpoint` | Snapshot all quality check results |
64
+ | `/orchestrate` | Coordinate multiple agents on complex tasks |
65
+ | `/harness-audit` | Check AI configuration health |
66
+
67
+ ## Hooks (Automated Checks)
68
+
69
+ Hooks run automatically as you code — no action needed. Based on your selected profile:
70
+
71
+ - **Auto-format**: files are formatted on save (Prettier or Biome)
72
+ - **Type-check**: TypeScript errors caught after every edit
73
+ - **Console.log warning**: catches debug statements before commit
74
+ - **Git push safety**: reminder to review before pushing
75
+
76
+ See `ai-kit/guides/hooks-and-agents.md` for details on profiles and customization.
77
+
78
+ ## Agents
79
+
80
+ Specialized AI assistants live in `.claude/agents/` and can be delegated to:
81
+
82
+ | Agent | Specialization |
83
+ |-------|---------------|
84
+ | `planner` | Implementation planning |
85
+ | `code-reviewer` | Quality review |
86
+ | `security-reviewer` | Security audit |
87
+ | `build-resolver` | Fix build errors |
88
+ | `e2e-runner` | Playwright E2E tests |
89
+ | `doc-updater` | Documentation sync |
90
+ | `refactor-cleaner` | Dead code cleanup |
91
+ | `sitecore-specialist` | Sitecore XM Cloud patterns |
40
92
 
41
93
  ## Tips
42
94
 
@@ -45,17 +97,18 @@ Open any file and use Cmd+K or the chat panel. The `.cursorrules` file is automa
45
97
  3. **Don't start from scratch** — ask the AI to read existing code first
46
98
  4. **One task per conversation** — keep conversations focused
47
99
  5. **Review AI output** — always read what it generates before accepting
100
+ 6. **Use `/checkpoint`** before and after major changes to track quality
101
+ 7. **Use `/save-session`** before ending a long session
48
102
 
49
- ## Updating
50
-
51
- When you add new packages or change your project structure:
52
- ```bash
53
- npx @mikulgohil/ai-kit update
54
- ```
55
-
56
- ## Removing
103
+ ## CLI Commands
57
104
 
58
- To remove all AI Kit generated files:
59
105
  ```bash
60
- npx @mikulgohil/ai-kit reset
106
+ npx @mikulgohil/ai-kit update # Re-scan and update configs
107
+ npx @mikulgohil/ai-kit audit # Security & config health check
108
+ npx @mikulgohil/ai-kit doctor # Diagnose setup issues
109
+ npx @mikulgohil/ai-kit diff # Preview what would change on update
110
+ npx @mikulgohil/ai-kit stats # Project complexity metrics
111
+ npx @mikulgohil/ai-kit tokens # Token usage and cost estimates
112
+ npx @mikulgohil/ai-kit export # Export to Windsurf, Aider, Cline
113
+ npx @mikulgohil/ai-kit reset # Remove all generated files
61
114
  ```
@@ -0,0 +1,124 @@
1
+ # Hooks, Agents & Context Modes
2
+
3
+ AI Kit v1.2.0 introduces automated hooks, specialized agents, and context modes to supercharge your AI-assisted development workflow.
4
+
5
+ ## Hooks
6
+
7
+ Hooks are automated checks that run as you code — no manual invocation needed.
8
+
9
+ ### How They Work
10
+
11
+ Hooks are configured in `.claude/settings.local.json` and fire on specific events:
12
+
13
+ | Event | When It Fires |
14
+ |-------|--------------|
15
+ | **PreToolUse** | Before a tool runs (e.g., before `git push`) |
16
+ | **PostToolUse** | After a file is edited or written |
17
+ | **Stop** | After each AI response completes |
18
+
19
+ ### Hook Profiles
20
+
21
+ AI Kit generates hooks based on your selected profile:
22
+
23
+ | Profile | What Runs |
24
+ |---------|-----------|
25
+ | **Minimal** | Auto-format + git push safety warning |
26
+ | **Standard** | Minimal + TypeScript type-check + console.log warnings |
27
+ | **Strict** | Standard + ESLint check + stop-time console.log audit |
28
+
29
+ ### Changing Your Profile
30
+
31
+ Re-run `ai-kit init` and select a different hook profile, or edit `.claude/settings.local.json` directly.
32
+
33
+ ### Disabling a Hook
34
+
35
+ Remove or comment out the hook entry in `.claude/settings.local.json`. The file is gitignored by default, so your changes are local.
36
+
37
+ ---
38
+
39
+ ## Agents
40
+
41
+ Agents are specialized AI assistants that can be delegated to for specific tasks. They live in `.claude/agents/`.
42
+
43
+ ### Available Agents
44
+
45
+ | Agent | What It Does |
46
+ |-------|-------------|
47
+ | **planner** | Breaks down features into implementation plans |
48
+ | **code-reviewer** | Deep code review for quality, patterns, and security |
49
+ | **security-reviewer** | Focused security audit (XSS, CSRF, OWASP Top 10) |
50
+ | **build-resolver** | Diagnoses and fixes build/type errors |
51
+ | **e2e-runner** | Generates and runs Playwright E2E tests |
52
+ | **doc-updater** | Syncs documentation with code changes |
53
+ | **refactor-cleaner** | Finds and removes dead code |
54
+ | **sitecore-specialist** | Sitecore XM Cloud patterns and debugging |
55
+
56
+ ### How to Use Agents
57
+
58
+ In Claude Code, agents are automatically available for delegation. You can also invoke them directly:
59
+
60
+ ```
61
+ @planner Plan the implementation for adding dark mode support
62
+ @code-reviewer Review the changes in src/components/Header.tsx
63
+ @e2e-runner Write E2E tests for the checkout flow
64
+ ```
65
+
66
+ ### Conditional Agents
67
+
68
+ Some agents are only generated when their tools are detected:
69
+ - **e2e-runner** — only if Playwright is installed
70
+ - **sitecore-specialist** — only if Sitecore XM Cloud is detected
71
+
72
+ ---
73
+
74
+ ## Context Modes
75
+
76
+ Context modes change how the AI approaches your work. They live in `.claude/contexts/`.
77
+
78
+ ### Available Modes
79
+
80
+ | Mode | Best For |
81
+ |------|----------|
82
+ | **dev** | Building features — focus on implementation |
83
+ | **review** | Reviewing code — focus on quality and security |
84
+ | **research** | Exploring code — focus on understanding and documentation |
85
+
86
+ ### How to Use
87
+
88
+ Reference the context in your prompt:
89
+
90
+ ```
91
+ Using review context, check the authentication flow in src/lib/auth.ts
92
+ ```
93
+
94
+ ---
95
+
96
+ ## Session Management
97
+
98
+ New skills help you persist context across sessions:
99
+
100
+ | Skill | What It Does |
101
+ |-------|-------------|
102
+ | `/save-session` | Save current session state and decisions |
103
+ | `/resume-session` | Restore context from a previous session |
104
+ | `/checkpoint` | Run all quality checks and record results |
105
+
106
+ ### Quality & Orchestration
107
+
108
+ | Skill | What It Does |
109
+ |-------|-------------|
110
+ | `/quality-gate` | Run all checks: types, lint, format, tests, a11y, security |
111
+ | `/orchestrate` | Coordinate multiple agents for complex tasks |
112
+ | `/harness-audit` | Check AI configuration health |
113
+
114
+ ---
115
+
116
+ ## Security Audit
117
+
118
+ Run `ai-kit audit` to check your AI agent setup for:
119
+
120
+ - Secrets accidentally committed in CLAUDE.md or settings
121
+ - Missing hooks or misconfigured agents
122
+ - .env files not gitignored
123
+ - MCP server security
124
+ - Overall configuration health score (A-F grade)
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mikulgohil/ai-kit",
3
- "version": "1.1.0",
4
- "description": "AI-assisted development setup kit. Auto-detects your tech stack and generates tailored CLAUDE.md, .cursorrules, slash commands, and developer guides.",
3
+ "version": "1.3.0",
4
+ "description": "AI-assisted development setup kit. Auto-detects your tech stack and generates tailored CLAUDE.md, .cursorrules, hooks, agents, context modes, slash commands, and developer guides.",
5
5
  "type": "module",
6
6
  "bin": {
7
7
  "ai-kit": "./dist/index.js"
@@ -11,7 +11,9 @@
11
11
  "templates",
12
12
  "commands",
13
13
  "guides",
14
- "docs-scaffolds"
14
+ "docs-scaffolds",
15
+ "agents",
16
+ "contexts"
15
17
  ],
16
18
  "scripts": {
17
19
  "build": "tsup",
@@ -36,7 +38,10 @@
36
38
  "sitecore",
37
39
  "docker",
38
40
  "storybook",
39
- "i18n"
41
+ "i18n",
42
+ "hooks",
43
+ "agents",
44
+ "security-audit"
40
45
  ],
41
46
  "author": "Mikul Gohil",
42
47
  "license": "MIT",
@@ -22,8 +22,42 @@ app/
22
22
  api/ ← Route Handlers
23
23
  ```
24
24
 
25
+ ## Server Actions
26
+ - Use `'use server'` directive at the top of the file or inline in a function
27
+ - For form handling: pass Server Action directly to `<form action={myAction}>`
28
+ - Use `useActionState` (React 19) for form state management with pending/error states
29
+ - Always validate input with Zod before processing
30
+ - Call `revalidatePath()` or `revalidateTag()` after mutations to update cached data
31
+ - Return structured results `{ success, error, data }` — do not throw from Server Actions
32
+
33
+ ## Streaming & Suspense
34
+ - Use `loading.tsx` for route-level loading states (automatic Suspense boundary)
35
+ - Wrap slow data-fetching components in `<Suspense fallback={...}>` for granular streaming
36
+ - Nested Suspense boundaries enable progressive page rendering
37
+ - `loading.tsx` applies to the entire route segment; `<Suspense>` is per-component
38
+
39
+ ## Route Groups & Layouts
40
+ - Use `(groupName)/` directories to organize routes without affecting URL structure
41
+ - Route groups can have their own `layout.tsx` for section-specific layouts
42
+ - Example: `(marketing)/about/page.tsx` → URL is `/about`, not `/(marketing)/about`
43
+ - Use parallel routes (`@slot/`) for independent loading states within a layout
44
+
45
+ ## Middleware
46
+ - Place `middleware.ts` in the project root (next to `app/`)
47
+ - Use `matcher` config to scope middleware to specific routes
48
+ - Common uses: authentication guards, redirects, i18n locale detection, Sitecore preview mode
49
+ - Middleware runs on the Edge — use only Edge-compatible APIs (no Node.js fs, path, etc.)
50
+
51
+ ## ISR (Incremental Static Regeneration)
52
+ - Set `revalidate` in `fetch()` options: `fetch(url, { next: { revalidate: 60 } })`
53
+ - Use `export const revalidate = 60` at the page/layout level for time-based ISR
54
+ - Use `revalidateTag(tag)` or `revalidatePath(path)` in Server Actions for on-demand ISR
55
+ - Tag fetches with `fetch(url, { next: { tags: ['posts'] } })` for targeted revalidation
56
+
25
57
  ## Common Mistakes to Avoid
26
58
  - Don't use `useEffect` for data fetching in Server Components
27
59
  - Don't import server-only code in Client Components
28
60
  - Don't use `router.push` for simple navigation — use `<Link>`
29
- - Don't forget to add `loading.tsx` for route transitions
61
+ - Don't forget to add `loading.tsx` for route transitions
62
+ - Don't throw errors from Server Actions — return error objects instead
63
+ - Don't use Node.js APIs in Middleware — it runs on the Edge runtime
@@ -6,8 +6,9 @@
6
6
  - Use `@sitecore-jss/sitecore-jss-nextjs` or `@sitecore-content-sdk/nextjs` for component bindings
7
7
 
8
8
  ## Component Patterns
9
+
10
+ ### JSS-based (v21.x)
9
11
  ```typescript
10
- // Standard Sitecore component pattern
11
12
  import { Text, RichText, Image, Link } from '@sitecore-jss/sitecore-jss-nextjs';
12
13
  import type { ComponentRendering, ComponentFields } from '@sitecore-jss/sitecore-jss-nextjs';
13
14
 
@@ -31,6 +32,100 @@ const MyComponent = ({ fields }: MyComponentProps): JSX.Element => (
31
32
  export default MyComponent;
32
33
  ```
33
34
 
35
+ ### Content SDK v2.x
36
+ ```typescript
37
+ import { Text, RichText, Image, Link } from '@sitecore-content-sdk/nextjs';
38
+ import type { ComponentRendering, ComponentFields, Field } from '@sitecore-content-sdk/nextjs';
39
+
40
+ interface MyComponentFields extends ComponentFields {
41
+ heading: Field<string>;
42
+ body: Field<string>;
43
+ }
44
+
45
+ type MyComponentProps = {
46
+ rendering: ComponentRendering;
47
+ fields: MyComponentFields;
48
+ };
49
+
50
+ const MyComponent = ({ fields }: MyComponentProps): JSX.Element => (
51
+ <div>
52
+ <Text field={fields.heading} tag="h2" />
53
+ <RichText field={fields.body} />
54
+ </div>
55
+ );
56
+
57
+ export default MyComponent;
58
+ ```
59
+
60
+ ## Experience Edge GraphQL
61
+ - Use Experience Edge for cross-page queries: navigation, search indexes, content listings
62
+ - Endpoint: `https://edge.sitecorecloud.io/api/graphql/v1`
63
+ - Authenticate with `sc_apikey` header
64
+ - Paginate with `first` and `after` parameters
65
+ - Cache responses with appropriate TTL — Edge content is published/read-only
66
+
67
+ ```graphql
68
+ query NavigationQuery($rootPath: String!, $language: String!) {
69
+ search(
70
+ where: {
71
+ AND: [
72
+ { name: "_path", value: $rootPath, operator: CONTAINS }
73
+ { name: "_language", value: $language }
74
+ { name: "_templatename", value: "Navigation Item" }
75
+ ]
76
+ }
77
+ first: 50
78
+ ) {
79
+ results {
80
+ name
81
+ url { path }
82
+ ... on NavigationItem {
83
+ title { value }
84
+ link { jsonValue }
85
+ }
86
+ }
87
+ }
88
+ }
89
+ ```
90
+
91
+ ## Sitecore Image Optimization
92
+ - Use `next/image` with Sitecore image fields for responsive images
93
+ - Extract `src`, `alt`, `width`, `height` from the Sitecore `ImageField` value
94
+ - Configure Sitecore CDN domain in `next.config.js` `images.remotePatterns`
95
+
96
+ ```typescript
97
+ import NextImage from 'next/image';
98
+ import type { ImageField } from '@sitecore-jss/sitecore-jss-nextjs';
99
+
100
+ function OptimizedImage({ field }: { field: ImageField }) {
101
+ if (!field?.value?.src) return null;
102
+ const { src, alt, width, height } = field.value;
103
+ return (
104
+ <NextImage
105
+ src={src}
106
+ alt={alt || ''}
107
+ width={Number(width) || 800}
108
+ height={Number(height) || 600}
109
+ />
110
+ );
111
+ }
112
+ ```
113
+
114
+ ## Personalization & Variants
115
+ - Sitecore delivers personalized component variants via Layout Service
116
+ - Personalized pages require SSR — they cannot be statically generated
117
+ - Component variants are transparent to the React component — same props, different data
118
+ - Test both default and personalized rendering in development
119
+
120
+ ## Environment Setup
121
+ Required `.env.local` variables for XM Cloud:
122
+ ```
123
+ SITECORE_API_KEY=your-api-key
124
+ SITECORE_API_HOST=https://your-instance.sitecorecloud.io
125
+ GRAPH_QL_ENDPOINT=https://edge.sitecorecloud.io/api/graphql/v1
126
+ SITECORE_SITE_NAME=your-site-name
127
+ ```
128
+
34
129
  ## Rules
35
130
  - Always use Sitecore field helpers (`<Text>`, `<RichText>`, `<Image>`, `<Link>`) — never render field values directly
36
131
  - This enables Experience Editor / Pages inline editing
@@ -43,4 +138,6 @@ export default MyComponent;
43
138
  - Don't render `fields.heading.value` directly — use `<Text field={fields.heading} />`
44
139
  - Don't hardcode content that should come from Sitecore fields
45
140
  - Don't forget to register new components in the component factory
46
- - Don't use `getStaticProps` directly — use Sitecore's built-in SSG/SSR integration
141
+ - Don't use `getStaticProps` directly — use Sitecore's built-in SSG/SSR integration
142
+ - Don't statically generate personalized pages — they need SSR
143
+ - Don't forget to configure Sitecore CDN domain in `next.config.js` for image optimization
@@ -11,9 +11,87 @@
11
11
  - Use `satisfies` for type-safe object literals when the type is known
12
12
  - Use discriminated unions for state management (loading/success/error)
13
13
  - Prefer `as const` for literal type inference
14
+ - Use branded types for domain identifiers: `type UserId = string & { readonly __brand: 'UserId' }`
15
+
16
+ ## Sitecore Field Typing
17
+ ```typescript
18
+ // Typed component props with Sitecore fields
19
+ import type { Field, ImageField, LinkField, ComponentRendering } from '@sitecore-jss/sitecore-jss-nextjs';
20
+
21
+ interface HeroBannerFields {
22
+ heading: Field<string>;
23
+ body: Field<string>;
24
+ image: ImageField;
25
+ cta: LinkField;
26
+ }
27
+
28
+ type HeroBannerProps = {
29
+ rendering: ComponentRendering;
30
+ fields: HeroBannerFields;
31
+ };
32
+
33
+ // Type guard for checking if a field has a value
34
+ function hasFieldValue<T>(field: Field<T> | undefined): field is Field<T> & { value: T } {
35
+ return field !== undefined && field.value !== undefined && field.value !== null;
36
+ }
37
+ ```
38
+
39
+ ## Next.js Typing
40
+ ```typescript
41
+ // Page props (App Router)
42
+ type PageProps = {
43
+ params: Promise<{ slug: string }>;
44
+ searchParams: Promise<Record<string, string | string[] | undefined>>;
45
+ };
46
+
47
+ // Layout props
48
+ type LayoutProps = {
49
+ children: React.ReactNode;
50
+ params: Promise<{ locale: string }>;
51
+ };
52
+
53
+ // Server Action return type
54
+ type ActionResult<T = void> =
55
+ | { success: true; data: T }
56
+ | { success: false; error: string };
57
+
58
+ // Metadata generation
59
+ import type { Metadata } from 'next';
60
+ export async function generateMetadata({ params }: PageProps): Promise<Metadata> { ... }
61
+ ```
62
+
63
+ ## Tailwind Type Safety
64
+ ```typescript
65
+ // Typed Tailwind config extensions
66
+ import type { Config } from 'tailwindcss';
67
+
68
+ const config: Config = {
69
+ content: ['./src/**/*.{ts,tsx}'],
70
+ theme: {
71
+ extend: {
72
+ colors: { brand: { primary: '#...', secondary: '#...' } },
73
+ },
74
+ },
75
+ };
76
+ ```
77
+
78
+ ## Validation with Zod
79
+ ```typescript
80
+ import { z } from 'zod';
81
+
82
+ // Define schema once — derive TypeScript type from it
83
+ const ContactFormSchema = z.object({
84
+ name: z.string().min(1, 'Name is required'),
85
+ email: z.string().email('Invalid email'),
86
+ message: z.string().min(10, 'Message too short'),
87
+ });
88
+
89
+ type ContactForm = z.infer<typeof ContactFormSchema>;
90
+ ```
14
91
 
15
92
  ## Common Mistakes to Avoid
16
93
  - Don't use `any` to bypass type errors — fix the underlying type issue
17
94
  - Don't create unnecessary generic types — use them only when the type genuinely varies
18
95
  - Don't duplicate types — import from a shared types file
19
- - Don't use optional chaining as a substitute for proper null checking
96
+ - Don't use optional chaining as a substitute for proper null checking
97
+ - Don't use `as` type assertions when a type guard or `satisfies` would be safer
@@ -5,4 +5,9 @@
5
5
  - Colocate `loading.tsx`, `error.tsx`, `not-found.tsx` with pages
6
6
  - Data fetching: use `fetch()` in Server Components, Server Actions for mutations
7
7
  - Use `<Link>` for navigation, `next/image` for images
8
- - No `useEffect` for data fetching in Server Components
8
+ - No `useEffect` for data fetching in Server Components
9
+ - Server Actions: validate with Zod, return `{ success, error }`, call `revalidatePath`/`revalidateTag` after mutations
10
+ - Streaming: wrap slow components in `<Suspense fallback={...}>` for progressive rendering
11
+ - ISR: use `fetch(url, { next: { revalidate: N } })` or `export const revalidate = N`
12
+ - Middleware: place `middleware.ts` at project root, use `matcher` config, Edge-compatible APIs only
13
+ - Route Groups: use `(groupName)/` for organization without affecting URL paths
@@ -6,4 +6,8 @@
6
6
  - Register new components in the component factory
7
7
  - GraphQL queries go in `.graphql` files alongside components
8
8
  - Don't use `getStaticProps` directly — use Sitecore's SSG/SSR integration
9
- - Don't hardcode content that should come from Sitecore fields
9
+ - Don't hardcode content that should come from Sitecore fields
10
+ - Content SDK v2.x: import from `@sitecore-content-sdk/nextjs` instead of `@sitecore-jss/sitecore-jss-nextjs`
11
+ - Experience Edge: use `first`/`after` for pagination, cache responses appropriately
12
+ - Personalized pages require SSR — do not statically generate them
13
+ - Use `next/image` with Sitecore image fields — configure CDN domain in `next.config.js`
@@ -5,4 +5,9 @@
5
5
  - Use `unknown` over `any` — narrow with type guards
6
6
  - No `@ts-ignore` without explanation comments
7
7
  - Use `satisfies` for type-safe literals, `as const` for inference
8
- - Import types from shared files — don't duplicate
8
+ - Import types from shared files — don't duplicate
9
+ - Sitecore: type component fields with `Field<string>`, `ImageField`, `LinkField`
10
+ - Next.js: use `Promise<{ slug: string }>` for `params` in App Router page props
11
+ - Server Actions: return `{ success: true; data: T } | { success: false; error: string }`
12
+ - Validation: define Zod schemas, derive TS types with `z.infer<typeof Schema>`
13
+ - Prefer type guards and `satisfies` over `as` type assertions
@@ -1,102 +0,0 @@
1
- # CI/CD Pipeline Debugger
2
-
3
- > **Role**: You are a senior DevOps engineer who specializes in CI/CD pipelines, GitHub Actions, and build optimization for modern web applications.
4
- > **Goal**: Analyze CI/CD configuration files to identify failures, inefficiencies, missing steps, and security gaps, then produce a prioritized improvement plan with specific fixes.
5
-
6
- ## Mandatory Steps
7
-
8
- You MUST follow these steps in order. Do not skip any step.
9
-
10
- 1. **Identify the Target** — If no file(s) specified in `$ARGUMENTS`, scan for `.github/workflows/*.yml`, `vercel.json`, `.gitlab-ci.yml`, `Jenkinsfile`, and `bitbucket-pipelines.yml`. If none found, ask the user what CI system they use.
11
- 2. **Read All CI Files** — Read every workflow file, configuration, and related scripts completely. Also check `package.json` scripts referenced by CI.
12
- 3. **Check for Failures** — If the user reported a failing pipeline, focus on the specific failure first. Trace the error through the workflow steps.
13
- 4. **Check Caching** — Verify dependency caching, build caching, and artifact caching are configured correctly.
14
- 5. **Check Parallelism** — Identify jobs that could run in parallel, unnecessary sequential dependencies, and matrix strategy opportunities.
15
- 6. **Check Security** — Verify secret management, permissions scope, and dependency pinning.
16
-
17
- ## Analysis Checklist
18
-
19
- ### Pipeline Failures
20
- - Missing environment variables or secrets
21
- - Incorrect Node.js or runtime version
22
- - Missing dependencies or build steps
23
- - Timeout issues on long-running steps
24
- - Permission errors on artifact uploads or deployments
25
-
26
- ### Caching
27
- - Node modules caching (npm, pnpm, yarn)
28
- - Build cache (Next.js `.next/cache`, Turborepo)
29
- - Docker layer caching for container builds
30
- - Cache key strategy (hash of lockfile, not package.json)
31
- - Cache restoration fallback keys
32
-
33
- ### Performance
34
- - Jobs that could run in parallel (lint, typecheck, test)
35
- - Unnecessary full checkout (fetch-depth: 0 when not needed)
36
- - Matrix builds for multi-version or multi-platform testing
37
- - Conditional steps (skip tests if only docs changed)
38
- - Artifact passing between jobs instead of rebuilding
39
-
40
- ### Security
41
- - Permissions scope narrowed (permissions: read-all minimum)
42
- - Secrets not logged or exposed in step outputs
43
- - Third-party actions pinned to SHA, not tag
44
- - Branch protection rules enforced
45
- - No write permissions on PR workflows from forks
46
-
47
- ### Missing Steps
48
- - Linting and type checking
49
- - Unit and integration tests
50
- - Build verification
51
- - Bundle size check
52
- - Lighthouse or performance audit
53
- - Security scanning (npm audit, Snyk)
54
- - Preview deployments for PRs
55
-
56
- ## Output Format
57
-
58
- You MUST structure your response exactly as follows:
59
-
60
- ```
61
- ## CI/CD Analysis: `[file path]`
62
-
63
- ### Summary
64
- - Issues found: [count]
65
- - Optimization opportunities: [count]
66
- - Estimated time savings: ~[amount]
67
-
68
- ### Failures (if applicable)
69
- [Show error, root cause, and fix with before/after YAML]
70
-
71
- ### Optimizations (ordered by impact)
72
- [Show current vs improved config with estimated time savings]
73
-
74
- ### Recommended Workflow
75
- [Complete optimized workflow if significant changes needed]
76
-
77
- ### Verification
78
- - [ ] Push to a branch and verify the workflow runs
79
- - [ ] Check that all jobs pass
80
- - [ ] Compare run time with previous runs
81
- ```
82
-
83
- ## Self-Check
84
-
85
- Before responding, verify:
86
- - [ ] You read all CI/CD configuration files
87
- - [ ] You checked every category in the analysis checklist
88
- - [ ] If a failure was reported, you addressed it first
89
- - [ ] Every finding includes specific file paths and line numbers
90
- - [ ] Every finding includes before/after configuration
91
- - [ ] You estimated the time impact of optimizations
92
- - [ ] You checked for security best practices
93
-
94
- ## Constraints
95
-
96
- - Do NOT give generic CI/CD advice. Every finding must reference specific configuration in the target files.
97
- - Do NOT skip any checklist category. If a category has no issues, explicitly state "No issues found."
98
- - Do NOT suggest changes that would skip important checks (tests, linting) just for speed.
99
- - If the user reported a specific failure, prioritize diagnosing that failure above all else.
100
- - Always pin third-party GitHub Actions to a commit SHA in recommendations.
101
-
102
- Target: $ARGUMENTS