agentic-orchestration 1.0.7
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 +48 -0
- package/bin/cli.js +237 -0
- package/package.json +34 -0
- package/templates/orchestration/orchestration.md +52 -0
- package/templates/orchestration/workflows/react/bugfix.md +32 -0
- package/templates/orchestration/workflows/react/docs.md +59 -0
- package/templates/orchestration/workflows/react/feature.md +37 -0
- package/templates/orchestration/workflows/react/performance.md +59 -0
- package/templates/orchestration/workflows/react/pr.md +19 -0
- package/templates/orchestration/workflows/react/refactor.md +32 -0
- package/templates/orchestration/workflows/react/review.md +46 -0
- package/templates/orchestration/workflows/todo.md +19 -0
package/README.md
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# agentic-orchestration
|
|
2
|
+
|
|
3
|
+
CLI tool to scaffold agent orchestration workflows into your project.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npx agentic-orchestration
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
This will create a `.orchestration/` directory with workflow templates:
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
.orchestration/
|
|
15
|
+
orchestration.md
|
|
16
|
+
workflows/
|
|
17
|
+
react/
|
|
18
|
+
feature.md
|
|
19
|
+
bugfix.md
|
|
20
|
+
refactor.md
|
|
21
|
+
performance.md
|
|
22
|
+
review.md
|
|
23
|
+
pr.md
|
|
24
|
+
docs.md
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## What it does
|
|
28
|
+
|
|
29
|
+
1. Copies workflow templates to `.orchestration/` in your project
|
|
30
|
+
2. Appends orchestration reference to your `ORCHESTRATION.md` (if it exists)
|
|
31
|
+
|
|
32
|
+
## Workflows
|
|
33
|
+
|
|
34
|
+
| Workflow | Use When |
|
|
35
|
+
|----------|----------|
|
|
36
|
+
| `feature.md` | Building new functionality |
|
|
37
|
+
| `bugfix.md` | Diagnosing and fixing bugs |
|
|
38
|
+
| `refactor.md` | Improving code without behavior changes |
|
|
39
|
+
| `performance.md` | Profiling and optimizing performance |
|
|
40
|
+
| `review.md` | Reviewing code for merge |
|
|
41
|
+
| `pr.md` | Generating PR title and description |
|
|
42
|
+
| `docs.md` | Writing documentation |
|
|
43
|
+
|
|
44
|
+
The tool auto-detects React projects and routes to React-specific workflows with React 18 best practices.
|
|
45
|
+
|
|
46
|
+
## License
|
|
47
|
+
|
|
48
|
+
MIT
|
package/bin/cli.js
ADDED
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
import { promises as fs } from "node:fs";
|
|
4
|
+
import path from "node:path";
|
|
5
|
+
import { fileURLToPath } from "node:url";
|
|
6
|
+
import { Command } from "commander";
|
|
7
|
+
import { checkbox, confirm } from "@inquirer/prompts";
|
|
8
|
+
|
|
9
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
10
|
+
const __dirname = path.dirname(__filename);
|
|
11
|
+
|
|
12
|
+
const pkg = JSON.parse(
|
|
13
|
+
await fs.readFile(path.join(__dirname, "..", "package.json"), "utf-8")
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
const SOURCE_DIR = path.join(__dirname, "..", "templates", "orchestration");
|
|
17
|
+
const WORKFLOWS_DIR = path.join(SOURCE_DIR, "workflows");
|
|
18
|
+
const DEST_NAME = ".orchestration";
|
|
19
|
+
|
|
20
|
+
const ORCHESTRATION_INSTRUCTION = `
|
|
21
|
+
|
|
22
|
+
## Orchestration
|
|
23
|
+
|
|
24
|
+
For complex tasks, refer to .orchestration/orchestration.md for available workflows.
|
|
25
|
+
`;
|
|
26
|
+
|
|
27
|
+
const ROOT_WORKFLOWS = [
|
|
28
|
+
{
|
|
29
|
+
name: "todo.md",
|
|
30
|
+
description: "Multi-step task management (uses 15-20% more tokens)",
|
|
31
|
+
checked: false,
|
|
32
|
+
},
|
|
33
|
+
];
|
|
34
|
+
|
|
35
|
+
async function getWorkflowFolders() {
|
|
36
|
+
const entries = await fs.readdir(WORKFLOWS_DIR, { withFileTypes: true });
|
|
37
|
+
return entries
|
|
38
|
+
.filter((entry) => entry.isDirectory())
|
|
39
|
+
.map((entry) => entry.name);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
async function getWorkflowFiles(folder) {
|
|
43
|
+
const folderPath = path.join(WORKFLOWS_DIR, folder);
|
|
44
|
+
const entries = await fs.readdir(folderPath, { withFileTypes: true });
|
|
45
|
+
return entries
|
|
46
|
+
.filter((entry) => entry.isFile() && entry.name.endsWith(".md"))
|
|
47
|
+
.map((entry) => entry.name);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function formatFolderName(folder) {
|
|
51
|
+
return folder.charAt(0).toUpperCase() + folder.slice(1);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function formatWorkflowName(filename) {
|
|
55
|
+
const name = filename.replace(".md", "");
|
|
56
|
+
return name.charAt(0).toUpperCase() + name.slice(1);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
async function findOrchestraMdFiles(projectDir) {
|
|
60
|
+
const entries = await fs.readdir(projectDir, { withFileTypes: true });
|
|
61
|
+
return entries
|
|
62
|
+
.filter((entry) => entry.isFile() && entry.name.toLowerCase() === "orchestration.md")
|
|
63
|
+
.map((entry) => entry.name);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
async function updateOrchestraMd(projectDir) {
|
|
67
|
+
const mdFiles = await findOrchestraMdFiles(projectDir);
|
|
68
|
+
|
|
69
|
+
if (mdFiles.length === 0) {
|
|
70
|
+
const newFilePath = path.join(projectDir, "ORCHESTRATION.md");
|
|
71
|
+
await fs.writeFile(newFilePath, `# ORCHESTRATION.md${ORCHESTRATION_INSTRUCTION}`);
|
|
72
|
+
console.log(" Created: ORCHESTRATION.md");
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
for (const fileName of mdFiles) {
|
|
77
|
+
const mdPath = path.join(projectDir, fileName);
|
|
78
|
+
const content = await fs.readFile(mdPath, "utf-8");
|
|
79
|
+
|
|
80
|
+
if (content.includes(".orchestration/orchestration.md")) {
|
|
81
|
+
console.log(` Skipped: ${fileName} already references orchestration.md`);
|
|
82
|
+
continue;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
await fs.appendFile(mdPath, ORCHESTRATION_INSTRUCTION);
|
|
86
|
+
console.log(` Updated: ${fileName}`);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
async function copyFile(src, dest) {
|
|
91
|
+
await fs.mkdir(path.dirname(dest), { recursive: true });
|
|
92
|
+
await fs.copyFile(src, dest);
|
|
93
|
+
console.log(` Created: ${path.relative(process.cwd(), dest)}`);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
async function runInteractiveSetup() {
|
|
97
|
+
console.log("Agent Orchestration Setup\n");
|
|
98
|
+
|
|
99
|
+
const folders = await getWorkflowFolders();
|
|
100
|
+
const selectedFiles = [];
|
|
101
|
+
|
|
102
|
+
// Step 1: Select workflow folders
|
|
103
|
+
const selectedFolders = await checkbox({
|
|
104
|
+
message: "Select workflow categories:",
|
|
105
|
+
choices: folders.map((folder) => ({
|
|
106
|
+
name: formatFolderName(folder),
|
|
107
|
+
value: folder,
|
|
108
|
+
checked: true,
|
|
109
|
+
})),
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
// Step 2: For each selected folder, select individual workflows
|
|
113
|
+
for (const folder of selectedFolders) {
|
|
114
|
+
const files = await getWorkflowFiles(folder);
|
|
115
|
+
|
|
116
|
+
const selectedWorkflows = await checkbox({
|
|
117
|
+
message: `Select ${formatFolderName(folder)} workflows:`,
|
|
118
|
+
choices: files.map((file) => ({
|
|
119
|
+
name: formatWorkflowName(file),
|
|
120
|
+
value: file,
|
|
121
|
+
checked: true,
|
|
122
|
+
})),
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
for (const file of selectedWorkflows) {
|
|
126
|
+
selectedFiles.push({ folder, file });
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// Step 3: Select root-level workflows (like todo.md)
|
|
131
|
+
if (ROOT_WORKFLOWS.length > 0) {
|
|
132
|
+
const selectedRootWorkflows = await checkbox({
|
|
133
|
+
message: "Select additional workflows:",
|
|
134
|
+
choices: ROOT_WORKFLOWS.map((w) => ({
|
|
135
|
+
name: `${w.name} - ${w.description}`,
|
|
136
|
+
value: w.name,
|
|
137
|
+
checked: w.checked,
|
|
138
|
+
})),
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
for (const file of selectedRootWorkflows) {
|
|
142
|
+
selectedFiles.push({ folder: null, file });
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
if (selectedFiles.length === 0) {
|
|
147
|
+
const continueWithOrchestration = await confirm({
|
|
148
|
+
message: "No workflows selected. Install only the orchestration guide?",
|
|
149
|
+
default: true,
|
|
150
|
+
});
|
|
151
|
+
|
|
152
|
+
if (!continueWithOrchestration) {
|
|
153
|
+
console.log("Setup cancelled.");
|
|
154
|
+
process.exit(0);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
return selectedFiles;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
async function getAllWorkflows() {
|
|
162
|
+
const folders = await getWorkflowFolders();
|
|
163
|
+
const allFiles = [];
|
|
164
|
+
|
|
165
|
+
for (const folder of folders) {
|
|
166
|
+
const files = await getWorkflowFiles(folder);
|
|
167
|
+
for (const file of files) {
|
|
168
|
+
allFiles.push({ folder, file });
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
for (const w of ROOT_WORKFLOWS) {
|
|
173
|
+
allFiles.push({ folder: null, file: w.name });
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
return allFiles;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
async function copySelectedWorkflows(selectedFiles, targetDir) {
|
|
180
|
+
const workflowsDir = path.join(targetDir, "workflows");
|
|
181
|
+
|
|
182
|
+
for (const { folder, file } of selectedFiles) {
|
|
183
|
+
if (folder) {
|
|
184
|
+
const src = path.join(WORKFLOWS_DIR, folder, file);
|
|
185
|
+
const dest = path.join(workflowsDir, folder, file);
|
|
186
|
+
await copyFile(src, dest);
|
|
187
|
+
} else {
|
|
188
|
+
const src = path.join(WORKFLOWS_DIR, file);
|
|
189
|
+
const dest = path.join(workflowsDir, file);
|
|
190
|
+
await copyFile(src, dest);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
async function main(options) {
|
|
196
|
+
const targetDir = path.join(process.cwd(), DEST_NAME);
|
|
197
|
+
|
|
198
|
+
try {
|
|
199
|
+
let selectedFiles;
|
|
200
|
+
|
|
201
|
+
if (options.all) {
|
|
202
|
+
selectedFiles = await getAllWorkflows();
|
|
203
|
+
console.log("Agent Orchestration Setup\n");
|
|
204
|
+
console.log("Installing all workflows...\n");
|
|
205
|
+
} else {
|
|
206
|
+
selectedFiles = await runInteractiveSetup();
|
|
207
|
+
console.log();
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
await fs.mkdir(targetDir, { recursive: true });
|
|
211
|
+
|
|
212
|
+
const orchestrationSrc = path.join(SOURCE_DIR, "orchestration.md");
|
|
213
|
+
const orchestrationDest = path.join(targetDir, "orchestration.md");
|
|
214
|
+
await copyFile(orchestrationSrc, orchestrationDest);
|
|
215
|
+
|
|
216
|
+
if (selectedFiles.length > 0) {
|
|
217
|
+
await copySelectedWorkflows(selectedFiles, targetDir);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
await updateOrchestraMd(process.cwd());
|
|
221
|
+
console.log("\nDone! Orchestration files have been added to .orchestration/");
|
|
222
|
+
} catch (error) {
|
|
223
|
+
console.error("Error copying files:", error.message);
|
|
224
|
+
process.exit(1);
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
const program = new Command();
|
|
229
|
+
|
|
230
|
+
program
|
|
231
|
+
.name("agentic-orchestration")
|
|
232
|
+
.description("Scaffolds agent orchestration workflows into your project")
|
|
233
|
+
.version(pkg.version)
|
|
234
|
+
.option("-a, --all", "Install all workflows without prompting")
|
|
235
|
+
.action((options) => main(options));
|
|
236
|
+
|
|
237
|
+
program.parse();
|
package/package.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "agentic-orchestration",
|
|
3
|
+
"version": "1.0.7",
|
|
4
|
+
"description": "CLI tool to scaffold agent orchestration workflows into your project",
|
|
5
|
+
"bin": {
|
|
6
|
+
"agentic-orchestration": "bin/cli.js"
|
|
7
|
+
},
|
|
8
|
+
"scripts": {
|
|
9
|
+
"test": "node bin/cli.js --help"
|
|
10
|
+
},
|
|
11
|
+
"keywords": [
|
|
12
|
+
"agent",
|
|
13
|
+
"orchestration",
|
|
14
|
+
"ai",
|
|
15
|
+
"scaffolding",
|
|
16
|
+
"cli",
|
|
17
|
+
"react",
|
|
18
|
+
"workflows"
|
|
19
|
+
],
|
|
20
|
+
"author": "Enrique MD",
|
|
21
|
+
"license": "MIT",
|
|
22
|
+
"type": "module",
|
|
23
|
+
"files": [
|
|
24
|
+
"bin",
|
|
25
|
+
"templates"
|
|
26
|
+
],
|
|
27
|
+
"engines": {
|
|
28
|
+
"node": ">=18.0.0"
|
|
29
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"commander": "^13.0.0",
|
|
32
|
+
"@inquirer/prompts": "^7.0.0"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# Orchestration Protocol
|
|
2
|
+
|
|
3
|
+
**MANDATORY: Process BEFORE any tool usage.**
|
|
4
|
+
|
|
5
|
+
## 1. CLASSIFY TASK
|
|
6
|
+
|
|
7
|
+
| Signal Words | Workflow |
|
|
8
|
+
|--------------|----------|
|
|
9
|
+
| build, create, add, implement, new | `feature.md` |
|
|
10
|
+
| fix, broken, error, crash, bug | `bugfix.md` |
|
|
11
|
+
| clean up, improve, restructure, rename | `refactor.md` |
|
|
12
|
+
| slow, optimize, performance, speed | `performance.md` |
|
|
13
|
+
| review, check, PR, merge | `review.md` |
|
|
14
|
+
| PR description, pull request title | `pr.md` |
|
|
15
|
+
| document, README, explain | `docs.md` |
|
|
16
|
+
| complex, multi-step, plan | `todo.md` |
|
|
17
|
+
|
|
18
|
+
**Complexity:** 1-2 ops = simple | 3+ ops = complex (add `todo.md`)
|
|
19
|
+
**Technology:** React (`.jsx`/`.tsx`, hooks) → `workflows/react/` | Other → `workflows/`
|
|
20
|
+
|
|
21
|
+
### Selection
|
|
22
|
+
- **Clear match:** Proceed to binding
|
|
23
|
+
- **Ambiguous:** Use `AskUserQuestion` (header: "Workflow", options: relevant workflows)
|
|
24
|
+
- **No match:** Ask user to clarify
|
|
25
|
+
|
|
26
|
+
## 2. BINDING (required before ANY tool use)
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
ORCHESTRATION_BINDING:
|
|
30
|
+
- Task: [description]
|
|
31
|
+
- Workflow: [path]
|
|
32
|
+
- Complexity: [simple/complex]
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## 3. EXEMPT TASKS
|
|
36
|
+
|
|
37
|
+
Requires ALL: single file, 1-2 ops, zero architecture impact, obvious correctness.
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
ORCHESTRATION_BINDING:
|
|
41
|
+
- Task: [description]
|
|
42
|
+
- Classification: EXEMPT
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## 4. COMPLETION
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
ORCHESTRATION_COMPLETE:
|
|
49
|
+
- Task: [description]
|
|
50
|
+
- Workflow: [used]
|
|
51
|
+
- Files: [modified]
|
|
52
|
+
```
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
# React Bugfix Workflow
|
|
2
|
+
|
|
3
|
+
## 1. Reproduce
|
|
4
|
+
|
|
5
|
+
- Confirm bug exists | find minimal repro
|
|
6
|
+
- Check Strict Mode behavior
|
|
7
|
+
- Answer: Expected vs actual? React 18 concurrent issue?
|
|
8
|
+
|
|
9
|
+
## 2. Locate Root Cause
|
|
10
|
+
|
|
11
|
+
| Common React 18 Issues |
|
|
12
|
+
|------------------------|
|
|
13
|
+
| Effects missing cleanup |
|
|
14
|
+
| Stale closures in effects |
|
|
15
|
+
| Concurrent rendering race conditions |
|
|
16
|
+
| Automatic batching changes |
|
|
17
|
+
|
|
18
|
+
## 3. Fix
|
|
19
|
+
|
|
20
|
+
- Keep changes within affected feature folder
|
|
21
|
+
- Add cleanup: `return () => controller.abort()`
|
|
22
|
+
- Fix stale closures with proper deps
|
|
23
|
+
|
|
24
|
+
## 4. Verify
|
|
25
|
+
|
|
26
|
+
- Confirm fix | test with Strict Mode
|
|
27
|
+
- Add regression test
|
|
28
|
+
|
|
29
|
+
## Constraints
|
|
30
|
+
|
|
31
|
+
- Smallest fix only | NO refactoring
|
|
32
|
+
- NO barrel exports | note other issues separately
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# React Documentation Workflow
|
|
2
|
+
|
|
3
|
+
> Document architecture correctly. See orchestration.md for patterns.
|
|
4
|
+
|
|
5
|
+
## Before Writing
|
|
6
|
+
|
|
7
|
+
MUST answer:
|
|
8
|
+
- Who is the audience?
|
|
9
|
+
- What should they be able to do after reading?
|
|
10
|
+
- What existing docs need to stay in sync?
|
|
11
|
+
|
|
12
|
+
## Process
|
|
13
|
+
|
|
14
|
+
### 1. Understand the Subject
|
|
15
|
+
- Read the code being documented
|
|
16
|
+
- Try it yourself if possible
|
|
17
|
+
- Identify non-obvious behavior or gotchas
|
|
18
|
+
|
|
19
|
+
### 2. Check Existing Docs
|
|
20
|
+
- Find related documentation
|
|
21
|
+
- Identify what's missing or outdated
|
|
22
|
+
- Note the existing style and format
|
|
23
|
+
|
|
24
|
+
### 3. Write
|
|
25
|
+
|
|
26
|
+
Adapt this template as needed:
|
|
27
|
+
|
|
28
|
+
```markdown
|
|
29
|
+
# {Name}
|
|
30
|
+
|
|
31
|
+
Brief description.
|
|
32
|
+
|
|
33
|
+
## Location
|
|
34
|
+
`features/{feature}/components/{Name}/{Name}.tsx`
|
|
35
|
+
|
|
36
|
+
## Import
|
|
37
|
+
import { Name } from '@/features/{feature}/components/{Name}/{Name}'
|
|
38
|
+
|
|
39
|
+
## Usage
|
|
40
|
+
<Name prop="value" />
|
|
41
|
+
|
|
42
|
+
## Props/Parameters (if applicable)
|
|
43
|
+
| Name | Type | Required | Description |
|
|
44
|
+
|------|------|----------|-------------|
|
|
45
|
+
|
|
46
|
+
## Related
|
|
47
|
+
- Links to related components/hooks
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### 4. Validate
|
|
51
|
+
- Code examples actually work
|
|
52
|
+
- Import paths are direct (not barrel)
|
|
53
|
+
- Links are valid
|
|
54
|
+
|
|
55
|
+
## Constraints
|
|
56
|
+
|
|
57
|
+
- MUST explain why, not just what
|
|
58
|
+
- MUST show direct import paths in examples
|
|
59
|
+
- MUST update related docs to stay consistent
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# React Feature Workflow
|
|
2
|
+
|
|
3
|
+
## 1. Architecture
|
|
4
|
+
|
|
5
|
+
**IF not specified:** Use `AskUserQuestion` (header: "Architecture")
|
|
6
|
+
|
|
7
|
+
| Architecture | Structure |
|
|
8
|
+
|--------------|-----------|
|
|
9
|
+
| Feature-driven | `features/{name}/components\|hooks\|utils/` |
|
|
10
|
+
| Flat feature-driven | `features/{name}/` flat files |
|
|
11
|
+
| Atomic design | `atoms\|molecules\|organisms\|templates/` |
|
|
12
|
+
|
|
13
|
+
**IF project has patterns:** Follow existing, skip question.
|
|
14
|
+
|
|
15
|
+
## 2. Context
|
|
16
|
+
|
|
17
|
+
- Read related code, identify target folder
|
|
18
|
+
- Check similar implementations, reusable hooks/utils
|
|
19
|
+
- Answer: What problem? Minimal version? Which folder?
|
|
20
|
+
|
|
21
|
+
## 3. Implement
|
|
22
|
+
|
|
23
|
+
**Components:** Function only | `useState`/`useReducer` for local state
|
|
24
|
+
**Hooks:** Extract logic | `hooks/{feature}/{name}.ts` | descriptive names
|
|
25
|
+
**State:** Lift only as needed | composition over prop drilling
|
|
26
|
+
|
|
27
|
+
## 4. Validate
|
|
28
|
+
|
|
29
|
+
- Run tests for regressions
|
|
30
|
+
- Add tests for new code
|
|
31
|
+
- Test loading/error states
|
|
32
|
+
- Remove debug code
|
|
33
|
+
|
|
34
|
+
## Constraints
|
|
35
|
+
|
|
36
|
+
- NO `index.ts`/`index.tsx` | import from file directly
|
|
37
|
+
- Match existing style | no extra features
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# React Performance Workflow
|
|
2
|
+
|
|
3
|
+
> Architecture rules: See orchestration.md. Violations block merge.
|
|
4
|
+
|
|
5
|
+
## Before Coding
|
|
6
|
+
|
|
7
|
+
MUST answer:
|
|
8
|
+
- What is the specific performance problem?
|
|
9
|
+
- How will I measure improvement?
|
|
10
|
+
- Is this a real bottleneck or premature optimization?
|
|
11
|
+
|
|
12
|
+
## Process
|
|
13
|
+
|
|
14
|
+
### 1. Measure First
|
|
15
|
+
- Profile with React DevTools Profiler
|
|
16
|
+
- Identify components that re-render unnecessarily
|
|
17
|
+
- Check bundle size with build analyzer
|
|
18
|
+
- Measure actual user-facing metrics (not just hunches)
|
|
19
|
+
|
|
20
|
+
### 2. Identify Root Cause
|
|
21
|
+
|
|
22
|
+
**Common issues:**
|
|
23
|
+
- Components re-rendering when props haven't changed
|
|
24
|
+
- Expensive calculations on every render
|
|
25
|
+
- Large bundle from unused dependencies
|
|
26
|
+
- Missing code splitting on routes
|
|
27
|
+
|
|
28
|
+
### 3. Optimize
|
|
29
|
+
|
|
30
|
+
**Prevent unnecessary re-renders:**
|
|
31
|
+
```tsx
|
|
32
|
+
// Memoize components that receive stable props
|
|
33
|
+
const MemoizedList = memo(List)
|
|
34
|
+
|
|
35
|
+
// Memoize callbacks passed to children
|
|
36
|
+
const handleClick = useCallback(() => {
|
|
37
|
+
doSomething(id)
|
|
38
|
+
}, [id])
|
|
39
|
+
|
|
40
|
+
// Memoize expensive derived values
|
|
41
|
+
const sorted = useMemo(() => sortItems(items), [items])
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
**Reduce bundle size:**
|
|
45
|
+
- Lazy load routes with `React.lazy` + `Suspense`
|
|
46
|
+
- Replace heavy libraries with lighter alternatives
|
|
47
|
+
- Use tree-shakeable imports
|
|
48
|
+
|
|
49
|
+
### 4. Verify
|
|
50
|
+
- Re-profile to confirm improvement
|
|
51
|
+
- Ensure no regressions in functionality
|
|
52
|
+
- Document the optimization and why it helped
|
|
53
|
+
|
|
54
|
+
## Constraints
|
|
55
|
+
|
|
56
|
+
- NEVER optimize without measuring first
|
|
57
|
+
- NEVER add memo/useMemo/useCallback everywhere "just in case"
|
|
58
|
+
- MUST prove the optimization helps with real measurements
|
|
59
|
+
- Keep optimizations minimal and targeted
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# Pull Request Workflow
|
|
2
|
+
|
|
3
|
+
## Process
|
|
4
|
+
|
|
5
|
+
1. Read diff (current branch vs main/master)
|
|
6
|
+
2. Analyze changes
|
|
7
|
+
3. Output title + description
|
|
8
|
+
|
|
9
|
+
## Output
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
PR Title: <imperative mood>
|
|
13
|
+
Description: <2-3 sentences: what + why>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Constraints
|
|
17
|
+
|
|
18
|
+
- Imperative mood ("Add" not "Added") | mention breaking changes
|
|
19
|
+
- Output only | NO branch/push/remote PR creation
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
# React Refactor Workflow
|
|
2
|
+
|
|
3
|
+
## 1. Safety Net
|
|
4
|
+
|
|
5
|
+
- Run tests | add if coverage insufficient
|
|
6
|
+
- Answer: What improvement? How verify unchanged behavior?
|
|
7
|
+
|
|
8
|
+
## 2. Plan
|
|
9
|
+
|
|
10
|
+
- Map imports/dependencies | identify all callers
|
|
11
|
+
- Break into small, safe steps
|
|
12
|
+
|
|
13
|
+
## 3. Execute
|
|
14
|
+
|
|
15
|
+
One change type at a time | run tests after each:
|
|
16
|
+
|
|
17
|
+
| Change Types |
|
|
18
|
+
|--------------|
|
|
19
|
+
| Rename files to match folders |
|
|
20
|
+
| Barrel → direct imports |
|
|
21
|
+
| Extract logic into hooks |
|
|
22
|
+
| Split large components |
|
|
23
|
+
|
|
24
|
+
## 4. Validate
|
|
25
|
+
|
|
26
|
+
- All tests pass | no `index.ts`/`index.tsx`
|
|
27
|
+
- Entry points match folder names
|
|
28
|
+
|
|
29
|
+
## Constraints
|
|
30
|
+
|
|
31
|
+
- Structure only, NOT behavior | NO bug fixes
|
|
32
|
+
- One change type at a time | note issues separately
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
# React Code Review Workflow
|
|
2
|
+
|
|
3
|
+
## 1. Understand
|
|
4
|
+
|
|
5
|
+
- Read PR description | review diff scope
|
|
6
|
+
- Answer: What is the goal? What files changed?
|
|
7
|
+
|
|
8
|
+
## 2. Architecture Checklist
|
|
9
|
+
|
|
10
|
+
| Check | Rule |
|
|
11
|
+
|-------|------|
|
|
12
|
+
| Barrels | No `index.ts`/`index.tsx` |
|
|
13
|
+
| Entry files | Match folder names (`Button/Button.tsx`) |
|
|
14
|
+
| Imports | Direct, not barrel |
|
|
15
|
+
| Colocation | Component + hooks + types + tests together |
|
|
16
|
+
| Placement | Correct feature folder |
|
|
17
|
+
|
|
18
|
+
## 3. React Patterns Checklist
|
|
19
|
+
|
|
20
|
+
| Check | Rule |
|
|
21
|
+
|-------|------|
|
|
22
|
+
| Components | Function only, no class |
|
|
23
|
+
| Hooks | No conditionals, proper deps |
|
|
24
|
+
| Effects | Cleanup where needed |
|
|
25
|
+
| Memory | No leaks (subscriptions, timers) |
|
|
26
|
+
| States | Loading + error handled |
|
|
27
|
+
|
|
28
|
+
## 4. Code Quality Checklist
|
|
29
|
+
|
|
30
|
+
| Check | Rule |
|
|
31
|
+
|-------|------|
|
|
32
|
+
| Debug | No console.log/debugger |
|
|
33
|
+
| Imports | No unused |
|
|
34
|
+
| Types | No unjustified `any` |
|
|
35
|
+
| Tests | Cover new functionality |
|
|
36
|
+
| Scope | No unrelated changes |
|
|
37
|
+
|
|
38
|
+
## 5. Feedback
|
|
39
|
+
|
|
40
|
+
- **Blocking:** Must fix (bugs, architecture violations)
|
|
41
|
+
- **Suggestion:** Improvements | **Question:** Clarification
|
|
42
|
+
|
|
43
|
+
## Constraints
|
|
44
|
+
|
|
45
|
+
- NO approval with violations | must understand code
|
|
46
|
+
- Specific + actionable | suggest fixes, not just problems
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# TODO Workflow
|
|
2
|
+
|
|
3
|
+
> Use for tasks with 3+ steps requiring tracking
|
|
4
|
+
|
|
5
|
+
## Process
|
|
6
|
+
|
|
7
|
+
1. **Analyze**: Read codebase, identify steps, estimate complexity
|
|
8
|
+
2. **Create**: One actionable TODO per distinct step, prioritize by dependencies
|
|
9
|
+
3. **Execute**: ONE item `in_progress` at a time, update status immediately
|
|
10
|
+
4. **Manage**: Add/cancel items as needed, break down complex items
|
|
11
|
+
|
|
12
|
+
## Rules
|
|
13
|
+
|
|
14
|
+
- Use only for complex tasks (3+ steps)
|
|
15
|
+
- Single `in_progress` item maximum
|
|
16
|
+
- Real-time status updates
|
|
17
|
+
- Brief, actionable descriptions
|
|
18
|
+
- Complete current before starting next
|
|
19
|
+
- Save TODO files in project root as `{sensibleName}_TODO.md`
|