@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.
- package/README.md +85 -12
- package/agents/architect.md +79 -0
- package/agents/build-resolver.md +54 -0
- package/agents/code-reviewer.md +60 -0
- package/agents/doc-updater.md +46 -0
- package/agents/e2e-runner.md +64 -0
- package/agents/planner.md +56 -0
- package/agents/refactor-cleaner.md +58 -0
- package/agents/security-reviewer.md +67 -0
- package/agents/sitecore-specialist.md +96 -0
- package/agents/tdd-guide.md +115 -0
- package/commands/checkpoint.md +78 -0
- package/commands/harness-audit.md +73 -0
- package/commands/middleware.md +80 -0
- package/commands/orchestrate.md +67 -0
- package/commands/quality-gate-check.md +109 -0
- package/commands/quality-gate.md +82 -0
- package/commands/resume-session.md +40 -0
- package/commands/save-session.md +65 -0
- package/commands/search-first.md +60 -0
- package/commands/server-action.md +93 -0
- package/commands/sitecore-debug.md +58 -0
- package/contexts/dev.md +35 -0
- package/contexts/research.md +56 -0
- package/contexts/review.md +49 -0
- package/dist/index.js +891 -119
- package/dist/index.js.map +1 -1
- package/guides/getting-started.md +74 -21
- package/guides/hooks-and-agents.md +124 -0
- package/package.json +9 -4
- package/templates/claude-md/nextjs-app-router.md +35 -1
- package/templates/claude-md/sitecore-xmc.md +99 -2
- package/templates/claude-md/typescript.md +79 -1
- package/templates/cursorrules/nextjs-app-router.md +6 -1
- package/templates/cursorrules/sitecore-xmc.md +5 -1
- package/templates/cursorrules/typescript.md +6 -1
- package/commands/ci-fix.md +0 -102
- package/commands/db-migrate.md +0 -138
- package/commands/dependency-graph.md +0 -138
- package/commands/docker-debug.md +0 -111
- 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/
|
|
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.
|
|
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
|
|
31
|
+
## Available Skills (Claude Code)
|
|
29
32
|
|
|
30
|
-
|
|
31
|
-
|
|
33
|
+
### Getting Started
|
|
34
|
+
| Skill | What it does |
|
|
35
|
+
|-------|-------------|
|
|
32
36
|
| `/prompt-help` | Interactive prompt builder — **start here** |
|
|
33
|
-
| `/
|
|
34
|
-
| `/
|
|
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
|
-
| `/
|
|
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
|
-
| `/
|
|
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
|
-
##
|
|
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
|
|
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.
|
|
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
|
package/commands/ci-fix.md
DELETED
|
@@ -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
|