@event4u/agent-config 7.1.0 → 7.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude-plugin/marketplace.json +2 -1
- package/CHANGELOG.md +80 -0
- package/README.md +9 -10
- package/dist/agent-src/rules/brand-source-of-truth.md +10 -0
- package/dist/agent-src/rules/delegation-policy.md +1 -0
- package/dist/agent-src/rules/legal-safety-floor.md +42 -4
- package/dist/agent-src/rules/output-discipline.md +85 -0
- package/dist/agent-src/rules/telegraph-speak.md +4 -1
- package/dist/agent-src/rules/token-budget-discipline.md +94 -0
- package/dist/agent-src/skills/accessibility-auditor/SKILL.md +20 -5
- package/dist/agent-src/skills/blade-ui/SKILL.md +9 -0
- package/dist/agent-src/skills/bug-analyzer/evals/evals.json +13 -0
- package/dist/agent-src/skills/code-review/evals/evals.json +21 -0
- package/dist/agent-src/skills/contract-review/SKILL.md +3 -2
- package/dist/agent-src/skills/dashboard-design/SKILL.md +21 -5
- package/dist/agent-src/skills/design-intelligence/SKILL.md +96 -0
- package/dist/agent-src/skills/design-review/SKILL.md +83 -0
- package/dist/agent-src/skills/design-system-capture/SKILL.md +234 -0
- package/dist/agent-src/skills/design-tokens/SKILL.md +1 -0
- package/dist/agent-src/skills/dpa-review/SKILL.md +3 -2
- package/dist/agent-src/skills/existing-ui-audit/SKILL.md +15 -4
- package/dist/agent-src/skills/fe-design/SKILL.md +98 -16
- package/dist/agent-src/skills/flux/SKILL.md +8 -0
- package/dist/agent-src/skills/iconography/SKILL.md +1 -0
- package/dist/agent-src/skills/legal-intake-triage/SKILL.md +3 -2
- package/dist/agent-src/skills/legal-practice-profile/SKILL.md +3 -2
- package/dist/agent-src/skills/livewire/SKILL.md +8 -0
- package/dist/agent-src/skills/nda-triage/SKILL.md +3 -2
- package/dist/agent-src/skills/react-shadcn-ui/SKILL.md +21 -9
- package/dist/agent-src/skills/skill-writing/SKILL.md +18 -0
- package/dist/agent-src/skills/subagent-orchestration/SKILL.md +7 -10
- package/dist/agent-src/skills/tailwind-engineer/SKILL.md +17 -7
- package/dist/agent-src/skills/typography-system/SKILL.md +14 -0
- package/dist/agent-src/skills/ui-component-architect/SKILL.md +9 -0
- package/dist/discovery/deprecation-report.md +1 -1
- package/dist/discovery/discovery-manifest.json +123 -59
- package/dist/discovery/discovery-manifest.json.sha256 +1 -1
- package/dist/discovery/discovery-manifest.summary.md +8 -8
- package/dist/discovery/orphan-report.md +1 -1
- package/dist/discovery/packs.json +18 -15
- package/dist/discovery/trust-report.md +5 -5
- package/dist/discovery/workspaces.json +15 -12
- package/dist/mcp/registry-manifest.json +3 -3
- package/dist/router.json +1 -1
- package/dist/server/routes/wizard.js +4 -3
- package/dist/server/routes/wizard.js.map +1 -1
- package/dist/server/schemas/settings.js +9 -0
- package/dist/server/schemas/settings.js.map +1 -1
- package/dist/ui/assets/{index-CoQo90sz.js → index-UjcTG_9O.js} +2 -2
- package/dist/ui/assets/index-UjcTG_9O.js.map +1 -0
- package/dist/ui/index.html +1 -1
- package/docs/RELEASE_STORY_TEMPLATE.md +37 -0
- package/docs/architecture.md +3 -3
- package/docs/contracts/capability-boundary.md +64 -0
- package/docs/contracts/discovery-manifest.schema.json +2 -2
- package/docs/contracts/governance-enforcement-projection.md +154 -0
- package/docs/contracts/package-self-orientation.md +3 -0
- package/docs/contracts/subagent-boundary.md +54 -0
- package/docs/decisions/ADR-013-discovery-frontmatter-contract.md +13 -0
- package/docs/decisions/ADR-107-legal-domain-pack-adoption.md +19 -0
- package/docs/enforcement-by-host.md +35 -0
- package/docs/getting-started.md +1 -1
- package/docs/guidelines/agent-infra/domain-pack-architecture.md +1 -0
- package/docs/guidelines/design-antipatterns-triggers.json +17 -0
- package/docs/guidelines/design-antipatterns.md +170 -0
- package/docs/guidelines/design-modes.md +97 -0
- package/package.json +1 -1
- package/src/config/agent-settings.template.yml +31 -0
- package/src/config/discovery/packs.yml +16 -5
- package/src/config/discovery/workspaces.yml +4 -4
- package/src/scripts/_lib/eval_discrimination.ts +95 -0
- package/src/scripts/_lib/trigger_routers.ts +268 -0
- package/src/scripts/bench_ab_v2_run.ts +38 -0
- package/src/scripts/check_trunk_drift.ts +67 -0
- package/src/scripts/cross_model_smoke.ts +245 -0
- package/src/scripts/lint_design_quality.ts +321 -0
- package/src/scripts/lint_discovery_vocabulary.ts +4 -4
- package/src/scripts/lint_legal_pack.ts +62 -4
- package/src/scripts/lint_output_slop.ts +223 -0
- package/src/scripts/lint_pack_risk_class.ts +79 -0
- package/src/scripts/run_skill_evals.ts +38 -0
- package/src/scripts/schemas/agent-settings.schema.json +12 -0
- package/src/scripts/schemas/skill.schema.json +5 -0
- package/src/scripts/skill_linter.ts +26 -10
- package/dist/ui/assets/index-CoQo90sz.js.map +0 -1
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
# Design Anti-Patterns — AI-Slop Catalog
|
|
2
|
+
|
|
3
|
+
> Lazy-loaded reference guideline. Pull this before proposing, generating, or
|
|
4
|
+
> reviewing any UI. Used by `design-intelligence`, `fe-design`, `design-review`,
|
|
5
|
+
> `existing-ui-audit`.
|
|
6
|
+
|
|
7
|
+
This catalog enumerates patterns that make AI-generated UI **recognizably
|
|
8
|
+
AI-generated**. Every entry carries a concrete override condition — the goal is
|
|
9
|
+
not prohibition but deliberateness. A pattern on this list used *knowingly* for
|
|
10
|
+
a specific brief is a design decision; used *reflexively* from a default, it is
|
|
11
|
+
slop.
|
|
12
|
+
|
|
13
|
+
**How to use:** Before generating UI, scan the applicable category. Flag any
|
|
14
|
+
pattern you were about to reach for. Either (a) choose a different approach, or
|
|
15
|
+
(b) invoke the override condition and state the reason explicitly in the brief.
|
|
16
|
+
|
|
17
|
+
**Agent self-check principle:** These are guidance rules, not linter rules. The
|
|
18
|
+
agent reads the brief, checks its first impulse against this catalog, and adjusts
|
|
19
|
+
or overrides. The enforceable subset (contrast ratio, font-size, heading
|
|
20
|
+
hierarchy, reduced-motion, focus indicator) is in `lint_design_quality`
|
|
21
|
+
(Phase 5).
|
|
22
|
+
|
|
23
|
+
**Who owns what (boundary — avoid drift):**
|
|
24
|
+
|
|
25
|
+
| Layer | Owns | Artifact |
|
|
26
|
+
|---|---|---|
|
|
27
|
+
| **Guidance** | Subjective taste — Visual / Typography / Color / Layout / Copy patterns, override judgment, the originality self-test | this catalog |
|
|
28
|
+
| **Enforcement** | Objective floors — Q1–Q6 (WCAG contrast, font-size, line-length, reduced-motion, heading hierarchy, focus indicator) as exit-code-2 CI | `lint_design_quality` |
|
|
29
|
+
| **Audit method** | HOW to test WCAG (keyboard nav, ARIA, screen-reader procedures) | `accessibility-auditor` |
|
|
30
|
+
| **Stack manifestation** | Concrete Tailwind class / hex bans, shadcn defaults | `tailwind-engineer`, `react-shadcn-ui` (per `framework-neutrality-in-generic-skills`) |
|
|
31
|
+
| **Register** | Brand mode vs product mode — which patterns apply | `docs/guidelines/design-modes.md` |
|
|
32
|
+
|
|
33
|
+
This catalog is the canonical *index*; it states the pattern stack-agnostically.
|
|
34
|
+
The stack-specific bans live in the apply skills and link back here by entry ID.
|
|
35
|
+
The objective floors are cited from the linter, never re-eyeballed by an agent.
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Visual
|
|
40
|
+
|
|
41
|
+
| # | Pattern | Why it reads as AI-generated | Override condition |
|
|
42
|
+
|---|---|---|---|
|
|
43
|
+
| V1 | Side-stripe `border-left` or `border-right` > 1px as a colored accent | The single most recognizable AI-UI signature; every scaffold-default card uses it | Brand token explicitly defines a stripe; document the decision in the design brief |
|
|
44
|
+
| V2 | Glassmorphism as decoration (`backdrop-blur` + `bg-white/10`) with no functional depth hierarchy | Model defaults to it for "premium feel"; result looks like 2021 Material You clip-art | Element genuinely sits above a complex, blurred background layer; use sparingly and only for top-level floating surfaces |
|
|
45
|
+
| V3 | Ghost card: `border: 1px solid` + box-shadow ≥ 16px spread together | The combination creates visual noise — the ghost card signals no confident decision about depth | Choose either border OR shadow to indicate depth; never both on the same surface |
|
|
46
|
+
| V4 | Over-rounded small cards or badges: `border-radius` > 16px on elements < 200px wide | Excessive rounding on small surfaces looks toy-ish; standard cap is 12–16px | Pill shape (`border-radius: 9999px`) is intentional on single-line tags/chips only |
|
|
47
|
+
| V5 | Hand-drawn or illustrated SVG icons mixed with crisp icon-system icons | Visual register collision; instantly reads as "generated asset" | Intentional illustrative section (hero illustration, empty-state art); isolate from the icon system |
|
|
48
|
+
| V6 | Repeating diagonal stripes as a background texture | A cliché background default; reads as generated CSS art | Brand explicitly uses pattern backgrounds (e.g., a textile brand); document the stripe definition |
|
|
49
|
+
| V7 | Nested cards: a card inside a card inside a card | Depth hierarchy collapses; user cannot parse elevation intent | A truly three-level hierarchy (e.g., project → board → card); ensure each level has distinct visual weight |
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## Typography
|
|
54
|
+
|
|
55
|
+
| # | Pattern | Why it reads as AI-generated | Override condition |
|
|
56
|
+
|---|---|---|---|
|
|
57
|
+
| T1 | Flat type hierarchy: body and headings use the same optical weight and nearly the same size | Type hierarchy is invisible; user cannot scan the page | Deliberately minimal aesthetic where all text is body-weight; must be an explicit brand decision |
|
|
58
|
+
| T2 | Oversized italic serif as the primary hero headline | The "AI startup landing page" template; seen on ~60% of AI-generated marketing pages | Brand adopts editorial-magazine aesthetic with a documented italic serif rationale |
|
|
59
|
+
| T3 | Icon tile (small rounded-square container) above heading | The universal AI feature-card template; reads as scaffold | Listed features genuinely benefit from visual-icon-then-title affordance AND the icons are custom, not library defaults |
|
|
60
|
+
| T4 | Eyebrow / ALL-CAPS label above every section heading | Overuse collapses the emphasis; maximum is 1 eyebrow per 3 sections (countable: grep tracking classes) | Used for genuine section-type differentiation with meaningful vocabulary (not just "FEATURES", "PRICING") |
|
|
61
|
+
| T5 | Repeated section kickers ("Our mission", "What we offer", "Why choose us") | Filler vocabulary; every AI-generated page has the same three section titles | Every kicker is substantive and uses brand-specific vocabulary, not generic marketing speak |
|
|
62
|
+
| T6 | Crushed letter-spacing on display text (`letter-spacing` < −0.04em) | Below −0.04em glyphs collide optically; reads as "designer-ish effect" with no grounding | Intentional tight display treatment with a documented minimum floor; verify at the actual render size |
|
|
63
|
+
| T7 | Overused fonts without a brand reason: Inter, Roboto, DM Sans, Geist, Space Grotesk, Instrument Serif | These are the default AI-coding-tool font picks; every generated UI uses one of them | Brand has explicitly adopted one of these AND there is a documented reason (e.g., Inter for its variable metrics in a data-dense dashboard) |
|
|
64
|
+
| T8 | Single typeface for everything | Missed typographic contrast opportunity; all-Inter reads as "I did not think about fonts" | Intentional mono-typeface aesthetic (e.g., terminal-inspired); must be stated in the brief |
|
|
65
|
+
| T9 | All-caps body paragraphs or field labels | Reduces legibility below WCAG AA for sustained reading; reads as flair over function | Short UI labels (e.g., button text in a brutalist layout); never for body paragraphs |
|
|
66
|
+
| T10 | Wide letter-spacing on body text (`letter-spacing` > 0.05em) | Reduces readability for sustained reading; reserved for display use | Display text (headlines, pull quotes) where intentional tracking is a brand element |
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## Color
|
|
71
|
+
|
|
72
|
+
| # | Pattern | Why it reads as AI-generated | Override condition |
|
|
73
|
+
|---|---|---|---|
|
|
74
|
+
| C1 | Purple/violet + cyan-on-dark palette as the primary scheme | The most recognizable AI-UI color combination in 2024–2026; instantly signals "generated" | Brand color system genuinely defines a violet primary; must come from `brand-to-tokens`, not from model defaults |
|
|
75
|
+
| C2 | Gradient text via `background-clip: text` as a primary accent | Overused to the point of invisibility; also has rendering edge cases on some platforms | Headline treatment in a brand that explicitly uses gradient identity (e.g., a product whose logo is a gradient) |
|
|
76
|
+
| C3 | Glowing colored accents on dark mode (bright neon `box-shadow` or `text-shadow`) | Looks like a 2020 gaming UI; reads as an AI attempt at "moody" | Brand explicitly defines neon accents with a documented usage rule (e.g., error or alert states in a security product) |
|
|
77
|
+
| C4 | Gray text on colored background without WCAG AA check | Muted gray chosen for "elegance" often fails 4.5:1 contrast; the failure is invisible until audited | Any use — always verify the contrast ratio; if it fails, either darken the text or lighten/darken the background |
|
|
78
|
+
| C5 | Cream/sand body background (OKLCH L 0.84–0.97, C < 0.06) with brass/clay/oxblood accents | The 2025 "premium-consumer" AI palette; every generated "sophisticated" product uses this exact combination | Brand has an explicit warm-neutral design language documented in `brand-to-tokens`; the palette is first-party, not a default reach |
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## Layout
|
|
83
|
+
|
|
84
|
+
| # | Pattern | Why it reads as AI-generated | Override condition |
|
|
85
|
+
|---|---|---|---|
|
|
86
|
+
| L1 | Hero metric template: giant number, small label, 3–4 stats in a row, gradient | The default SaaS dashboard hero; appears on ~70% of AI-generated dashboard screens | Data storytelling genuinely requires a primary metric with supporting context; must vary the arrangement |
|
|
87
|
+
| L2 | Three identical feature cards in a grid with the same visual weight | The scaffold-default; no visual rhythm, no hierarchy among features | Product genuinely has three equally weighted features; must still vary padding, or use a different composition |
|
|
88
|
+
| L3 | Monotonous spacing: one spacing value (usually 24px) used for everything | Spacing is rhythm; uniform spacing collapses the hierarchy of proximity | Intentional grid where every element has equal weight; must document the grid definition |
|
|
89
|
+
| L4 | Numbered section markers (01 / 02 / 03) as a primary section-order device | Universal AI-generated marketing page tell; seen on virtually every generated landing page | A genuinely numbered process or sequenced guide where the step number carries meaning beyond decoration |
|
|
90
|
+
| L5 | Line length > 80ch in body copy without column constraint | Reduces readability; WCAG recommends 45–75 characters; beyond 80 the eye struggles to track | Data-dense dashboards where column width is driven by tabular data, not narrative text |
|
|
91
|
+
| L6 | `position: absolute` dropdown inside `overflow: hidden` container | Dropdown clips; a common AI-generated layout bug | Refactor: use `<dialog>`, the Popover API, or `position: fixed` / portal to escape the stacking context |
|
|
92
|
+
| L7 | Content that overflows its container | Text truncation or reflow failures at non-default viewport widths; reads as untested | Never acceptable in production output; test at 320px, 768px, 1280px minimally |
|
|
93
|
+
| L8 | Z-index values of 99, 999, 9999 without a semantic z-index scale | Magic numbers; the first time two elements compete, the scale breaks | Establish a named semantic z-index scale (`--z-modal: 400`, `--z-toast: 500`, etc.) and use it |
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## Motion
|
|
98
|
+
|
|
99
|
+
| # | Pattern | Why it reads as AI-generated | Override condition |
|
|
100
|
+
|---|---|---|---|
|
|
101
|
+
| M1 | Bounce or elastic easing curves on UI elements | Bounce draws attention to the animation itself; UI motion should serve the action, not perform | Intentional playful affordance (game UI, onboarding celebration state); must be brief and non-repeating |
|
|
102
|
+
| M2 | Animating layout properties (width, height, top, left, padding) | Triggers browser layout recalculation; janky on mid-range devices; always solvable with `transform` | Never — use `transform: scaleX()` for width-like effects, `transform: translateY()` for position |
|
|
103
|
+
| M3 | Animating `<img>` element on hover (scale, filter, transform) | Triggers composite + image decode; often causes content shift | Animate the card's background, border, or shadow instead; leave the image static |
|
|
104
|
+
| M4 | `transition: all` shorthand | Animates every property including layout, color, opacity simultaneously; unpredictable and expensive | Enumerate only the properties that should animate: `transition: transform 200ms ease-out, opacity 200ms` |
|
|
105
|
+
| M5 | Missing `@media (prefers-reduced-motion: reduce)` alternative for any animation | Accessibility violation; vestibular disorders make animated UI unusable | Never acceptable; always add a `prefers-reduced-motion` variant — gentler animation (reduced distance/opacity) is preferred over `display: none` |
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## Copy
|
|
110
|
+
|
|
111
|
+
| # | Pattern | Why it reads as AI-generated | Override condition |
|
|
112
|
+
|---|---|---|---|
|
|
113
|
+
| CP1 | Em-dash (`—`) overuse | The #1 syntactic LLM signature; appears in AI copy at 3–5× the frequency of human editorial copy; maximum 2 per 500 words | Specific editorial voice that uses em-dashes deliberately; count them before shipping |
|
|
114
|
+
| CP2 | Marketing buzzwords: streamline, empower, supercharge, world-class, enterprise-grade, seamlessly, robust, leverage | These words carry no information; an AI-slop test: replace each with nothing — the sentence still communicates the same thing | No override; if a word can be deleted without loss, delete it |
|
|
115
|
+
| CP3 | Aphoristic manufactured contrast ("We don't do X. We do Y." / "Not just A, but B.") | A generated sentence rhythm that sounds like brand writing but carries no specificity | Aphoristic copy is legitimate when the contrast reveals a genuine product distinction; test by asking whether the Y side says something concrete |
|
|
116
|
+
| CP4 | "Theater" framing — copy that announces what the product does without saying how or why | "The platform for modern teams." communicates nothing; it is content-shaped noise | Every tagline must pass the "so what" test: can a skeptic follow it with "but how?" and get a concrete answer? |
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
## Quality floors — measurable thresholds
|
|
121
|
+
|
|
122
|
+
These are not stylistic — they are objective quality failures detectable without
|
|
123
|
+
aesthetic judgment. The `lint_design_quality` CI linter enforces a subset of
|
|
124
|
+
these. The rest are agent self-checks.
|
|
125
|
+
|
|
126
|
+
| # | Threshold | Measurement | CI-enforced? |
|
|
127
|
+
|---|---|---|---|
|
|
128
|
+
| Q1 | Text contrast ≥ 4.5:1 normal / ≥ 3:1 large text (WCAG AA) | `contrastRatio(text, bg) < threshold` | Yes (`lint_design_quality`) |
|
|
129
|
+
| Q2 | Body `font-size` ≥ 14px (floor); ≥ 16px strongly preferred | Computed `font-size` on `p`, `li`, `td` | Yes |
|
|
130
|
+
| Q3 | Line length ≤ 75 characters (prose) | Character count before soft wrap | Yes |
|
|
131
|
+
| Q4 | All `@keyframes` / `animation` have a `prefers-reduced-motion` alternative | CSS `@media` check | Yes |
|
|
132
|
+
| Q5 | Heading levels not skipped (h1→h3 direct, not h1→h4) | DOM heading sequence | Yes |
|
|
133
|
+
| Q6 | All interactive elements have a `:focus-visible` indicator | CSS rule check | Yes |
|
|
134
|
+
| Q7 | Display `letter-spacing` floor: ≥ −0.04em (tighter reads cramped) | Computed tracking | Agent self-check |
|
|
135
|
+
| Q8 | `line-height` ≥ 1.3 on body text | Computed `line-height` | Agent self-check |
|
|
136
|
+
| Q9 | Small-card `border-radius` cap: 12–16px (not 24px+) | Computed `border-radius` on elements < 200px | Agent self-check |
|
|
137
|
+
| Q10 | Body background: avoid OKLCH L 0.84–0.97, C < 0.06 (cream/sand) unless brand-defined | Color space calculation | Agent self-check |
|
|
138
|
+
| Q11 | Padding floors: ≥ 8px (inline elements), ≥ 16px (card/panel bodies) | Computed padding | Agent self-check |
|
|
139
|
+
| Q12 | Justified text only with CSS hyphenation (`hyphens: auto`) | Presence of `text-align: justify` without `hyphens` | Agent self-check |
|
|
140
|
+
|
|
141
|
+
---
|
|
142
|
+
|
|
143
|
+
## The AI-slop originality self-test
|
|
144
|
+
|
|
145
|
+
Before finalizing any UI design, run this two-tier check:
|
|
146
|
+
|
|
147
|
+
1. **Category test:** Could someone guess the aesthetic from the product
|
|
148
|
+
category alone? (e.g., "SaaS → dark mode + purple gradient" /
|
|
149
|
+
"fintech → navy + gold" / "health → teal + rounded sans"). If yes,
|
|
150
|
+
rework the concept.
|
|
151
|
+
|
|
152
|
+
2. **Anti-reference test:** Could someone still guess it after knowing the
|
|
153
|
+
category AND having seen 3 references you explicitly avoided? If yes,
|
|
154
|
+
dig deeper. A direction that is merely "not the worst cliché" is still
|
|
155
|
+
a cliché.
|
|
156
|
+
|
|
157
|
+
The bar: a visitor should ask "how was this made?", not "which AI made this?"
|
|
158
|
+
|
|
159
|
+
---
|
|
160
|
+
|
|
161
|
+
## See also
|
|
162
|
+
|
|
163
|
+
- `design-intelligence` — corpus-grounded style/color/typography selection
|
|
164
|
+
- `fe-design` — stack-agnostic heuristics (form, table, responsive, a11y)
|
|
165
|
+
- `design-review` — structured UI/UX review methodology
|
|
166
|
+
- `existing-ui-audit` — mandatory pre-step: inventory before designing
|
|
167
|
+
- `motion-choreographer` — animation heuristics (should-it, which-easing, how-much)
|
|
168
|
+
- `typography-system` — modular-scale construction and pairing
|
|
169
|
+
- `accessibility-auditor` — WCAG audit method
|
|
170
|
+
- `brand-to-tokens` — first-party brand token extraction (the legitimate override source for most anti-patterns above)
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# Design Modes — Brand vs Product
|
|
2
|
+
|
|
3
|
+
> Reference doc. Pull this when deciding which design skills to prioritize
|
|
4
|
+
> or when the brief is ambiguous about the design register.
|
|
5
|
+
|
|
6
|
+
## The two registers
|
|
7
|
+
|
|
8
|
+
Every design task operates in one of two registers. Getting the register
|
|
9
|
+
wrong is the root cause of most AI-generated design failures:
|
|
10
|
+
|
|
11
|
+
| | Brand mode | Product mode |
|
|
12
|
+
|---|---|---|
|
|
13
|
+
| **Core thesis** | The impression IS the product | Design serves the task |
|
|
14
|
+
| **Primary failure** | Flatness / genericness — looks like every other AI startup | Strangeness without purpose — "clever" choices that obscure the tool |
|
|
15
|
+
| **The user's question** | "How was this made?" (genuine curiosity) | "Where do I click?" (the tool disappears into the task) |
|
|
16
|
+
| **Key skill cluster** | `brand-identity`, `iconography`, `fe-design § Aesthetic direction`, `design-intelligence` | `accessibility-auditor`, `ui-component-architect`, `fe-design § Table/Form Design` |
|
|
17
|
+
| **Typography strategy** | Distinctive pairing — two contrasting families, deliberate tracking | One reliable family — Inter or equivalent; predictable hierarchy |
|
|
18
|
+
| **Color strategy** | Brand identity — often unexpected; the palette IS the differentiator | Semantic function — primary/danger/success/neutral; predictable meaning |
|
|
19
|
+
| **Motion strategy** | Expressive — motion reinforces the brand's personality | Utilitarian — motion confirms state changes; nothing decorative |
|
|
20
|
+
| **Spacing strategy** | Breathing room; generous whitespace as a brand signal | Dense/efficient; optimize for information density |
|
|
21
|
+
| **Success criterion** | Originality test: a skeptic can't guess "which AI made this?" | Earned familiarity: the tool disappears; users focus on their task |
|
|
22
|
+
|
|
23
|
+
## How to determine the register
|
|
24
|
+
|
|
25
|
+
Ask: **What is the output of this UI being used for?**
|
|
26
|
+
|
|
27
|
+
- A consumer-facing surface where the FIRST impression determines whether the
|
|
28
|
+
user trusts/buys → **Brand mode**. The product has 3 seconds; every pixel
|
|
29
|
+
contributes to the brand's identity.
|
|
30
|
+
|
|
31
|
+
- An internal tool, dashboard, admin panel, or workflow-critical surface where
|
|
32
|
+
users return dozens of times per day → **Product mode**. Strangeness wastes
|
|
33
|
+
their time; predictability builds trust.
|
|
34
|
+
|
|
35
|
+
- A marketing landing page → **Brand mode**. It has one job: create desire.
|
|
36
|
+
|
|
37
|
+
- A data entry form → **Product mode**. It has one job: accept correct data.
|
|
38
|
+
|
|
39
|
+
**Ambiguous cases:** many products have both (a brand-heavy landing page +
|
|
40
|
+
a product-mode dashboard). The register applies per-surface, not per-product.
|
|
41
|
+
When unclear: ask — *"Is the user here to be impressed, or to accomplish a
|
|
42
|
+
task?"*
|
|
43
|
+
|
|
44
|
+
## Brand-mode failure modes
|
|
45
|
+
|
|
46
|
+
- **Genericness:** Choosing the safe AI-slop palette (cream + brass, purple/violet gradient, three equal cards). The product is invisible in its category. Cross-check with `docs/guidelines/design-antipatterns.md` § Color and Visual.
|
|
47
|
+
- **Inconsistency:** Brand direction picked for the hero, abandoned for the body. The page reads as two different products.
|
|
48
|
+
- **Aesthetics-without-function:** Beautiful but confusing navigation, stunning hero with no CTA clarity.
|
|
49
|
+
|
|
50
|
+
## Product-mode failure modes
|
|
51
|
+
|
|
52
|
+
- **Strangeness-without-purpose:** A clever typographic choice that makes the CTA harder to scan. A gradient background on a data table. An animated page transition in an admin panel.
|
|
53
|
+
- **Premature originality:** Reinventing a standard UI pattern (data table, form validation, dropdown) when the standard is what users expect.
|
|
54
|
+
- **Over-engineering:** Five different card elevations in a dashboard that needs two.
|
|
55
|
+
|
|
56
|
+
## The AI-slop originality self-test (applies to brand mode primarily)
|
|
57
|
+
|
|
58
|
+
Run BOTH tiers before approving a brand-mode design direction:
|
|
59
|
+
|
|
60
|
+
**Tier 1 — Category test:**
|
|
61
|
+
Would a designer seeing 20 AI-generated [product category] UIs recognize this
|
|
62
|
+
aesthetic as part of that category's default? (e.g., "SaaS → dark mode + purple
|
|
63
|
+
gradient"; "health app → teal + rounded sans serif + white space").
|
|
64
|
+
- If YES: rework the concept. The design is invisible in its category.
|
|
65
|
+
- If NO: proceed to Tier 2.
|
|
66
|
+
|
|
67
|
+
**Tier 2 — Anti-reference test:**
|
|
68
|
+
Given the category AND three explicit aesthetics you've avoided — could a
|
|
69
|
+
skeptic still guess the direction? (e.g., "fintech that's not navy-and-gold,
|
|
70
|
+
not minimal white, not brutalist → everyone picks terminal dark").
|
|
71
|
+
- If YES: dig deeper. "Avoiding the worst cliché" is not differentiation.
|
|
72
|
+
- If NO: the direction is genuinely distinctive.
|
|
73
|
+
|
|
74
|
+
**The bar:** a visitor should ask "how was this made?" not "which AI made this?"
|
|
75
|
+
|
|
76
|
+
## Routing to skills by mode
|
|
77
|
+
|
|
78
|
+
**Brand mode brief:**
|
|
79
|
+
1. `design-intelligence` (grounded style/palette/typography selection — run the corpus first)
|
|
80
|
+
2. `brand-identity` (archetype → token system)
|
|
81
|
+
3. `iconography` (icon system selection for brand expression)
|
|
82
|
+
4. `fe-design § Aesthetic direction` (direction → composition → typography → color)
|
|
83
|
+
|
|
84
|
+
**Product mode brief:**
|
|
85
|
+
1. `existing-ui-audit` (mandatory — inventory first)
|
|
86
|
+
2. `accessibility-auditor` (WCAG compliance from the start)
|
|
87
|
+
3. `ui-component-architect` (reuse existing primitives)
|
|
88
|
+
4. `fe-design § Component Architecture, Form Design, Table Design` (standard patterns)
|
|
89
|
+
|
|
90
|
+
**Both modes:** `design-antipatterns` (always pull), `design-review` (with anti-slop check)
|
|
91
|
+
|
|
92
|
+
## See also
|
|
93
|
+
|
|
94
|
+
- `docs/guidelines/design-antipatterns.md` — the slop-tell catalog; brand mode especially needs this
|
|
95
|
+
- `brand-source-of-truth` — when a registered brand profile is present, it governs
|
|
96
|
+
- `brand-consistency` — validates emitted artifacts against the brand profile
|
|
97
|
+
- `design-system-capture` — DESIGN.md/PRODUCT.md capture the mode's decisions for cross-task consistency
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@event4u/agent-config",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.3.0",
|
|
4
4
|
"description": "Universal AI Agent OS — audited skills, governance rules, commands, and templates for AI coding tools (Claude Code, Cursor, Windsurf, Copilot).",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"private": false,
|
|
@@ -84,6 +84,24 @@ rule_loading_tier: __RULE_LOADING_TIER__
|
|
|
84
84
|
lean_projection:
|
|
85
85
|
mode: eager-all
|
|
86
86
|
|
|
87
|
+
# --- Token-rich skills governance ---
|
|
88
|
+
#
|
|
89
|
+
# Skills marked `token_budget_class: rich` in their frontmatter are exempt
|
|
90
|
+
# from telegraph-speak condensation and thin-projector trimming. They load
|
|
91
|
+
# their full content (examples, tables, code blocks) to maximize design-output
|
|
92
|
+
# quality. This setting controls whether that extra spend is allowed globally.
|
|
93
|
+
#
|
|
94
|
+
# Values:
|
|
95
|
+
# on — rich skills load in full (default; recommended for design-intensive workflows)
|
|
96
|
+
# off — rich skills fall back to standard condensed behavior
|
|
97
|
+
# ask — before loading a rich skill, the agent surfaces an estimated token
|
|
98
|
+
# delta (≈ file size in chars / 4, reported in tokens not dollars) and
|
|
99
|
+
# asks the user once; the answer is cached for the session
|
|
100
|
+
#
|
|
101
|
+
# Configurable in the browser setup wizard (Setup → Skills → Token budget).
|
|
102
|
+
tokens:
|
|
103
|
+
rich_skills: on
|
|
104
|
+
|
|
87
105
|
# --- Cost tracking + budget enforcement ---
|
|
88
106
|
#
|
|
89
107
|
# USD budgets evaluated against `agents/cost-tracking/sessions.jsonl` by
|
|
@@ -785,6 +803,19 @@ update_check:
|
|
|
785
803
|
explain:
|
|
786
804
|
enable_last: true
|
|
787
805
|
|
|
806
|
+
# ─── legal-review-prep consent gate ──────────────────────────────────────────
|
|
807
|
+
# The legal-review-prep pack is high-risk (EU/DE legal review-prep, NOT legal
|
|
808
|
+
# advice). It stays inactive until you acknowledge it is not legal advice — set
|
|
809
|
+
# by the setup wizard's consent checkbox, or here by hand. The legal-safety-floor
|
|
810
|
+
# rule refuses every legal-review-prep skill until `acknowledged: true`.
|
|
811
|
+
legal_review_prep:
|
|
812
|
+
acknowledged: false
|
|
813
|
+
consented_at: ""
|
|
814
|
+
# Gate legal work-product behind a multi-model council / deep-research pass
|
|
815
|
+
# (defense-in-depth + audit trail; fail-closed). Off lets single-model legal
|
|
816
|
+
# output through — not recommended for this high-risk pack.
|
|
817
|
+
require_council: true
|
|
818
|
+
|
|
788
819
|
# ─── secrets ────────────────────────────────────────────────────────────────
|
|
789
820
|
# Local-only secret material. This whole file is gitignored, so the key never
|
|
790
821
|
# enters the tracked tree.
|
|
@@ -167,6 +167,7 @@
|
|
|
167
167
|
workspaces: [finance, founder]
|
|
168
168
|
trust_level_default: professional
|
|
169
169
|
domain: finance
|
|
170
|
+
risk_class: medium # advisory (finance-safety-floor): not-financial-advice disclaimer
|
|
170
171
|
size_class: medium
|
|
171
172
|
onboarding:
|
|
172
173
|
first_win_doc: FIRST_WIN.md
|
|
@@ -180,6 +181,7 @@
|
|
|
180
181
|
requires: [finance-basic]
|
|
181
182
|
trust_level_default: core
|
|
182
183
|
domain: finance
|
|
184
|
+
risk_class: medium # advisory (finance-safety-floor)
|
|
183
185
|
size_class: medium
|
|
184
186
|
|
|
185
187
|
- id: gtm-sales
|
|
@@ -223,6 +225,7 @@
|
|
|
223
225
|
trust_level_default: core
|
|
224
226
|
domain: founder
|
|
225
227
|
size_class: medium
|
|
228
|
+
risk_class: medium # advisory (strategy-safety-floor)
|
|
226
229
|
onboarding:
|
|
227
230
|
first_win_doc: FIRST_WIN.md
|
|
228
231
|
example_workflow: vision-articulation
|
|
@@ -240,14 +243,22 @@
|
|
|
240
243
|
workspaces: [construction]
|
|
241
244
|
trust_level_default: professional
|
|
242
245
|
|
|
243
|
-
- id: legal
|
|
244
|
-
label: Legal
|
|
245
|
-
description: "NOT LEGAL ADVICE — a research/drafting aid, not a substitute for a lawyer.
|
|
246
|
-
workspaces: [legal]
|
|
247
|
-
trust_level_default: experimental
|
|
246
|
+
- id: legal-review-prep
|
|
247
|
+
label: Legal Review Prep
|
|
248
|
+
description: "NOT LEGAL ADVICE — a research/drafting aid to PREPARE for attorney review, not a substitute for a lawyer. EU/DE-scoped contract/NDA/DPA review and triage, procedure-only (no default legal positions); general information + templates only, never individual-case examination; every output a draft for attorney review. Opt-in + council-gated. See LEGAL_NOTICE.md."
|
|
249
|
+
workspaces: [legal-review-prep]
|
|
250
|
+
trust_level_default: experimental
|
|
248
251
|
surface_tier: lab
|
|
249
252
|
domain: legal
|
|
250
253
|
size_class: medium
|
|
254
|
+
# High-risk posture (road-to-legal-review-prep Phase 4). Documentation-first;
|
|
255
|
+
# enforcement lives in the legal-safety-floor rule + consent gate + lint.
|
|
256
|
+
risk_class: high
|
|
257
|
+
risk_profile: rdg_regulated_eu_de
|
|
258
|
+
requires_explicit_consent: true
|
|
259
|
+
requires_council: true
|
|
260
|
+
default_install: false
|
|
261
|
+
promotion_gate: attorney_framing_review
|
|
251
262
|
onboarding:
|
|
252
263
|
first_win_doc: FIRST_WIN.md
|
|
253
264
|
example_workflow: dpa-review
|
|
@@ -64,11 +64,11 @@
|
|
|
64
64
|
default_packs: [construction]
|
|
65
65
|
optional_packs: []
|
|
66
66
|
|
|
67
|
-
- id: legal
|
|
68
|
-
label: Legal
|
|
69
|
-
description: In-house legal — contract/NDA/DPA review
|
|
67
|
+
- id: legal-review-prep
|
|
68
|
+
label: Legal Review Prep
|
|
69
|
+
description: In-house legal review-prep — EU/DE-scoped contract/NDA/DPA review and triage to PREPARE for attorney review. Not legal advice; opt-in + council-gated.
|
|
70
70
|
example_roles: [In-house Counsel, DPO, Legal Ops]
|
|
71
|
-
default_packs: [legal]
|
|
71
|
+
default_packs: [legal-review-prep]
|
|
72
72
|
optional_packs: []
|
|
73
73
|
|
|
74
74
|
- id: agent-config-maintainer
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* eval_discrimination — the "falsifier of the falsifier" for the cross-model
|
|
3
|
+
* parity smoke (roadmap `road-to-operator-runtime-harvest`, T-003).
|
|
4
|
+
*
|
|
5
|
+
* A green parity result is trustworthy only if the eval *can* go red — and not
|
|
6
|
+
* just on a gross violation, but on a subtle, just-over-threshold one. A gross
|
|
7
|
+
* negative control proves "the harness can fail"; the SUBTLE control proves it
|
|
8
|
+
* is sensitive enough that an "all hosts pass" reading (outcome (a) in T-006)
|
|
9
|
+
* is not the underpowered-null trap wearing a green check. `discrimination_ok`
|
|
10
|
+
* is therefore gated on the SUBTLE control being caught — a gross-only control
|
|
11
|
+
* set is explicitly insufficient.
|
|
12
|
+
*
|
|
13
|
+
* Pure, dependency-free, host-agnostic: the smoke computes each control's
|
|
14
|
+
* `caught` from its assertion results (via `controlCaughtFromAssertions`) and
|
|
15
|
+
* passes the set here. No vendor calls happen in this module.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
export type ControlSeverity = 'gross' | 'subtle';
|
|
19
|
+
|
|
20
|
+
export interface NegativeControl {
|
|
21
|
+
/** Stable id of the planted-violation control scenario. */
|
|
22
|
+
id: string;
|
|
23
|
+
/** How blatant the planted RDP violation is. */
|
|
24
|
+
severity: ControlSeverity;
|
|
25
|
+
/**
|
|
26
|
+
* Did the harness flag this control (grade it RED)? A control is "caught"
|
|
27
|
+
* when NOT all of its assertions passed — i.e. the harness correctly
|
|
28
|
+
* detected the planted violation. Caught is the *desired* outcome.
|
|
29
|
+
*/
|
|
30
|
+
caught: boolean;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export interface DiscriminationResult {
|
|
34
|
+
/**
|
|
35
|
+
* True only when the harness caught the SUBTLE control (and a gross one
|
|
36
|
+
* exists and was also caught). This is the strict gate the parity smoke
|
|
37
|
+
* checks before trusting an "all hosts pass" reading.
|
|
38
|
+
*/
|
|
39
|
+
discrimination_ok: boolean;
|
|
40
|
+
gross_caught: boolean;
|
|
41
|
+
subtle_caught: boolean;
|
|
42
|
+
/** Human-readable reason, surfaced in the smoke's emitted summary. */
|
|
43
|
+
reason: string;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* A control is "caught" iff at least one of its assertions explicitly failed.
|
|
48
|
+
* `pass: null` (e.g. an ungraded `rubric` assertion deferred to a sub-agent
|
|
49
|
+
* grader) is NOT a fail — an un-graded assertion cannot count as catching a
|
|
50
|
+
* violation, so only explicit `false` qualifies.
|
|
51
|
+
*/
|
|
52
|
+
export function controlCaughtFromAssertions(
|
|
53
|
+
assertionResults: ReadonlyArray<{ pass: boolean | null }>,
|
|
54
|
+
): boolean {
|
|
55
|
+
return assertionResults.some((r) => r.pass === false);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* Decide whether the eval discriminates well enough to trust a green reading.
|
|
60
|
+
* Requires at least one `gross` AND one `subtle` control; gates on the subtle.
|
|
61
|
+
*/
|
|
62
|
+
export function computeDiscrimination(
|
|
63
|
+
controls: ReadonlyArray<NegativeControl>,
|
|
64
|
+
): DiscriminationResult {
|
|
65
|
+
const gross = controls.filter((c) => c.severity === 'gross');
|
|
66
|
+
const subtle = controls.filter((c) => c.severity === 'subtle');
|
|
67
|
+
|
|
68
|
+
const gross_caught = gross.length > 0 && gross.every((c) => c.caught);
|
|
69
|
+
const subtle_caught = subtle.length > 0 && subtle.every((c) => c.caught);
|
|
70
|
+
|
|
71
|
+
let discrimination_ok = false;
|
|
72
|
+
let reason: string;
|
|
73
|
+
|
|
74
|
+
if (gross.length === 0 || subtle.length === 0) {
|
|
75
|
+
reason =
|
|
76
|
+
'GRADED control set incomplete: need at least one `gross` and one `subtle` ' +
|
|
77
|
+
'negative control. A single severity cannot establish sensitivity — outcome (a) stays invalid.';
|
|
78
|
+
} else if (!gross_caught) {
|
|
79
|
+
reason =
|
|
80
|
+
'Harness is blind to a GROSS violation — it cannot fail at all. ' +
|
|
81
|
+
'Any "all hosts pass" reading is meaningless.';
|
|
82
|
+
} else if (!subtle_caught) {
|
|
83
|
+
reason =
|
|
84
|
+
'Underpowered: the gross control was caught but the SUBTLE one slipped through. ' +
|
|
85
|
+
'This is the uninformative-null trap with a green check in front — outcome (a) is ' +
|
|
86
|
+
'INVALID until the subtle control is caught.';
|
|
87
|
+
} else {
|
|
88
|
+
discrimination_ok = true;
|
|
89
|
+
reason =
|
|
90
|
+
'Both gross and subtle negative controls were caught — the eval discriminates; ' +
|
|
91
|
+
'an "all hosts pass" reading is trustworthy.';
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
return { discrimination_ok, gross_caught, subtle_caught, reason };
|
|
95
|
+
}
|