sdg-agents 1.13.0 → 1.14.2
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/package.json +1 -1
- package/src/assets/instructions/core/ui/design-thinking.md +54 -39
- package/src/assets/instructions/core/ui/presets.md +15 -4
- package/src/assets/instructions/core/ui/standards.md +18 -0
- package/src/assets/instructions/templates/bump.mjs +3 -2
- package/src/assets/instructions/templates/workflow.md +1 -1
- package/src/engine/bin/auto-bump.mjs +3 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sdg-agents",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.2",
|
|
4
4
|
"description": "Structured working protocol and engineering rules for AI agents. Works with Claude Code, Antigravity, Codex, and others.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./src/engine/bin/index.mjs",
|
|
@@ -114,61 +114,51 @@ Then generate the full scale using the **OKLCH Progression Formula**:
|
|
|
114
114
|
|
|
115
115
|
| Step | L (Lightness) | C (Chroma) | Notes |
|
|
116
116
|
| ---: | :------------ | :--------- | :---------------------------------- |
|
|
117
|
-
| 50 | `
|
|
118
|
-
| 100 | `
|
|
119
|
-
| 200 | `
|
|
120
|
-
| 300 | `
|
|
121
|
-
| 400 | `
|
|
122
|
-
| 500 | `
|
|
123
|
-
| 600 | `
|
|
124
|
-
| 700 | `
|
|
125
|
-
| 800 | `
|
|
126
|
-
| 900 | `
|
|
127
|
-
|
|
128
|
-
>
|
|
129
|
-
> To switch the brand color: **change only H**.
|
|
117
|
+
| 50 | `98%` | `0.01` | Near-white background tint |
|
|
118
|
+
| 100 | `96%` | `0.03` | Very light surface tint |
|
|
119
|
+
| 200 | `90%` | `0.06` | Light border / subtle dividers |
|
|
120
|
+
| 300 | `82%` | `0.09` | Soft accent |
|
|
121
|
+
| 400 | `72%` | `0.12` | Light mode hover state |
|
|
122
|
+
| 500 | `60%` | `0.15` | **Primary action** (buttons, links) |
|
|
123
|
+
| 600 | `50%` | `0.14` | Light mode hover on primary-500 |
|
|
124
|
+
| 700 | `40%` | `0.12` | Strong accent |
|
|
125
|
+
| 800 | `25%` | `0.09` | Dark surface tint |
|
|
126
|
+
| 900 | `15%` | `0.05` | Near-black background tint |
|
|
127
|
+
|
|
128
|
+
> **Vibe Control**: For a **Vibrant** look, keep Chroma (C) at `0.15` for steps 400-600. For a **Muted** look, reduce C to `0.08` across the entire scale. Default to **Muted** for Premium SaaS.
|
|
130
129
|
|
|
131
130
|
</rule>
|
|
132
131
|
|
|
133
132
|
---
|
|
134
133
|
|
|
135
|
-
## Phase 0.2 —
|
|
134
|
+
## Phase 0.2 — The Elevation Stack (Deep Theme Balance)
|
|
136
135
|
|
|
137
|
-
<rule name="
|
|
136
|
+
<rule name="ElevationStack">
|
|
138
137
|
|
|
139
138
|
> [!IMPORTANT]
|
|
140
|
-
> **
|
|
139
|
+
> **Avoid "Floating Darkness".** Dark mode surface logic must reflect physical elevation: as an object gets closer to the light source (user), it gets **lighter**, not darker.
|
|
141
140
|
|
|
142
|
-
|
|
141
|
+
### Surface Mapping
|
|
143
142
|
|
|
144
|
-
|
|
143
|
+
| Layer | Role | Light Mode (Zinc) | Dark Mode (Zinc) |
|
|
144
|
+
| :------------- | :----------------- | :-------------------- | :--------------- |
|
|
145
|
+
| **S0** (Base) | Page Background | `50` or `White` | `950` or `Black` |
|
|
146
|
+
| **S1** (Inner) | Sidebars, Sections | `100` | `900` |
|
|
147
|
+
| **S2** (Card) | Floating Elements | `White` + Shadow | `800` |
|
|
148
|
+
| **S3** (Pop) | Modals, Tooltips | `White` + Deep Shadow | `700` |
|
|
145
149
|
|
|
146
|
-
|
|
147
|
-
| :--------- | :---- | :-------------------- | :--------- |
|
|
148
|
-
| Light mode | `500` | `600` | Go darker |
|
|
149
|
-
| Dark mode | `500` | `400` | Go lighter |
|
|
150
|
+
### The Hover Law (Inversion)
|
|
150
151
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
152
|
+
| Context | Base | Action | Direction | Value Delta |
|
|
153
|
+
| :--------- | :--- | :----- | :--------- | :---------- |
|
|
154
|
+
| Light mode | `S2` | `S1` | Go Darker | L-5% |
|
|
155
|
+
| Dark mode | `S2` | `S3` | Go Lighter | L+10% |
|
|
155
156
|
|
|
156
157
|
```html
|
|
157
|
-
<!--
|
|
158
|
-
<
|
|
158
|
+
<!-- Correct — Dark mode "elevates" on hover by getting lighter -->
|
|
159
|
+
<div class="bg-zinc-800 hover:bg-zinc-700 transition-colors">Card</div>
|
|
159
160
|
```
|
|
160
161
|
|
|
161
|
-
### Why this happens (mental model)
|
|
162
|
-
|
|
163
|
-
In light mode, the page background is near-white → `primary-500` sits on a light plane → hover must move toward the dark end to create contrast.
|
|
164
|
-
|
|
165
|
-
In dark mode, the page background is near-black → `primary-500` sits on a dark plane → hover must move toward the light end to surface.
|
|
166
|
-
|
|
167
|
-
The OKLCH Lightness axis makes this mechanical:
|
|
168
|
-
|
|
169
|
-
- **Light hover** = lower L → `600` (L=48%)
|
|
170
|
-
- **Dark hover** = higher L → `400` (L=68%)
|
|
171
|
-
|
|
172
162
|
</rule>
|
|
173
163
|
|
|
174
164
|
---
|
|
@@ -297,6 +287,31 @@ Every interface uses **exactly 2 font families** — one Display, one Body. No e
|
|
|
297
287
|
|
|
298
288
|
---
|
|
299
289
|
|
|
290
|
+
## Phase 0.6 — Component Nesting (Concentricity)
|
|
291
|
+
|
|
292
|
+
<rule name="Nesting">
|
|
293
|
+
|
|
294
|
+
Nested elements (cards inside sections, inputs inside cards) must maintain visual logic.
|
|
295
|
+
|
|
296
|
+
### 1. The Concentric Radius Rule
|
|
297
|
+
|
|
298
|
+
Outer container and inner child must share a common center.
|
|
299
|
+
`Inner Radius = Outer Radius - Padding`.
|
|
300
|
+
|
|
301
|
+
- Outer: `rounded-2xl` (16px) | Padding: `p-4` (16px) → Inner: `rounded-none` (0px)
|
|
302
|
+
- Outer: `rounded-2xl` (16px) | Padding: `p-2` (8px) → Inner: `rounded-lg` (8px)
|
|
303
|
+
|
|
304
|
+
### 2. Border Hierarchy
|
|
305
|
+
|
|
306
|
+
To prevent "Wireframe Look", adjust border visibility based on depth.
|
|
307
|
+
|
|
308
|
+
- **S1/S2 Boundary**: `border-border/40` (subtle)
|
|
309
|
+
- **S2/Action Boundary**: `border-primary/20` (contextual)
|
|
310
|
+
|
|
311
|
+
</rule>
|
|
312
|
+
|
|
313
|
+
---
|
|
314
|
+
|
|
300
315
|
## Agent Self-Declaration (Required Output)
|
|
301
316
|
|
|
302
317
|
Before writing any UI code, the agent MUST declare:
|
|
@@ -25,9 +25,9 @@ Each preset MUST define:
|
|
|
25
25
|
- Personality: Modular dashboard
|
|
26
26
|
- Typography: Sans (UI) + Serif (highlights)
|
|
27
27
|
- Grid: `grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 auto-rows-[minmax(180px,1fr)]`
|
|
28
|
-
- Cards: `
|
|
28
|
+
- Cards: `S2` (e.g. `bg-card`)
|
|
29
29
|
- Radius: `rounded-xl / rounded-2xl`
|
|
30
|
-
- Density: Medium
|
|
30
|
+
- Density: Medium (`gap-4` to `gap-6`)
|
|
31
31
|
- States:
|
|
32
32
|
- hover: `border-primary/20`
|
|
33
33
|
- focus: `ring-2 ring-primary`
|
|
@@ -39,7 +39,7 @@ Each preset MUST define:
|
|
|
39
39
|
|
|
40
40
|
- Personality: Layered, depth-driven
|
|
41
41
|
- Typography: Sans clean
|
|
42
|
-
- Surface: `bg-card/60 backdrop-blur-xl`
|
|
42
|
+
- Surface: `S2 / S3` (e.g. `bg-card/60 backdrop-blur-xl`)
|
|
43
43
|
- Borders: `border-border/30`
|
|
44
44
|
- Radius: `rounded-2xl`
|
|
45
45
|
- Elevation: Blur + subtle shadow
|
|
@@ -143,7 +143,18 @@ Each UI must declare:
|
|
|
143
143
|
- `default + mono` → developer tools (Palette: Zinc monochromatic)
|
|
144
144
|
- `bento + brutalism` → experimental layouts (Palette: any high-C primary)
|
|
145
145
|
|
|
146
|
-
> For token generation and light/dark inversion rules
|
|
146
|
+
> For token generation and light/dark inversion rules, see the **Elevation Stack (S0-S3)** in [design-thinking.md](./design-thinking.md).
|
|
147
|
+
|
|
148
|
+
---
|
|
149
|
+
|
|
150
|
+
## C4. The Nesting Pattern (Anilhamento)
|
|
151
|
+
|
|
152
|
+
Presets with structural containers (BENTO, GLASS, CLEAN) MUST follow the **Elevation Stack** when nesting components:
|
|
153
|
+
|
|
154
|
+
1. **Base**: `S0` (Page Background)
|
|
155
|
+
2. **Container**: `S1` or `S2`
|
|
156
|
+
3. **Child Element**: Move one layer up (e.g., child of `S2` is `S3`).
|
|
157
|
+
4. **Contrast**: Apply the **S1/S2 Boundary** border rules from [design-thinking.md](./design-thinking.md).
|
|
147
158
|
|
|
148
159
|
---
|
|
149
160
|
|
|
@@ -90,6 +90,7 @@ Every interactive UI MUST implement:
|
|
|
90
90
|
- must meet WCAG AA (4.5:1 for normal text, 3:1 for large text)
|
|
91
91
|
- avoid low-contrast combinations (e.g. muted on muted)
|
|
92
92
|
- OKLCH quick check: Lightness delta between text and background must be ≥ 40 percentage points (e.g., text at L=55% on background at L=97% → delta=42% ✔)
|
|
93
|
+
- **Contextual Contrast**: Secondary text (muted) on `S1/S2` surfaces should maintain a Lightness delta of ≥ 25% (e.g. text L=70% on surface L=95%).
|
|
93
94
|
- for token generation ensuring compliant contrast, see [design-thinking.md](./design-thinking.md)
|
|
94
95
|
|
|
95
96
|
- ARIA:
|
|
@@ -135,6 +136,23 @@ Every interactive UI MUST implement:
|
|
|
135
136
|
|
|
136
137
|
---
|
|
137
138
|
|
|
139
|
+
## Rule: Density & Spacing (L1–L4)
|
|
140
|
+
|
|
141
|
+
<rule name="Density">
|
|
142
|
+
|
|
143
|
+
Spacing must follow a consistent hierarchy to avoid visual noise.
|
|
144
|
+
|
|
145
|
+
| Level | Role | Gap/Padding | Value (Tailwind) |
|
|
146
|
+
| :----- | :----------------------- | :---------- | :---------------------- |
|
|
147
|
+
| **L1** | Internal (Button/Icon) | `4–8px` | `gap-1`, `gap-2`, `p-2` |
|
|
148
|
+
| **L2** | Siblings (Items in Card) | `16–20px` | `gap-4`, `p-4`, `p-5` |
|
|
149
|
+
| **L3** | Sections (Card in Grid) | `24–40px` | `gap-6`, `gap-10` |
|
|
150
|
+
| **L4** | Global (Page containers) | `64px+` | `py-16`, `px-6` |
|
|
151
|
+
|
|
152
|
+
</rule>
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
|
|
138
156
|
## Reference Links
|
|
139
157
|
|
|
140
158
|
- [design-thinking.md](./design-thinking.md) — Phase 0: palette setup, OKLCH token generation, light/dark inversion, aesthetic direction
|
|
@@ -46,7 +46,8 @@ function run() {
|
|
|
46
46
|
updateChangelog(newVersion);
|
|
47
47
|
|
|
48
48
|
console.log(`✅ Success: ${oldVersion} → ${newVersion}`);
|
|
49
|
-
console.log('🔗 CHANGELOG.md updated and promoted
|
|
49
|
+
console.log('🔗 CHANGELOG.md updated and promoted.');
|
|
50
|
+
console.log('⚠️ Files updated. Run "git commit" manually after approval.');
|
|
50
51
|
} catch (error) {
|
|
51
52
|
console.error('❌ Error during bump strategy:', error.message);
|
|
52
53
|
process.exit(1);
|
|
@@ -60,7 +61,7 @@ function updateChangelog(newVersion) {
|
|
|
60
61
|
}
|
|
61
62
|
|
|
62
63
|
const content = fs.readFileSync(CHANGELOG_PATH, 'utf8');
|
|
63
|
-
const today = new Date().
|
|
64
|
+
const today = new Date().toLocaleDateString('en-CA');
|
|
64
65
|
|
|
65
66
|
// Pattern to find the [Unreleased] section
|
|
66
67
|
const unreleasedRegex = /##\s*\[Unreleased\](\s*-\s*\d{4}-\d{2}-\d{2})?/i;
|
|
@@ -140,8 +140,8 @@ On every request, classify intent before acting:
|
|
|
140
140
|
### END Checklist (mandatory — execute in order, mark each before proceeding)
|
|
141
141
|
|
|
142
142
|
- [ ] **SUMMARIZE** — one sentence per completed PLAN task written in response
|
|
143
|
+
- [ ] **CHANGELOG** — Prepare your technical narrative in the `CHANGELOG.md` under `## [Unreleased]`. This MUST be done before bumping.
|
|
143
144
|
- [ ] **BUMP** — run \`npm run bump <feat|fix>\` to promote CHANGELOG and package.json version. Skip if not applicable.
|
|
144
|
-
- [ ] **CHANGELOG** — Verify [Unreleased] content was promoted. Append any manual notes if needed.
|
|
145
145
|
- [ ] **BACKLOG: tasks.md** — all completed tasks moved to `## Done` with `[DONE]` status
|
|
146
146
|
- [ ] **BACKLOG: context.md** — \`## Now\` updated with next objective or cleared
|
|
147
147
|
- [ ] **KNOWLEDGE** — Log any patterns, findings, or rework discovered during this cycle. Update \`.ai-backlog/learned.md\` (for successful feats) or \`.ai-backlog/troubleshoot.md\` (for fixed incidents). Curate stale or irrelevant items.
|
|
@@ -34,10 +34,9 @@ async function run() {
|
|
|
34
34
|
// 2. Sync Package.json files
|
|
35
35
|
syncAllPackages(nextVersion);
|
|
36
36
|
|
|
37
|
-
// 3.
|
|
38
|
-
stageAndCommit(nextVersion);
|
|
39
|
-
|
|
37
|
+
// 3. Status
|
|
40
38
|
console.log(` auto-bump: ${rootPkg.version} → ${nextVersion} (${bumpType})`);
|
|
39
|
+
console.log(' auto-bump: files updated. Manual commit required.');
|
|
41
40
|
return success({ from: rootPkg.version, to: nextVersion, bump: bumpType });
|
|
42
41
|
}
|
|
43
42
|
|
|
@@ -73,7 +72,7 @@ function updateChangelog(newVersion) {
|
|
|
73
72
|
if (!fs.existsSync(CHANGELOG_PATH)) return;
|
|
74
73
|
|
|
75
74
|
const content = fs.readFileSync(CHANGELOG_PATH, 'utf8');
|
|
76
|
-
const today = new Date().
|
|
75
|
+
const today = new Date().toLocaleDateString('en-CA');
|
|
77
76
|
|
|
78
77
|
// Pattern to find the [Unreleased] section
|
|
79
78
|
const unreleasedRegex = /##\s*\[Unreleased\](\s*-\s*\d{4}-\d{2}-\d{2})?/i;
|
|
@@ -104,11 +103,6 @@ function syncAllPackages(nextVersion) {
|
|
|
104
103
|
}
|
|
105
104
|
}
|
|
106
105
|
|
|
107
|
-
function stageAndCommit(nextVersion) {
|
|
108
|
-
execSync('git add .', { stdio: 'inherit' });
|
|
109
|
-
execSync(`git commit -m "chore: bump version to ${nextVersion}"`, { stdio: 'inherit' });
|
|
110
|
-
}
|
|
111
|
-
|
|
112
106
|
// --- File Helpers ---
|
|
113
107
|
|
|
114
108
|
function readLastCommitMessage() {
|