agemon 6.0.0 → 6.3.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/README.md +424 -89
- package/assets/skills/design/agemon-design/NOTICE.md +34 -0
- package/assets/skills/design/agemon-design/SKILL.md +95 -358
- package/assets/skills/design/agemon-design/references/actions.md +215 -0
- package/assets/skills/design/agemon-design/references/brief.md +13 -9
- package/assets/skills/design/agemon-design/references/core-rules.md +166 -0
- package/assets/skills/design/agemon-design/references/craft-intent.md +16 -14
- package/assets/skills/design/agemon-design/references/dashboard.md +1 -1
- package/assets/skills/design/agemon-design/references/dataviz.md +8 -8
- package/assets/skills/design/agemon-design/references/finish-bar.md +1 -1
- package/assets/skills/design/agemon-design/references/heuristics.md +56 -140
- package/assets/skills/design/agemon-design/references/inspiration.md +6 -6
- package/assets/skills/design/agemon-design/references/loops.md +9 -9
- package/assets/skills/design/agemon-design/references/motion.md +1 -1
- package/assets/skills/design/agemon-design/references/personas.md +4 -4
- package/assets/skills/design/{agemon-design-dashboard/SKILL.md → agemon-design/references/preset-dashboard.md} +8 -12
- package/assets/skills/design/{agemon-design-editorial/SKILL.md → agemon-design/references/preset-editorial.md} +5 -9
- package/assets/skills/design/{agemon-design-minimal/SKILL.md → agemon-design/references/preset-minimal.md} +8 -12
- package/assets/skills/design/agemon-design/references/principles-catalog.md +3 -3
- package/assets/skills/design/agemon-design/references/recipe-auth.md +3 -3
- package/assets/skills/design/agemon-design/references/recipe-dashboard.md +2 -2
- package/assets/skills/design/agemon-design/references/recipe-landing.md +9 -11
- package/assets/skills/design/agemon-design/references/review.md +7 -7
- package/assets/skills/design/agemon-design/references/routing.md +143 -0
- package/assets/skills/design/agemon-design/references/spec.md +8 -8
- package/assets/skills/design/agemon-design/references/stack.md +1 -1
- package/assets/skills/design/agemon-design/references/stage-assets.md +106 -0
- package/assets/skills/design/agemon-design/references/stage-build.md +46 -0
- package/assets/skills/design/agemon-design/references/stage-critique.md +34 -0
- package/assets/skills/design/agemon-design/references/stage-directions.md +44 -0
- package/assets/skills/design/agemon-design/references/stage-intake.md +34 -0
- package/assets/skills/design/agemon-design/references/stage-verify.md +44 -0
- package/assets/skills/design/agemon-design/references/state-design.md +1 -1
- package/assets/skills/design/agemon-design/references/tells-2026-11.md +32 -0
- package/assets/skills/design/agemon-design/references/themes.md +24 -20
- package/assets/skills/design/agemon-design/references/third-party-licenses.md +323 -0
- package/assets/skills/design/agemon-design/references/typography.md +11 -9
- package/assets/skills/design/agemon-design/scripts/audit-page.js +532 -0
- package/assets/skills/design/agemon-design/scripts/check-source.mjs +358 -0
- package/assets/skills/design/agemon-design/scripts/deal.mjs +231 -0
- package/assets/skills/design/agemon-design/scripts/inventory.mjs +676 -0
- package/assets/skills/{design/agemon-design-dashboard → essentials/web-design-guidelines}/LICENSE +1 -1
- package/assets/skills/essentials/web-design-guidelines/NOTICE.md +14 -0
- package/assets/skills/essentials/web-design-guidelines/SKILL.md +18 -0
- package/assets/skills/essentials/web-design-guidelines/references/guidelines.md +184 -0
- package/assets/skills/{design/agemon-design-minimal → essentials/writing-guidelines}/LICENSE +1 -1
- package/assets/skills/essentials/writing-guidelines/NOTICE.md +14 -0
- package/assets/skills/essentials/writing-guidelines/SKILL.md +18 -0
- package/assets/skills/essentials/writing-guidelines/references/guidelines.md +250 -0
- package/assets/skills/founder/agemon-founder-board/LICENSE +21 -0
- package/assets/skills/founder/agemon-founder-board/NOTICE.md +11 -0
- package/assets/skills/founder/agemon-founder-board/SKILL.md +111 -0
- package/assets/skills/founder/agemon-founder-board/lenses.md +84 -0
- package/assets/skills/founder/agemon-founder-brand/LICENSE +21 -0
- package/assets/skills/founder/agemon-founder-brand/NOTICE.md +12 -0
- package/assets/skills/founder/agemon-founder-brand/SKILL.md +77 -0
- package/assets/skills/founder/agemon-founder-cfo/LICENSE +21 -0
- package/assets/skills/founder/agemon-founder-cfo/NOTICE.md +12 -0
- package/assets/skills/founder/agemon-founder-cfo/SKILL.md +109 -0
- package/assets/skills/founder/agemon-founder-cfo/example.json +27 -0
- package/assets/skills/founder/agemon-founder-cfo/unit_economics.py +270 -0
- package/assets/skills/founder/agemon-founder-competitors/LICENSE +21 -0
- package/assets/skills/founder/agemon-founder-competitors/NOTICE.md +12 -0
- package/assets/skills/founder/agemon-founder-competitors/SKILL.md +84 -0
- package/assets/skills/founder/agemon-founder-consumer/LICENSE +21 -0
- package/assets/skills/founder/agemon-founder-consumer/NOTICE.md +11 -0
- package/assets/skills/founder/agemon-founder-consumer/SKILL.md +126 -0
- package/assets/skills/founder/agemon-founder-consumer/customer.example.json +34 -0
- package/assets/skills/founder/agemon-founder-consumer/panel.py +424 -0
- package/assets/skills/founder/agemon-founder-consumer/pitch.example.md +3 -0
- package/assets/skills/founder/agemon-founder-launch/LICENSE +21 -0
- package/assets/skills/founder/agemon-founder-launch/NOTICE.md +11 -0
- package/assets/skills/founder/agemon-founder-launch/SKILL.md +65 -0
- package/assets/skills/founder/agemon-founder-marketing/LICENSE +21 -0
- package/assets/skills/founder/agemon-founder-marketing/NOTICE.md +11 -0
- package/assets/skills/founder/agemon-founder-marketing/SKILL.md +80 -0
- package/assets/skills/founder/agemon-founder-offer/LICENSE +21 -0
- package/assets/skills/founder/agemon-founder-offer/NOTICE.md +11 -0
- package/assets/skills/founder/agemon-founder-offer/SKILL.md +75 -0
- package/assets/skills/founder/agemon-founder-ops/LICENSE +21 -0
- package/assets/skills/founder/agemon-founder-ops/NOTICE.md +12 -0
- package/assets/skills/founder/agemon-founder-ops/SKILL.md +77 -0
- package/assets/skills/founder/agemon-founder-plan/LICENSE +21 -0
- package/assets/skills/founder/agemon-founder-plan/NOTICE.md +11 -0
- package/assets/skills/founder/agemon-founder-plan/SKILL.md +88 -0
- package/assets/skills/founder/agemon-founder-plan/compile.py +178 -0
- package/assets/skills/founder/agemon-founder-pricing/LICENSE +21 -0
- package/assets/skills/founder/agemon-founder-pricing/NOTICE.md +12 -0
- package/assets/skills/founder/agemon-founder-pricing/SKILL.md +92 -0
- package/assets/skills/founder/agemon-founder-pricing/van_westendorp.py +172 -0
- package/assets/skills/{design/agemon-design-editorial → output-style/agemon-adhd}/LICENSE +1 -1
- package/assets/skills/output-style/agemon-adhd/NOTICE.md +13 -0
- package/assets/skills/output-style/agemon-adhd/SKILL.md +138 -0
- package/assets/skills/security/agemon-security-audit/AI-AND-LLM.md +83 -0
- package/assets/skills/security/agemon-security-audit/ATTACK-CLASSES.md +130 -0
- package/assets/skills/security/agemon-security-audit/CLIENT-SIDE.md +83 -0
- package/assets/skills/security/agemon-security-audit/CLOUD-AND-DEPLOYMENT.md +86 -0
- package/assets/skills/security/agemon-security-audit/DATA-ISOLATION-AND-LIFECYCLE.md +84 -0
- package/assets/skills/security/agemon-security-audit/DESKTOP-MOBILE-AND-LOCAL-IPC.md +89 -0
- package/assets/skills/security/agemon-security-audit/HUNTING.md +251 -0
- package/assets/skills/security/agemon-security-audit/LICENSE +21 -0
- package/assets/skills/security/agemon-security-audit/MEMORY-SAFETY-AND-BINARY.md +101 -0
- package/assets/skills/security/agemon-security-audit/NOTICE.md +12 -0
- package/assets/skills/security/agemon-security-audit/PROTOCOLS-RPC-AND-MESSAGING.md +81 -0
- package/assets/skills/security/agemon-security-audit/RECONNAISSANCE.md +156 -0
- package/assets/skills/security/agemon-security-audit/RESOURCE-EXHAUSTION-AND-AVAILABILITY.md +78 -0
- package/assets/skills/security/agemon-security-audit/SKILL.md +192 -0
- package/assets/skills/security/agemon-security-audit/SUPPLY-CHAIN-AND-RELEASE.md +73 -0
- package/assets/skills/security/agemon-security-audit/VALIDATION-AND-REPORTING.md +186 -0
- package/assets/skills/security/agemon-security-audit/WEB-PROTOCOL-AND-AUTH.md +105 -0
- package/assets/skills/security/agemon-security-audit/report-schema.json +461 -0
- package/assets/skills/security/agemon-security-audit/validate-coverage-ledger.cjs +872 -0
- package/assets/skills/security/agemon-security-audit/validate-findings.cjs +773 -0
- package/assets/skills/workflow/agemon-brainstorming/LICENSE +21 -0
- package/assets/skills/workflow/agemon-brainstorming/NOTICE.md +14 -0
- package/assets/skills/workflow/agemon-brainstorming/SKILL.md +287 -0
- package/assets/skills/workflow/agemon-brainstorming/builder-check-prompt.md +23 -0
- package/assets/skills/workflow/agemon-dispatching-parallel-agents/LICENSE +21 -0
- package/assets/skills/workflow/agemon-dispatching-parallel-agents/NOTICE.md +13 -0
- package/assets/skills/workflow/agemon-dispatching-parallel-agents/SKILL.md +167 -0
- package/assets/skills/workflow/agemon-executing-plans/LICENSE +21 -0
- package/assets/skills/workflow/agemon-executing-plans/NOTICE.md +15 -0
- package/assets/skills/workflow/agemon-executing-plans/SKILL.md +322 -0
- package/assets/skills/workflow/agemon-executing-plans/scripts/task-done +55 -0
- package/assets/skills/workflow/agemon-executing-plans/scripts/task-start +32 -0
- package/assets/skills/workflow/agemon-finishing-a-development-branch/LICENSE +21 -0
- package/assets/skills/workflow/agemon-finishing-a-development-branch/NOTICE.md +13 -0
- package/assets/skills/workflow/agemon-finishing-a-development-branch/SKILL.md +225 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/LICENSE +21 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/NOTICE.md +15 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/SKILL.md +339 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/code-reviewer.md +198 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/implementer-prompt.md +154 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/re-review-prompt.md +116 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/references/batching.md +11 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/references/cannot-verify.md +10 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/references/final-review.md +49 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/references/fix-loop.md +77 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/references/handling-reports.md +15 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/references/preflight.md +26 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/references/resuming.md +12 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/references/role-scout.md +18 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/references/role-worker.md +19 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/scripts/review-package +64 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/scripts/sdd-repo +54 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/scripts/sdd-workspace +110 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/scripts/task-brief +108 -0
- package/assets/skills/workflow/agemon-subagent-driven-development/task-reviewer-prompt.md +209 -0
- package/assets/skills/workflow/agemon-test-driven-development/LICENSE +21 -0
- package/assets/skills/workflow/agemon-test-driven-development/NOTICE.md +14 -0
- package/assets/skills/workflow/agemon-test-driven-development/SKILL.md +330 -0
- package/assets/skills/workflow/agemon-test-driven-development/writing-good-tests.md +198 -0
- package/assets/skills/workflow/agemon-using-git-worktrees/LICENSE +21 -0
- package/assets/skills/workflow/agemon-using-git-worktrees/NOTICE.md +13 -0
- package/assets/skills/workflow/agemon-using-git-worktrees/SKILL.md +167 -0
- package/assets/skills/workflow/agemon-writing-plans/LICENSE +21 -0
- package/assets/skills/workflow/agemon-writing-plans/NOTICE.md +13 -0
- package/assets/skills/workflow/agemon-writing-plans/SKILL.md +204 -0
- package/dist/{chunk-5LATHJYU.js → chunk-ZZBF3GOV.js} +369 -944
- package/dist/chunk-ZZBF3GOV.js.map +1 -0
- package/dist/{fake-subprocess-2BETWZVZ.js → fake-subprocess-IV4ML77S.js} +3 -33
- package/dist/fake-subprocess-IV4ML77S.js.map +1 -0
- package/dist/index.js +3477 -731
- package/dist/index.js.map +1 -1
- package/package.json +8 -1
- package/assets/skills/design/agemon-design/references/agents.md +0 -63
- package/assets/skills/design/agemon-design-dashboard/NOTICE.md +0 -9
- package/assets/skills/design/agemon-design-editorial/NOTICE.md +0 -9
- package/assets/skills/design/agemon-design-minimal/NOTICE.md +0 -9
- package/dist/chunk-5LATHJYU.js.map +0 -1
- package/dist/fake-subprocess-2BETWZVZ.js.map +0 -1
|
@@ -1,28 +1,25 @@
|
|
|
1
|
-
# Heuristics —
|
|
1
|
+
# Heuristics — Severity-Ranked Review Methodology
|
|
2
2
|
|
|
3
|
-
Any skill can list anti-patterns. A
|
|
3
|
+
Any skill can list anti-patterns. A heuristic review is a defensible artifact a PM can action: every finding names a heuristic or law, the element it applies to, the viewport it was seen at, and an impact tag. This file is the source of truth for the heuristic mode of `/agemon-design review` — the checklist, the laws, the output shape. It produces findings, not numbers: a figure computed from model judgment reads as a measurement it is not.
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
7
|
## How to Use
|
|
8
8
|
|
|
9
|
-
Run the full pass: Nielsen's 10
|
|
9
|
+
Run the full pass: Nielsen's 10 as a checklist → the 6 Design Laws as checks → rank findings by impact tag. Output is a findings table PMs can paste into any issue tracker.
|
|
10
10
|
|
|
11
|
-
Usability is not a knob. `CRAFT_LEVEL` does not relax these
|
|
11
|
+
Usability is not a knob. `CRAFT_LEVEL` does not relax these findings — a blocking problem is blocking at every craft level.
|
|
12
12
|
|
|
13
13
|
---
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## Finding Format
|
|
16
16
|
|
|
17
|
-
|
|
|
18
|
-
|-------|---------|
|
|
19
|
-
| **1** | Blocks users. Core task cannot complete. |
|
|
20
|
-
| **2** | Severe friction. Users abandon or error repeatedly. |
|
|
21
|
-
| **3** | Works but confusing. Users complete with hesitation. |
|
|
22
|
-
| **4** | Works, minor polish left. No user impact. |
|
|
23
|
-
| **5** | Best-in-class. Nothing to add. |
|
|
17
|
+
Every finding is one row: `| Heuristic or law | Element | Viewport | Finding | Impact |`.
|
|
24
18
|
|
|
25
|
-
|
|
19
|
+
- **Element** names the specific thing: "Save button in the settings form", not "the form".
|
|
20
|
+
- **Viewport** is where you saw it (desktop 1280, tablet 768, mobile 375, or "code only" if you did not render it).
|
|
21
|
+
- **Finding** is concrete: quote the text, count the elements, name the broken flow. Vague findings are rejected.
|
|
22
|
+
- A heuristic with nothing to report gets no row. Do not pad the table with praise.
|
|
26
23
|
|
|
27
24
|
---
|
|
28
25
|
|
|
@@ -148,7 +145,7 @@ Dialogues should not contain information that is irrelevant or rarely needed.
|
|
|
148
145
|
**What to look for:**
|
|
149
146
|
- [ ] Every section answers one question; no filler
|
|
150
147
|
- [ ] Visual weight proportional to importance
|
|
151
|
-
- [ ] One accent, 3-5 placements per viewport (see
|
|
148
|
+
- [ ] One accent, 3-5 placements per viewport (see core-rules.md, Anti-Slop Test)
|
|
152
149
|
- [ ] White space is used, not avoided
|
|
153
150
|
- [ ] No decorative graphics competing with content
|
|
154
151
|
|
|
@@ -193,7 +190,7 @@ Even though it is better if the system can be used without documentation, help m
|
|
|
193
190
|
|
|
194
191
|
## The 6 Design Laws
|
|
195
192
|
|
|
196
|
-
Each is
|
|
193
|
+
Each is checked against a specific element. These are physics + psychology, not preferences — breaking them has measurable UX impact.
|
|
197
194
|
|
|
198
195
|
### Fitts's Law
|
|
199
196
|
|
|
@@ -203,9 +200,9 @@ Source: Fitts, P. M. (1954). "The information capacity of the human motor system
|
|
|
203
200
|
|
|
204
201
|
**When load-bearing:** Every tappable / clickable surface. Critical on mobile.
|
|
205
202
|
|
|
206
|
-
**
|
|
207
|
-
- **
|
|
208
|
-
- **
|
|
203
|
+
**What to look for:**
|
|
204
|
+
- **Holds when** touch targets ≥ 44px on mobile, ≥ 24px on desktop; primary CTA in the natural eye/thumb path; related actions grouped
|
|
205
|
+
- **Breaks when** touch targets under 44px mobile; destructive actions adjacent to primary actions; CTA placed far from where the user just looked
|
|
209
206
|
|
|
210
207
|
### Hick's Law
|
|
211
208
|
|
|
@@ -215,9 +212,9 @@ Source: Hick, W. E. (1952). "On the rate of gain of information."
|
|
|
215
212
|
|
|
216
213
|
**When load-bearing:** Menus, navigation, plan selectors, form fields, dashboards.
|
|
217
214
|
|
|
218
|
-
**
|
|
219
|
-
- **
|
|
220
|
-
- **
|
|
215
|
+
**What to look for:**
|
|
216
|
+
- **Holds when** nav ≤ 7 items at any level; no field offers 20+ unfiltered options without search
|
|
217
|
+
- **Breaks when** 12+ top-nav items; a single select with 200 entries and no type-ahead; dashboard with 18 metrics at equal weight
|
|
221
218
|
|
|
222
219
|
### Doherty Threshold
|
|
223
220
|
|
|
@@ -227,9 +224,9 @@ Source: Doherty, W. J. & Thadani, A. J. (1982). "The Economic Value of Rapid Res
|
|
|
227
224
|
|
|
228
225
|
**When load-bearing:** Every user-initiated action. Critical on data-heavy views and transitions.
|
|
229
226
|
|
|
230
|
-
**
|
|
231
|
-
- **
|
|
232
|
-
- **
|
|
227
|
+
**What to look for:**
|
|
228
|
+
- **Holds when** perceived response < 400ms; optimistic UI for saves, likes, toggles; skeletons within 200ms
|
|
229
|
+
- **Breaks when** form submit shows a spinner for 2s with no optimistic state; nav click waits on full server round-trip before painting anything
|
|
233
230
|
|
|
234
231
|
### Cleveland-McGill Hierarchy
|
|
235
232
|
|
|
@@ -239,9 +236,9 @@ Source: Cleveland, W. S. & McGill, R. (1984). "Graphical Perception: Theory, Exp
|
|
|
239
236
|
|
|
240
237
|
**When load-bearing:** Every chart, metric card, comparative dataviz.
|
|
241
238
|
|
|
242
|
-
**
|
|
243
|
-
- **
|
|
244
|
-
- **
|
|
239
|
+
**What to look for:**
|
|
240
|
+
- **Holds when** quantitative comparisons use position or length (bar, line, dot); color reserved for category; no pie or 3D
|
|
241
|
+
- **Breaks when** pie chart used for comparison; donut with ≥ 5 slices; color-gradient used to encode magnitude where length would work
|
|
245
242
|
|
|
246
243
|
### Miller's Law
|
|
247
244
|
|
|
@@ -251,9 +248,9 @@ Source: Miller, G. A. (1956). "The Magical Number Seven, Plus or Minus Two."
|
|
|
251
248
|
|
|
252
249
|
**When load-bearing:** Nav depth, form section counts, onboarding flows, step counts.
|
|
253
250
|
|
|
254
|
-
**
|
|
255
|
-
- **
|
|
256
|
-
- **
|
|
251
|
+
**What to look for:**
|
|
252
|
+
- **Holds when** navigation ≤ 7 items per level; forms chunked into ≤ 5 sections; multi-step flows ≤ 5 steps or with clear progress. (Wizard ceiling is 5, not 7: each step holds multiple fields, and each field consumes working-memory slots of its own.)
|
|
253
|
+
- **Breaks when** 14-item top nav; a single-page form with 23 ungrouped fields; a checkout with 9 steps and no progress indicator
|
|
257
254
|
|
|
258
255
|
### Tesler's Law
|
|
259
256
|
|
|
@@ -263,9 +260,9 @@ Also called the Law of Conservation of Complexity. Attributed to Larry Tesler.
|
|
|
263
260
|
|
|
264
261
|
**When load-bearing:** Feature-rich tools. Configuration-heavy flows. Anywhere you're tempted to "expose a toggle."
|
|
265
262
|
|
|
266
|
-
**
|
|
267
|
-
- **
|
|
268
|
-
- **
|
|
263
|
+
**What to look for:**
|
|
264
|
+
- **Holds when** complexity absorbed by sensible defaults, automation, or backend inference; advanced controls behind progressive disclosure
|
|
265
|
+
- **Breaks when** UI exposes every backend knob; user must configure 8 things before they can accomplish the primary task; no default state, only empty forms
|
|
269
266
|
|
|
270
267
|
---
|
|
271
268
|
|
|
@@ -284,120 +281,39 @@ Rank findings in the final output by impact tag, not by heuristic order: `blocks
|
|
|
284
281
|
|
|
285
282
|
---
|
|
286
283
|
|
|
287
|
-
##
|
|
284
|
+
## Output Format
|
|
288
285
|
|
|
289
|
-
The
|
|
286
|
+
The heuristic review outputs **exactly** this structure. Do not invent new sections. Do not merge tables. Do not drop the ranking at the end. Do not add a score, grade or pass/fail verdict.
|
|
290
287
|
|
|
291
288
|
```markdown
|
|
292
|
-
## Heuristic
|
|
293
|
-
|
|
294
|
-
| Heuristic | Score | Finding | Impact |
|
|
295
|
-
|-----------|-------|---------|--------|
|
|
296
|
-
| Visibility of system status | 2 | Form submit has no loading state; users click 3-4x thinking nothing happened | adds-friction |
|
|
297
|
-
| Match system and real world | 4 | Dates formatted for locale; one copy says "entity" instead of "project" | minor-polish |
|
|
298
|
-
| User control and freedom | 3 | Delete has confirm but no undo after it lands | reduces-trust |
|
|
299
|
-
| Consistency and standards | 4 | Primary CTA consistent; one modal has Cancel on right, rest on left | minor-polish |
|
|
300
|
-
| Error prevention | 4 | Delete confirms with the resource name — good | minor-polish |
|
|
301
|
-
| Recognition over recall | 3 | Cmd+K exists but not surfaced in tooltips | adds-friction |
|
|
302
|
-
| Flexibility and efficiency | 2 | No bulk-select on list of 200+ items | adds-friction |
|
|
303
|
-
| Aesthetic and minimalist | 3 | Hero has two competing accents | reduces-trust |
|
|
304
|
-
| Error recovery | 1 | "Something went wrong" with no ID, no retry | blocks-conversion |
|
|
305
|
-
| Help and documentation | 3 | Tooltips on most icons; empty state has no CTA | reduces-trust |
|
|
306
|
-
|
|
307
|
-
## Design Law Audit
|
|
308
|
-
|
|
309
|
-
| Law | Pass/Fail | Detail |
|
|
310
|
-
|-----|-----------|--------|
|
|
311
|
-
| Fitts's Law | FAIL | Primary CTA is 32px tall on mobile; expected ≥ 44px |
|
|
312
|
-
| Hick's Law | PASS | 5 top-nav items — within 7±2 |
|
|
313
|
-
| Doherty Threshold | FAIL | Save shows spinner for ~1.8s with no optimistic state |
|
|
314
|
-
| Cleveland-McGill | PASS | Bar charts for comparison, color for category only |
|
|
315
|
-
| Miller's Law | PASS | Form chunked into 4 logical sections |
|
|
316
|
-
| Tesler's Law | FAIL | New user sees 8 required config fields before first action |
|
|
289
|
+
## Heuristic Findings
|
|
317
290
|
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
```
|
|
291
|
+
| Heuristic | Element | Viewport | Finding | Impact |
|
|
292
|
+
|-----------|---------|----------|---------|--------|
|
|
293
|
+
| Visibility of system status | Submit button, signup form | mobile 375 | No loading state; users click 3-4x thinking nothing happened | adds-friction |
|
|
294
|
+
| User control and freedom | Delete confirm dialog, project list | desktop 1280 | Confirm exists but there is no undo after it lands | reduces-trust |
|
|
295
|
+
| Consistency and standards | Cancel button, billing modal | desktop 1280 | Cancel on the right here, on the left in every other modal | minor-polish |
|
|
296
|
+
| Flexibility and efficiency | Invoice list, 200+ rows | desktop 1280 | No bulk select | adds-friction |
|
|
297
|
+
| Error recovery | Error banner, checkout | mobile 375 | "Something went wrong" with no ID, no retry | blocks-conversion |
|
|
326
298
|
|
|
327
|
-
|
|
328
|
-
- The first row of each heuristic table is the short-name version (not the verbose Nielsen title). The heuristic is unambiguous from context.
|
|
329
|
-
- The `Top findings` list is a rank, not a re-listing. Include only findings at `reduces-trust` or worse. Cap at 5.
|
|
330
|
-
- Scores of 4-5 don't need a finding row unless the grader wants to surface what's working. Blank findings for 4-5 rows are fine; the Score column carries the signal.
|
|
331
|
-
|
|
332
|
-
---
|
|
333
|
-
|
|
334
|
-
## UsabilityScore (0-100) — the judged companion to UICraftScore
|
|
335
|
-
|
|
336
|
-
The scorecard above is qualitative. **UsabilityScore** rolls it into one 0-100 number + letter grade so it composes with the deterministic **UICraftScore** (`evals/quality/score.mjs`) and so a PM or CI run has a single figure to track.
|
|
337
|
-
|
|
338
|
-
> **Judged, not deterministic.** UsabilityScore is computed by the host agent from this rubric — it reflects judgment and *may vary run to run*. It is **not** reproducible the way UICraftScore is. Never gate CI on UsabilityScore; gate on the deterministic UICraftScore and use UsabilityScore for review depth. Always label it `(judged)` when reporting.
|
|
339
|
-
|
|
340
|
-
### Formula
|
|
341
|
-
|
|
342
|
-
Deterministic *given the scores* — the same scorecard always yields the same number. Only the act of scoring is judgment.
|
|
343
|
-
|
|
344
|
-
```
|
|
345
|
-
heuristic_base = round( ((mean(nielsen_scores) − 1) / 4) × 100 ) # 10 Nielsen scores, each 1–5
|
|
346
|
-
law_penalty = (number of FAILED design laws) × 5 # 6 laws, −5 each (max −30)
|
|
347
|
-
UsabilityScore = clamp( heuristic_base − law_penalty , 0 , 100 )
|
|
348
|
-
```
|
|
299
|
+
## Design Law Findings
|
|
349
300
|
|
|
350
|
-
|
|
301
|
+
| Law | Element | Viewport | Detail | Impact |
|
|
302
|
+
|-----|---------|----------|--------|--------|
|
|
303
|
+
| Fitts's Law | Primary CTA, pricing card | mobile 375 | 32px tall; expected ≥ 44px | adds-friction |
|
|
304
|
+
| Doherty Threshold | Save button, settings | desktop 1280 | Spinner for ~1.8s with no optimistic state | adds-friction |
|
|
305
|
+
| Tesler's Law | First-run form | desktop 1280 | 8 required config fields before the first action | reduces-trust |
|
|
351
306
|
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
### Worked example (the scorecard above)
|
|
355
|
-
|
|
356
|
-
Nielsen scores `2,4,3,4,4,3,2,3,1,3` → mean `2.9` → base `round(((2.9−1)/4)×100)` = **48**.
|
|
357
|
-
Failed laws: Fitts, Doherty, Tesler = 3 → penalty `15`.
|
|
358
|
-
`UsabilityScore = clamp(48 − 15, 0, 100)` = **33 / F**. (A genuinely broken UI scores in the F band — as it should.)
|
|
359
|
-
|
|
360
|
-
### Output
|
|
361
|
-
|
|
362
|
-
Append this block to the `/ui-craft:heuristic` output, after Top findings:
|
|
363
|
-
|
|
364
|
-
```markdown
|
|
365
|
-
## UsabilityScore
|
|
366
|
-
|
|
367
|
-
**33 / F** (judged) · heuristic base 48 − law penalty 15
|
|
368
|
-
|
|
369
|
-
| Component | Value |
|
|
370
|
-
|-----------|-------|
|
|
371
|
-
| Nielsen mean (1–5) | 2.9 |
|
|
372
|
-
| Heuristic base (0–100) | 48 |
|
|
373
|
-
| Failed design laws | 3 (Fitts, Doherty, Tesler) |
|
|
374
|
-
| Law penalty | −15 |
|
|
375
|
-
| **UsabilityScore** | **33 / F** |
|
|
376
|
-
```
|
|
377
|
-
|
|
378
|
-
Machine-readable form (emit when a caller asks for `--json`, or when invoked by `/sddesign` / an extended report):
|
|
379
|
-
|
|
380
|
-
```json
|
|
381
|
-
{
|
|
382
|
-
"usability": { "score": 33, "grade": "F", "judged": true },
|
|
383
|
-
"components": { "nielsen_mean": 2.9, "heuristic_base": 48, "failed_laws": 3, "law_penalty": 15 },
|
|
384
|
-
"version": "usability-1.0"
|
|
385
|
-
}
|
|
386
|
-
```
|
|
387
|
-
|
|
388
|
-
### Extended quality report (optional combine)
|
|
389
|
-
|
|
390
|
-
When the user wants the full quality picture, place the judged UsabilityScore beside the deterministic UICraftScore. Get the deterministic score with `node scripts/eval.mjs <path> --json` or the `score_ui` MCP tool, then render:
|
|
391
|
-
|
|
392
|
-
```markdown
|
|
393
|
-
## Extended quality report
|
|
394
|
-
|
|
395
|
-
| Score | Value | Reproducible? |
|
|
396
|
-
|-------|-------|---------------|
|
|
397
|
-
| UICraftScore | 82 / B | ✅ deterministic — identical every run |
|
|
398
|
-
| UsabilityScore | 33 / F | ❌ judged — LLM judgment, may vary |
|
|
307
|
+
## Top findings (ranked by impact)
|
|
399
308
|
|
|
400
|
-
|
|
309
|
+
1. Error recovery (blocks-conversion) — "Something went wrong" banner strands users in checkout on mobile; no ID, no retry, no support path
|
|
310
|
+
2. Fitts's Law (adds-friction) — primary CTA on the pricing card is 32px on mobile; raise to ≥ 44px
|
|
311
|
+
3. Doherty Threshold (adds-friction) — save feels broken on desktop; add optimistic UI
|
|
312
|
+
4. Flexibility and efficiency (adds-friction) — bulk select missing on the 200+ row invoice list
|
|
313
|
+
5. Visibility of system status (adds-friction) — signup submit has no loading state on mobile
|
|
401
314
|
```
|
|
402
315
|
|
|
403
|
-
|
|
316
|
+
**Notes on output:**
|
|
317
|
+
- Use the short name for each heuristic (not the verbose Nielsen title). The heuristic is unambiguous from context.
|
|
318
|
+
- The `Top findings` list is a rank, not a re-listing. Include only findings at `reduces-trust` or worse. Cap at 5.
|
|
319
|
+
- Laws and heuristics that hold up get no row. If you want to say what is working, say it in one line after the ranking, not in the tables.
|
|
@@ -61,7 +61,7 @@ Positioning statement centered above a bento grid of product surfaces. Each card
|
|
|
61
61
|
- Typography: headline centered above the grid
|
|
62
62
|
|
|
63
63
|
### Archetype E — Editorial figure
|
|
64
|
-
Value propositions presented as numbered editorial figures (
|
|
64
|
+
Value propositions presented as numbered editorial figures, labelled in the subject's own vocabulary (its real parts, stages or sections), not a generic figure label. Gives a technical publication feel. Strong for developer-focused products where "serious" positioning outweighs "approachable."
|
|
65
65
|
|
|
66
66
|
- Section labels: uppercase monospace or small-caps
|
|
67
67
|
- Layout: each figure gets a distinct visual treatment
|
|
@@ -143,10 +143,10 @@ Concrete patterns observed in production. Each stands as a reusable technique.
|
|
|
143
143
|
- **Bento card sizing ratio**: ~2:1 dominant card to minor cards; never all cards equal size
|
|
144
144
|
|
|
145
145
|
### Typography signatures
|
|
146
|
-
- **Display italics**:
|
|
146
|
+
- **Display italics**: a common generated look (see [tells-2026-11.md](tells-2026-11.md)); use only when the content calls for emphasis, never as a habit
|
|
147
147
|
- **Negative letter-spacing on all headings** (see Section 7 for exact values)
|
|
148
148
|
- **Font weight distribution skewed to medium**: `font-weight: 500` as the dominant weight across UI, `600` for emphasis only, `700` reserved for hero scale
|
|
149
|
-
- **
|
|
149
|
+
- **Section labels**: small, tracked-out uppercase labels are a common generated look ([tells-2026-11.md](tells-2026-11.md)); use one only when it names a real section the way the subject would, otherwise sentence case
|
|
150
150
|
|
|
151
151
|
### Color signatures
|
|
152
152
|
- **One accent, used sparingly**: accent color appears in CTAs and key interactive elements only — not in decorative elements
|
|
@@ -281,7 +281,7 @@ Property targeting: box-shadow, transform, opacity — never transition: all
|
|
|
281
281
|
|
|
282
282
|
**Font pairing pattern** (display + system + mono):
|
|
283
283
|
```
|
|
284
|
-
Display headings:
|
|
285
|
-
Body:
|
|
286
|
-
Code/technical:
|
|
284
|
+
Display headings: a face chosen for the brief's subject
|
|
285
|
+
Body: a readable sans or serif chosen for the same brief
|
|
286
|
+
Code/technical: a monospace, only if the content has code
|
|
287
287
|
```
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Loop Engine
|
|
2
2
|
|
|
3
|
-
Run→evaluate→fix one→re-evaluate→stop. A loop is not a review pass — it iterates until
|
|
3
|
+
Run→evaluate→fix one→re-evaluate→stop. A loop is not a review pass — it iterates until its stop condition holds or the budget runs out. A stop condition is an objective check (items present, values found by search) or a count of severity-ranked findings; a general impression never passes it. A loop NEVER hard-depends on a renderer, NEVER auto-installs anything, and ALWAYS degrades with an explicit notice when visual evaluation is unavailable. The budget is non-negotiable: when it is exhausted the engine stops and reports, even if the stop condition has not been met.
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
@@ -12,7 +12,7 @@ Every preset declares all five fields. None is optional.
|
|
|
12
12
|
|-------|---------------|-------------|
|
|
13
13
|
| `target` | `new-build` \| `existing-surface` \| `user-screenshot` | The artifact being evaluated |
|
|
14
14
|
| `lens` | one or more reference file paths / sections | Reference content that drives evaluation |
|
|
15
|
-
| `gate` | `checklist-all-green` \| `zero-critical` \| `zero-off-system` |
|
|
15
|
+
| `gate` | `checklist-all-green` \| `zero-critical` \| `zero-off-system` | Stop condition: an objective check or a severity-finding count, never an overall impression |
|
|
16
16
|
| `renderer` | `required` \| `none` | Renderer dependency level — `required` degrades to code-only if unavailable; `none` means static analysis only (always available) |
|
|
17
17
|
| `budget` | integer 1–5 (default 3, hard cap 5) | Maximum iterations allowed |
|
|
18
18
|
|
|
@@ -22,12 +22,12 @@ Every preset declares all five fields. None is optional.
|
|
|
22
22
|
|
|
23
23
|
The agent executes this numbered procedure for every iteration:
|
|
24
24
|
|
|
25
|
-
1. **Read** the target AND
|
|
25
|
+
1. **Read** the target AND the brief's §6 (learned constraints = override registry). Brief §6 overrides preset gates; the a11y/correctness floor is never overridden.
|
|
26
26
|
2. **Detect renderer** (see Renderer Detection Ladder below) and emit the pre-flight cost notice — preset name, budget, "will run up to N iterations; each iteration runs one full evaluate → fix → re-evaluate cycle." MUST emit before any iteration begins.
|
|
27
27
|
3. **Evaluate** the target through the preset's lens → produce a severity-ranked findings list.
|
|
28
28
|
4. **Select ONE highest-impact fix.** Ranking: Critical before Major; tiebreaker within the same tier = earlier-numbered finish-bar pass / earlier-listed state in the state-design lattice / earlier-cited finding in the brief; for token-consistency: within the same tier, apply layer order — primitive token violations before semantic, semantic before component. MUST NOT apply more than one fix per iteration.
|
|
29
29
|
5. **Apply** the selected fix.
|
|
30
|
-
6. **Re-evaluate** — run the
|
|
30
|
+
6. **Re-evaluate** — re-run the stop-condition check on the updated state.
|
|
31
31
|
7. **Stop** when the gate passes OR the iteration count reaches the budget, whichever comes first. On budget exhaustion: STOP, print final gate state, and list all open findings as "Unresolved within budget:". MUST NOT silently extend the budget.
|
|
32
32
|
|
|
33
33
|
**Anti-thrash rule:** a fix that introduces a new violation is caught in the NEXT iteration — no inline re-validation. It counts against the budget.
|
|
@@ -82,15 +82,15 @@ Every loop report MUST state:
|
|
|
82
82
|
|
|
83
83
|
| Preset | target | lens | gate | renderer | maps to |
|
|
84
84
|
|--------|--------|------|------|----------|---------|
|
|
85
|
-
| `visual-anti-slop` | new-build \| existing-surface |
|
|
86
|
-
| `state-coverage` | new-build \| existing-surface | state-design.md lattice, knob-gated to CRAFT_LEVEL | checklist-all-green (all required states present) | none | `/
|
|
87
|
-
| `token-consistency` | new-build \| existing-surface | tokens.md 3-layer contract +
|
|
85
|
+
| `visual-anti-slop` | new-build \| existing-surface | core-rules.md Anti-Slop Test + finish-bar.md Pass 1 + Pass 9 | zero-critical (Major: absent or explicitly user-confirmed — no self-accept, silence ≠ accepted) | required — degrades to code-only | pre-ship pass |
|
|
86
|
+
| `state-coverage` | new-build \| existing-surface | state-design.md lattice, knob-gated to CRAFT_LEVEL | checklist-all-green (all required states present) | none | `/agemon-design harden` |
|
|
87
|
+
| `token-consistency` | new-build \| existing-surface | tokens.md 3-layer contract + core-rules.md Anti-Slop Minor items | zero-off-system | none (static scan) | `/agemon-design tokens` audit |
|
|
88
88
|
|
|
89
89
|
---
|
|
90
90
|
|
|
91
91
|
## visual-anti-slop — eliminate AI-template signals until the gate passes
|
|
92
92
|
|
|
93
|
-
**Lens:**
|
|
93
|
+
**Lens:** core-rules.md Anti-Slop Test (Critical + Major items) + `finish-bar.md` Pass 1 (hierarchy) + Pass 9 (pixel honesty).
|
|
94
94
|
**Gate:** all Critical Anti-Slop items absent AND all Major items absent or explicitly user-confirmed. A Major is "accepted" ONLY when the user explicitly confirms it (during pre-flight or mid-loop); absent explicit confirmation it stays OPEN and counts against the gate. No self-accept, no "not found on re-eval = accepted".
|
|
95
95
|
**Renderer:** required — degrades to code-only (partial confidence) if unavailable. The gate is reported as "partial — visual rendering unverified" when renderer=none. MUST NOT claim full pass on visual criteria without a renderer.
|
|
96
96
|
**Highest-impact ranking:** Critical Anti-Slop findings first; within Major, earlier-numbered finish-bar pass wins.
|
|
@@ -120,7 +120,7 @@ Every loop report MUST state:
|
|
|
120
120
|
|
|
121
121
|
## token-consistency — iterate until zero off-system values remain
|
|
122
122
|
|
|
123
|
-
**Lens:** `tokens.md` 3-layer contract (per tokens.md 3-layer contract — see that file for canonical layer definitions) +
|
|
123
|
+
**Lens:** `tokens.md` 3-layer contract (per tokens.md 3-layer contract — see that file for canonical layer definitions) + core-rules.md Anti-Slop Minor items for hardcoded values.
|
|
124
124
|
**Gate:** zero off-system values — any color, radius, or spacing value not drawn from the project's token system.
|
|
125
125
|
**Renderer:** none — static code scan; always available.
|
|
126
126
|
**Highest-impact ranking:** Critical token violations (raw hex colors) before Major (arbitrary radii, magic spacing); tiebreaker = order of appearance in the file.
|
|
@@ -421,7 +421,7 @@ Map the project's animation library to the token names, not raw values — when
|
|
|
421
421
|
|
|
422
422
|
## Cross-Refs
|
|
423
423
|
|
|
424
|
-
- `stack.md` — Motion / GSAP / Three.js library specifics (opt-in during
|
|
424
|
+
- `stack.md` — Motion / GSAP / Three.js library specifics (opt-in during intake).
|
|
425
425
|
- `modern-css.md` — `@starting-style` for enter-on-mount, View Transitions API.
|
|
426
426
|
- `accessibility.md` — reduced-motion + full interaction rules (keyboard, focus, touch).
|
|
427
427
|
- `../examples/animation-storyboard.md` — multi-stage sequenced animations pattern.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Personas — Walkthrough Checklists
|
|
2
2
|
|
|
3
|
-
Five personas, five journeys. A heuristic
|
|
3
|
+
Five personas, five journeys. A heuristic finding says what's wrong in the abstract. A persona walkthrough says *who* it breaks for. Use these as overlays on top of `heuristics.md`: same UI, five different lenses.
|
|
4
4
|
|
|
5
5
|
Each persona has a checklist. Every un-ticked box is a finding. Rank findings using the same impact tags from `heuristics.md` (`blocks-conversion`, `adds-friction`, `reduces-trust`, `minor-polish`).
|
|
6
6
|
|
|
@@ -190,7 +190,7 @@ Each persona has a checklist. Every un-ticked box is a finding. Rank findings us
|
|
|
190
190
|
|
|
191
191
|
## How to Use
|
|
192
192
|
|
|
193
|
-
Invoked by `/
|
|
193
|
+
Invoked by a heuristic review (`/agemon-design review`) that names a persona:
|
|
194
194
|
|
|
195
195
|
| Arg | Persona | Loads |
|
|
196
196
|
|-----|---------|-------|
|
|
@@ -201,6 +201,6 @@ Invoked by `/ui-craft:heuristic <target> --persona=<name>`:
|
|
|
201
201
|
| `--persona=margo` | One-thumb Margo | Section 5 |
|
|
202
202
|
| `--persona=all` | All five | All sections |
|
|
203
203
|
|
|
204
|
-
Output format: same
|
|
204
|
+
Output format: same findings shape as `heuristics.md` (rows of `| Checklist item | Element | Viewport | Finding | Impact |`), one row per problem found. End with top 3-5 findings ranked by impact tag.
|
|
205
205
|
|
|
206
|
-
Persona walkthroughs do not replace the Nielsen + Design Laws pass — they supplement it. A UI can
|
|
206
|
+
Persona walkthroughs do not replace the Nielsen + Design Laws pass — they supplement it. A UI can hold up on Nielsen and still break for Kwame.
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
name: agemon-design-dashboard
|
|
3
|
-
description: "Dense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9. IBM Plex + mono numbers, semantic palette, 4/8px grid, sparklines, tabular-nums. Trigger on: dashboard, admin panel, data-dense, analytics, Bloomberg-like, Retool-like."
|
|
4
|
-
argument-hint: "[action: build|review|polish] [target]"
|
|
5
|
-
---
|
|
1
|
+
# Preset: Dense dashboard
|
|
6
2
|
|
|
7
|
-
|
|
3
|
+
Use this preset only when the user names this look. It is a starting vocabulary for that request, never a default, and the project's brand still wins.
|
|
8
4
|
|
|
9
5
|
Pre-committed dense style: data-first, keyboard-first, operator tools. Bloomberg, Retool, Linear issues view, admin panels. Every pixel earns its place.
|
|
10
6
|
|
|
@@ -14,7 +10,7 @@ Pre-committed dense style: data-first, keyboard-first, operator tools. Bloomberg
|
|
|
14
10
|
- **MOTION_INTENSITY = 3** — micro-only. Row hover, row active tint, inline confirm. No scroll reveals in table areas.
|
|
15
11
|
- **VISUAL_DENSITY = 9** — tight 4/8px grid; whitespace earns its place.
|
|
16
12
|
|
|
17
|
-
Do not re-ask these
|
|
13
|
+
Do not re-ask these during intake. Confirm brand accent + dark/light preference only.
|
|
18
14
|
|
|
19
15
|
## Style anchors
|
|
20
16
|
|
|
@@ -29,13 +25,13 @@ Do not re-ask these in Discovery. Confirm brand accent + dark/light preference o
|
|
|
29
25
|
|
|
30
26
|
## Base rules (inherited)
|
|
31
27
|
|
|
32
|
-
|
|
28
|
+
The hard rules in `SKILL.md` and [core-rules.md](core-rules.md) apply. This file overrides knob defaults and adds style-specific guidance below. The anti-slop and craft tests still apply in full.
|
|
33
29
|
|
|
34
30
|
## Style-specific overrides
|
|
35
31
|
|
|
36
32
|
**Typography**
|
|
37
33
|
|
|
38
|
-
- UI:
|
|
34
|
+
- UI: the project's UI font. With none, choose a face built for dense data from the brief and say why; 400 / 500.
|
|
39
35
|
- Mono: IBM Plex Mono or Geist Mono for IDs, hashes, timestamps, code, version numbers, kbd.
|
|
40
36
|
- Body size: 13-14px default; 12px in dense tables is fine.
|
|
41
37
|
- `tabular-nums` on every numeric column, metric card, timestamp, duration.
|
|
@@ -88,7 +84,7 @@ All rules in `../agemon-design/SKILL.md` apply. This file overrides knob default
|
|
|
88
84
|
|
|
89
85
|
## Reference files to read first
|
|
90
86
|
|
|
91
|
-
Load these from
|
|
87
|
+
Load these from this folder:
|
|
92
88
|
|
|
93
89
|
- `dashboard.md` — primary reference; metric cards, charts, sidebar, tables
|
|
94
90
|
- `typography.md` — tabular-nums, mono pairing, scale
|
|
@@ -99,14 +95,14 @@ Skip `inspiration.md` (landing-page focused), `sound.md`.
|
|
|
99
95
|
|
|
100
96
|
## Anti-patterns for THIS style
|
|
101
97
|
|
|
102
|
-
- Serif fonts anywhere in chrome or data. Editorial is a different
|
|
98
|
+
- Serif fonts anywhere in chrome or data. Editorial is a different preset.
|
|
103
99
|
- Proportional figures in numeric columns — always `tabular-nums`.
|
|
104
100
|
- Saturated hues — reads as consumer app, not operator tool.
|
|
105
101
|
- Colored pills on every delta — plain text in semantic color.
|
|
106
102
|
- Pie charts, donut charts, 3D charts. Ever.
|
|
107
103
|
- Vertical bar chart for time-series — use area/line.
|
|
108
104
|
- Uniform colored top borders on metric cards.
|
|
109
|
-
- Card grids with heavy whitespace — if it feels airy, wrong
|
|
105
|
+
- Card grids with heavy whitespace — if it feels airy, wrong preset.
|
|
110
106
|
- Full-dark sidebar (common AI pattern) — subtle tint only.
|
|
111
107
|
- Scroll-triggered reveals or stagger animations in table areas.
|
|
112
108
|
- Hidden keyboard shortcuts — always surface `⌘K`, row shortcuts, help trigger.
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
name: agemon-design-editorial
|
|
3
|
-
description: "Editorial / magazine / long-form / Medium / Substack / content-heavy UIs. Locked knobs: CRAFT=9, MOTION=4, DENSITY=3. Serif display + humanist body, wide reading column, drop caps, OpenType. Trigger on: editorial, magazine, long-form, blog, Medium-like, Substack-like."
|
|
4
|
-
argument-hint: "[action: build|review|polish] [target]"
|
|
5
|
-
---
|
|
1
|
+
# Preset: Editorial
|
|
6
2
|
|
|
7
|
-
|
|
3
|
+
Use this preset only when the user names this look. It is a starting vocabulary for that request, never a default, and the project's brand still wins.
|
|
8
4
|
|
|
9
5
|
Pre-committed editorial style: magazine, long-form, content-first. Typography carries the hierarchy; layout serves the reading experience.
|
|
10
6
|
|
|
@@ -14,7 +10,7 @@ Pre-committed editorial style: magazine, long-form, content-first. Typography ca
|
|
|
14
10
|
- **MOTION_INTENSITY = 4** — reading-aware: fade on reveal, link hovers, no entrance stagger.
|
|
15
11
|
- **VISUAL_DENSITY = 3** — wide reading column, generous vertical rhythm, 1 item per row for features.
|
|
16
12
|
|
|
17
|
-
Do not re-ask these
|
|
13
|
+
Do not re-ask these during intake. Confirm accent + serif/sans pairing only.
|
|
18
14
|
|
|
19
15
|
## Style anchors
|
|
20
16
|
|
|
@@ -29,7 +25,7 @@ Do not re-ask these in Discovery. Confirm accent + serif/sans pairing only.
|
|
|
29
25
|
|
|
30
26
|
## Base rules (inherited)
|
|
31
27
|
|
|
32
|
-
|
|
28
|
+
The hard rules in `SKILL.md` and [core-rules.md](core-rules.md) apply. This file overrides knob defaults and adds style-specific guidance below. The anti-slop and craft tests still apply in full.
|
|
33
29
|
|
|
34
30
|
## Style-specific overrides
|
|
35
31
|
|
|
@@ -75,7 +71,7 @@ All rules in `../agemon-design/SKILL.md` apply. This file overrides knob default
|
|
|
75
71
|
|
|
76
72
|
## Reference files to read first
|
|
77
73
|
|
|
78
|
-
Load these from
|
|
74
|
+
Load these from this folder:
|
|
79
75
|
|
|
80
76
|
- `typography.md` — the primary reference for this style
|
|
81
77
|
- `layout.md` — reading column, rhythm, hierarchy
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
name: agemon-design-minimal
|
|
3
|
-
description: "Minimal / clean / Linear / Notion / Vercel / whitespace-heavy UIs. Locked knobs: CRAFT=8, MOTION=3, DENSITY=2. Monochrome + one accent, Inter/Geist, hairline borders over shadows. Trigger on: minimal, clean, Linear-like, Notion-like, Vercel-like, whitespace-heavy."
|
|
4
|
-
argument-hint: "[action: build|review|polish] [target]"
|
|
5
|
-
---
|
|
1
|
+
# Preset: Minimal
|
|
6
2
|
|
|
7
|
-
|
|
3
|
+
Use this preset only when the user names this look. It is a starting vocabulary for that request, never a default, and the project's brand still wins.
|
|
8
4
|
|
|
9
5
|
Pre-committed minimal style: editorial clean, Linear / Notion / Vercel. Whitespace is the composition. One accent, hairline borders, almost no motion.
|
|
10
6
|
|
|
@@ -14,12 +10,12 @@ Pre-committed minimal style: editorial clean, Linear / Notion / Vercel. Whitespa
|
|
|
14
10
|
- **MOTION_INTENSITY = 3** — hover + modal enter/exit only. No scroll reveals, no page transitions, no stagger.
|
|
15
11
|
- **VISUAL_DENSITY = 2** — whitespace-heavy, 1-2 items per row, generous gutters.
|
|
16
12
|
|
|
17
|
-
Do not re-ask these
|
|
13
|
+
Do not re-ask these during intake. Skip straight to accent + font confirmation if ambiguous.
|
|
18
14
|
|
|
19
15
|
## Style anchors
|
|
20
16
|
|
|
21
17
|
- Black or near-black type on white or near-white canvas. Monochrome + ONE accent.
|
|
22
|
-
-
|
|
18
|
+
- A neutral sans for body, taken from the project or chosen from the brief (state why) — never a display font.
|
|
23
19
|
- Section padding 120-200px vertical, 40-80px gutters.
|
|
24
20
|
- Hairline borders `1px solid oklch(92% 0.005 250)` in place of shadows.
|
|
25
21
|
- Typography is the hierarchy. No decorative gradients, patterns, or glass.
|
|
@@ -29,13 +25,13 @@ Do not re-ask these in Discovery. Skip straight to accent + font confirmation if
|
|
|
29
25
|
|
|
30
26
|
## Base rules (inherited)
|
|
31
27
|
|
|
32
|
-
|
|
28
|
+
The hard rules in `SKILL.md` and [core-rules.md](core-rules.md) apply. This file overrides knob defaults and adds style-specific guidance below. The anti-slop and craft tests still apply in full.
|
|
33
29
|
|
|
34
30
|
## Style-specific overrides
|
|
35
31
|
|
|
36
32
|
**Typography**
|
|
37
33
|
|
|
38
|
-
- Body:
|
|
34
|
+
- Body: the project's sans, or one chosen from the brief, 400 weight. UI emphasis: 500. Never 600/700 in body copy.
|
|
39
35
|
- `system-ui, -apple-system` as fallback stack.
|
|
40
36
|
- Headings: `tracking-tight` / `-0.02em` above 24px, 500 or 600 max.
|
|
41
37
|
- `text-wrap: balance` on headings, `text-wrap: pretty` on paragraphs.
|
|
@@ -75,7 +71,7 @@ All rules in `../agemon-design/SKILL.md` apply. This file overrides knob default
|
|
|
75
71
|
|
|
76
72
|
## Reference files to read first
|
|
77
73
|
|
|
78
|
-
Keep the reading list tight. Load only these from
|
|
74
|
+
Keep the reading list tight. Load only these from this folder:
|
|
79
75
|
|
|
80
76
|
- `layout.md` — spacing, hierarchy, composition
|
|
81
77
|
- `typography.md` — scale, readability, weight
|
|
@@ -92,6 +88,6 @@ Skip `dashboard.md`, `stack.md`, `sound.md` unless explicitly relevant.
|
|
|
92
88
|
- Scroll-triggered reveals, stagger, page transitions — even "subtle" ones.
|
|
93
89
|
- Uniform 3-column icon-heading-text feature grids.
|
|
94
90
|
- Colored shadows or glows as affordances.
|
|
95
|
-
- Dense layouts. If density feels right, this is the wrong
|
|
91
|
+
- Dense layouts. If density feels right, this is the wrong preset — switch to [preset-dashboard.md](preset-dashboard.md).
|
|
96
92
|
- Pill backgrounds on nav links or buttons by default; prefer text + underline.
|
|
97
93
|
- Section padding under 96px on desktop.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Principles Catalog
|
|
2
2
|
|
|
3
|
-
A worked-example bank of opinionated design principles, organized by product category. Use as seed material for the principles workshop in `/brief`. Do not adopt these literally — adapt to your specific product, user, and constraints. The point is to see what opinionated, actionable, distinctive principles look like in practice. Many entries are product-specific manifestations of the heuristics in `heuristics.md` — they complement the
|
|
3
|
+
A worked-example bank of opinionated design principles, organized by product category. Use as seed material for the principles workshop in `/agemon-design brief`. Do not adopt these literally — adapt to your specific product, user, and constraints. The point is to see what opinionated, actionable, distinctive principles look like in practice. Many entries are product-specific manifestations of the heuristics in `heuristics.md` — they complement the checklist, they don't replace it.
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
@@ -155,7 +155,7 @@ Test against past decisions. Take three real design calls that were debated. Wou
|
|
|
155
155
|
|
|
156
156
|
#### "Comparison is the unit of understanding"
|
|
157
157
|
**Statement:** a number without context is noise; every metric shows its comparison.
|
|
158
|
-
**Implication:** primary metrics always show period-over-period change (vs. prior week, vs. target).
|
|
158
|
+
**Implication:** primary metrics always show period-over-period change (vs. prior week, vs. target). A sparkline only where the trend is the point; otherwise the delta as text. Trend direction is signaled by color and icon, not just a number. Tables have inline comparison columns. No standalone counts without a denominator or a delta.
|
|
159
159
|
**Opposite ruled out:** "show current state; let users query for comparison" — requiring users to manually request comparison on every visit is an analysis tax. Comparison belongs in the default view.
|
|
160
160
|
|
|
161
161
|
#### "Drill-down is always one click"
|
|
@@ -275,7 +275,7 @@ These are platitudes that masquerade as principles. They look opinionated but ru
|
|
|
275
275
|
- **"Modern design"** — modern compared to what, when? This is an aesthetic preference with no design resolution power.
|
|
276
276
|
- **"We care about our users"** — a mission statement, not a principle. Put it in the README, not the brief.
|
|
277
277
|
|
|
278
|
-
A principle that produces no design implication and rules out no alternative is a slogan. Slogans go in marketing copy, not in
|
|
278
|
+
A principle that produces no design implication and rules out no alternative is a slogan. Slogans go in marketing copy, not in the brief.
|
|
279
279
|
|
|
280
280
|
---
|
|
281
281
|
|