agemon 0.1.0 → 6.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/README.md +983 -30
- package/assets/skills/architecture/agemon-architecture/LICENSE +21 -0
- package/assets/skills/architecture/agemon-architecture/NOTICE.md +9 -0
- package/assets/skills/architecture/agemon-architecture/SKILL.md +275 -0
- package/assets/skills/code-quality/agemon-clean-code/LICENSE +21 -0
- package/assets/skills/code-quality/agemon-clean-code/NOTICE.md +9 -0
- package/assets/skills/code-quality/agemon-clean-code/SKILL.md +78 -0
- package/assets/skills/code-quality/agemon-house-rules/SKILL.md +103 -0
- package/assets/skills/commit/agemon-commit/SKILL.md +87 -0
- package/assets/skills/design/agemon-design/LICENSE +21 -0
- package/assets/skills/design/agemon-design/NOTICE.md +43 -0
- package/assets/skills/design/agemon-design/SKILL.md +128 -0
- package/assets/skills/design/agemon-design/references/accessibility.md +182 -0
- package/assets/skills/design/agemon-design/references/actions.md +215 -0
- package/assets/skills/design/agemon-design/references/ai-chat.md +158 -0
- package/assets/skills/design/agemon-design/references/brief.md +190 -0
- package/assets/skills/design/agemon-design/references/color.md +216 -0
- package/assets/skills/design/agemon-design/references/components.md +91 -0
- package/assets/skills/design/agemon-design/references/copy.md +300 -0
- package/assets/skills/design/agemon-design/references/core-rules.md +166 -0
- package/assets/skills/design/agemon-design/references/craft-intent.md +162 -0
- package/assets/skills/design/agemon-design/references/dashboard.md +131 -0
- package/assets/skills/design/agemon-design/references/dataviz.md +197 -0
- package/assets/skills/design/agemon-design/references/finish-bar.md +243 -0
- package/assets/skills/design/agemon-design/references/forms.md +192 -0
- package/assets/skills/design/agemon-design/references/heuristics.md +319 -0
- package/assets/skills/design/agemon-design/references/inspiration.md +287 -0
- package/assets/skills/design/agemon-design/references/layout.md +236 -0
- package/assets/skills/design/agemon-design/references/loops.md +155 -0
- package/assets/skills/design/agemon-design/references/metadata.md +98 -0
- package/assets/skills/design/agemon-design/references/modern-css.md +448 -0
- package/assets/skills/design/agemon-design/references/motion.md +434 -0
- package/assets/skills/design/agemon-design/references/personas.md +206 -0
- package/assets/skills/design/agemon-design/references/preset-dashboard.md +109 -0
- package/assets/skills/design/agemon-design/references/preset-editorial.md +94 -0
- package/assets/skills/design/agemon-design/references/preset-minimal.md +93 -0
- package/assets/skills/design/agemon-design/references/principles-catalog.md +299 -0
- package/assets/skills/design/agemon-design/references/recipe-auth.md +88 -0
- package/assets/skills/design/agemon-design/references/recipe-dashboard.md +130 -0
- package/assets/skills/design/agemon-design/references/recipe-landing.md +120 -0
- package/assets/skills/design/agemon-design/references/responsive.md +168 -0
- package/assets/skills/design/agemon-design/references/review.md +340 -0
- package/assets/skills/design/agemon-design/references/routing.md +143 -0
- package/assets/skills/design/agemon-design/references/sound.md +150 -0
- package/assets/skills/design/agemon-design/references/spec.md +123 -0
- package/assets/skills/design/agemon-design/references/stack.md +522 -0
- 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 +188 -0
- package/assets/skills/design/agemon-design/references/tells-2026-11.md +32 -0
- package/assets/skills/design/agemon-design/references/themes.md +233 -0
- package/assets/skills/design/agemon-design/references/third-party-licenses.md +323 -0
- package/assets/skills/design/agemon-design/references/tokens.md +350 -0
- package/assets/skills/design/agemon-design/references/typography.md +248 -0
- 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/essentials/web-design-guidelines/LICENSE +21 -0
- 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/essentials/writing-guidelines/LICENSE +21 -0
- 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/geo-seo/geo/LICENSE +21 -0
- package/assets/skills/geo-seo/geo/NOTICE.md +18 -0
- package/assets/skills/geo-seo/geo/SKILL.md +145 -0
- package/assets/skills/geo-seo/geo-audit/LICENSE +21 -0
- package/assets/skills/geo-seo/geo-audit/NOTICE.md +17 -0
- package/assets/skills/geo-seo/geo-audit/SKILL.md +371 -0
- package/assets/skills/geo-seo/geo-audit/references/ai-visibility.md +233 -0
- package/assets/skills/geo-seo/geo-audit/references/content.md +329 -0
- package/assets/skills/geo-seo/geo-audit/references/platform-analysis.md +294 -0
- package/assets/skills/geo-seo/geo-audit/references/schema.md +383 -0
- package/assets/skills/geo-seo/geo-audit/references/technical.md +368 -0
- package/assets/skills/geo-seo/geo-brand-mentions/LICENSE +21 -0
- package/assets/skills/geo-seo/geo-brand-mentions/NOTICE.md +15 -0
- package/assets/skills/geo-seo/geo-brand-mentions/SKILL.md +459 -0
- package/assets/skills/geo-seo/geo-citability/LICENSE +21 -0
- package/assets/skills/geo-seo/geo-citability/NOTICE.md +14 -0
- package/assets/skills/geo-seo/geo-citability/SKILL.md +320 -0
- package/assets/skills/geo-seo/geo-content/LICENSE +21 -0
- package/assets/skills/geo-seo/geo-content/NOTICE.md +14 -0
- package/assets/skills/geo-seo/geo-content/SKILL.md +352 -0
- package/assets/skills/geo-seo/geo-crawlers/LICENSE +21 -0
- package/assets/skills/geo-seo/geo-crawlers/NOTICE.md +15 -0
- package/assets/skills/geo-seo/geo-crawlers/SKILL.md +388 -0
- package/assets/skills/geo-seo/geo-llmstxt/LICENSE +21 -0
- package/assets/skills/geo-seo/geo-llmstxt/NOTICE.md +14 -0
- package/assets/skills/geo-seo/geo-llmstxt/SKILL.md +433 -0
- package/assets/skills/geo-seo/geo-platform-optimizer/LICENSE +21 -0
- package/assets/skills/geo-seo/geo-platform-optimizer/NOTICE.md +14 -0
- package/assets/skills/geo-seo/geo-platform-optimizer/SKILL.md +282 -0
- package/assets/skills/geo-seo/geo-report/LICENSE +21 -0
- package/assets/skills/geo-seo/geo-report/NOTICE.md +14 -0
- package/assets/skills/geo-seo/geo-report/SKILL.md +406 -0
- package/assets/skills/geo-seo/geo-report-pdf/LICENSE +21 -0
- package/assets/skills/geo-seo/geo-report-pdf/NOTICE.md +20 -0
- package/assets/skills/geo-seo/geo-report-pdf/SKILL.md +153 -0
- package/assets/skills/geo-seo/geo-report-pdf/templates/geo-report-template.html +548 -0
- package/assets/skills/geo-seo/geo-schema/LICENSE +21 -0
- package/assets/skills/geo-seo/geo-schema/NOTICE.md +16 -0
- package/assets/skills/geo-seo/geo-schema/SKILL.md +396 -0
- package/assets/skills/geo-seo/geo-technical/LICENSE +21 -0
- package/assets/skills/geo-seo/geo-technical/NOTICE.md +15 -0
- package/assets/skills/geo-seo/geo-technical/SKILL.md +566 -0
- package/assets/skills/output-style/agemon-adhd/LICENSE +21 -0
- 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/performance/agemon-performance/NOTICE.md +1 -0
- package/assets/skills/performance/agemon-performance/SKILL.md +76 -0
- package/assets/skills/security/agemon-security/LICENSE +21 -0
- package/assets/skills/security/agemon-security/NOTICE.md +8 -0
- package/assets/skills/security/agemon-security/SKILL.md +356 -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/self-review/agemon-review-intake/LICENSE +21 -0
- package/assets/skills/self-review/agemon-review-intake/NOTICE.md +9 -0
- package/assets/skills/self-review/agemon-review-intake/SKILL.md +205 -0
- package/assets/skills/self-review/agemon-review-request/LICENSE +21 -0
- package/assets/skills/self-review/agemon-review-request/NOTICE.md +9 -0
- package/assets/skills/self-review/agemon-review-request/SKILL.md +104 -0
- package/assets/skills/self-review/agemon-review-request/code-reviewer.md +188 -0
- package/assets/skills/self-review/agemon-root-cause/LICENSE +21 -0
- package/assets/skills/self-review/agemon-root-cause/NOTICE.md +10 -0
- package/assets/skills/self-review/agemon-root-cause/SKILL.md +283 -0
- package/assets/skills/self-review/agemon-root-cause/condition-based-waiting-example.ts +158 -0
- package/assets/skills/self-review/agemon-root-cause/condition-based-waiting.md +115 -0
- package/assets/skills/self-review/agemon-root-cause/defense-in-depth.md +122 -0
- package/assets/skills/self-review/agemon-root-cause/find-polluter.sh +72 -0
- package/assets/skills/self-review/agemon-root-cause/root-cause-tracing.md +169 -0
- package/assets/skills/self-review/agemon-root-cause/test-academic.md +14 -0
- package/assets/skills/self-review/agemon-root-cause/test-pressure-1.md +58 -0
- package/assets/skills/self-review/agemon-root-cause/test-pressure-2.md +68 -0
- package/assets/skills/self-review/agemon-root-cause/test-pressure-3.md +69 -0
- package/assets/skills/self-review/agemon-verify-before-done/LICENSE +21 -0
- package/assets/skills/self-review/agemon-verify-before-done/NOTICE.md +9 -0
- package/assets/skills/self-review/agemon-verify-before-done/SKILL.md +120 -0
- package/assets/skills/team-lead/agemon-plan-rfc/SKILL.md +317 -0
- package/assets/skills/team-lead/prd-generator/SKILL.md +437 -0
- package/assets/skills/team-lead/skill-headofit-audit/SKILL.md +72 -0
- package/assets/skills/team-lead/skill-incident-rca/SKILL.md +66 -0
- package/assets/skills/team-lead/skill-meeting-lifecycle/SKILL.md +63 -0
- package/assets/skills/team-lead/skill-obsidian-vault-sync/SKILL.md +69 -0
- package/assets/skills/team-lead/skill-prd-decomposer/SKILL.md +71 -0
- package/assets/skills/team-lead/skill-sec-check/SKILL.md +70 -0
- package/assets/skills/team-lead/skill-task-extractor/SKILL.md +79 -0
- package/assets/skills/team-lead/skill-tech-spike/SKILL.md +57 -0
- package/assets/skills/team-lead/skill-techlead-reviewer/SKILL.md +81 -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/assets/tools/code-review-graph-constraints.txt +1418 -0
- package/assets/tools/package-lock.json +111 -0
- package/assets/tools/package.json +6 -0
- package/dist/chunk-ZZBF3GOV.js +3451 -0
- package/dist/chunk-ZZBF3GOV.js.map +1 -0
- package/dist/fake-subprocess-IV4ML77S.js +636 -0
- package/dist/fake-subprocess-IV4ML77S.js.map +1 -0
- package/dist/index.js +23836 -1945
- package/dist/index.js.map +1 -1
- package/package.json +37 -17
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
# Preset: Dense dashboard
|
|
2
|
+
|
|
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.
|
|
4
|
+
|
|
5
|
+
Pre-committed dense style: data-first, keyboard-first, operator tools. Bloomberg, Retool, Linear issues view, admin panels. Every pixel earns its place.
|
|
6
|
+
|
|
7
|
+
## Knobs (locked)
|
|
8
|
+
|
|
9
|
+
- **CRAFT_LEVEL = 7** — polished but not precious; operators value speed over sheen.
|
|
10
|
+
- **MOTION_INTENSITY = 3** — micro-only. Row hover, row active tint, inline confirm. No scroll reveals in table areas.
|
|
11
|
+
- **VISUAL_DENSITY = 9** — tight 4/8px grid; whitespace earns its place.
|
|
12
|
+
|
|
13
|
+
Do not re-ask these during intake. Confirm brand accent + dark/light preference only.
|
|
14
|
+
|
|
15
|
+
## Style anchors
|
|
16
|
+
|
|
17
|
+
- UI sans + mono pairing. Mono for every ID, hash, timestamp, code.
|
|
18
|
+
- Semantic palette required: success, warning, danger, info + one brand accent.
|
|
19
|
+
- `tabular-nums` on every numeric column; mono on identifiers.
|
|
20
|
+
- Tight 4/8px spacing grid. `px-3 py-2` table cells, `gap-2` toolbars.
|
|
21
|
+
- Sparklines everywhere; horizontal bars for categorical; area for time-series. No pie. No 3D.
|
|
22
|
+
- Keyboard shortcuts visible inline (`⌘K`, `J/K`, `E` to edit).
|
|
23
|
+
- Dense chrome: breadcrumbs + tabs + toolbars + filter chips are welcome.
|
|
24
|
+
- Micro-motion only. Row hover, row active, inline save. No entrance stagger.
|
|
25
|
+
|
|
26
|
+
## Base rules (inherited)
|
|
27
|
+
|
|
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.
|
|
29
|
+
|
|
30
|
+
## Style-specific overrides
|
|
31
|
+
|
|
32
|
+
**Typography**
|
|
33
|
+
|
|
34
|
+
- UI: the project's UI font. With none, choose a face built for dense data from the brief and say why; 400 / 500.
|
|
35
|
+
- Mono: IBM Plex Mono or Geist Mono for IDs, hashes, timestamps, code, version numbers, kbd.
|
|
36
|
+
- Body size: 13-14px default; 12px in dense tables is fine.
|
|
37
|
+
- `tabular-nums` on every numeric column, metric card, timestamp, duration.
|
|
38
|
+
- `font-variant-numeric: tabular-nums slashed-zero` for IDs + codes.
|
|
39
|
+
- Headings: compact. Page title 18-20px, section 14-15px 500.
|
|
40
|
+
|
|
41
|
+
**Color (semantic palette required)**
|
|
42
|
+
|
|
43
|
+
- Brand accent: one — primary actions, active tab, selected row accent tint.
|
|
44
|
+
- Semantic, subdued OKLCH (lightness 50-60, chroma ≤ 0.15):
|
|
45
|
+
- success `oklch(60% 0.12 150)`
|
|
46
|
+
- warning `oklch(72% 0.13 75)`
|
|
47
|
+
- danger `oklch(58% 0.15 25)`
|
|
48
|
+
- info `oklch(62% 0.12 240)`
|
|
49
|
+
- Never saturated hues — dashboards live on screens for 8 hours.
|
|
50
|
+
- Status dots, badge text, chip text use semantic color; backgrounds stay neutral.
|
|
51
|
+
|
|
52
|
+
**Spacing & layout**
|
|
53
|
+
|
|
54
|
+
- 4/8px spacing scale — never 5, 7, 9, 10. Stick to 4 / 8 / 12 / 16 / 24.
|
|
55
|
+
- Table cells: `px-3 py-2` default; `px-2 py-1.5` for ultra-dense.
|
|
56
|
+
- Toolbar rows: `gap-2`, `h-9` controls, `text-sm`.
|
|
57
|
+
- Sidebar: narrow (200-240px), subtle bg tint, icon + label; never full dark.
|
|
58
|
+
- Cards: `p-4`, 8px radius; 1px border over shadow.
|
|
59
|
+
|
|
60
|
+
**Data display**
|
|
61
|
+
|
|
62
|
+
- Every number column: `tabular-nums` + right-aligned.
|
|
63
|
+
- Every ID / hash / commit / timestamp: monospace.
|
|
64
|
+
- Sparklines inline in rows for trend context. 24-40px tall, single color.
|
|
65
|
+
- Category charts: horizontal bars. Time-series: area with 15% → 0% fade. No pies.
|
|
66
|
+
- Deltas: plain text `+12.5%` in semantic color, no pill.
|
|
67
|
+
- Empty states: one-line hint + keyboard shortcut to create.
|
|
68
|
+
|
|
69
|
+
**Chrome & navigation**
|
|
70
|
+
|
|
71
|
+
- Breadcrumbs + tabs + sub-toolbar together is expected and fine.
|
|
72
|
+
- Filter chips: outline style, removable `×`, no pill fill.
|
|
73
|
+
- Global command palette: `⌘K` visible in header search affordance.
|
|
74
|
+
- Row actions: inline icons on hover; also available via keyboard.
|
|
75
|
+
- Pagination: text `Page 3 of 42` + `tabular-nums`, plus `J/K` navigation.
|
|
76
|
+
|
|
77
|
+
**Motion**
|
|
78
|
+
|
|
79
|
+
- Row hover: background shift to `oklch(96% 0.002 250)` light / `oklch(20% 0.005 250)` dark, 80ms.
|
|
80
|
+
- Active/selected row: brand accent tint at ~6% opacity + 2px accent left border.
|
|
81
|
+
- Inline save / confirm: 150ms fade + check icon swap.
|
|
82
|
+
- No scroll-triggered reveals in table areas — they stutter long lists.
|
|
83
|
+
- Sort arrow, filter open, column resize: instant or <100ms.
|
|
84
|
+
|
|
85
|
+
## Reference files to read first
|
|
86
|
+
|
|
87
|
+
Load these from this folder:
|
|
88
|
+
|
|
89
|
+
- `dashboard.md` — primary reference; metric cards, charts, sidebar, tables
|
|
90
|
+
- `typography.md` — tabular-nums, mono pairing, scale
|
|
91
|
+
- `motion.md` Rendering Performance — compositor pipeline, layer promotion, scroll-linked motion
|
|
92
|
+
- `responsive.md` — tablet + laptop breakpoints, toolbar collapse
|
|
93
|
+
|
|
94
|
+
Skip `inspiration.md` (landing-page focused), `sound.md`.
|
|
95
|
+
|
|
96
|
+
## Anti-patterns for THIS style
|
|
97
|
+
|
|
98
|
+
- Serif fonts anywhere in chrome or data. Editorial is a different preset.
|
|
99
|
+
- Proportional figures in numeric columns — always `tabular-nums`.
|
|
100
|
+
- Saturated hues — reads as consumer app, not operator tool.
|
|
101
|
+
- Colored pills on every delta — plain text in semantic color.
|
|
102
|
+
- Pie charts, donut charts, 3D charts. Ever.
|
|
103
|
+
- Vertical bar chart for time-series — use area/line.
|
|
104
|
+
- Uniform colored top borders on metric cards.
|
|
105
|
+
- Card grids with heavy whitespace — if it feels airy, wrong preset.
|
|
106
|
+
- Full-dark sidebar (common AI pattern) — subtle tint only.
|
|
107
|
+
- Scroll-triggered reveals or stagger animations in table areas.
|
|
108
|
+
- Hidden keyboard shortcuts — always surface `⌘K`, row shortcuts, help trigger.
|
|
109
|
+
- Vague loading states — show skeleton rows matching column structure, not generic spinner.
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# Preset: Editorial
|
|
2
|
+
|
|
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.
|
|
4
|
+
|
|
5
|
+
Pre-committed editorial style: magazine, long-form, content-first. Typography carries the hierarchy; layout serves the reading experience.
|
|
6
|
+
|
|
7
|
+
## Knobs (locked)
|
|
8
|
+
|
|
9
|
+
- **CRAFT_LEVEL = 9** — editorial typography only works at high refinement; Polish Pass mandatory.
|
|
10
|
+
- **MOTION_INTENSITY = 4** — reading-aware: fade on reveal, link hovers, no entrance stagger.
|
|
11
|
+
- **VISUAL_DENSITY = 3** — wide reading column, generous vertical rhythm, 1 item per row for features.
|
|
12
|
+
|
|
13
|
+
Do not re-ask these during intake. Confirm accent + serif/sans pairing only.
|
|
14
|
+
|
|
15
|
+
## Style anchors
|
|
16
|
+
|
|
17
|
+
- Serif display for headings + humanist body sans/serif for reading.
|
|
18
|
+
- Baseline grid feel. `leading-relaxed` (1.7) on body.
|
|
19
|
+
- Wide reading column `max-w-[65ch]`. Generous vertical rhythm.
|
|
20
|
+
- Accent used for emphasis — pull quotes, drop caps, link underlines — not decoration.
|
|
21
|
+
- OpenType features ON: small caps, ligatures, stylistic sets, tabular figures where relevant.
|
|
22
|
+
- Asymmetric, text-heavy heroes. Featured image large.
|
|
23
|
+
- Motion respects reading: fades only, never pulls the eye away.
|
|
24
|
+
- Black text, warm/ivory canvas, one accent. Color is a voice, not a decoration.
|
|
25
|
+
|
|
26
|
+
## Base rules (inherited)
|
|
27
|
+
|
|
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.
|
|
29
|
+
|
|
30
|
+
## Style-specific overrides
|
|
31
|
+
|
|
32
|
+
**Typography (the whole point)**
|
|
33
|
+
|
|
34
|
+
- Display: Playfair Display, Fraunces, Lora, or Source Serif 4 for headings and pull quotes.
|
|
35
|
+
- Body: Alegreya, Source Sans 3, ITC Charter, or a humanist pairing. Do NOT use Inter as primary body — it reads as product UI, not editorial.
|
|
36
|
+
- Max two families: one display + one body.
|
|
37
|
+
- Headings: `text-wrap: balance`, `font-optical-sizing: auto`, tracking near 0 or slightly negative on large sizes.
|
|
38
|
+
- Body: `text-wrap: pretty`, `line-height: 1.7`, `font-feature-settings: "liga", "kern"`.
|
|
39
|
+
- Drop caps via `p:first-of-type::first-letter { float: left; font-size: 4.5em; line-height: 0.85; padding: 6px 10px 0 0; font-family: <display>; }`.
|
|
40
|
+
- Small caps via `font-variant-caps: small-caps` for section labels, bylines.
|
|
41
|
+
- Opt-in OpenType: `font-feature-settings: "ss01", "cv11"` when the chosen font supports them.
|
|
42
|
+
- Pull quotes: serif, large (1.75-2.25em), one accent color, short rule above.
|
|
43
|
+
|
|
44
|
+
**Color**
|
|
45
|
+
|
|
46
|
+
- Canvas: ivory or warm white — `oklch(98% 0.01 85)` — not pure `#fff`.
|
|
47
|
+
- Text: `oklch(18% 0.01 40)` warm near-black.
|
|
48
|
+
- Restricted palette: black, ivory/warm white, ONE accent. That's it.
|
|
49
|
+
- Accent applied to: drop cap, pull quote, inline link underline, section rule. Not buttons that don't need it.
|
|
50
|
+
|
|
51
|
+
**Spacing & layout**
|
|
52
|
+
|
|
53
|
+
- Reading column: `max-w-[65ch]` for body; hero and featured image can break out to `max-w-5xl`.
|
|
54
|
+
- Vertical rhythm on body: paragraph spacing = line-height × 0.6 minimum.
|
|
55
|
+
- Asymmetric heroes: left-aligned display headline + byline + featured image below or offset.
|
|
56
|
+
- Section breaks: centered ornament or a short rule, not a full-width divider.
|
|
57
|
+
|
|
58
|
+
**Motion**
|
|
59
|
+
|
|
60
|
+
- Fade on scroll reveal for hero/featured image only, 300-400ms ease-out.
|
|
61
|
+
- Inline link hover: underline-offset grows 1px, color shifts to accent, 120ms.
|
|
62
|
+
- No entrance stagger, no parallax, no page transitions that fight the reading flow.
|
|
63
|
+
- Honor `prefers-reduced-motion` — cut all reveals.
|
|
64
|
+
|
|
65
|
+
**Content components**
|
|
66
|
+
|
|
67
|
+
- Byline: small caps, tracking-wide, secondary text color.
|
|
68
|
+
- Dateline + read time: tabular-nums, separated by a bullet `·`.
|
|
69
|
+
- Inline images: full-width or breakout beyond column, with italic serif caption underneath.
|
|
70
|
+
- Blockquote: left border in accent, serif italic, `max-w-[55ch]`.
|
|
71
|
+
|
|
72
|
+
## Reference files to read first
|
|
73
|
+
|
|
74
|
+
Load these from this folder:
|
|
75
|
+
|
|
76
|
+
- `typography.md` — the primary reference for this style
|
|
77
|
+
- `layout.md` — reading column, rhythm, hierarchy
|
|
78
|
+
- `color.md` — warm palette, accent discipline
|
|
79
|
+
- `copy.md` — editorial voice, headings, empty states
|
|
80
|
+
|
|
81
|
+
Skip `dashboard.md`, `sound.md` unless relevant.
|
|
82
|
+
|
|
83
|
+
## Anti-patterns for THIS style
|
|
84
|
+
|
|
85
|
+
- Inter, Geist, DM Sans as primary body. They signal product UI, not editorial.
|
|
86
|
+
- Three font families. Always one display + one body.
|
|
87
|
+
- Pure `#fff` canvas. Warm it.
|
|
88
|
+
- Tight `leading-tight` on body copy. Reading needs 1.6-1.8.
|
|
89
|
+
- Colored pull quote backgrounds, gradient text on headlines, emoji in section rules.
|
|
90
|
+
- Scroll-triggered stagger or parallax — breaks reading flow.
|
|
91
|
+
- Card grids for articles — use stacked list with thumbnail + dek.
|
|
92
|
+
- Sans-serif display headlines by default. If you need sans display, the user probably wants minimal variant.
|
|
93
|
+
- Uppercase headlines. Sentence case, always (small caps for bylines is the exception).
|
|
94
|
+
- CTAs with heavy pill backgrounds — prefer inline underlined links in the serif voice.
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# Preset: Minimal
|
|
2
|
+
|
|
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.
|
|
4
|
+
|
|
5
|
+
Pre-committed minimal style: editorial clean, Linear / Notion / Vercel. Whitespace is the composition. One accent, hairline borders, almost no motion.
|
|
6
|
+
|
|
7
|
+
## Knobs (locked)
|
|
8
|
+
|
|
9
|
+
- **CRAFT_LEVEL = 8** — minimal aesthetics only work when executed precisely; Polish Pass is mandatory.
|
|
10
|
+
- **MOTION_INTENSITY = 3** — hover + modal enter/exit only. No scroll reveals, no page transitions, no stagger.
|
|
11
|
+
- **VISUAL_DENSITY = 2** — whitespace-heavy, 1-2 items per row, generous gutters.
|
|
12
|
+
|
|
13
|
+
Do not re-ask these during intake. Skip straight to accent + font confirmation if ambiguous.
|
|
14
|
+
|
|
15
|
+
## Style anchors
|
|
16
|
+
|
|
17
|
+
- Black or near-black type on white or near-white canvas. Monochrome + ONE accent.
|
|
18
|
+
- A neutral sans for body, taken from the project or chosen from the brief (state why) — never a display font.
|
|
19
|
+
- Section padding 120-200px vertical, 40-80px gutters.
|
|
20
|
+
- Hairline borders `1px solid oklch(92% 0.005 250)` in place of shadows.
|
|
21
|
+
- Typography is the hierarchy. No decorative gradients, patterns, or glass.
|
|
22
|
+
- Single-column hero default. Asymmetry via one supporting element, not layout tricks.
|
|
23
|
+
- Motion is punctuation, not spectacle.
|
|
24
|
+
- Every pixel deliberate. When in doubt, cut it.
|
|
25
|
+
|
|
26
|
+
## Base rules (inherited)
|
|
27
|
+
|
|
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.
|
|
29
|
+
|
|
30
|
+
## Style-specific overrides
|
|
31
|
+
|
|
32
|
+
**Typography**
|
|
33
|
+
|
|
34
|
+
- Body: the project's sans, or one chosen from the brief, 400 weight. UI emphasis: 500. Never 600/700 in body copy.
|
|
35
|
+
- `system-ui, -apple-system` as fallback stack.
|
|
36
|
+
- Headings: `tracking-tight` / `-0.02em` above 24px, 500 or 600 max.
|
|
37
|
+
- `text-wrap: balance` on headings, `text-wrap: pretty` on paragraphs.
|
|
38
|
+
- No display serifs. No geometric display sans. No mixing two sans families.
|
|
39
|
+
|
|
40
|
+
**Color**
|
|
41
|
+
|
|
42
|
+
- Surface: `oklch(99% 0 0)` (light) / `oklch(14% 0.005 250)` (dark).
|
|
43
|
+
- Text: `oklch(18% 0.01 250)` primary, `oklch(46% 0.01 250)` secondary.
|
|
44
|
+
- Accent reserved for: primary CTA, active nav item, one key metric. That is it.
|
|
45
|
+
- Borders: `oklch(92% 0.005 250)` light / `oklch(24% 0.008 250)` dark. No colored borders.
|
|
46
|
+
|
|
47
|
+
**Spacing & layout**
|
|
48
|
+
|
|
49
|
+
- Section vertical: `py-24 md:py-32 lg:py-40` (96 / 128 / 160px) minimum; 200px for hero on large screens.
|
|
50
|
+
- Container: `max-w-5xl` typical; `max-w-3xl` for reading content.
|
|
51
|
+
- One accent placement per viewport preferred; two max.
|
|
52
|
+
- No card grids with more than 2 columns on desktop.
|
|
53
|
+
|
|
54
|
+
**Borders & elevation**
|
|
55
|
+
|
|
56
|
+
- Default chrome = 1px hairline border, no shadow.
|
|
57
|
+
- Elevation only for floating UI (menus, toasts, modals) — single soft ambient shadow, not layered.
|
|
58
|
+
- Radius: 6px inputs, 8px cards, 12px modals. Keep the scale narrow.
|
|
59
|
+
|
|
60
|
+
**Motion**
|
|
61
|
+
|
|
62
|
+
- Allowed: hover (opacity / border color, 120-150ms), modal + dialog enter/exit (180-220ms ease-out), focus ring.
|
|
63
|
+
- Forbidden at this intensity: scroll-triggered reveals, stagger, page transitions, parallax, magnetic cursor, entrance choreography.
|
|
64
|
+
- Any animation must honor `prefers-reduced-motion`.
|
|
65
|
+
|
|
66
|
+
**Composition**
|
|
67
|
+
|
|
68
|
+
- Hero: left-aligned or centered headline, ONE supporting element (social proof line, screenshot, single chip). No floating badges, orbs, blobs.
|
|
69
|
+
- Features: stacked rows with a single real visual each. No 3-up uniform icon grids even when tempting.
|
|
70
|
+
- Nav: text-only links, current state = accent underline or weight 500. No pill backgrounds.
|
|
71
|
+
|
|
72
|
+
## Reference files to read first
|
|
73
|
+
|
|
74
|
+
Keep the reading list tight. Load only these from this folder:
|
|
75
|
+
|
|
76
|
+
- `layout.md` — spacing, hierarchy, composition
|
|
77
|
+
- `typography.md` — scale, readability, weight
|
|
78
|
+
- `color.md` — monochrome scales, OKLCH, dark mode
|
|
79
|
+
- `accessibility.md` — focus, contrast, keyboard
|
|
80
|
+
|
|
81
|
+
Skip `dashboard.md`, `stack.md`, `sound.md` unless explicitly relevant.
|
|
82
|
+
|
|
83
|
+
## Anti-patterns for THIS style
|
|
84
|
+
|
|
85
|
+
- Multiple accent colors. One accent, period.
|
|
86
|
+
- Display serifs, geometric display sans, or mixing two sans families.
|
|
87
|
+
- Decorative gradients, mesh backgrounds, noise overlays, glass panels.
|
|
88
|
+
- Scroll-triggered reveals, stagger, page transitions — even "subtle" ones.
|
|
89
|
+
- Uniform 3-column icon-heading-text feature grids.
|
|
90
|
+
- Colored shadows or glows as affordances.
|
|
91
|
+
- Dense layouts. If density feels right, this is the wrong preset — switch to [preset-dashboard.md](preset-dashboard.md).
|
|
92
|
+
- Pill backgrounds on nav links or buttons by default; prefer text + underline.
|
|
93
|
+
- Section padding under 96px on desktop.
|
|
@@ -0,0 +1,299 @@
|
|
|
1
|
+
# Principles Catalog
|
|
2
|
+
|
|
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
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## How to Read This Catalog
|
|
8
|
+
|
|
9
|
+
Each principle has four parts: a title (4-7 words), a statement (one line), the design implication it produces (what changes in the product because of it), and an opposing principle it rules out (the contrast that proves it's opinionated).
|
|
10
|
+
|
|
11
|
+
Categories are starting points, not silos. A finance reconciliation tool may need a "creative tools" principle if its power users have strong workflow preferences. Mix and match across categories — the category label is scaffolding, not a fence.
|
|
12
|
+
|
|
13
|
+
Strong principles take a stand. If you can flip the principle and the opposite sounds reasonable, the principle is doing work. If the opposite sounds insane, the principle is a platitude — drop it.
|
|
14
|
+
|
|
15
|
+
Trim to 3-5. More than 5 means none of them are load-bearing. If you have eight, find the two that subsume the others and keep those.
|
|
16
|
+
|
|
17
|
+
Test against past decisions. Take three real design calls that were debated. Would the candidate principle have resolved them? If it would have flipped a decision you stand behind, it is the wrong principle.
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Categories
|
|
22
|
+
|
|
23
|
+
### 1. Developer Tools (CLIs, dashboards, internal tools)
|
|
24
|
+
|
|
25
|
+
#### "Show the data, not the design"
|
|
26
|
+
**Statement:** chrome retreats; data and state are the entire surface.
|
|
27
|
+
**Implication:** color reserved for status (success / warn / error), accent used on the primary action only, typography defaults to monospace for data and humanist sans for chrome. Animations are sub-200ms or absent. Decorative illustrations, hero gradients, and marketing-page polish have no place here.
|
|
28
|
+
**Opposite ruled out:** "internal tools deserve the same visual richness as consumer products" — a developer dashboard with gradient headers, large illustrations, and motion choreography signals decoration over function and erodes trust with its audience.
|
|
29
|
+
|
|
30
|
+
#### "The keyboard is the primary input"
|
|
31
|
+
**Statement:** every action is reachable without a pointer.
|
|
32
|
+
**Implication:** every modal, panel, and dropdown has a keyboard shortcut. Tab order matches visual order. Command palette covers all global actions. Hover-only affordances do not exist. Mouse-first interactions (drag-to-reorder, right-click context menus without keyboard equivalents) are redesigned or dropped.
|
|
33
|
+
**Opposite ruled out:** "power users will learn the UI" — assuming that heavy users will mouse through menus every session trades their time for your engineering convenience.
|
|
34
|
+
|
|
35
|
+
#### "Error state is a first-class screen"
|
|
36
|
+
**Statement:** failure and partial states are designed before the happy path ships.
|
|
37
|
+
**Implication:** every async operation has an explicit error state with a recovery action (retry, copy error, open docs). No "Something went wrong" strings without a path forward. Skeleton loaders are paired with error recovery. Empty states are not blank pages.
|
|
38
|
+
**Opposite ruled out:** "ship the happy path first, handle errors later" — deferring error states means they ship broken or never; this category's users lose the most time when errors are opaque.
|
|
39
|
+
|
|
40
|
+
#### "Density by default, space by request"
|
|
41
|
+
**Statement:** the default layout is dense; whitespace is earned by user preference.
|
|
42
|
+
**Implication:** default row height is compact (32-36px), table padding is minimal, sidebars collapse by default on narrow viewports. A spacious view is available as a user preference, not the default. Every pixel of padding is justified by legibility, not aesthetics.
|
|
43
|
+
**Opposite ruled out:** "generous whitespace reads as quality" — in a tool used for hours daily, whitespace that forces scrolling is a cost, not a signal.
|
|
44
|
+
|
|
45
|
+
#### "State is always visible"
|
|
46
|
+
**Statement:** the current view, filter, and scope are always in the viewport.
|
|
47
|
+
**Implication:** active filters shown as removable chips above the data, not hidden in a sidebar. Breadcrumbs or scope indicators in the nav. Connection / sync status visible in a persistent corner. "Showing 1-50 of 2,340" is always present on data tables.
|
|
48
|
+
**Opposite ruled out:** "minimize chrome to maximize content area" — hiding active state to save pixels means the user constantly re-orients, which costs more than the pixels saved.
|
|
49
|
+
|
|
50
|
+
#### "Logs beat summaries"
|
|
51
|
+
**Statement:** give users the raw output alongside the derived insight.
|
|
52
|
+
**Implication:** aggregated metrics always have a "view raw" or drill-down path. Pipeline outputs show the full log, collapsible to summary. No computed status that hides the underlying signal. "3 errors" links to the 3 errors, not a modal that restates the count.
|
|
53
|
+
**Opposite ruled out:** "surface insights, not raw data" — for a developer audience, hiding the raw signal behind a summary reads as paternalism and blocks debugging.
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
### 2. Consumer Apps (lifestyle, social, content)
|
|
58
|
+
|
|
59
|
+
#### "The empty page is the customer"
|
|
60
|
+
**Statement:** the user's first action defines the product; the empty state is the most important screen.
|
|
61
|
+
**Implication:** loading and empty states receive the same design care as filled states. CTAs in empty states are specific to the likely first task, not generic ("Start your first list" not "Get started"). Templates are visible but never the default — the blank canvas wins by being immediate. Onboarding flows do not gate the empty state.
|
|
62
|
+
**Opposite ruled out:** "pre-populate with sample content to show value" — demo data tells the user the product was designed for someone else, not for them.
|
|
63
|
+
|
|
64
|
+
#### "Speed of the first action"
|
|
65
|
+
**Statement:** time from open to first meaningful interaction is the north-star metric.
|
|
66
|
+
**Implication:** zero required sign-in gates before the user touches the product. No mandatory tutorial. Profile setup is deferred until after first value. App open → core action is one tap or one keystroke. Onboarding is invisible or async.
|
|
67
|
+
**Opposite ruled out:** "complete profile upfront for personalization" — high-friction onboarding before proven value loses users at the first friction point, regardless of the personalization payoff.
|
|
68
|
+
|
|
69
|
+
#### "Social context compounds value"
|
|
70
|
+
**Statement:** every surface becomes more useful when others are present.
|
|
71
|
+
**Implication:** sharing affordances are built into the primary action flow, not a separate share sheet. Activity feeds are part of the core loop, not a tab buried in the nav. Reactions, replies, and attributions are near the content, not in a detail view. The single-user experience is the degraded form; the social form is the default.
|
|
72
|
+
**Opposite ruled out:** "sharing is a secondary feature" — treating social features as addons rather than core creates a product that is average alone and invisible together.
|
|
73
|
+
|
|
74
|
+
#### "Personalization shows immediately"
|
|
75
|
+
**Statement:** the product adapts visibly to the user from the first session.
|
|
76
|
+
**Implication:** recent content, saved preferences, and history are in the primary view on return. No "start fresh" blank slate on every open. The product remembers the last state (scroll position, last viewed item, active draft). First-time experience and return experience are explicitly different designs.
|
|
77
|
+
**Opposite ruled out:** "consistent state across sessions ensures predictability" — predictability for its own sake, without personalization, reads as indifferent.
|
|
78
|
+
|
|
79
|
+
#### "Friction sized to the commitment"
|
|
80
|
+
**Statement:** the UI's friction must match what the user is actually committing to.
|
|
81
|
+
**Implication:** liking, saving, sharing — zero confirmation. Following someone — one tap, no modal. Deleting an account — modal with explicit consequence. Friction scales with irreversibility and social consequence. No confirmation dialogs on low-stakes actions.
|
|
82
|
+
**Opposite ruled out:** "confirm everything to prevent accidental actions" — treating every action as high-stakes makes the product feel bureaucratic and trains users to dismiss confirmations without reading them.
|
|
83
|
+
|
|
84
|
+
#### "Delight once, then step aside"
|
|
85
|
+
**Statement:** expressive moments earn their place at first run; after that, they disappear.
|
|
86
|
+
**Implication:** confetti on first completion, celebration animation on first streak — then suppressed on repeat. Onboarding animations do not repeat after session one. Empty states have character for new users; returning-user empty states are functional. The product does not perform joy for users who have moved past the new-user phase.
|
|
87
|
+
**Opposite ruled out:** "consistent animation keeps the product feeling alive" — animations that were delightful at first run become noise by week two. Respecting the user's familiarity is its own form of polish.
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
### 3. Finance / Regulated (compliance-first, audit trails)
|
|
92
|
+
|
|
93
|
+
#### "Wrong is worse than late"
|
|
94
|
+
**Statement:** confirm everything; recovering from a mistake is more expensive than friction.
|
|
95
|
+
**Implication:** confirmation modals on every irreversible action, no fast-paths around them, detailed receipts after every transaction. Undo windows exist where the underlying API allows; where they do not, the action is labeled explicitly. Loading states linger over feedback states — the user needs to know the server confirmed before proceeding.
|
|
96
|
+
**Opposite ruled out:** "delight via speed" — instant-feeling interactions in finance contexts read as careless. Speed at the cost of confirmation is a liability, not a feature.
|
|
97
|
+
|
|
98
|
+
#### "Everything has an author and a timestamp"
|
|
99
|
+
**Statement:** every state change is attributed and dated.
|
|
100
|
+
**Implication:** audit logs are a first-class surface, not a compliance afterthought. Inline attribution ("Last edited by J. Reyes, Mar 4 14:22") is visible without drilling into a log. Deletions are soft-deletions with a visible record. No anonymous mutations in shared records.
|
|
101
|
+
**Opposite ruled out:** "users don't want to see attribution clutter" — regulated contexts require it, and even where they don't, attribution is the primary trust signal between collaborators handling money.
|
|
102
|
+
|
|
103
|
+
#### "The number is the hero"
|
|
104
|
+
**Statement:** the key figure dominates every surface that contains it.
|
|
105
|
+
**Implication:** primary amounts are the largest element on the card or row. Supporting context (date, category, status) is secondary — smaller, lower-weight, lower-saturation. No icon grids, feature lists, or decorative elements share visual weight with a financial figure. The hierarchy is always number first.
|
|
106
|
+
**Opposite ruled out:** "balanced information hierarchy for readability" — in finance, burying the primary number in a visually balanced layout slows the task and erodes trust.
|
|
107
|
+
|
|
108
|
+
#### "Export is a primary action"
|
|
109
|
+
**Statement:** data that cannot leave the product is a liability in regulated contexts.
|
|
110
|
+
**Implication:** CSV, PDF, and audit-format exports are accessible from every data surface without navigating away. Export is in the primary toolbar, not buried in a settings menu. Export respects the current filter and scope. Scheduled export is a feature, not a power-user workaround.
|
|
111
|
+
**Opposite ruled out:** "minimize exports to keep users in the product" — in compliance and finance contexts, data portability is a trust signal. Restricting it reads as controlling, not sticky.
|
|
112
|
+
|
|
113
|
+
#### "Status is never ambiguous"
|
|
114
|
+
**Statement:** every record has an explicit, visible state — pending, confirmed, failed, reconciled.
|
|
115
|
+
**Implication:** status badges are always present and high-contrast, never inferred from context. Pending and processing states are distinct (not both "loading"). Failed states have a reason, not just a label. Filtering by status is a first-class affordance, not a power-user feature.
|
|
116
|
+
**Opposite ruled out:** "reduce visual noise by hiding status for healthy records" — hiding status until something goes wrong means users only interact with the system in crisis mode, which erodes confidence.
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
### 4. Creative Tools (design, writing, video)
|
|
121
|
+
|
|
122
|
+
#### "The canvas is sacred"
|
|
123
|
+
**Statement:** chrome serves the canvas; the canvas never serves chrome.
|
|
124
|
+
**Implication:** every panel, toolbar, and overlay is dismissable, collapsible, or fades on inactivity. The active workspace gets the largest available area. Tool palettes can be repositioned. Keyboard shortcuts cover every chrome action. The canvas area does not shrink for notification banners, update prompts, or upsell overlays.
|
|
125
|
+
**Opposite ruled out:** "discoverable UI via persistent surfaces" — keeping toolbars permanently visible signals distrust of the user's ability to learn. It also treats every pixel of chrome as more valuable than the user's work.
|
|
126
|
+
|
|
127
|
+
#### "Undo is unlimited"
|
|
128
|
+
**Statement:** the user is never punished for experimenting.
|
|
129
|
+
**Implication:** undo history is per-session and deep (50+ steps). Destructive actions have a visible undo window, not just a warning. Version history is a first-class feature, not a recovery tool of last resort. The product does not ask "are you sure?" — it asks "do you want to undo?" after the fact.
|
|
130
|
+
**Opposite ruled out:** "confirmation before destructive actions prevents mistakes" — pre-action friction slows creative work. Post-action undo restores the same safety with none of the interruption.
|
|
131
|
+
|
|
132
|
+
#### "Presets are a starting point, not a destination"
|
|
133
|
+
**Statement:** every preset is editable; no workflow ends at a template.
|
|
134
|
+
**Implication:** templates and presets always resolve to the underlying editable state, not a locked copy. "Customize" is always available after applying a preset. The preset library is visible and searchable, but the blank-canvas affordance is equal or greater in visual weight. Users who start from a preset should not feel their work is "derivative."
|
|
135
|
+
**Opposite ruled out:** "guide users through templates for better outcomes" — prescriptive guidance in a creative tool signals that the product does not trust the user's judgment.
|
|
136
|
+
|
|
137
|
+
#### "History is visible, not just recoverable"
|
|
138
|
+
**Statement:** the user can see what changed, not just revert to before it changed.
|
|
139
|
+
**Implication:** version history shows a diff or thumbnail, not just a timestamp. Side-by-side comparison of two versions is possible. Change annotations ("changed from 24px to 18px") are in the undo stack, not just in abstract state. Power users can branch from any point in history.
|
|
140
|
+
**Opposite ruled out:** "save storage by keeping only the last N versions" — capped history limits creative risk-taking; users self-censor experiments when they know they cannot reach back far enough.
|
|
141
|
+
|
|
142
|
+
#### "Collaboration is opt-in, not default"
|
|
143
|
+
**Statement:** the single-user experience is complete; sharing is additive.
|
|
144
|
+
**Implication:** the product loads immediately without a sign-in gate. Collaboration features (comments, live cursors, sharing) are available when the user is ready for them, not surfaced on first open. A solo creator who never shares their work has the same tier of product quality as a team user.
|
|
145
|
+
**Opposite ruled out:** "build for collaboration first; solo use is a subset" — treating solo use as a downgrade punishes independent creators and makes the product feel socially coercive.
|
|
146
|
+
|
|
147
|
+
---
|
|
148
|
+
|
|
149
|
+
### 5. Data Analytics (BI, dashboards, monitoring)
|
|
150
|
+
|
|
151
|
+
#### "One number per screen"
|
|
152
|
+
**Statement:** every dashboard surface has a hero metric; everything else supports it.
|
|
153
|
+
**Implication:** the primary metric is largest, has the most contrast, sits in the optical center of the above-the-fold zone. Supporting metrics are explicitly subordinate (smaller, lower-weight, lower-saturation). No grid of equal-weight cards — hierarchy is visible at a glance from across the room.
|
|
154
|
+
**Opposite ruled out:** "let users decide what's important" — the absence of hierarchy is itself a design choice, and it always reads as the team did not decide. Equal-weight grids push every judgment onto the user and slow time-to-insight.
|
|
155
|
+
|
|
156
|
+
#### "Comparison is the unit of understanding"
|
|
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). 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
|
+
**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
|
+
|
|
161
|
+
#### "Drill-down is always one click"
|
|
162
|
+
**Statement:** every aggregated view resolves to its component data in one action.
|
|
163
|
+
**Implication:** clicking a chart segment opens the underlying records. Clicking a metric opens the contributing events. Breadcrumbs track the drill path. Back navigation returns to the aggregated view with state preserved. No aggregated view is a dead end.
|
|
164
|
+
**Opposite ruled out:** "keep the dashboard clean by removing drill-through affordances" — a dashboard that cannot answer "why" is an alert surface, not an analytics surface.
|
|
165
|
+
|
|
166
|
+
#### "Filters are first-class state"
|
|
167
|
+
**Statement:** the active filter configuration is a shareable, bookmarkable artifact.
|
|
168
|
+
**Implication:** filter state lives in the URL. Active filters are visible as removable chips above the data. "Share this view" produces a link that preserves filter state. Default filters are explicit, not implicit. Saving a filter configuration is a primary action, not a power-user feature.
|
|
169
|
+
**Opposite ruled out:** "filters are a temporary interaction, not state" — ephemeral filters mean users recreate the same analysis on every visit and cannot share findings with colleagues.
|
|
170
|
+
|
|
171
|
+
#### "Anomalies surface themselves"
|
|
172
|
+
**Statement:** the user should not have to look for outliers; the surface finds them.
|
|
173
|
+
**Implication:** statistical outliers are visually distinct (different color, flagged row, annotated data point) without requiring the user to configure a threshold. Alert states are visible in the default view. The absence of anomalies is also communicated explicitly ("all metrics within normal range"). Silence is a state, not the default.
|
|
174
|
+
**Opposite ruled out:** "show all data equally; users will spot patterns" — presenting uniform data without anomaly detection turns the analyst into a manual filter, adding no value over raw exports.
|
|
175
|
+
|
|
176
|
+
---
|
|
177
|
+
|
|
178
|
+
### 6. Collaborative Tools (real-time, multi-user)
|
|
179
|
+
|
|
180
|
+
#### "Presence is content"
|
|
181
|
+
**Statement:** who is on the surface matters as much as what is on the surface.
|
|
182
|
+
**Implication:** active users are always visible (avatars in nav, cursors in canvas, edits attributed inline). Conflict states are first-class designs, not hidden errors. Optimistic updates with reconciliation are the default; loading states are exceptional. The product communicates "you are not alone here" at every moment.
|
|
183
|
+
**Opposite ruled out:** "single-user UX with multiplayer features added later" — when single-user is the assumed base, collaboration feels grafted on. Presence needs to be architectural, not a feature flag.
|
|
184
|
+
|
|
185
|
+
#### "Conflict is expected, not exceptional"
|
|
186
|
+
**Statement:** simultaneous edits are the happy path; sequential editing is the edge case.
|
|
187
|
+
**Implication:** merge conflict UI is fully designed before launch, not handled by a generic error. Conflict resolution has a clear owner (last-write-wins, or explicit picker, or merge view) and it is documented in the product. The user is never dropped into an undefined state because two people edited the same field.
|
|
188
|
+
**Opposite ruled out:** "prevent conflicts via locking" — locking blocks work. Collaborative products that serialize writes to prevent conflicts have misunderstood their category.
|
|
189
|
+
|
|
190
|
+
#### "Attribution is visible, not interrogated"
|
|
191
|
+
**Statement:** the origin of every change is visible without opening a history panel.
|
|
192
|
+
**Implication:** inline attribution ("J. Reyes" next to an edited cell, an avatar on a comment) is standard in the default view. History is for audit, not for understanding current state. New content from other users is visually differentiated until dismissed. "Who did this?" has an answer in the main view.
|
|
193
|
+
**Opposite ruled out:** "attribution belongs in activity logs, not the main surface" — burying authorship in a panel means users lose context about what is new and what is theirs, slowing trust-building in shared workspaces.
|
|
194
|
+
|
|
195
|
+
#### "Async and sync are the same surface"
|
|
196
|
+
**Statement:** the product works for people in different timezones using the same interface.
|
|
197
|
+
**Implication:** unread changes are surfaced at the top of the affected view on return, not in a notification inbox. Comments thread in context, not in a sidebar. Status indicators (online now / last seen) are present but not the primary affordance. A user returning after 8 hours sees the same product as a user who was online during those 8 hours.
|
|
198
|
+
**Opposite ruled out:** "optimize for real-time; async users use notifications" — bifurcating async users into a notifications inbox creates a two-tier experience and signals the product was designed for a single timezone team.
|
|
199
|
+
|
|
200
|
+
#### "Undo survives other users"
|
|
201
|
+
**Statement:** a user can revert their own changes even after others have built on top of them.
|
|
202
|
+
**Implication:** per-user undo history is maintained separately from the shared document state. Reverting a change produces a new change, not a silent overwrite. The user is informed when their undo would affect content another user has seen or built on. Undo is never blocked because someone else has since edited the same record.
|
|
203
|
+
**Opposite ruled out:** "shared document state supersedes individual undo" — stripping undo after a collaborator touches a record makes users afraid to experiment in shared spaces.
|
|
204
|
+
|
|
205
|
+
---
|
|
206
|
+
|
|
207
|
+
### 7. AI / Streaming Surfaces
|
|
208
|
+
|
|
209
|
+
#### "Streaming is a state, not a transition"
|
|
210
|
+
**Statement:** mid-stream is a first-class UI state with its own affordances.
|
|
211
|
+
**Implication:** designed token-by-token streaming with a visible caret, partial citations rendered as they arrive, a mid-response abort affordance always present. Stream-complete is its own distinct state with a summary, feedback controls, and copy/share affordances. No skeleton loaders during streaming — they communicate "wait" when the system is communicating "I am thinking."
|
|
212
|
+
**Opposite ruled out:** "show a spinner until the full response arrives" — collapsing the streaming experience into a loading state discards the primary trust signal (visible progress) and makes the product feel slower than it is.
|
|
213
|
+
|
|
214
|
+
#### "Tool use is observable"
|
|
215
|
+
**Statement:** when the model calls a tool or searches a source, the user sees it.
|
|
216
|
+
**Implication:** tool calls are rendered as trace items inline with the response, not hidden behind the output. Web searches, code executions, and API calls show the query and result summary, not just the derived answer. Power users can expand traces to full detail. The product never presents a derived answer without attributing the source.
|
|
217
|
+
**Opposite ruled out:** "hide tool calls to keep the experience clean" — hiding the reasoning behind AI outputs reduces trust and prevents the user from catching errors in the sourcing step.
|
|
218
|
+
|
|
219
|
+
#### "Regeneration is always available"
|
|
220
|
+
**Statement:** every AI response has a retry path that the user can reach without retyping.
|
|
221
|
+
**Implication:** regenerate is a persistent affordance on every response, not just the most recent one. Editing a prompt to regenerate is one click, not a delete-and-retype flow. Variant generation (same prompt, different result) is available. The user is never trapped with a single output.
|
|
222
|
+
**Opposite ruled out:** "one response per prompt keeps the interaction clean" — without regeneration, the user loses trust in the system when the first output is wrong, because they perceive no recourse.
|
|
223
|
+
|
|
224
|
+
#### "Citations are load-bearing, not decorative"
|
|
225
|
+
**Statement:** every factual claim has a traceable source; citations are interactive, not footnotes.
|
|
226
|
+
**Implication:** cited sources are inline, hoverable or clickable, and open the source in context. Citations appear during streaming, not only after completion. The UI distinguishes between high-confidence and low-confidence citations (e.g., direct quote vs. paraphrase). A response with no citable sources is visually distinct from one with citations.
|
|
227
|
+
**Opposite ruled out:** "citations clutter the reading experience" — removing citations to improve readability trades user trust for surface aesthetics. In AI surfaces, the citation is the proof, not the decoration.
|
|
228
|
+
|
|
229
|
+
#### "Feedback closes the loop"
|
|
230
|
+
**Statement:** the user can signal quality, and the signal is visible as confirmed.
|
|
231
|
+
**Implication:** thumbs up/down or equivalent is always present on completed responses. Submitting feedback produces visible confirmation (not a silent network request). Negative feedback opens a specific follow-up (what was wrong?), not a generic rating. Feedback state persists on the response after page reload.
|
|
232
|
+
**Opposite ruled out:** "feedback is a product-side signal; users don't need to see it confirmed" — invisible feedback signals read as dismissed. Confirmation closes the trust loop and increases feedback volume.
|
|
233
|
+
|
|
234
|
+
---
|
|
235
|
+
|
|
236
|
+
### 8. Public-facing Forms (sign-up, checkout, applications)
|
|
237
|
+
|
|
238
|
+
#### "Friction sized to commitment"
|
|
239
|
+
**Statement:** the form's resistance must match what the user is actually agreeing to.
|
|
240
|
+
**Implication:** account creation requires email only (no profile, no avatar, no phone on the first step). Checkout uses smart defaults — saved address, autofill, no required account creation. Application forms show progress and allow resume-anywhere. Friction increases only where the commitment justifies it (2FA on first payment, ID verification on regulated actions).
|
|
241
|
+
**Opposite ruled out:** "collect all necessary information upfront to avoid re-engagement" — high-friction sign-ups for unproven value lose users at the first required field. Collecting data early optimizes for the product's convenience, not the user's.
|
|
242
|
+
|
|
243
|
+
#### "Validation never surprises"
|
|
244
|
+
**Statement:** errors appear where the user is, not where they are going.
|
|
245
|
+
**Implication:** inline validation fires on blur, not on submit. Error messages name the field and state the fix, not the rule violated ("Enter a valid email address" not "Invalid format"). Password rules are visible before the user types, not after they fail. Submit-time errors scroll to the first error; the user does not have to find it.
|
|
246
|
+
**Opposite ruled out:** "validate on submit to avoid interrupting the flow" — submit-time validation collapses all errors into one moment of failure, maximizing frustration and minimizing the information density needed to fix each error.
|
|
247
|
+
|
|
248
|
+
#### "Progress is always visible"
|
|
249
|
+
**Statement:** the user knows where they are, how far is left, and what they have completed.
|
|
250
|
+
**Implication:** multi-step forms show a step indicator that counts completed and remaining steps. Step labels are specific ("Payment details" not "Step 3"). Completed steps are accessible for review without losing current state. The last step is labeled "Submit" or equivalent — never "Next."
|
|
251
|
+
**Opposite ruled out:** "hide progress to avoid anchoring users to effort" — hiding progress trades completion anxiety (I don't know how long this will take) for commitment bias (I've come this far). Most users benefit from knowing the end is near.
|
|
252
|
+
|
|
253
|
+
#### "Defaults are decisions"
|
|
254
|
+
**Statement:** every pre-filled value or pre-selected option was chosen deliberately, not as a placeholder.
|
|
255
|
+
**Implication:** pre-selected checkboxes are opted-in by default only when the user would genuinely expect them (save address for future orders — reasonable; opt into marketing email — not reasonable). Auto-selected tiers or plans are the one that matches the most common user, not the most profitable. Pre-filled dates use the most likely answer. No field has a default that benefits the product at the user's expense.
|
|
256
|
+
**Opposite ruled out:** "use defaults that maximize conversion or revenue" — dark-pattern defaults are a one-time conversion gain traded for long-term trust erosion and churn.
|
|
257
|
+
|
|
258
|
+
#### "Submit is one button"
|
|
259
|
+
**Statement:** the primary action is always singular and unambiguous.
|
|
260
|
+
**Implication:** no forms have two competing primary actions at the bottom ("Save" + "Submit" at equal weight). Secondary actions (save draft, cancel) are visually subordinate. The primary button label says what happens after the click ("Create account", "Place order", "Send application"). No CTAs labeled "Continue," "Next," or "Finish" on the final step.
|
|
261
|
+
**Opposite ruled out:** "multiple actions give users flexibility" — equal-weight competing actions on a form are the fastest path to the wrong action. Flexibility in form submission is a failure of design confidence.
|
|
262
|
+
|
|
263
|
+
---
|
|
264
|
+
|
|
265
|
+
## Anti-principles (what NOT to write down as a principle)
|
|
266
|
+
|
|
267
|
+
These are platitudes that masquerade as principles. They look opinionated but rule nothing out. If your candidate principle appears on this list, rephrase it or discard it.
|
|
268
|
+
|
|
269
|
+
- **"Be user-friendly"** — opposite ("be user-hostile") is insane. Not opinionated. Every product claims this.
|
|
270
|
+
- **"Design with empathy"** — opposite ("design without empathy") is incoherent. Too vague to produce a design implication.
|
|
271
|
+
- **"Make it beautiful"** — beautiful is undefined and context-dependent. No design decision follows from it.
|
|
272
|
+
- **"Mobile-first"** — this is consensus in 2026, not a stance. It belongs in your stack defaults, not your principles.
|
|
273
|
+
- **"Accessibility matters"** — yes. This is the floor, not a principle. Every surface must be accessible; treating it as a principle lets non-accessible surfaces exist by default.
|
|
274
|
+
- **"Keep it simple"** — "simple" is undefined. This is a preference, not a constraint. "Show the data, not the design" is what "keep it simple" actually means for a developer tool.
|
|
275
|
+
- **"Modern design"** — modern compared to what, when? This is an aesthetic preference with no design resolution power.
|
|
276
|
+
- **"We care about our users"** — a mission statement, not a principle. Put it in the README, not the brief.
|
|
277
|
+
|
|
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
|
+
|
|
280
|
+
---
|
|
281
|
+
|
|
282
|
+
## When to Skip Categories
|
|
283
|
+
|
|
284
|
+
The catalog covers archetypes. Many products span multiple categories and should borrow from each.
|
|
285
|
+
|
|
286
|
+
A developer tool with a consumer-facing onboarding flow needs Developer Tools principles for the product surfaces and Consumer Apps principles for the sign-up and first-run experience. Write the brief in two scoped sections rather than forcing all principles to cover both.
|
|
287
|
+
|
|
288
|
+
Internal tools where the design language is intentionally platform-native (system UI, operating-system controls) can adopt the platform's implicit principles rather than inventing product-specific ones. Codify only the places where the product diverges from platform defaults — those are the only decisions that need an explicit principle.
|
|
289
|
+
|
|
290
|
+
Pre-launch products may lack enough product reality to write distinctive principles. The "would anyone disagree?" test from `brief.md` is the gate: if every candidate principle passes it trivially (the opposite sounds insane), defer the principles workshop until you have user reality to anchor against. Provisional principles based on hypotheses are acceptable — mark them as provisional and revisit after first usability sessions.
|
|
291
|
+
|
|
292
|
+
Products built on a design system (shadcn, MUI, platform-native) inherit a set of implicit principles from that system. Those inherited principles do not need to be restated. Write only the principles where this product diverges from or extends the system's defaults.
|
|
293
|
+
|
|
294
|
+
---
|
|
295
|
+
|
|
296
|
+
## Cross-References
|
|
297
|
+
|
|
298
|
+
- `brief.md` — the parent reference; this catalog is invoked from the principles workshop section. The brief format that consumes these principles is defined there.
|
|
299
|
+
- The `inspiration.md` "what mature interfaces never do" section is the empirical complement to this catalog. Those are observed patterns from production products; these are intentional commitments. Both are needed: observation shows what the standard is; principles show where you differ from it.
|