@lifeaitools/rdc-skills 0.20.6 → 0.21.1
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/.claude-plugin/plugin.json +42 -1
- package/.github/workflows/self-test.yml +34 -34
- package/CHANGELOG.md +12 -0
- package/commands/build.md +181 -181
- package/commands/collab.md +180 -180
- package/commands/deploy.md +148 -148
- package/commands/fixit.md +105 -105
- package/commands/handoff.md +173 -173
- package/commands/overnight.md +218 -218
- package/commands/plan.md +158 -158
- package/commands/preplan.md +131 -131
- package/commands/prototype.md +145 -145
- package/commands/report.md +99 -99
- package/commands/review.md +120 -120
- package/commands/status.md +86 -86
- package/commands/workitems.md +127 -127
- package/git-sha.json +1 -1
- package/guides/agent-bootstrap.md +195 -195
- package/guides/agents/backend.md +102 -102
- package/guides/agents/content.md +94 -94
- package/guides/agents/cs2.md +56 -56
- package/guides/agents/data.md +86 -86
- package/guides/agents/design.md +77 -77
- package/guides/agents/frontend.md +91 -91
- package/guides/agents/infrastructure.md +81 -81
- package/guides/agents/setup.md +272 -272
- package/guides/agents/verify.md +119 -119
- package/guides/agents/viz.md +106 -106
- package/package.json +1 -1
- package/scripts/self-test.mjs +1458 -1458
- package/skills/build/SKILL.md +478 -478
- package/skills/channel-formatter/SKILL.md +312 -0
- package/skills/collab/SKILL.md +239 -239
- package/skills/deploy/SKILL.md +522 -522
- package/skills/design/SKILL.md +205 -205
- package/skills/fixit/SKILL.md +165 -165
- package/skills/handoff/SKILL.md +200 -200
- package/skills/overnight/SKILL.md +230 -230
- package/skills/plan/SKILL.md +274 -274
- package/skills/preplan/SKILL.md +90 -90
- package/skills/prototype/SKILL.md +150 -150
- package/skills/release/SKILL.md +140 -140
- package/skills/report/SKILL.md +100 -100
- package/skills/review/SKILL.md +152 -152
- package/skills/self-test/SKILL.md +123 -123
- package/skills/status/SKILL.md +99 -99
- package/skills/watch/SKILL.md +90 -90
- package/skills/workitems/SKILL.md +151 -151
package/guides/agents/verify.md
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
> **⚠️ OUTPUT CONTRACT (READ FIRST):** `guides/output-contract.md`
|
|
2
|
-
> Checklist-only output. No tool-call narration. No raw MCP/JSON/log dumps.
|
|
3
|
-
> One checklist upfront, updated in place, shown again at end with a 1-line verdict.
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
# rdc:verify — Verification Before Completion
|
|
7
|
-
|
|
8
|
-
> Adapted from obra/superpowers `verification-before-completion`.
|
|
9
|
-
> Stack-specific: uses `npx vitest run` + `npx tsc --noEmit`. NEVER `pnpm build` (crashes machine — 800MB/process).
|
|
10
|
-
|
|
11
|
-
## The Iron Law
|
|
12
|
-
|
|
13
|
-
**NO COMPLETION CLAIMS WITHOUT FRESH VERIFICATION EVIDENCE.**
|
|
14
|
-
|
|
15
|
-
You may not say "done", "complete", "working", "fixed", "passing", or imply success until you have:
|
|
16
|
-
|
|
17
|
-
1. **Identified** the exact commands that prove the claim
|
|
18
|
-
2. **Run** those commands fresh in the current state (not memory, not "earlier", not "should")
|
|
19
|
-
3. **Read** the full output
|
|
20
|
-
4. **Verified** the output matches the claim
|
|
21
|
-
5. Only THEN made the claim, quoting the evidence
|
|
22
|
-
|
|
23
|
-
If you cannot run the commands, say so explicitly. Do not substitute reasoning for evidence.
|
|
24
|
-
|
|
25
|
-
## Red Flags — Stop and Verify
|
|
26
|
-
|
|
27
|
-
If you're about to write any of these, STOP:
|
|
28
|
-
|
|
29
|
-
- "should work" / "should pass" / "should be fine"
|
|
30
|
-
- "probably" / "seems to" / "looks good"
|
|
31
|
-
- "I think the tests pass"
|
|
32
|
-
- "the types check out" (without running tsc)
|
|
33
|
-
- "everything compiles" (without fresh output)
|
|
34
|
-
- Expressing satisfaction or wrapping up before the gate ran
|
|
35
|
-
|
|
1
|
+
> **⚠️ OUTPUT CONTRACT (READ FIRST):** `guides/output-contract.md`
|
|
2
|
+
> Checklist-only output. No tool-call narration. No raw MCP/JSON/log dumps.
|
|
3
|
+
> One checklist upfront, updated in place, shown again at end with a 1-line verdict.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
# rdc:verify — Verification Before Completion
|
|
7
|
+
|
|
8
|
+
> Adapted from obra/superpowers `verification-before-completion`.
|
|
9
|
+
> Stack-specific: uses `npx vitest run` + `npx tsc --noEmit`. NEVER `pnpm build` (crashes machine — 800MB/process).
|
|
10
|
+
|
|
11
|
+
## The Iron Law
|
|
12
|
+
|
|
13
|
+
**NO COMPLETION CLAIMS WITHOUT FRESH VERIFICATION EVIDENCE.**
|
|
14
|
+
|
|
15
|
+
You may not say "done", "complete", "working", "fixed", "passing", or imply success until you have:
|
|
16
|
+
|
|
17
|
+
1. **Identified** the exact commands that prove the claim
|
|
18
|
+
2. **Run** those commands fresh in the current state (not memory, not "earlier", not "should")
|
|
19
|
+
3. **Read** the full output
|
|
20
|
+
4. **Verified** the output matches the claim
|
|
21
|
+
5. Only THEN made the claim, quoting the evidence
|
|
22
|
+
|
|
23
|
+
If you cannot run the commands, say so explicitly. Do not substitute reasoning for evidence.
|
|
24
|
+
|
|
25
|
+
## Red Flags — Stop and Verify
|
|
26
|
+
|
|
27
|
+
If you're about to write any of these, STOP:
|
|
28
|
+
|
|
29
|
+
- "should work" / "should pass" / "should be fine"
|
|
30
|
+
- "probably" / "seems to" / "looks good"
|
|
31
|
+
- "I think the tests pass"
|
|
32
|
+
- "the types check out" (without running tsc)
|
|
33
|
+
- "everything compiles" (without fresh output)
|
|
34
|
+
- Expressing satisfaction or wrapping up before the gate ran
|
|
35
|
+
|
|
36
36
|
## The Gate — Commands for This Stack
|
|
37
37
|
|
|
38
38
|
Run these in order. All must pass. Capture output.
|
|
@@ -55,97 +55,97 @@ Required work item evidence:
|
|
|
55
55
|
If this check fails, stop validation for that item and reopen it. Do not mark a work item `done` when the checklist itself is not decomposed enough to prove completion.
|
|
56
56
|
|
|
57
57
|
### 1. Per-package vitest (every package touched)
|
|
58
|
-
|
|
59
|
-
```bash
|
|
60
|
-
cd <repo-root>
|
|
61
|
-
for pkg in <changed-packages>; do
|
|
62
|
-
npx vitest run --dir packages/$pkg 2>&1 | tee /tmp/verify-$pkg.log
|
|
63
|
-
done
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
Or for a single package:
|
|
67
|
-
```bash
|
|
68
|
-
npx vitest run --dir packages/<pkg>
|
|
69
|
-
npx vitest run --dir apps/<app>
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
**NEVER** run `pnpm build` or `pnpm test` at the repo root — spawns 5-7 node processes at 800MB each and crashes the machine.
|
|
73
|
-
|
|
74
|
-
### 2. Typecheck per package
|
|
75
|
-
|
|
76
|
-
```bash
|
|
77
|
-
npx tsc --noEmit --project packages/<pkg>/tsconfig.json
|
|
78
|
-
npx tsc --noEmit --project apps/<app>/tsconfig.json
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
One package at a time. Read the full output — zero errors required.
|
|
82
|
-
|
|
83
|
-
### 3. Lint (if configured for the package)
|
|
84
|
-
|
|
85
|
-
```bash
|
|
86
|
-
npx eslint <paths> --max-warnings=0
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
### 4. Smoke check exports (if package adds public API)
|
|
90
|
-
|
|
91
|
-
```bash
|
|
92
|
-
node -e "const m = require('<pkg>'); console.log(Object.keys(m));"
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
Or for ESM:
|
|
96
|
-
```bash
|
|
97
|
-
node --input-type=module -e "import * as m from '<pkg>'; console.log(Object.keys(m));"
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
## Rationalization Prevention
|
|
101
|
-
|
|
102
|
-
| You're tempted to think... | Reality |
|
|
103
|
-
|---|---|
|
|
104
|
-
| "Tests passed earlier, should still pass" | Run them now. Code changed. |
|
|
105
|
-
| "TypeScript is strict, if it built it works" | You didn't build. Run tsc. |
|
|
106
|
-
| "Small change, no need to retest" | Small changes are where regressions hide. |
|
|
107
|
-
| "I'll note it as pending verification" | No. Verify now or mark incomplete. |
|
|
108
|
-
| "The test file looks right" | Reading ≠ running. Run it. |
|
|
109
|
-
|
|
110
|
-
## Output Format — Required
|
|
111
|
-
|
|
112
|
-
When reporting completion, use this structure:
|
|
113
|
-
|
|
114
|
-
```
|
|
115
|
-
## Verification Evidence
|
|
116
|
-
|
|
117
|
-
### vitest
|
|
118
|
-
$ npx vitest run --dir packages/hail
|
|
119
|
-
Test Files 12 passed (12)
|
|
120
|
-
Tests 147 passed (147)
|
|
121
|
-
|
|
122
|
-
### tsc
|
|
123
|
-
$ npx tsc --noEmit --project packages/hail/tsconfig.json
|
|
124
|
-
(no output — clean)
|
|
125
|
-
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
cd <repo-root>
|
|
61
|
+
for pkg in <changed-packages>; do
|
|
62
|
+
npx vitest run --dir packages/$pkg 2>&1 | tee /tmp/verify-$pkg.log
|
|
63
|
+
done
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Or for a single package:
|
|
67
|
+
```bash
|
|
68
|
+
npx vitest run --dir packages/<pkg>
|
|
69
|
+
npx vitest run --dir apps/<app>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
**NEVER** run `pnpm build` or `pnpm test` at the repo root — spawns 5-7 node processes at 800MB each and crashes the machine.
|
|
73
|
+
|
|
74
|
+
### 2. Typecheck per package
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
npx tsc --noEmit --project packages/<pkg>/tsconfig.json
|
|
78
|
+
npx tsc --noEmit --project apps/<app>/tsconfig.json
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
One package at a time. Read the full output — zero errors required.
|
|
82
|
+
|
|
83
|
+
### 3. Lint (if configured for the package)
|
|
84
|
+
|
|
85
|
+
```bash
|
|
86
|
+
npx eslint <paths> --max-warnings=0
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### 4. Smoke check exports (if package adds public API)
|
|
90
|
+
|
|
91
|
+
```bash
|
|
92
|
+
node -e "const m = require('<pkg>'); console.log(Object.keys(m));"
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
Or for ESM:
|
|
96
|
+
```bash
|
|
97
|
+
node --input-type=module -e "import * as m from '<pkg>'; console.log(Object.keys(m));"
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## Rationalization Prevention
|
|
101
|
+
|
|
102
|
+
| You're tempted to think... | Reality |
|
|
103
|
+
|---|---|
|
|
104
|
+
| "Tests passed earlier, should still pass" | Run them now. Code changed. |
|
|
105
|
+
| "TypeScript is strict, if it built it works" | You didn't build. Run tsc. |
|
|
106
|
+
| "Small change, no need to retest" | Small changes are where regressions hide. |
|
|
107
|
+
| "I'll note it as pending verification" | No. Verify now or mark incomplete. |
|
|
108
|
+
| "The test file looks right" | Reading ≠ running. Run it. |
|
|
109
|
+
|
|
110
|
+
## Output Format — Required
|
|
111
|
+
|
|
112
|
+
When reporting completion, use this structure:
|
|
113
|
+
|
|
114
|
+
```
|
|
115
|
+
## Verification Evidence
|
|
116
|
+
|
|
117
|
+
### vitest
|
|
118
|
+
$ npx vitest run --dir packages/hail
|
|
119
|
+
Test Files 12 passed (12)
|
|
120
|
+
Tests 147 passed (147)
|
|
121
|
+
|
|
122
|
+
### tsc
|
|
123
|
+
$ npx tsc --noEmit --project packages/hail/tsconfig.json
|
|
124
|
+
(no output — clean)
|
|
125
|
+
|
|
126
126
|
### Status
|
|
127
127
|
Checklist quality: PASS
|
|
128
128
|
PASS — safe to mark tasks done.
|
|
129
129
|
```
|
|
130
130
|
|
|
131
131
|
If any step fails: do NOT claim completion. Report the failure, fix it, re-run the entire gate.
|
|
132
|
-
|
|
133
|
-
## When to Invoke
|
|
134
|
-
|
|
135
|
-
- **End of `/rdc:build`** — mandatory final phase before marking epic done
|
|
136
|
-
- **During `/rdc:review`** — verification gate after fixes applied
|
|
137
|
-
- **Before any "done" declaration** — if an agent or supervisor is about to say work is complete
|
|
138
|
-
- **After merging waves** — when parallel agents finish and their work is combined
|
|
139
|
-
|
|
140
|
-
## Agent Delegation
|
|
141
|
-
|
|
142
|
-
When dispatching a verification agent, give them:
|
|
143
|
-
- Exact list of packages/apps to verify
|
|
132
|
+
|
|
133
|
+
## When to Invoke
|
|
134
|
+
|
|
135
|
+
- **End of `/rdc:build`** — mandatory final phase before marking epic done
|
|
136
|
+
- **During `/rdc:review`** — verification gate after fixes applied
|
|
137
|
+
- **Before any "done" declaration** — if an agent or supervisor is about to say work is complete
|
|
138
|
+
- **After merging waves** — when parallel agents finish and their work is combined
|
|
139
|
+
|
|
140
|
+
## Agent Delegation
|
|
141
|
+
|
|
142
|
+
When dispatching a verification agent, give them:
|
|
143
|
+
- Exact list of packages/apps to verify
|
|
144
144
|
- Explicit ban on `pnpm build` / `pnpm test` / `pnpm -r`
|
|
145
145
|
- Work item checklists and the matching plan doc so `decomp-*` quality can be verified first
|
|
146
146
|
- Required output format (above)
|
|
147
147
|
- Instruction: "If any command fails, STOP and report. Do not fix. Do not continue."
|
|
148
|
-
|
|
149
|
-
## The Bottom Line
|
|
150
|
-
|
|
151
|
-
Evidence before claims. Fresh evidence, not remembered evidence. Full output, not selective reading. If you skip the gate, you are lying about the work being done.
|
|
148
|
+
|
|
149
|
+
## The Bottom Line
|
|
150
|
+
|
|
151
|
+
Evidence before claims. Fresh evidence, not remembered evidence. Full output, not selective reading. If you skip the gate, you are lying about the work being done.
|
package/guides/agents/viz.md
CHANGED
|
@@ -1,106 +1,106 @@
|
|
|
1
|
-
> **⚠️ OUTPUT CONTRACT (READ FIRST):** `guides/output-contract.md`
|
|
2
|
-
> Checklist-only output. No tool-call narration. No raw MCP/JSON/log dumps.
|
|
3
|
-
> One checklist upfront, updated in place, shown again at end with a 1-line verdict.
|
|
4
|
-
|
|
5
|
-
> If dispatching subagents or running as a subagent: read `{PROJECT_ROOT}/.rdc/guides/agent-bootstrap.md` first (fallback: `{PROJECT_ROOT}/.rdc/guides/agent-bootstrap.md`).
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
# rdc:viz — Visualization Agent
|
|
9
|
-
|
|
10
|
-
## Mandatory First Steps
|
|
11
|
-
|
|
12
|
-
Read BOTH guides before ANY code:
|
|
13
|
-
```
|
|
14
|
-
{PROJECT_ROOT}/.rdc/guides/frontend.md (fallback: {PROJECT_ROOT}/.rdc/guides/frontend.md)
|
|
15
|
-
{PROJECT_ROOT}/.rdc/guides/design.md (fallback: {PROJECT_ROOT}/.rdc/guides/design.md)
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
## Before Writing Any Code
|
|
19
|
-
|
|
20
|
-
1. **Check for existing prototypes:**
|
|
21
|
-
```sql
|
|
22
|
-
SELECT name, component, source_path, status, notes
|
|
23
|
-
FROM prototype_registry
|
|
24
|
-
WHERE status IN ('prototype', 'converting')
|
|
25
|
-
ORDER BY created_at DESC;
|
|
26
|
-
```
|
|
27
|
-
Source path is usually `docs/source/`. **Read it first.**
|
|
28
|
-
|
|
29
|
-
2. **Check design decisions:**
|
|
30
|
-
```sql
|
|
31
|
-
SELECT topic, summary FROM design_context
|
|
32
|
-
WHERE topic ILIKE '%<viz-name>%';
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## SVG Layout Patterns
|
|
36
|
-
|
|
37
|
-
When building new SVG-based viz:
|
|
38
|
-
- Define all layout constants at top (`W`, `H`, column x-centers, box dimensions)
|
|
39
|
-
- Build path builders as pure functions
|
|
40
|
-
- Separate data from rendering
|
|
41
|
-
- Use `viewBox` for responsive scaling
|
|
42
|
-
- Animate with appropriate motion libraries
|
|
43
|
-
|
|
44
|
-
```tsx
|
|
45
|
-
const W = 980, H = 570;
|
|
46
|
-
const COL_A = 80, COL_B = 240, COL_C = 435;
|
|
47
|
-
|
|
48
|
-
function pathTo(x1: number, y1: number, x2: number, y2: number): string {
|
|
49
|
-
const mx = (x1 + x2) / 2;
|
|
50
|
-
return `M ${x1} ${y1} C ${mx} ${y1} ${mx} ${y2} ${x2} ${y2}`;
|
|
51
|
-
}
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
## Viz Component Contract
|
|
55
|
-
|
|
56
|
-
```tsx
|
|
57
|
-
"use client";
|
|
58
|
-
import * as React from "react";
|
|
59
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
60
|
-
import { cn } from "../lib/utils";
|
|
61
|
-
|
|
62
|
-
// CVA variants required on every new viz component
|
|
63
|
-
const myVizVariants = cva("relative w-full", {
|
|
64
|
-
variants: {
|
|
65
|
-
layout: { single: "", double: "flex flex-col", grid: "" },
|
|
66
|
-
density: { compact: "", comfortable: "", spacious: "" },
|
|
67
|
-
},
|
|
68
|
-
defaultVariants: { layout: "single", density: "comfortable" },
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
interface MyVizProps
|
|
72
|
-
extends React.HTMLAttributes<HTMLDivElement>,
|
|
73
|
-
VariantProps<typeof myVizVariants> {}
|
|
74
|
-
|
|
75
|
-
const MyViz = React.forwardRef<HTMLDivElement, MyVizProps>(
|
|
76
|
-
({ className, layout, density, ...props }, ref) => (
|
|
77
|
-
<div ref={ref} className={cn(myVizVariants({ layout, density }), className)} {...props} />
|
|
78
|
-
)
|
|
79
|
-
);
|
|
80
|
-
MyViz.displayName = "MyViz";
|
|
81
|
-
export { MyViz, myVizVariants };
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
Export from package's index after building.
|
|
85
|
-
|
|
86
|
-
## Registering New Viz Components
|
|
87
|
-
|
|
88
|
-
After completing:
|
|
89
|
-
```sql
|
|
90
|
-
INSERT INTO prototype_registry (name, component, source_path, notes, created_by)
|
|
91
|
-
VALUES (
|
|
92
|
-
'MyViz v1.0',
|
|
93
|
-
'MyViz',
|
|
94
|
-
'packages/ui/src/components/my-viz.tsx',
|
|
95
|
-
'Production component. Props: <list key props>',
|
|
96
|
-
'agent'
|
|
97
|
-
);
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
## Safety Rules
|
|
101
|
-
|
|
102
|
-
- Branch: development branch — auto-commit
|
|
103
|
-
- NEVER run `pnpm build`
|
|
104
|
-
- Reduce motion: always wrap animations with appropriate hooks
|
|
105
|
-
- NEVER overlap with other agents on the same component file
|
|
106
|
-
- Write tests FIRST — red → implement → green
|
|
1
|
+
> **⚠️ OUTPUT CONTRACT (READ FIRST):** `guides/output-contract.md`
|
|
2
|
+
> Checklist-only output. No tool-call narration. No raw MCP/JSON/log dumps.
|
|
3
|
+
> One checklist upfront, updated in place, shown again at end with a 1-line verdict.
|
|
4
|
+
|
|
5
|
+
> If dispatching subagents or running as a subagent: read `{PROJECT_ROOT}/.rdc/guides/agent-bootstrap.md` first (fallback: `{PROJECT_ROOT}/.rdc/guides/agent-bootstrap.md`).
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
# rdc:viz — Visualization Agent
|
|
9
|
+
|
|
10
|
+
## Mandatory First Steps
|
|
11
|
+
|
|
12
|
+
Read BOTH guides before ANY code:
|
|
13
|
+
```
|
|
14
|
+
{PROJECT_ROOT}/.rdc/guides/frontend.md (fallback: {PROJECT_ROOT}/.rdc/guides/frontend.md)
|
|
15
|
+
{PROJECT_ROOT}/.rdc/guides/design.md (fallback: {PROJECT_ROOT}/.rdc/guides/design.md)
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Before Writing Any Code
|
|
19
|
+
|
|
20
|
+
1. **Check for existing prototypes:**
|
|
21
|
+
```sql
|
|
22
|
+
SELECT name, component, source_path, status, notes
|
|
23
|
+
FROM prototype_registry
|
|
24
|
+
WHERE status IN ('prototype', 'converting')
|
|
25
|
+
ORDER BY created_at DESC;
|
|
26
|
+
```
|
|
27
|
+
Source path is usually `docs/source/`. **Read it first.**
|
|
28
|
+
|
|
29
|
+
2. **Check design decisions:**
|
|
30
|
+
```sql
|
|
31
|
+
SELECT topic, summary FROM design_context
|
|
32
|
+
WHERE topic ILIKE '%<viz-name>%';
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## SVG Layout Patterns
|
|
36
|
+
|
|
37
|
+
When building new SVG-based viz:
|
|
38
|
+
- Define all layout constants at top (`W`, `H`, column x-centers, box dimensions)
|
|
39
|
+
- Build path builders as pure functions
|
|
40
|
+
- Separate data from rendering
|
|
41
|
+
- Use `viewBox` for responsive scaling
|
|
42
|
+
- Animate with appropriate motion libraries
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
const W = 980, H = 570;
|
|
46
|
+
const COL_A = 80, COL_B = 240, COL_C = 435;
|
|
47
|
+
|
|
48
|
+
function pathTo(x1: number, y1: number, x2: number, y2: number): string {
|
|
49
|
+
const mx = (x1 + x2) / 2;
|
|
50
|
+
return `M ${x1} ${y1} C ${mx} ${y1} ${mx} ${y2} ${x2} ${y2}`;
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Viz Component Contract
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
"use client";
|
|
58
|
+
import * as React from "react";
|
|
59
|
+
import { cva, type VariantProps } from "class-variance-authority";
|
|
60
|
+
import { cn } from "../lib/utils";
|
|
61
|
+
|
|
62
|
+
// CVA variants required on every new viz component
|
|
63
|
+
const myVizVariants = cva("relative w-full", {
|
|
64
|
+
variants: {
|
|
65
|
+
layout: { single: "", double: "flex flex-col", grid: "" },
|
|
66
|
+
density: { compact: "", comfortable: "", spacious: "" },
|
|
67
|
+
},
|
|
68
|
+
defaultVariants: { layout: "single", density: "comfortable" },
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
interface MyVizProps
|
|
72
|
+
extends React.HTMLAttributes<HTMLDivElement>,
|
|
73
|
+
VariantProps<typeof myVizVariants> {}
|
|
74
|
+
|
|
75
|
+
const MyViz = React.forwardRef<HTMLDivElement, MyVizProps>(
|
|
76
|
+
({ className, layout, density, ...props }, ref) => (
|
|
77
|
+
<div ref={ref} className={cn(myVizVariants({ layout, density }), className)} {...props} />
|
|
78
|
+
)
|
|
79
|
+
);
|
|
80
|
+
MyViz.displayName = "MyViz";
|
|
81
|
+
export { MyViz, myVizVariants };
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
Export from package's index after building.
|
|
85
|
+
|
|
86
|
+
## Registering New Viz Components
|
|
87
|
+
|
|
88
|
+
After completing:
|
|
89
|
+
```sql
|
|
90
|
+
INSERT INTO prototype_registry (name, component, source_path, notes, created_by)
|
|
91
|
+
VALUES (
|
|
92
|
+
'MyViz v1.0',
|
|
93
|
+
'MyViz',
|
|
94
|
+
'packages/ui/src/components/my-viz.tsx',
|
|
95
|
+
'Production component. Props: <list key props>',
|
|
96
|
+
'agent'
|
|
97
|
+
);
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## Safety Rules
|
|
101
|
+
|
|
102
|
+
- Branch: development branch — auto-commit
|
|
103
|
+
- NEVER run `pnpm build`
|
|
104
|
+
- Reduce motion: always wrap animations with appropriate hooks
|
|
105
|
+
- NEVER overlap with other agents on the same component file
|
|
106
|
+
- Write tests FIRST — red → implement → green
|