opencastle 0.1.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/LICENSE +21 -0
- package/README.md +215 -0
- package/bin/cli.mjs +69 -0
- package/dist/cli/adapters/claude-code.d.ts +22 -0
- package/dist/cli/adapters/claude-code.d.ts.map +1 -0
- package/dist/cli/adapters/claude-code.js +237 -0
- package/dist/cli/adapters/claude-code.js.map +1 -0
- package/dist/cli/adapters/cursor.d.ts +20 -0
- package/dist/cli/adapters/cursor.d.ts.map +1 -0
- package/dist/cli/adapters/cursor.js +231 -0
- package/dist/cli/adapters/cursor.js.map +1 -0
- package/dist/cli/adapters/vscode.d.ts +20 -0
- package/dist/cli/adapters/vscode.d.ts.map +1 -0
- package/dist/cli/adapters/vscode.js +132 -0
- package/dist/cli/adapters/vscode.js.map +1 -0
- package/dist/cli/copy.d.ts +14 -0
- package/dist/cli/copy.d.ts.map +1 -0
- package/dist/cli/copy.js +62 -0
- package/dist/cli/copy.js.map +1 -0
- package/dist/cli/dashboard.d.ts +3 -0
- package/dist/cli/dashboard.d.ts.map +1 -0
- package/dist/cli/dashboard.js +183 -0
- package/dist/cli/dashboard.js.map +1 -0
- package/dist/cli/diff.d.ts +3 -0
- package/dist/cli/diff.d.ts.map +1 -0
- package/dist/cli/diff.js +27 -0
- package/dist/cli/diff.js.map +1 -0
- package/dist/cli/eject.d.ts +3 -0
- package/dist/cli/eject.d.ts.map +1 -0
- package/dist/cli/eject.js +27 -0
- package/dist/cli/eject.js.map +1 -0
- package/dist/cli/init.d.ts +3 -0
- package/dist/cli/init.d.ts.map +1 -0
- package/dist/cli/init.js +92 -0
- package/dist/cli/init.js.map +1 -0
- package/dist/cli/manifest.d.ts +14 -0
- package/dist/cli/manifest.d.ts.map +1 -0
- package/dist/cli/manifest.js +34 -0
- package/dist/cli/manifest.js.map +1 -0
- package/dist/cli/mcp.d.ts +14 -0
- package/dist/cli/mcp.d.ts.map +1 -0
- package/dist/cli/mcp.js +35 -0
- package/dist/cli/mcp.js.map +1 -0
- package/dist/cli/prompt.d.ts +12 -0
- package/dist/cli/prompt.d.ts.map +1 -0
- package/dist/cli/prompt.js +104 -0
- package/dist/cli/prompt.js.map +1 -0
- package/dist/cli/run/adapters/claude-code.d.ts +16 -0
- package/dist/cli/run/adapters/claude-code.d.ts.map +1 -0
- package/dist/cli/run/adapters/claude-code.js +82 -0
- package/dist/cli/run/adapters/claude-code.js.map +1 -0
- package/dist/cli/run/adapters/copilot.d.ts +16 -0
- package/dist/cli/run/adapters/copilot.d.ts.map +1 -0
- package/dist/cli/run/adapters/copilot.js +84 -0
- package/dist/cli/run/adapters/copilot.js.map +1 -0
- package/dist/cli/run/adapters/cursor.d.ts +16 -0
- package/dist/cli/run/adapters/cursor.d.ts.map +1 -0
- package/dist/cli/run/adapters/cursor.js +81 -0
- package/dist/cli/run/adapters/cursor.js.map +1 -0
- package/dist/cli/run/adapters/index.d.ts +14 -0
- package/dist/cli/run/adapters/index.d.ts.map +1 -0
- package/dist/cli/run/adapters/index.js +35 -0
- package/dist/cli/run/adapters/index.js.map +1 -0
- package/dist/cli/run/executor.d.ts +15 -0
- package/dist/cli/run/executor.d.ts.map +1 -0
- package/dist/cli/run/executor.js +249 -0
- package/dist/cli/run/executor.js.map +1 -0
- package/dist/cli/run/reporter.d.ts +10 -0
- package/dist/cli/run/reporter.d.ts.map +1 -0
- package/dist/cli/run/reporter.js +112 -0
- package/dist/cli/run/reporter.js.map +1 -0
- package/dist/cli/run/schema.d.ts +28 -0
- package/dist/cli/run/schema.d.ts.map +1 -0
- package/dist/cli/run/schema.js +511 -0
- package/dist/cli/run/schema.js.map +1 -0
- package/dist/cli/run.d.ts +6 -0
- package/dist/cli/run.d.ts.map +1 -0
- package/dist/cli/run.js +123 -0
- package/dist/cli/run.js.map +1 -0
- package/dist/cli/stack-config.d.ts +12 -0
- package/dist/cli/stack-config.d.ts.map +1 -0
- package/dist/cli/stack-config.js +146 -0
- package/dist/cli/stack-config.js.map +1 -0
- package/dist/cli/types.d.ts +169 -0
- package/dist/cli/types.d.ts.map +1 -0
- package/dist/cli/types.js +2 -0
- package/dist/cli/types.js.map +1 -0
- package/dist/cli/update.d.ts +3 -0
- package/dist/cli/update.d.ts.map +1 -0
- package/dist/cli/update.js +50 -0
- package/dist/cli/update.js.map +1 -0
- package/package.json +48 -0
- package/src/cli/adapters/claude-code.ts +287 -0
- package/src/cli/adapters/cursor.ts +377 -0
- package/src/cli/adapters/vscode.ts +168 -0
- package/src/cli/copy.ts +79 -0
- package/src/cli/dashboard.ts +225 -0
- package/src/cli/diff.ts +44 -0
- package/src/cli/eject.ts +39 -0
- package/src/cli/init.ts +120 -0
- package/src/cli/manifest.ts +45 -0
- package/src/cli/mcp.ts +49 -0
- package/src/cli/prompt.ts +115 -0
- package/src/cli/run/adapters/claude-code.ts +95 -0
- package/src/cli/run/adapters/copilot.ts +97 -0
- package/src/cli/run/adapters/cursor.ts +94 -0
- package/src/cli/run/adapters/index.ts +40 -0
- package/src/cli/run/executor.ts +292 -0
- package/src/cli/run/reporter.ts +129 -0
- package/src/cli/run/schema.ts +595 -0
- package/src/cli/run.ts +137 -0
- package/src/cli/stack-config.ts +180 -0
- package/src/cli/types.ts +207 -0
- package/src/cli/update.ts +75 -0
- package/src/dashboard/astro.config.mjs +6 -0
- package/src/dashboard/package-lock.json +5455 -0
- package/src/dashboard/package.json +14 -0
- package/src/dashboard/public/data/delegations.ndjson +35 -0
- package/src/dashboard/public/data/panels.ndjson +13 -0
- package/src/dashboard/public/data/sessions.ndjson +50 -0
- package/src/dashboard/public/icon-192.png +0 -0
- package/src/dashboard/scripts/generate-seed-data.ts +355 -0
- package/src/dashboard/src/layouts/Layout.astro +25 -0
- package/src/dashboard/src/pages/index.astro +1070 -0
- package/src/dashboard/src/styles/dashboard.css +1078 -0
- package/src/dashboard/tsconfig.json +6 -0
- package/src/orchestrator/agent-workflows/README.md +22 -0
- package/src/orchestrator/agent-workflows/bug-fix.md +128 -0
- package/src/orchestrator/agent-workflows/data-pipeline.md +145 -0
- package/src/orchestrator/agent-workflows/database-migration.md +159 -0
- package/src/orchestrator/agent-workflows/feature-implementation.md +223 -0
- package/src/orchestrator/agent-workflows/performance-optimization.md +125 -0
- package/src/orchestrator/agent-workflows/refactoring.md +142 -0
- package/src/orchestrator/agent-workflows/schema-changes.md +164 -0
- package/src/orchestrator/agent-workflows/security-audit.md +148 -0
- package/src/orchestrator/agent-workflows/shared-delivery-phase.md +33 -0
- package/src/orchestrator/agents/api-designer.agent.md +68 -0
- package/src/orchestrator/agents/architect.agent.md +129 -0
- package/src/orchestrator/agents/content-engineer.agent.md +57 -0
- package/src/orchestrator/agents/copywriter.agent.md +95 -0
- package/src/orchestrator/agents/data-expert.agent.md +63 -0
- package/src/orchestrator/agents/database-engineer.agent.md +62 -0
- package/src/orchestrator/agents/developer.agent.md +66 -0
- package/src/orchestrator/agents/devops-expert.agent.md +57 -0
- package/src/orchestrator/agents/documentation-writer.agent.md +60 -0
- package/src/orchestrator/agents/performance-expert.agent.md +58 -0
- package/src/orchestrator/agents/release-manager.agent.md +72 -0
- package/src/orchestrator/agents/researcher.agent.md +145 -0
- package/src/orchestrator/agents/reviewer.agent.md +62 -0
- package/src/orchestrator/agents/security-expert.agent.md +64 -0
- package/src/orchestrator/agents/seo-specialist.agent.md +67 -0
- package/src/orchestrator/agents/team-lead.agent.md +644 -0
- package/src/orchestrator/agents/testing-expert.agent.md +85 -0
- package/src/orchestrator/agents/ui-ux-expert.agent.md +63 -0
- package/src/orchestrator/copilot-instructions.md +3 -0
- package/src/orchestrator/customizations/AGENT-EXPERTISE.md +325 -0
- package/src/orchestrator/customizations/AGENT-FAILURES.md +69 -0
- package/src/orchestrator/customizations/AGENT-PERFORMANCE.md +58 -0
- package/src/orchestrator/customizations/DISPUTES.md +162 -0
- package/src/orchestrator/customizations/KNOWLEDGE-GRAPH.md +10 -0
- package/src/orchestrator/customizations/LESSONS-LEARNED.md +70 -0
- package/src/orchestrator/customizations/README.md +59 -0
- package/src/orchestrator/customizations/agents/agent-registry.md +46 -0
- package/src/orchestrator/customizations/agents/skill-matrix.md +142 -0
- package/src/orchestrator/customizations/logs/README.md +181 -0
- package/src/orchestrator/customizations/logs/delegations.ndjson +1 -0
- package/src/orchestrator/customizations/logs/panels.ndjson +1 -0
- package/src/orchestrator/customizations/logs/sessions.ndjson +1 -0
- package/src/orchestrator/customizations/project/docs-structure.md +23 -0
- package/src/orchestrator/customizations/project/tracker-config.md +45 -0
- package/src/orchestrator/customizations/project.instructions.md +64 -0
- package/src/orchestrator/customizations/stack/api-config.md +37 -0
- package/src/orchestrator/customizations/stack/cms-config.md +26 -0
- package/src/orchestrator/customizations/stack/data-pipeline-config.md +41 -0
- package/src/orchestrator/customizations/stack/database-config.md +44 -0
- package/src/orchestrator/customizations/stack/deployment-config.md +45 -0
- package/src/orchestrator/customizations/stack/testing-config.md +56 -0
- package/src/orchestrator/instructions/ai-optimization.instructions.md +143 -0
- package/src/orchestrator/instructions/general.instructions.md +194 -0
- package/src/orchestrator/mcp.json +55 -0
- package/src/orchestrator/prompts/bootstrap-customizations.prompt.md +235 -0
- package/src/orchestrator/prompts/brainstorm.prompt.md +115 -0
- package/src/orchestrator/prompts/bug-fix.prompt.md +141 -0
- package/src/orchestrator/prompts/create-skill.prompt.md +103 -0
- package/src/orchestrator/prompts/generate-task-spec.prompt.md +154 -0
- package/src/orchestrator/prompts/implement-feature.prompt.md +124 -0
- package/src/orchestrator/prompts/metrics-report.prompt.md +142 -0
- package/src/orchestrator/prompts/quick-refinement.prompt.md +137 -0
- package/src/orchestrator/prompts/resolve-pr-comments.prompt.md +100 -0
- package/src/orchestrator/skills/accessibility-standards/SKILL.md +164 -0
- package/src/orchestrator/skills/agent-hooks/SKILL.md +147 -0
- package/src/orchestrator/skills/agent-memory/SKILL.md +144 -0
- package/src/orchestrator/skills/api-patterns/SKILL.md +106 -0
- package/src/orchestrator/skills/browser-testing/SKILL.md +203 -0
- package/src/orchestrator/skills/code-commenting/SKILL.md +133 -0
- package/src/orchestrator/skills/contentful-cms/SKILL.md +43 -0
- package/src/orchestrator/skills/context-map/SKILL.md +135 -0
- package/src/orchestrator/skills/convex-database/SKILL.md +80 -0
- package/src/orchestrator/skills/data-engineering/SKILL.md +99 -0
- package/src/orchestrator/skills/deployment-infrastructure/SKILL.md +49 -0
- package/src/orchestrator/skills/documentation-standards/SKILL.md +85 -0
- package/src/orchestrator/skills/fast-review/SKILL.md +327 -0
- package/src/orchestrator/skills/frontend-design/SKILL.md +42 -0
- package/src/orchestrator/skills/jira-management/SKILL.md +168 -0
- package/src/orchestrator/skills/memory-merger/SKILL.md +123 -0
- package/src/orchestrator/skills/nextjs-patterns/SKILL.md +75 -0
- package/src/orchestrator/skills/nx-workspace/SKILL.md +192 -0
- package/src/orchestrator/skills/panel-majority-vote/SKILL.md +184 -0
- package/src/orchestrator/skills/panel-majority-vote/panel-report.template.md +38 -0
- package/src/orchestrator/skills/performance-optimization/SKILL.md +101 -0
- package/src/orchestrator/skills/react-development/SKILL.md +117 -0
- package/src/orchestrator/skills/sanity-cms/SKILL.md +18 -0
- package/src/orchestrator/skills/security-hardening/SKILL.md +118 -0
- package/src/orchestrator/skills/self-improvement/SKILL.md +137 -0
- package/src/orchestrator/skills/seo-patterns/SKILL.md +40 -0
- package/src/orchestrator/skills/session-checkpoints/SKILL.md +205 -0
- package/src/orchestrator/skills/slack-notifications/SKILL.md +211 -0
- package/src/orchestrator/skills/strapi-cms/SKILL.md +43 -0
- package/src/orchestrator/skills/supabase-database/SKILL.md +24 -0
- package/src/orchestrator/skills/task-management/SKILL.md +143 -0
- package/src/orchestrator/skills/team-lead-reference/SKILL.md +317 -0
- package/src/orchestrator/skills/teams-notifications/SKILL.md +249 -0
- package/src/orchestrator/skills/testing-workflow/SKILL.md +134 -0
- package/src/orchestrator/skills/validation-gates/SKILL.md +100 -0
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: nextjs-patterns
|
|
3
|
+
description: "Next.js App Router best practices for server/client components, routing, API routes, and project structure. Use when creating or modifying Next.js pages, layouts, route handlers, or Server Actions."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Next.js Patterns (2025)
|
|
7
|
+
|
|
8
|
+
## Project Structure
|
|
9
|
+
|
|
10
|
+
- **Use `app/` directory** (App Router) for all routes.
|
|
11
|
+
- Top-level: `app/`, `public/`, `lib/`, `components/`, `contexts/`, `styles/`, `hooks/`, `types/`.
|
|
12
|
+
- Colocate files near where they're used.
|
|
13
|
+
- **Route Groups**: parentheses `(admin)` — group without affecting URL.
|
|
14
|
+
- **Private Folders**: underscore `_internal` — opt out of routing.
|
|
15
|
+
- Feature folders for large apps: `app/dashboard/`, `app/auth/`.
|
|
16
|
+
|
|
17
|
+
## Server and Client Components
|
|
18
|
+
|
|
19
|
+
**Default: Server Components** — data fetching, heavy logic, non-interactive UI.
|
|
20
|
+
|
|
21
|
+
**Client Components** — add `'use client'` at top. Use for interactivity, state, browser APIs.
|
|
22
|
+
|
|
23
|
+
### Critical Rule
|
|
24
|
+
|
|
25
|
+
**Never use `next/dynamic` with `{ ssr: false }` inside a Server Component.** This causes build/runtime errors.
|
|
26
|
+
|
|
27
|
+
**Correct approach:**
|
|
28
|
+
1. Move all client-only logic into a dedicated Client Component (`'use client'`).
|
|
29
|
+
2. Import and use that Client Component directly in the Server Component.
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
// Server Component
|
|
33
|
+
import DashboardNavbar from '@/components/DashboardNavbar';
|
|
34
|
+
|
|
35
|
+
export default async function DashboardPage() {
|
|
36
|
+
return (
|
|
37
|
+
<>
|
|
38
|
+
<DashboardNavbar /> {/* Client Component */}
|
|
39
|
+
</>
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Component Practices
|
|
45
|
+
|
|
46
|
+
- PascalCase for files/exports. camelCase for hooks.
|
|
47
|
+
- Shared components in `components/`. Route-specific in route folder.
|
|
48
|
+
- TypeScript interfaces for props. Explicit types and defaults.
|
|
49
|
+
- Co-locate tests with components.
|
|
50
|
+
|
|
51
|
+
## Naming Conventions
|
|
52
|
+
|
|
53
|
+
- Folders: `kebab-case`.
|
|
54
|
+
- Components: `PascalCase`. Hooks: `camelCase`. Assets: `kebab-case`.
|
|
55
|
+
- Types/Interfaces: `PascalCase`. Constants: `UPPER_SNAKE_CASE`.
|
|
56
|
+
|
|
57
|
+
## API Routes (Route Handlers)
|
|
58
|
+
|
|
59
|
+
- Location: `app/api/` (e.g., `app/api/users/route.ts`).
|
|
60
|
+
- Export async functions named after HTTP verbs (`GET`, `POST`, etc.).
|
|
61
|
+
- Use Web `Request`/`Response` APIs. `NextRequest`/`NextResponse` for advanced features.
|
|
62
|
+
- Dynamic segments: `[param]`.
|
|
63
|
+
- Validate with Zod/Yup. Return appropriate status codes.
|
|
64
|
+
- Protect sensitive routes with middleware or server-side session checks.
|
|
65
|
+
|
|
66
|
+
## General Best Practices
|
|
67
|
+
|
|
68
|
+
- TypeScript with `strict` mode.
|
|
69
|
+
- ESLint with official Next.js config.
|
|
70
|
+
- Secrets in `.env.local` — never committed.
|
|
71
|
+
- Built-in Image and Font optimization.
|
|
72
|
+
- Suspense and loading states for async data.
|
|
73
|
+
- Avoid large client bundles — keep logic in Server Components.
|
|
74
|
+
- Semantic HTML and ARIA attributes.
|
|
75
|
+
- Do NOT create example/demo files unless explicitly requested.
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: nx-workspace
|
|
3
|
+
description: "NX monorepo commands, conventions, code generation, and task running patterns. Use when running builds, tests, linting, code generation, or any development commands."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# NX Workspace
|
|
7
|
+
|
|
8
|
+
## Commands
|
|
9
|
+
|
|
10
|
+
### Testing
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
yarn nx run <project-name>:test
|
|
14
|
+
yarn nx run <project-name>:test --coverage
|
|
15
|
+
yarn nx run <project-name>:test -u # Update snapshots
|
|
16
|
+
yarn nx affected -t test # Affected tests only
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### Linting
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
yarn nx run <project-name>:lint --fix
|
|
23
|
+
yarn nx run <project-name>:lint-styles --fix # CSS/SCSS
|
|
24
|
+
yarn nx affected -t lint
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Building
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
yarn nx run <project-name>:build
|
|
31
|
+
yarn nx affected -t build
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Serving
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
yarn nx run <project-name>:serve
|
|
38
|
+
yarn nx run <project-name>:dev
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Code Generation
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
yarn nx generate <generator-name> --no-interactive
|
|
45
|
+
yarn nx g <generator-name> --no-interactive
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Formatting
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
yarn nx format --fix
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Forbidden Commands
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
# NEVER use these:
|
|
58
|
+
npm test | npm run test | npm run lint | npm run build
|
|
59
|
+
npm run dev | npm start | npx jest | npx eslint
|
|
60
|
+
jest --coverage | eslint --fix
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Requirements
|
|
64
|
+
|
|
65
|
+
- **Minimum Coverage**: 95% for new components/functions.
|
|
66
|
+
- **Coverage Reports**: `reports/coverage/jest/`.
|
|
67
|
+
- **Code Linting**: Always use `--fix` flag.
|
|
68
|
+
- **Style Linting**: `yarn nx run <project>:lint-styles --fix` for CSS/SCSS.
|
|
69
|
+
|
|
70
|
+
## Best Practices
|
|
71
|
+
|
|
72
|
+
1. Always use `yarn nx run <project-name>:<target>` format.
|
|
73
|
+
2. Use `yarn nx affected -t <target>` for multi-project changes.
|
|
74
|
+
3. Use exact project names from `project.json` files.
|
|
75
|
+
4. NX automatically handles task caching and parallel execution.
|
|
76
|
+
|
|
77
|
+
## NX MCP Server
|
|
78
|
+
|
|
79
|
+
The NX MCP server provides tools for understanding and working with the workspace. Use these tools instead of guessing about workspace structure:
|
|
80
|
+
|
|
81
|
+
| Tool | When to Use |
|
|
82
|
+
|------|-------------|
|
|
83
|
+
| `nx_workspace` | First — understand workspace architecture, get errors |
|
|
84
|
+
| `nx_docs` | Configuration questions, best practices (always check before assuming) |
|
|
85
|
+
| `nx_project_details` | Inspect a specific project's targets, config, and dependencies |
|
|
86
|
+
| `nx_visualize_graph` | Visualize project/task dependency graphs |
|
|
87
|
+
| `nx_generators` | List available generators (plugin + local) |
|
|
88
|
+
| `nx_generator_schema` | Get schema details for a specific generator |
|
|
89
|
+
| `nx_available_plugins` | Discover installable plugins when no existing generator fits |
|
|
90
|
+
| `nx_current_running_tasks_details` | Monitor running/completed/failed tasks |
|
|
91
|
+
| `nx_current_running_task_output` | Get terminal output for a specific task |
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## Code Generation Workflow
|
|
96
|
+
|
|
97
|
+
Use this workflow whenever scaffolding new code (libraries, applications, features) or running automated code transformations. **Always prefer generators over manual file creation** when a generator exists for the task.
|
|
98
|
+
|
|
99
|
+
### Phase 1: Discover
|
|
100
|
+
|
|
101
|
+
1. **List available generators** using `nx_generators` MCP tool
|
|
102
|
+
- This includes plugin generators (e.g., `@nx/react:library`) and local workspace generators
|
|
103
|
+
2. **Match generator to request** — identify which generator(s) could fulfill the need
|
|
104
|
+
3. **Prefer local generators** — when both local and plugin generators could work, **always prefer local** (they're customized for this repo's patterns)
|
|
105
|
+
4. **If no generator fits** — check `nx_available_plugins` for installable plugins. Only fall back to manual creation after exhausting all generator options
|
|
106
|
+
|
|
107
|
+
### Phase 2: Understand
|
|
108
|
+
|
|
109
|
+
Before running any generator, complete these steps:
|
|
110
|
+
|
|
111
|
+
1. **Fetch generator schema** using `nx_generator_schema` MCP tool
|
|
112
|
+
- Identify required vs optional options
|
|
113
|
+
- Note default values that may need overriding
|
|
114
|
+
- Pay attention to options that affect file structure or naming
|
|
115
|
+
|
|
116
|
+
2. **Read generator source code** (for unfamiliar generators)
|
|
117
|
+
- Find source: `node -e "console.log(require.resolve('@nx/<plugin>/generators.json'));"`
|
|
118
|
+
- If that fails: read from `node_modules/<plugin>/generators.json`
|
|
119
|
+
- Local generators: check `tools/generators/` or local plugin directories
|
|
120
|
+
- Understanding the source reveals side effects (config updates, dep installs) and files created/modified
|
|
121
|
+
|
|
122
|
+
3. **Reevaluate generator choice** — after understanding what the generator does, confirm it's the right one. If not, go back to Phase 1 and select a different generator.
|
|
123
|
+
|
|
124
|
+
4. **Examine repo context** — study existing similar artifacts in the codebase:
|
|
125
|
+
- Look at how similar projects are structured (naming, test runner, build tool, linter)
|
|
126
|
+
- Match conventions when configuring the generator
|
|
127
|
+
- Note directory structures, file patterns, and config styles
|
|
128
|
+
|
|
129
|
+
5. **Validate required options** — map the user's request to generator options:
|
|
130
|
+
- Infer values from context where possible
|
|
131
|
+
- Ask for critical missing information if it cannot be inferred
|
|
132
|
+
|
|
133
|
+
### Phase 3: Execute
|
|
134
|
+
|
|
135
|
+
1. **Consider dry-run first** (recommended for complex/unfamiliar generators):
|
|
136
|
+
```bash
|
|
137
|
+
yarn nx generate <generator-name> <options> --dry-run --no-interactive
|
|
138
|
+
```
|
|
139
|
+
- Shows files that would be created/deleted/modified (but not content)
|
|
140
|
+
- Some generators don't support dry-run (e.g., if they install packages) — skip and run for real
|
|
141
|
+
- For simple, well-understood generators, you may skip dry-run
|
|
142
|
+
|
|
143
|
+
2. **Run the generator**:
|
|
144
|
+
```bash
|
|
145
|
+
yarn nx generate <generator-name> <options> --no-interactive
|
|
146
|
+
```
|
|
147
|
+
**CRITICAL**: Always include `--no-interactive` to prevent prompts that hang execution.
|
|
148
|
+
|
|
149
|
+
**CRITICAL**: Generators may behave differently based on the current working directory (e.g., library generators use cwd to determine placement). Verify cwd before running.
|
|
150
|
+
|
|
151
|
+
3. **Handle failures** — if the generator fails:
|
|
152
|
+
- Read the error message carefully
|
|
153
|
+
- Common causes: missing required options, invalid values, conflicting files, missing dependencies
|
|
154
|
+
- Adjust options and retry
|
|
155
|
+
- Add a lesson to `.github/customizations/LESSONS-LEARNED.md` if the fix was non-obvious
|
|
156
|
+
|
|
157
|
+
### Phase 4: Post-Generation
|
|
158
|
+
|
|
159
|
+
1. **Modify generated code** if needed — generators provide a starting point:
|
|
160
|
+
- Adjust functionality to match specific requirements
|
|
161
|
+
- Update imports, exports, configurations
|
|
162
|
+
- Integrate with existing code patterns
|
|
163
|
+
|
|
164
|
+
2. **Format code**:
|
|
165
|
+
```bash
|
|
166
|
+
yarn nx format --fix
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
3. **Run verification** on generated/affected projects:
|
|
170
|
+
```bash
|
|
171
|
+
yarn nx run <new-project>:lint --fix
|
|
172
|
+
yarn nx run <new-project>:test
|
|
173
|
+
yarn nx run <new-project>:build
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
4. **Handle verification failures**:
|
|
177
|
+
- **Small scope** (few lint errors, minor type issues) — fix directly, re-verify
|
|
178
|
+
- **Large scope** (many errors, complex problems) — fix obvious issues first, escalate remaining with description of what was generated, what's failing, and what was attempted
|
|
179
|
+
|
|
180
|
+
## Running Tasks Workflow
|
|
181
|
+
|
|
182
|
+
When helping with build, test, lint, or serve tasks:
|
|
183
|
+
|
|
184
|
+
1. Use `nx_current_running_tasks_details` to check for active/completed/failed tasks
|
|
185
|
+
2. For a specific task, use `nx_current_running_task_output` to get its terminal output
|
|
186
|
+
3. Diagnose issues from the output and apply fixes
|
|
187
|
+
4. To rerun a task, always use `yarn nx run <taskId>` to preserve the NX context
|
|
188
|
+
5. **Continuous tasks** (like `serve`) are already running — don't offer to rerun, just check output
|
|
189
|
+
|
|
190
|
+
## Project Names
|
|
191
|
+
|
|
192
|
+
See `project.instructions.md` for the full project name → location mapping.
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: panel-majority-vote
|
|
3
|
+
description: "Run 3 isolated reviewer sub-agents against the same question and decide PASS/BLOCK by majority vote (2/3 wins). Use when deterministic verification is insufficient."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Skill: Panel majority vote (3 reviewers)
|
|
7
|
+
|
|
8
|
+
Use this skill when deterministic verification is unavailable and you need a panel to decide PASS/BLOCK for a single question against a declared artifact scope.
|
|
9
|
+
|
|
10
|
+
## Contract
|
|
11
|
+
- Scope is exactly one run root and one panel key.
|
|
12
|
+
- Reviewers must only use the declared in-scope artifacts.
|
|
13
|
+
- Exactly 3 isolated reviewer runs.
|
|
14
|
+
- Majority vote decides overall verdict (2/3 wins).
|
|
15
|
+
- Consolidated panel report must include a short retry summary when BLOCK.
|
|
16
|
+
|
|
17
|
+
## Inputs
|
|
18
|
+
- Run root: `<runRoot>`
|
|
19
|
+
- Panel key: `<panelKey>` (a filesystem-safe identifier used to name output files)
|
|
20
|
+
- Exact question text (single question)
|
|
21
|
+
- Explicit in-scope artifact list (all under the same run root)
|
|
22
|
+
|
|
23
|
+
Optional (defaults shown):
|
|
24
|
+
- Panel output directory: `<panelDir>` (default: `<runRoot>/panel/`)
|
|
25
|
+
|
|
26
|
+
## Outputs (files)
|
|
27
|
+
- (Optional) Prompt payload: `<panelDir>/<panelKey>-panel-prompt.md`
|
|
28
|
+
- Raw reviewer outputs: `<panelDir>/<panelKey>-reviewer-outputs.md`
|
|
29
|
+
- Consolidated report: `<panelDir>/<panelKey>.md`
|
|
30
|
+
|
|
31
|
+
## Procedure (required: run in isolation)
|
|
32
|
+
Run this skill in an isolated subagent (using `runSubagent`) so the panel cannot accidentally consult unrelated workspace context.
|
|
33
|
+
|
|
34
|
+
The isolated runner subagent must:
|
|
35
|
+
1. Validate scope
|
|
36
|
+
- Ensure every in-scope artifact path is under `<runRoot>`.
|
|
37
|
+
- Ensure the in-scope list is sufficient to answer the question.
|
|
38
|
+
|
|
39
|
+
2. Spawn exactly 3 reviewers (in parallel)
|
|
40
|
+
- Launch 3 isolated reviewer subagents (using `runSubagent`) with the exact same prompt payload.
|
|
41
|
+
- The prompt payload may be passed directly to the reviewer subagents (no file required).
|
|
42
|
+
- If you want an explicit artifact of the prompt payload, optionally write it to `<panelDir>/<panelKey>-panel-prompt.md`.
|
|
43
|
+
- Reviewer prompt must require this strict output format:
|
|
44
|
+
1) VERDICT: PASS | BLOCK
|
|
45
|
+
2) MUST-FIX:
|
|
46
|
+
- ...
|
|
47
|
+
3) SHOULD-FIX:
|
|
48
|
+
- ...
|
|
49
|
+
4) QUESTIONS:
|
|
50
|
+
- ...
|
|
51
|
+
5) TEST IDEAS:
|
|
52
|
+
- ...
|
|
53
|
+
6) CONFIDENCE: low | med | high
|
|
54
|
+
- Reviewers must not include any other sections.
|
|
55
|
+
|
|
56
|
+
3. Persist reviewer outputs (required audit trail)
|
|
57
|
+
- Create/overwrite `<panelDir>/<panelKey>-reviewer-outputs.md`.
|
|
58
|
+
- Include at the top:
|
|
59
|
+
- Run root
|
|
60
|
+
- Panel key
|
|
61
|
+
- Question text
|
|
62
|
+
- In-scope artifact list
|
|
63
|
+
- (Optional) The exact prompt payload text provided to reviewers
|
|
64
|
+
- Then include each reviewer output verbatim, clearly separated.
|
|
65
|
+
|
|
66
|
+
4. Consolidate by majority vote (2/3 wins)
|
|
67
|
+
- Compute:
|
|
68
|
+
- PASS count
|
|
69
|
+
- BLOCK count
|
|
70
|
+
- Overall = PASS if PASS >= 2 else BLOCK
|
|
71
|
+
- Deduplicate MUST-FIX and SHOULD-FIX items; annotate how many reviewers flagged each.
|
|
72
|
+
- Record disagreements (items flagged by only 1 reviewer; or materially conflicting assessments).
|
|
73
|
+
- Include determinize-next recommendations.
|
|
74
|
+
- If Overall = BLOCK, include a short Retry summary:
|
|
75
|
+
- top changes required before retrying
|
|
76
|
+
|
|
77
|
+
5. Write the consolidated panel report
|
|
78
|
+
- Create `<panelDir>/<panelKey>.md` using the template in `panel-report.template.md` (in this directory).
|
|
79
|
+
|
|
80
|
+
6. Print a concise summary to chat
|
|
81
|
+
- Overall verdict + vote tally + path to `<panelDir>/<panelKey>.md`.
|
|
82
|
+
|
|
83
|
+
7. Log the panel result
|
|
84
|
+
- Append a JSON line to `.github/customizations/logs/panels.ndjson` with the panel record schema (see `.github/customizations/logs/README.md`).
|
|
85
|
+
- Include: `timestamp`, `panel_key`, `verdict`, `pass_count`, `block_count`, `must_fix`, `should_fix`, `reviewer_model`, `weighted`, `attempt`, `linear_issue`, `artifacts_count`, `report_path`.
|
|
86
|
+
- Example:
|
|
87
|
+
```bash
|
|
88
|
+
echo '{"timestamp":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'","panel_key":"instruction-refactoring","verdict":"pass","pass_count":3,"block_count":0,"must_fix":0,"should_fix":5,"reviewer_model":"claude-opus-4-6","weighted":false,"attempt":1,"artifacts_count":14,"report_path":".github/customizations/logs/panel/instruction-refactoring.md"}' >> .github/customizations/logs/panels.ndjson
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Finally: ensure whatever produced the claim being verified links the consolidated panel report as verification evidence.
|
|
92
|
+
|
|
93
|
+
## Notes
|
|
94
|
+
- If the panel output is BLOCK, prefer to change the underlying work and re-run the same panel question over re-wording the question.
|
|
95
|
+
- After 3 consecutive BLOCKs on the same panel key, create a **dispute record** in `.github/customizations/DISPUTES.md` instead of retrying further. The dispute packages the agent's position, all reviewer feedback, attempt history, and resolution options for human decision-making. See the **team-lead-reference** skill § Dispute Protocol for the full procedure.
|
|
96
|
+
|
|
97
|
+
## Model Selection for Reviewers
|
|
98
|
+
|
|
99
|
+
Choose reviewer models based on the domain being reviewed:
|
|
100
|
+
- **Security, architecture, complex logic** → Premium (Claude Opus 4.6) for all 3 reviewers
|
|
101
|
+
- **Feature implementation, UI, queries** → Standard (Gemini 3.1 Pro) for all 3 reviewers
|
|
102
|
+
- **Mixed-domain review** → Use Premium for at least 1 reviewer, Standard for the other 2
|
|
103
|
+
|
|
104
|
+
All 3 reviewers should use the same model to ensure comparable verdicts. Mixing models can lead to inconsistent review depth and confusing disagreements.
|
|
105
|
+
|
|
106
|
+
## Weighted Consensus Variant
|
|
107
|
+
|
|
108
|
+
Extends the panel system for subjective decisions where domain expertise should weight more heavily than a simple head-count.
|
|
109
|
+
|
|
110
|
+
### When to Use Weighted Consensus
|
|
111
|
+
|
|
112
|
+
| Decision Type | Use Simple Majority | Use Weighted Consensus |
|
|
113
|
+
|--------------|--------------------|-----------------------|
|
|
114
|
+
| Security vulnerability present? | ✅ | — |
|
|
115
|
+
| Code correctness | ✅ | — |
|
|
116
|
+
| Best UI approach for user experience | — | ✅ |
|
|
117
|
+
| Architecture tradeoff (performance vs maintainability) | — | ✅ |
|
|
118
|
+
| Data model design choices | — | ✅ |
|
|
119
|
+
| Naming conventions / code style disputes | — | ✅ |
|
|
120
|
+
|
|
121
|
+
### Weight Assignment Rules
|
|
122
|
+
|
|
123
|
+
Each reviewer gets a weight based on 3 factors:
|
|
124
|
+
|
|
125
|
+
| Factor | Weight Bonus | Example |
|
|
126
|
+
|--------|-------------|---------|
|
|
127
|
+
| **Domain expertise** | +2 | Security Expert reviewing auth code |
|
|
128
|
+
| **Confidence level** | +1 (high) / 0 (med) / -1 (low) | Self-reported by reviewer |
|
|
129
|
+
| **Prior success** | +1 | Agent has >80% success rate for similar reviews (from AGENT-PERFORMANCE.md) |
|
|
130
|
+
|
|
131
|
+
**Base weight:** 1 for all reviewers. Add bonuses to get final weight.
|
|
132
|
+
|
|
133
|
+
**Example:**
|
|
134
|
+
|
|
135
|
+
```text
|
|
136
|
+
Reviewer 1 (Security Expert, reviewing auth): base 1 + domain 2 + confidence 1 = weight 4
|
|
137
|
+
Reviewer 2 (Next.js Dev, reviewing auth): base 1 + domain 0 + confidence 1 = weight 2
|
|
138
|
+
Reviewer 3 (Architect, reviewing auth): base 1 + domain 1 + confidence 0 = weight 2
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### Weighted Voting Protocol
|
|
142
|
+
|
|
143
|
+
1. **Assign weights** to each reviewer before spawning them (based on their role relative to the review domain)
|
|
144
|
+
2. **Spawn reviewers** with the same prompt as simple majority (use the existing procedure)
|
|
145
|
+
3. **Collect verdicts** — each reviewer submits PASS/BLOCK with confidence level
|
|
146
|
+
4. **Calculate weighted score:**
|
|
147
|
+
- Sum weights of PASS reviewers → PASS score
|
|
148
|
+
- Sum weights of BLOCK reviewers → BLOCK score
|
|
149
|
+
- Overall = PASS if PASS score > BLOCK score, else BLOCK
|
|
150
|
+
5. **Tie-breaking:** If scores are equal, the reviewer with the highest individual weight breaks the tie. If weights are also equal, default to BLOCK (conservative).
|
|
151
|
+
|
|
152
|
+
### Conflict Resolution
|
|
153
|
+
|
|
154
|
+
- If a low-weight reviewer BLOCKs but high-weight reviewers PASS: note the BLOCK concerns in the report but overall PASS. Include the low-weight MUST-FIX items as SHOULD-FIX instead.
|
|
155
|
+
- If the domain expert BLOCKs but generalists PASS: overall BLOCK. Domain expertise overrides general opinion.
|
|
156
|
+
- If all reviewers have equal weight: falls back to simple majority vote (2/3 wins).
|
|
157
|
+
|
|
158
|
+
### Weighted Panel Report Extension
|
|
159
|
+
|
|
160
|
+
Add these fields to the consolidated panel report template when using weighted consensus:
|
|
161
|
+
|
|
162
|
+
```markdown
|
|
163
|
+
### Weighting
|
|
164
|
+
| Reviewer | Role | Domain | Confidence | Prior Success | Final Weight |
|
|
165
|
+
|----------|------|--------|------------|---------------|-------------|
|
|
166
|
+
| 1 | [Agent] | +X | +X | +X | X |
|
|
167
|
+
| 2 | [Agent] | +X | +X | +X | X |
|
|
168
|
+
| 3 | [Agent] | +X | +X | +X | X |
|
|
169
|
+
|
|
170
|
+
### Weighted Score
|
|
171
|
+
- PASS: X (reviewers: 1, 3)
|
|
172
|
+
- BLOCK: X (reviewer: 2)
|
|
173
|
+
- **Overall: PASS/BLOCK** (weighted)
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### Integration with Existing Panel Workflow
|
|
177
|
+
|
|
178
|
+
The weighted consensus variant follows the SAME procedure steps (1-6) from the main panel protocol. The only differences are:
|
|
179
|
+
1. Weight assignment happens in step 2 (before spawning reviewers)
|
|
180
|
+
2. Step 4 uses weighted calculation instead of simple count
|
|
181
|
+
3. The consolidated report includes the weighting table
|
|
182
|
+
|
|
183
|
+
The Team Lead decides whether to use simple majority or weighted consensus when scheduling the panel review. Include the decision rationale in the delegation prompt.
|
|
184
|
+
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# Panel Report
|
|
2
|
+
|
|
3
|
+
## Context
|
|
4
|
+
- Run root (must be a single run):
|
|
5
|
+
- `<runRoot>/`
|
|
6
|
+
- Panel key:
|
|
7
|
+
- Question asked (exact text):
|
|
8
|
+
- Artifacts in scope (must all be under the same run root):
|
|
9
|
+
- `<runRoot>/...`
|
|
10
|
+
- Reviewer runs:
|
|
11
|
+
- N = 3
|
|
12
|
+
- Reviewer outputs source:
|
|
13
|
+
- `<panelDir>/<panelKey>-reviewer-outputs.md`
|
|
14
|
+
|
|
15
|
+
## Panel verdict
|
|
16
|
+
- Overall: PASS | BLOCK
|
|
17
|
+
|
|
18
|
+
## Vote tally
|
|
19
|
+
- PASS: 0
|
|
20
|
+
- BLOCK: 0
|
|
21
|
+
|
|
22
|
+
## Must-fix
|
|
23
|
+
List must-fix issues, and annotate how many panelists flagged each.
|
|
24
|
+
|
|
25
|
+
## Should-fix
|
|
26
|
+
-
|
|
27
|
+
|
|
28
|
+
## Questions / Ambiguities
|
|
29
|
+
-
|
|
30
|
+
|
|
31
|
+
## Disagreements
|
|
32
|
+
-
|
|
33
|
+
|
|
34
|
+
## Determinize next
|
|
35
|
+
Top actions to convert concerns into deterministic verification (tests/checks).
|
|
36
|
+
|
|
37
|
+
## Retry summary (only if Overall = BLOCK)
|
|
38
|
+
What should change before re-verifying.
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: performance-optimization
|
|
3
|
+
description: "Frontend and backend performance optimization patterns including rendering, asset optimization, JavaScript performance, caching, profiling, and code review checklist. Use when optimizing components, reviewing code for performance, or analyzing bundle size and Core Web Vitals."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Performance Optimization
|
|
7
|
+
|
|
8
|
+
## General Principles
|
|
9
|
+
|
|
10
|
+
- **Measure first, optimize second** — profile before optimizing. Use Chrome DevTools, Lighthouse, Datadog.
|
|
11
|
+
- **Optimize for the common case** — focus on frequently executed code paths.
|
|
12
|
+
- **Avoid premature optimization** — write clear code first, optimize when necessary.
|
|
13
|
+
- **Minimize resource usage** — CPU, memory, network, disk.
|
|
14
|
+
- **Prefer simplicity** — simple algorithms are often faster and easier to optimize.
|
|
15
|
+
- **Document performance assumptions** — comment performance-critical code.
|
|
16
|
+
- **Automate performance testing** — integrate into CI/CD.
|
|
17
|
+
- **Set performance budgets** — define limits for load time, memory, API latency.
|
|
18
|
+
|
|
19
|
+
## Rendering and DOM
|
|
20
|
+
|
|
21
|
+
- **Memoization**: Use `React.memo`, `useMemo`, `useCallback` judiciously — only when profiling shows unnecessary re-renders. Don't pre-optimize.
|
|
22
|
+
- Stable `key` props in lists (avoid array indices unless static).
|
|
23
|
+
- Avoid inline styles (can trigger layout thrashing). Prefer CSS classes.
|
|
24
|
+
- CSS transitions/animations over JavaScript for GPU-accelerated effects.
|
|
25
|
+
- `requestIdleCallback` for deferring non-critical rendering.
|
|
26
|
+
|
|
27
|
+
## Asset Optimization
|
|
28
|
+
|
|
29
|
+
- Modern image formats (WebP, AVIF). Tools: ImageOptim, Squoosh.
|
|
30
|
+
- SVGs for icons.
|
|
31
|
+
- Bundle and minify JS/CSS (Webpack, Rollup, esbuild). Tree-shaking.
|
|
32
|
+
- Long-lived cache headers for static assets. Cache busting for updates.
|
|
33
|
+
- `loading="lazy"` for images. Dynamic imports for JS.
|
|
34
|
+
- Font subsetting. `font-display: swap`.
|
|
35
|
+
|
|
36
|
+
## JavaScript Performance
|
|
37
|
+
|
|
38
|
+
- Offload heavy computation to Web Workers.
|
|
39
|
+
- Debounce/throttle scroll, resize, input events.
|
|
40
|
+
- Clean up event listeners, intervals, DOM references (prevent memory leaks).
|
|
41
|
+
- Maps/Sets for lookups. TypedArrays for numeric data.
|
|
42
|
+
- Avoid global variables.
|
|
43
|
+
- Avoid deep object cloning unless necessary.
|
|
44
|
+
|
|
45
|
+
## Node.js
|
|
46
|
+
|
|
47
|
+
- Async APIs only — never `fs.readFileSync` in production.
|
|
48
|
+
- Clustering or worker threads for CPU-bound tasks.
|
|
49
|
+
- Streams for large file/network processing.
|
|
50
|
+
- Profile with `clinic.js`, `node --inspect`.
|
|
51
|
+
|
|
52
|
+
## Code Review Checklist
|
|
53
|
+
|
|
54
|
+
- [ ] No obvious algorithmic inefficiencies (O(n²) or worse)?
|
|
55
|
+
- [ ] Appropriate data structures?
|
|
56
|
+
- [ ] No unnecessary computations or repeated work?
|
|
57
|
+
- [ ] Caching used where appropriate with correct invalidation?
|
|
58
|
+
- [ ] Database queries optimized, indexed, no N+1?
|
|
59
|
+
- [ ] Large payloads paginated, streamed, or chunked?
|
|
60
|
+
- [ ] No memory leaks or unbounded resource usage?
|
|
61
|
+
- [ ] Network requests minimized, batched, retried on failure?
|
|
62
|
+
- [ ] Assets optimized, compressed, served efficiently?
|
|
63
|
+
- [ ] No blocking operations in hot paths?
|
|
64
|
+
- [ ] Logging in hot paths minimized and structured?
|
|
65
|
+
- [ ] Performance-critical paths documented and tested?
|
|
66
|
+
- [ ] Automated benchmarks for performance-sensitive code?
|
|
67
|
+
- [ ] Alerts for performance regressions?
|
|
68
|
+
- [ ] No anti-patterns (SELECT *, blocking I/O, globals)?
|
|
69
|
+
- [ ] Memoization used judiciously — only where profiling shows benefit?
|
|
70
|
+
|
|
71
|
+
## Practical Examples
|
|
72
|
+
|
|
73
|
+
### Debouncing User Input
|
|
74
|
+
|
|
75
|
+
```javascript
|
|
76
|
+
// BAD: API call on every keystroke
|
|
77
|
+
input.addEventListener('input', (e) => fetch(`/search?q=${e.target.value}`));
|
|
78
|
+
|
|
79
|
+
// GOOD: Debounced
|
|
80
|
+
let timeout;
|
|
81
|
+
input.addEventListener('input', (e) => {
|
|
82
|
+
clearTimeout(timeout);
|
|
83
|
+
timeout = setTimeout(() => fetch(`/search?q=${e.target.value}`), 300);
|
|
84
|
+
});
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Lazy Loading Images
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<!-- BAD -->
|
|
91
|
+
<img src="large-image.jpg" />
|
|
92
|
+
|
|
93
|
+
<!-- GOOD -->
|
|
94
|
+
<img src="large-image.jpg" loading="lazy" />
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## References
|
|
98
|
+
|
|
99
|
+
- [Google Web Fundamentals: Performance](https://web.dev/performance/)
|
|
100
|
+
- [MDN: Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
|
|
101
|
+
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
|