dreamcontext 0.5.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/LICENSE +21 -0
- package/README.md +523 -0
- package/agents/dreamcontext-explore.md +137 -0
- package/agents/dreamcontext-initializer.md +169 -0
- package/agents/sleep-product.md +268 -0
- package/agents/sleep-state.md +270 -0
- package/agents/sleep-tasks.md +134 -0
- package/dist/agents/dreamcontext-explore.md +137 -0
- package/dist/agents/dreamcontext-initializer.md +169 -0
- package/dist/agents/sleep-product.md +268 -0
- package/dist/agents/sleep-state.md +270 -0
- package/dist/agents/sleep-tasks.md +134 -0
- package/dist/dashboard/assets/BrainCanvas3D-BLJ4_SqE.js +5126 -0
- package/dist/dashboard/assets/_baseUniq-DpaDAx_H.js +1 -0
- package/dist/dashboard/assets/arc-JvK3Ik1p.js +1 -0
- package/dist/dashboard/assets/architectureDiagram-Q4EWVU46-CCvw4XFg.js +36 -0
- package/dist/dashboard/assets/blockDiagram-DXYQGD6D-DMobz1n7.js +132 -0
- package/dist/dashboard/assets/c4Diagram-AHTNJAMY-FwcHT5er.js +10 -0
- package/dist/dashboard/assets/channel-D6954IHZ.js +1 -0
- package/dist/dashboard/assets/chunk-4BX2VUAB-B5kYwmBa.js +1 -0
- package/dist/dashboard/assets/chunk-4TB4RGXK-0ot1eS0J.js +206 -0
- package/dist/dashboard/assets/chunk-55IACEB6-24ngcLgH.js +1 -0
- package/dist/dashboard/assets/chunk-EDXVE4YY-DATt1OUl.js +1 -0
- package/dist/dashboard/assets/chunk-FMBD7UC4-BprbGSJw.js +15 -0
- package/dist/dashboard/assets/chunk-OYMX7WX6-CJJhpKWP.js +231 -0
- package/dist/dashboard/assets/chunk-QZHKN3VN-Cisp65Vq.js +1 -0
- package/dist/dashboard/assets/chunk-YZCP3GAM-DtMk33tU.js +1 -0
- package/dist/dashboard/assets/classDiagram-6PBFFD2Q-Bk4KDqBj.js +1 -0
- package/dist/dashboard/assets/classDiagram-v2-HSJHXN6E-Bk4KDqBj.js +1 -0
- package/dist/dashboard/assets/clone-C9Yhti5q.js +1 -0
- package/dist/dashboard/assets/cose-bilkent-S5V4N54A-BxYomDLe.js +1 -0
- package/dist/dashboard/assets/cytoscape.esm-D_LviqZs.js +331 -0
- package/dist/dashboard/assets/dagre-KV5264BT-CsX1ZayG.js +4 -0
- package/dist/dashboard/assets/defaultLocale-DX6XiGOO.js +1 -0
- package/dist/dashboard/assets/diagram-5BDNPKRD-B2G4mPPw.js +10 -0
- package/dist/dashboard/assets/diagram-G4DWMVQ6-C8nxN9ZB.js +24 -0
- package/dist/dashboard/assets/diagram-MMDJMWI5-DaYymOrR.js +43 -0
- package/dist/dashboard/assets/diagram-TYMM5635-BpiYFv-I.js +24 -0
- package/dist/dashboard/assets/erDiagram-SMLLAGMA-C6pE7F61.js +85 -0
- package/dist/dashboard/assets/flowDiagram-DWJPFMVM-jdNEPVFq.js +162 -0
- package/dist/dashboard/assets/ganttDiagram-T4ZO3ILL-C8GoRj1C.js +292 -0
- package/dist/dashboard/assets/gitGraphDiagram-UUTBAWPF-SiRn7RJ8.js +106 -0
- package/dist/dashboard/assets/graph-9wbTW7ld.js +1 -0
- package/dist/dashboard/assets/index-BHp63EMw.js +475 -0
- package/dist/dashboard/assets/index-CdnDt_7U.css +1 -0
- package/dist/dashboard/assets/infoDiagram-42DDH7IO-DcDC8M1a.js +2 -0
- package/dist/dashboard/assets/ishikawaDiagram-UXIWVN3A-UjyrPeaS.js +70 -0
- package/dist/dashboard/assets/journeyDiagram-VCZTEJTY-CXJPYMxN.js +139 -0
- package/dist/dashboard/assets/kanban-definition-6JOO6SKY-Cm1n9eat.js +89 -0
- package/dist/dashboard/assets/katex-DkKDou_j.js +257 -0
- package/dist/dashboard/assets/layout-w8zmQGXp.js +1 -0
- package/dist/dashboard/assets/linear-CMNvIisH.js +1 -0
- package/dist/dashboard/assets/min-BqXwiqEr.js +1 -0
- package/dist/dashboard/assets/mindmap-definition-QFDTVHPH-tksxnjhx.js +96 -0
- package/dist/dashboard/assets/pieDiagram-DEJITSTG-lIVvnPyq.js +30 -0
- package/dist/dashboard/assets/quadrantDiagram-34T5L4WZ-DSMB57t5.js +7 -0
- package/dist/dashboard/assets/requirementDiagram-MS252O5E-NG99tgmc.js +84 -0
- package/dist/dashboard/assets/sankeyDiagram-XADWPNL6-C6EkbQKo.js +10 -0
- package/dist/dashboard/assets/sequenceDiagram-FGHM5R23-ASU7Zp6_.js +157 -0
- package/dist/dashboard/assets/stateDiagram-FHFEXIEX-DHklUzce.js +1 -0
- package/dist/dashboard/assets/stateDiagram-v2-QKLJ7IA2-BZXFb2Fh.js +1 -0
- package/dist/dashboard/assets/timeline-definition-GMOUNBTQ-B37xNhjS.js +120 -0
- package/dist/dashboard/assets/vennDiagram-DHZGUBPP-D28OvWbm.js +34 -0
- package/dist/dashboard/assets/wardley-RL74JXVD-BQdaLyVb.js +162 -0
- package/dist/dashboard/assets/wardleyDiagram-NUSXRM2D-D0vChrnT.js +20 -0
- package/dist/dashboard/assets/xychartDiagram-5P7HB3ND-BzSx7EpJ.js +7 -0
- package/dist/dashboard/favicon.svg +14 -0
- package/dist/dashboard/index.html +18 -0
- package/dist/hooks/marketing-binary-guard.sh +18 -0
- package/dist/index.js +15881 -0
- package/dist/skill-packs/agents/biv-customer-analyst.md +140 -0
- package/dist/skill-packs/agents/biv-decision-gate.md +147 -0
- package/dist/skill-packs/agents/biv-financial-analyst.md +128 -0
- package/dist/skill-packs/agents/biv-market-analyst.md +103 -0
- package/dist/skill-packs/agents/biv-researcher.md +140 -0
- package/dist/skill-packs/agents/biv-strategist.md +164 -0
- package/dist/skill-packs/agents/council-persona.md +142 -0
- package/dist/skill-packs/agents/council-synthesizer.md +208 -0
- package/dist/skill-packs/agents/discover-brand.md +216 -0
- package/dist/skill-packs/agents/goal-implementer.md +70 -0
- package/dist/skill-packs/agents/goal-plan-reviewer.md +68 -0
- package/dist/skill-packs/agents/goal-planner.md +75 -0
- package/dist/skill-packs/agents/goal-validator.md +68 -0
- package/dist/skill-packs/agents/marketing-creative.md +85 -0
- package/dist/skill-packs/agents/marketing-monitor.md +143 -0
- package/dist/skill-packs/agents/marketing-strategy.md +139 -0
- package/dist/skill-packs/agents/review-cloud-functions.md +158 -0
- package/dist/skill-packs/agents/review-edge-cases.md +147 -0
- package/dist/skill-packs/agents/review-frontend.md +134 -0
- package/dist/skill-packs/agents/review-router.md +165 -0
- package/dist/skill-packs/agents/review-security.md +139 -0
- package/dist/skill-packs/agents/reviewer.md +152 -0
- package/dist/skill-packs/brand-voice/SKILL.md +115 -0
- package/dist/skill-packs/brand-voice/discover-brand.md +126 -0
- package/dist/skill-packs/brand-voice/guideline-generation.md +154 -0
- package/dist/skill-packs/brand-voice/references/before-after-examples.md +194 -0
- package/dist/skill-packs/brand-voice/references/confidence-scoring.md +128 -0
- package/dist/skill-packs/brand-voice/references/guideline-template.md +241 -0
- package/dist/skill-packs/brand-voice/references/search-strategies.md +271 -0
- package/dist/skill-packs/brand-voice/references/source-ranking.md +248 -0
- package/dist/skill-packs/brand-voice/references/voice-constant-tone-flexes.md +115 -0
- package/dist/skill-packs/business-idea-discovery/SKILL.md +452 -0
- package/dist/skill-packs/business-idea-validation/SKILL.md +209 -0
- package/dist/skill-packs/business-idea-validation/stage-definitions.md +658 -0
- package/dist/skill-packs/catalog.json +657 -0
- package/dist/skill-packs/council/SKILL.md +134 -0
- package/dist/skill-packs/council/debate-protocol.md +90 -0
- package/dist/skill-packs/design/SKILL.md +301 -0
- package/dist/skill-packs/design/design-mobile.md +207 -0
- package/dist/skill-packs/design/design-web.md +148 -0
- package/dist/skill-packs/design/frontend-principles.md +157 -0
- package/dist/skill-packs/design/onboarding-design.md +230 -0
- package/dist/skill-packs/engineering/SKILL.md +155 -0
- package/dist/skill-packs/engineering/backend-principles.md +233 -0
- package/dist/skill-packs/engineering/firebase-cloud-functions/SKILL.md +44 -0
- package/dist/skill-packs/engineering/firebase-cloud-functions/references/gen_comparison.md +45 -0
- package/dist/skill-packs/engineering/firebase-cloud-functions/references/idempotency.md +145 -0
- package/dist/skill-packs/engineering/firebase-cloud-functions/references/local_testing.md +218 -0
- package/dist/skill-packs/engineering/firebase-cloud-functions/references/scaling.md +128 -0
- package/dist/skill-packs/engineering/firebase-cloud-functions/references/secrets.md +70 -0
- package/dist/skill-packs/engineering/firebase-cloud-functions/references/triggers_and_deployment.md +139 -0
- package/dist/skill-packs/engineering/firebase-firestore/SKILL.md +50 -0
- package/dist/skill-packs/engineering/firebase-firestore/references/indexes.md +96 -0
- package/dist/skill-packs/engineering/firebase-firestore/references/provisioning.md +101 -0
- package/dist/skill-packs/engineering/firebase-firestore/references/query_mechanics.md +182 -0
- package/dist/skill-packs/engineering/firebase-firestore/references/security_rules.md +299 -0
- package/dist/skill-packs/engineering/firebase-firestore/references/web_sdk_usage.md +265 -0
- package/dist/skill-packs/engineering/web-app-frontend.md +187 -0
- package/dist/skill-packs/goal-skill/SKILL.md +203 -0
- package/dist/skill-packs/growth/SKILL.md +480 -0
- package/dist/skill-packs/growth/lean-analytics-experiments.md +341 -0
- package/dist/skill-packs/growth/lean-analytics-metrics.md +295 -0
- package/dist/skill-packs/growth/performance-marketing.md +337 -0
- package/dist/skill-packs/meta-marketing/SKILL.md +423 -0
- package/dist/skill-packs/meta-marketing/account-ops.md +190 -0
- package/dist/skill-packs/meta-marketing/api-reference.md +535 -0
- package/dist/skill-packs/meta-marketing/copy-formulas.md +123 -0
- package/dist/skill-packs/meta-marketing/council-personas/creative-director.md +76 -0
- package/dist/skill-packs/meta-marketing/council-personas/performance-monitor.md +71 -0
- package/dist/skill-packs/meta-marketing/council-personas/risk-officer.md +79 -0
- package/dist/skill-packs/meta-marketing/council-personas/strategy-optimizer.md +76 -0
- package/dist/skill-packs/meta-marketing/creative-frameworks.md +176 -0
- package/dist/skill-packs/meta-marketing/mistakes.md +154 -0
- package/dist/skill-packs/meta-marketing/platform-state.md +63 -0
- package/dist/skill-packs/multi-review/REVIEWER_SHARED.md +143 -0
- package/dist/skill-packs/multi-review/SKILL.md +182 -0
- package/dist/skill-packs/system-prompts/SKILL.md +472 -0
- package/dist/templates/AGENTS.md +84 -0
- package/dist/templates/CLAUDE.md +84 -0
- package/dist/templates/council-debate.md +20 -0
- package/dist/templates/council-final-report.md +34 -0
- package/dist/templates/council-persona.md +10 -0
- package/dist/templates/council-report.md +6 -0
- package/dist/templates/feature.md +38 -0
- package/dist/templates/init/0.soul.md +33 -0
- package/dist/templates/init/1.user.md +29 -0
- package/dist/templates/init/2.memory.md +21 -0
- package/dist/templates/init/3.style_guide_and_branding.md +18 -0
- package/dist/templates/init/4.tech_stack.md +22 -0
- package/dist/templates/init/CHANGELOG.json +1 -0
- package/dist/templates/init/RELEASES.json +1 -0
- package/dist/templates/init/data-structures/default.md +35 -0
- package/dist/templates/knowledge.md +10 -0
- package/dist/templates/obsidian/app.json +15 -0
- package/dist/templates/obsidian/appearance.json +4 -0
- package/dist/templates/obsidian/graph.json +58 -0
- package/dist/templates/task.md +70 -0
- package/install.sh +73 -0
- package/package.json +58 -0
- package/skill/SKILL.md +529 -0
- package/skill-packs/agents/biv-customer-analyst.md +140 -0
- package/skill-packs/agents/biv-decision-gate.md +147 -0
- package/skill-packs/agents/biv-financial-analyst.md +128 -0
- package/skill-packs/agents/biv-market-analyst.md +103 -0
- package/skill-packs/agents/biv-researcher.md +140 -0
- package/skill-packs/agents/biv-strategist.md +164 -0
- package/skill-packs/agents/council-persona.md +142 -0
- package/skill-packs/agents/council-synthesizer.md +208 -0
- package/skill-packs/agents/discover-brand.md +216 -0
- package/skill-packs/agents/goal-implementer.md +70 -0
- package/skill-packs/agents/goal-plan-reviewer.md +68 -0
- package/skill-packs/agents/goal-planner.md +75 -0
- package/skill-packs/agents/goal-validator.md +68 -0
- package/skill-packs/agents/marketing-creative.md +85 -0
- package/skill-packs/agents/marketing-monitor.md +143 -0
- package/skill-packs/agents/marketing-strategy.md +139 -0
- package/skill-packs/agents/review-cloud-functions.md +158 -0
- package/skill-packs/agents/review-edge-cases.md +147 -0
- package/skill-packs/agents/review-frontend.md +134 -0
- package/skill-packs/agents/review-router.md +165 -0
- package/skill-packs/agents/review-security.md +139 -0
- package/skill-packs/agents/reviewer.md +152 -0
- package/skill-packs/brand-voice/SKILL.md +115 -0
- package/skill-packs/brand-voice/discover-brand.md +126 -0
- package/skill-packs/brand-voice/guideline-generation.md +154 -0
- package/skill-packs/brand-voice/references/before-after-examples.md +194 -0
- package/skill-packs/brand-voice/references/confidence-scoring.md +128 -0
- package/skill-packs/brand-voice/references/guideline-template.md +241 -0
- package/skill-packs/brand-voice/references/search-strategies.md +271 -0
- package/skill-packs/brand-voice/references/source-ranking.md +248 -0
- package/skill-packs/brand-voice/references/voice-constant-tone-flexes.md +115 -0
- package/skill-packs/business-idea-discovery/SKILL.md +452 -0
- package/skill-packs/business-idea-validation/SKILL.md +209 -0
- package/skill-packs/business-idea-validation/stage-definitions.md +658 -0
- package/skill-packs/catalog.json +657 -0
- package/skill-packs/council/SKILL.md +134 -0
- package/skill-packs/council/debate-protocol.md +90 -0
- package/skill-packs/design/SKILL.md +301 -0
- package/skill-packs/design/design-mobile.md +207 -0
- package/skill-packs/design/design-web.md +148 -0
- package/skill-packs/design/frontend-principles.md +157 -0
- package/skill-packs/design/onboarding-design.md +230 -0
- package/skill-packs/engineering/SKILL.md +155 -0
- package/skill-packs/engineering/backend-principles.md +233 -0
- package/skill-packs/engineering/firebase-cloud-functions/SKILL.md +44 -0
- package/skill-packs/engineering/firebase-cloud-functions/references/gen_comparison.md +45 -0
- package/skill-packs/engineering/firebase-cloud-functions/references/idempotency.md +145 -0
- package/skill-packs/engineering/firebase-cloud-functions/references/local_testing.md +218 -0
- package/skill-packs/engineering/firebase-cloud-functions/references/scaling.md +128 -0
- package/skill-packs/engineering/firebase-cloud-functions/references/secrets.md +70 -0
- package/skill-packs/engineering/firebase-cloud-functions/references/triggers_and_deployment.md +139 -0
- package/skill-packs/engineering/firebase-firestore/SKILL.md +50 -0
- package/skill-packs/engineering/firebase-firestore/references/indexes.md +96 -0
- package/skill-packs/engineering/firebase-firestore/references/provisioning.md +101 -0
- package/skill-packs/engineering/firebase-firestore/references/query_mechanics.md +182 -0
- package/skill-packs/engineering/firebase-firestore/references/security_rules.md +299 -0
- package/skill-packs/engineering/firebase-firestore/references/web_sdk_usage.md +265 -0
- package/skill-packs/engineering/web-app-frontend.md +187 -0
- package/skill-packs/goal-skill/SKILL.md +203 -0
- package/skill-packs/growth/SKILL.md +480 -0
- package/skill-packs/growth/lean-analytics-experiments.md +341 -0
- package/skill-packs/growth/lean-analytics-metrics.md +295 -0
- package/skill-packs/growth/performance-marketing.md +337 -0
- package/skill-packs/meta-marketing/SKILL.md +423 -0
- package/skill-packs/meta-marketing/account-ops.md +190 -0
- package/skill-packs/meta-marketing/api-reference.md +535 -0
- package/skill-packs/meta-marketing/copy-formulas.md +123 -0
- package/skill-packs/meta-marketing/council-personas/creative-director.md +76 -0
- package/skill-packs/meta-marketing/council-personas/performance-monitor.md +71 -0
- package/skill-packs/meta-marketing/council-personas/risk-officer.md +79 -0
- package/skill-packs/meta-marketing/council-personas/strategy-optimizer.md +76 -0
- package/skill-packs/meta-marketing/creative-frameworks.md +176 -0
- package/skill-packs/meta-marketing/mistakes.md +154 -0
- package/skill-packs/meta-marketing/platform-state.md +63 -0
- package/skill-packs/multi-review/REVIEWER_SHARED.md +143 -0
- package/skill-packs/multi-review/SKILL.md +182 -0
- package/skill-packs/system-prompts/SKILL.md +472 -0
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: council
|
|
3
|
+
description: >
|
|
4
|
+
Structured multi-agent debate for non-trivial decisions. Load when the user asks to
|
|
5
|
+
"debate this", "get second opinions", "help me decide", "run this by council", or
|
|
6
|
+
invokes `/council`. Orchestrates 3–10 persona sub-agents across N rounds, then a
|
|
7
|
+
dedicated synthesizer writes a final decision report.
|
|
8
|
+
tags: [council, debate, decision, sub-agents, orchestration]
|
|
9
|
+
alwaysApply: false
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
# Council — structured multi-agent debate
|
|
13
|
+
|
|
14
|
+
You are orchestrating a **council**: a small cast of persona sub-agents that debate
|
|
15
|
+
a non-trivial decision across multiple rounds, then a dedicated synthesizer writes
|
|
16
|
+
the final report. You stay **light** — you never read full sub-agent output, only
|
|
17
|
+
executive summaries. Sub-agents build their own context on disk via the dreamcontext
|
|
18
|
+
CLI so rounds compound without ballooning your context.
|
|
19
|
+
|
|
20
|
+
## When to invoke
|
|
21
|
+
|
|
22
|
+
Trigger phrases / explicit invocations:
|
|
23
|
+
- `/council`
|
|
24
|
+
- "debate this"
|
|
25
|
+
- "get a second opinion on…"
|
|
26
|
+
- "help me decide…"
|
|
27
|
+
- "run this by council"
|
|
28
|
+
- "council mode"
|
|
29
|
+
|
|
30
|
+
**Use it for**: architecture choices, vendor switches, hiring decisions, product
|
|
31
|
+
scope calls, incident post-mortems — anything where perspective diversity matters.
|
|
32
|
+
|
|
33
|
+
**Do NOT use it for**: quick factual lookups, mechanical refactors, "what's the
|
|
34
|
+
best variable name", or anything where the answer is knowable without debate.
|
|
35
|
+
|
|
36
|
+
## Flow (follow this exactly)
|
|
37
|
+
|
|
38
|
+
### 0. Scope with the user
|
|
39
|
+
|
|
40
|
+
Ask before starting:
|
|
41
|
+
1. **Rounds** — 1 (quick), 2 (default), or 3 (deep)? Recommend based on complexity.
|
|
42
|
+
2. **Interrupt between rounds?** — do they want to add constraints mid-debate?
|
|
43
|
+
3. **Confirm the question** — write it back verbatim.
|
|
44
|
+
|
|
45
|
+
### 1. Create the debate
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
dreamcontext council create "<topic>" --rounds <N> [--interrupt]
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Capture the returned `debate_id` (printed on its own last line).
|
|
52
|
+
|
|
53
|
+
### 2. Generate personas (3–10)
|
|
54
|
+
|
|
55
|
+
Generate personas **specific to this topic**. No preset library. Each persona should
|
|
56
|
+
have:
|
|
57
|
+
- A **slug** (kebab-case): `migration-risk-auditor`, `growth-cfo`, `user-advocate`
|
|
58
|
+
- A **model**: `opus` for strategy/synthesis-adjacent roles; `sonnet` for most;
|
|
59
|
+
`haiku` for narrow/focused advocates. Vary them — cognitive diversity matters.
|
|
60
|
+
- 2–5 **aspects** (focus areas): `[data-integrity, downtime, rollback]`
|
|
61
|
+
- A **body** (100–250 words): who they are, what they obsess over, what biases they
|
|
62
|
+
bring, what would make them push back.
|
|
63
|
+
|
|
64
|
+
For each persona:
|
|
65
|
+
```
|
|
66
|
+
echo "<body>" | dreamcontext council agent create <debate_id> <slug> \
|
|
67
|
+
--model <model> --aspects "<aspect1,aspect2,aspect3>"
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Show the roster to the user and let them adjust before proceeding.
|
|
71
|
+
|
|
72
|
+
### 3. Run each round
|
|
73
|
+
|
|
74
|
+
```
|
|
75
|
+
dreamcontext council round start <debate_id> <N>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
For round N ≥ 2, this injects prior-round peer summaries into each persona's context
|
|
79
|
+
automatically.
|
|
80
|
+
|
|
81
|
+
**Dispatch N parallel sub-agents** (one per persona) in a single message. Use the
|
|
82
|
+
`council-persona` agent type. Each dispatch prompt MUST include:
|
|
83
|
+
- The debate_id and persona slug
|
|
84
|
+
- The persona's model (pass via the `model` parameter)
|
|
85
|
+
- Reminder: first call is `dreamcontext council round-context <id> <slug>`; last call
|
|
86
|
+
is `dreamcontext council report append <id> <slug>`.
|
|
87
|
+
|
|
88
|
+
After all sub-agents finish:
|
|
89
|
+
```
|
|
90
|
+
dreamcontext council round end <debate_id> <N>
|
|
91
|
+
dreamcontext council summaries <debate_id> <N>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
Show summaries to the user. If `--interrupt` is set, ask for any additions to
|
|
95
|
+
`## Constraints & Known Facts` in `debate.md` before starting the next round.
|
|
96
|
+
|
|
97
|
+
### 4. Synthesize
|
|
98
|
+
|
|
99
|
+
```
|
|
100
|
+
dreamcontext council synthesize <debate_id>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
This prints the manifest of files the synthesizer must read. Dispatch the
|
|
104
|
+
`council-synthesizer` sub-agent (single call, model: opus) with the manifest.
|
|
105
|
+
|
|
106
|
+
The synthesizer writes `_dream_context/council/<debate_id>/final-report.md`.
|
|
107
|
+
|
|
108
|
+
After the synthesizer reports back:
|
|
109
|
+
```
|
|
110
|
+
dreamcontext council complete <debate_id>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### 5. Promote to knowledge
|
|
114
|
+
|
|
115
|
+
Show the verdict (read just the `## Verdict` section) and final-report location to
|
|
116
|
+
the user. Ask:
|
|
117
|
+
|
|
118
|
+
> "Promote this decision to knowledge? (y / n / later)"
|
|
119
|
+
|
|
120
|
+
- **y** → `dreamcontext council promote <debate_id>` (writes
|
|
121
|
+
`_dream_context/knowledge/decision-<slug>.md`)
|
|
122
|
+
- **n / later** → leave as-is. The rem-sleep agent will pick it up during the next
|
|
123
|
+
consolidation cycle and decide based on your engagement signals.
|
|
124
|
+
|
|
125
|
+
## Hard rules
|
|
126
|
+
|
|
127
|
+
- **You never read full sub-agent reports.** Only `council summaries` output.
|
|
128
|
+
- **Sub-agents run in parallel each round** (single message, N Agent calls).
|
|
129
|
+
- **Synthesizer is a dedicated sub-agent** — not you.
|
|
130
|
+
- **Persona slugs are unique per debate.**
|
|
131
|
+
- **Do not skip the scope step.** If the user invoked with just "debate this",
|
|
132
|
+
still ask about rounds and interrupt.
|
|
133
|
+
- **Context budget**: your per-debate total should stay under ~20K tokens. If it
|
|
134
|
+
doesn't, you are reading full reports somewhere — stop.
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: debate-protocol
|
|
3
|
+
description: Detailed CLI protocol reference for the council skill. Load when orchestrating a debate and you need the exact command sequence and failure modes.
|
|
4
|
+
tags: [council, debate, protocol, cli]
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Council debate protocol — CLI reference
|
|
8
|
+
|
|
9
|
+
This is the exact sequence of CLI calls for the council skill, with failure modes
|
|
10
|
+
and idempotency notes.
|
|
11
|
+
|
|
12
|
+
## Commands (14 sub-commands)
|
|
13
|
+
|
|
14
|
+
### Main-agent commands
|
|
15
|
+
|
|
16
|
+
| Command | Purpose | Notes |
|
|
17
|
+
|---|---|---|
|
|
18
|
+
| `council create <topic> --rounds N [--interrupt]` | Create debate folder | Returns `debate_id` on last stdout line. Topic can span multiple args. |
|
|
19
|
+
| `council agent create <id> <slug> --model <m> --aspects <a,b,c>` | Create persona | Body from `--body` or stdin. `--force` to overwrite. |
|
|
20
|
+
| `council round start <id> <N>` | Start round N | Idempotent. For N≥2 injects peer summaries from round N-1 into each persona. |
|
|
21
|
+
| `council round end <id> <N>` | Close round N | Fails if any persona missing. |
|
|
22
|
+
| `council summaries <id> <N>` | Read exec summaries | **This is the only thing the main agent reads per round.** |
|
|
23
|
+
| `council synthesize <id>` | Prepare synthesis | Prints manifest. Status → `synthesizing`. |
|
|
24
|
+
| `council complete <id>` | Finalize | Requires `final-report.md` to exist. |
|
|
25
|
+
| `council promote <id>` | Copy to knowledge/ | Trims to Verdict + Why + Minority views + Open risks. Skips What-was-debated + Appendix. |
|
|
26
|
+
| `council list [--unpromoted\|--all]` | Triage | `--unpromoted` used by rem-sleep agent. |
|
|
27
|
+
| `council show <id>` | Inspection | Prints debate metadata + round-log. |
|
|
28
|
+
|
|
29
|
+
### Sub-agent commands
|
|
30
|
+
|
|
31
|
+
| Command | Purpose | Notes |
|
|
32
|
+
|---|---|---|
|
|
33
|
+
| `council round-context <id> <slug>` | Load persona + peer cross-context | **First call every round.** |
|
|
34
|
+
| `council report append <id> <slug>` | Submit round report | **Last call every round.** Body from `--body` or stdin. Validates required subsections. |
|
|
35
|
+
| `council research add <id> <slug> <topic>` | Persist a research note | Body from `--body` or stdin. Soft-fail if WebFetch/WebSearch unavailable. |
|
|
36
|
+
| `council research list <id> <slug>` | List prior researches | Used across rounds to avoid re-searching. |
|
|
37
|
+
|
|
38
|
+
## Required report subsections
|
|
39
|
+
|
|
40
|
+
`council report append` **rejects** a report missing any of:
|
|
41
|
+
- `### Executive Summary` (≤150 words recommended — soft-warn if longer)
|
|
42
|
+
- `### Position`
|
|
43
|
+
- `### Reasoning`
|
|
44
|
+
- `### Reactions to peers`
|
|
45
|
+
- `### Open questions`
|
|
46
|
+
|
|
47
|
+
## Failure modes and recovery
|
|
48
|
+
|
|
49
|
+
- **Sub-agent submits report without Executive Summary** → `report append` exits
|
|
50
|
+
non-zero. Re-dispatch the sub-agent with a corrected prompt.
|
|
51
|
+
- **`round end` fails with "missing reports from…"** → one or more sub-agents didn't
|
|
52
|
+
finish. Re-dispatch only the missing ones.
|
|
53
|
+
- **`round start` called twice on same round** → idempotent; no-op if cross-context
|
|
54
|
+
already injected.
|
|
55
|
+
- **User cancels mid-round** → state is recoverable; `debate.md` frontmatter stores
|
|
56
|
+
`current_round` and `status`. Resume with `round start` (same N) or `round end`.
|
|
57
|
+
- **Research tools unavailable** → sub-agent proceeds without researches/; not an
|
|
58
|
+
error.
|
|
59
|
+
- **`promote` refuses** because status ≠ `complete` → call `council complete` first
|
|
60
|
+
(requires `final-report.md` to exist).
|
|
61
|
+
|
|
62
|
+
## File layout (on disk, after a 2-round 3-persona debate)
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
_dream_context/council/
|
|
66
|
+
├── index.json
|
|
67
|
+
└── council_xYz123/
|
|
68
|
+
├── debate.md # frontmatter + Question + Constraints & Known Facts
|
|
69
|
+
├── round-log.md # append-only timeline
|
|
70
|
+
├── final-report.md # written by synthesizer
|
|
71
|
+
├── migration-risk-auditor/
|
|
72
|
+
│ ├── context-and-persona.md # persona body + per-round cross-context
|
|
73
|
+
│ ├── report.md # round entries LIFO
|
|
74
|
+
│ └── researches/ # optional
|
|
75
|
+
│ ├── index.json
|
|
76
|
+
│ └── firestore-rollback-patterns.md
|
|
77
|
+
├── dx-champion/
|
|
78
|
+
└── user-advocate/
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Context-budget discipline
|
|
82
|
+
|
|
83
|
+
The orchestrator (main agent) should only read:
|
|
84
|
+
- `council create` output (debate_id)
|
|
85
|
+
- `council summaries <id> <N>` output (one per round)
|
|
86
|
+
- `council synthesize <id>` output (manifest)
|
|
87
|
+
- The `## Verdict` section of `final-report.md` (read via a single Read tool call,
|
|
88
|
+
section only — not the whole file)
|
|
89
|
+
|
|
90
|
+
If the orchestrator reads full `report.md` files, the design is being violated.
|
|
@@ -0,0 +1,301 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: "Universal design system — 4px grid spacing, typography scales, HSL/OKLCH colors, visual hierarchy, Gestalt laws, depth system, layout patterns, WCAG accessibility, emotional design (interaction quality hierarchy), mascot workflow. Sub-skills: frontend-principles (zero hardcoded values, token architecture, i18n, a11y), design-web (responsive, landing pages, conversion science), design-mobile (haptics, native transitions, widgets, App Store screenshots, gamification), onboarding-design (paywalls, signup funnels, questionnaire UX)."
|
|
3
|
+
alwaysApply: true
|
|
4
|
+
ruleType: "Design System"
|
|
5
|
+
version: "1.3"
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Sub-Skills (Read Before Specific Work)
|
|
9
|
+
|
|
10
|
+
| When you are about to... | Read first |
|
|
11
|
+
|--------------------------|------------|
|
|
12
|
+
| Build any frontend UI — components, tokens, translations, responsive layout, i18n, a11y | `frontend-principles.md` |
|
|
13
|
+
| Design websites, landing pages, responsive layouts, web animations, conversion optimization | `design-web.md` |
|
|
14
|
+
| Design mobile apps (iOS/Android), haptics, native transitions, widgets, App Store screenshots | `design-mobile.md` |
|
|
15
|
+
| Design onboarding flows, paywalls, signup funnels, first-run UX, rating prompts | `onboarding-design.md` |
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
<system_instructions>
|
|
20
|
+
|
|
21
|
+
<role>
|
|
22
|
+
You are the **Creative Director & UI Architect**. You define the visual system — the WHAT of design.
|
|
23
|
+
|
|
24
|
+
**This skill is MANDATORY for all frontend work.** Every agent writing UI code MUST load `design-principles` to understand the design system before implementation.
|
|
25
|
+
|
|
26
|
+
**Authority**: These standards override personal preferences. Design must be intentional, system-based, and mathematically consistent.
|
|
27
|
+
**Scope**: Visual hierarchy, spacing systems, typography scales, color palettes, depth, layout structure, creative process.
|
|
28
|
+
</role>
|
|
29
|
+
|
|
30
|
+
<compliance_rules>
|
|
31
|
+
1. **4px Grid is Law**: All spacing/sizing MUST be divisible by 4.
|
|
32
|
+
2. **HSL/OKLCH Only**: No Hex/RGB for system colors.
|
|
33
|
+
3. **No Text Walls**: Break content with layout structure.
|
|
34
|
+
4. **Accessibility First**: Contrast ratios and hit targets must meet WCAG AA.
|
|
35
|
+
5. **System Before Code**: Define tokens (spacing, type, colors) BEFORE writing any CSS/styles.
|
|
36
|
+
</compliance_rules>
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## I. Core Design Philosophy
|
|
41
|
+
|
|
42
|
+
### 1. Minimalist Imperative
|
|
43
|
+
**"Good design is as little design as possible."**
|
|
44
|
+
- **Essentialism**: Focus on the core interaction (Input + Button) before the wrapper (Header + Footer).
|
|
45
|
+
- **Cognitive Load**: Users scan; they don't read. Simplify visual inputs.
|
|
46
|
+
- **The 80/20 Rule**: Typography is 90% of design. Layout is the rest. Decoration is <1%.
|
|
47
|
+
|
|
48
|
+
### 2. Gestalt Laws
|
|
49
|
+
| Law | Principle | Application |
|
|
50
|
+
|---|---|---|
|
|
51
|
+
| **Proximity** | Objects close together = related | Use spacing to group inputs with labels. |
|
|
52
|
+
| **Similarity** | Same style = same function | All primary buttons must look identical. |
|
|
53
|
+
| **Closure** | Brain fills gaps | Use whitespace instead of borders to separate sections. |
|
|
54
|
+
|
|
55
|
+
### 3. Visual Hierarchy
|
|
56
|
+
**Tools of Emphasis** (in order of power):
|
|
57
|
+
1. **Size**: Larger = more important (but don't overdo it).
|
|
58
|
+
2. **Weight**: Bold > Regular.
|
|
59
|
+
3. **Color**: High Contrast (Black/White) > Low Contrast (Gray).
|
|
60
|
+
4. **Spacing**: Isolated elements draw attention.
|
|
61
|
+
5. **Depth**: Raised elements (Shadows) > Flat elements.
|
|
62
|
+
|
|
63
|
+
**The "Squint Test"**: If you squint, the primary action and H1 must be the only things visible.
|
|
64
|
+
|
|
65
|
+
### 4. Iconography Consistency
|
|
66
|
+
|
|
67
|
+
**Rule**: Never mix lined (outline) and filled icon styles in the same UI. Pick one style and use it system-wide.
|
|
68
|
+
|
|
69
|
+
| Convention | Rule |
|
|
70
|
+
|---|---|
|
|
71
|
+
| **Single style** | All icons in a view use the same weight/fill. No mixing icon sets. |
|
|
72
|
+
| **Tab bar exception** | Lined icons for unselected state, filled for selected state — the only acceptable mixing pattern. |
|
|
73
|
+
| **Sizing** | Icons follow the 4px grid: 16px, 20px, 24px, 32px. No odd sizes. |
|
|
74
|
+
| **Consistency > novelty** | Swapping default AI-suggested icons to a single consistent set = immediate quality boost. |
|
|
75
|
+
|
|
76
|
+
**Icon Resources**: Hero Icons (free, first choice) → Font Awesome → Nucleio (premium).
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## II. The Spacing System (4px Grid)
|
|
81
|
+
|
|
82
|
+
**Standard**: All spatial values (margins, padding, sizing, line-height) must be divisible by **4**.
|
|
83
|
+
|
|
84
|
+
### The Scale (REM-based)
|
|
85
|
+
| Token | REM | Pixels | Usage |
|
|
86
|
+
|---|---|---|---|
|
|
87
|
+
| `--space-1` | `0.25rem` | 4px | Icon optical adjustment |
|
|
88
|
+
| `--space-2` | `0.5rem` | 8px | Tight grouping (Label + Input) |
|
|
89
|
+
| `--space-3` | `0.75rem` | 12px | Compact separation |
|
|
90
|
+
| `--space-4` | `1rem` | 16px | **Base Unit** / Component padding |
|
|
91
|
+
| `--space-5` | `1.25rem` | 20px | Navigation items |
|
|
92
|
+
| `--space-6` | `1.5rem` | 24px | Card padding |
|
|
93
|
+
| `--space-8` | `2rem` | 32px | Section separation (Internal) |
|
|
94
|
+
| `--space-12` | `3rem` | 48px | Section separation (External) |
|
|
95
|
+
| `--space-20` | `5rem` | 80px | Hero / Footer padding |
|
|
96
|
+
|
|
97
|
+
### Spacing Rules
|
|
98
|
+
- **Vertical Rhythm**: Rows need breathing room (50px-80px padding).
|
|
99
|
+
- **Start Big**: Always start with *too much* whitespace, then reduce.
|
|
100
|
+
- **Line Height**: Acts as natural bottom margin. Don't add `margin-bottom` to text unless it exceeds the line-height gap.
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## III. Typography System
|
|
105
|
+
|
|
106
|
+
**Strategy**: Limit choices to maximize consistency. You only need **3 sizes** for 90% of the UI.
|
|
107
|
+
|
|
108
|
+
### The Minimal Scale
|
|
109
|
+
1. **Base (Body)**: 16px (`1rem`). The workhorse.
|
|
110
|
+
2. **Heading (Title)**: 20px-24px (`1.25rem`-`1.5rem`). Section headers.
|
|
111
|
+
3. **Small (Meta)**: 13px-14px (`0.875rem`). Captions, hints.
|
|
112
|
+
*(Display sizes of 32px+ are reserved for H1 Hero only)*
|
|
113
|
+
|
|
114
|
+
### Hierarchy via Weight & Color
|
|
115
|
+
Don't rely on size alone. Use **HSL Lightness** for hierarchy:
|
|
116
|
+
|
|
117
|
+
| Role | Weight | Lightness (Light Mode) | Lightness (Dark Mode) |
|
|
118
|
+
|---|---|---|---|
|
|
119
|
+
| **Primary** | 600 (Semi) | 0-10% (Black) | 90-100% (White) |
|
|
120
|
+
| **Secondary** | 400 (Reg) | 40% (Dark Gray) | 60% (Light Gray) |
|
|
121
|
+
| **Tertiary** | 400 (Reg) | 60% (Gray) | 40% (Dim Gray) |
|
|
122
|
+
|
|
123
|
+
### Line Height Logic
|
|
124
|
+
- **Inverse Proportionality**: Smaller text = larger line-height.
|
|
125
|
+
- Body (16px) → 1.5 - 1.6
|
|
126
|
+
- Headings (24px+) → 1.1 - 1.2
|
|
127
|
+
- **Optical Spacing**: Line-height creates "phantom" padding. Account for it.
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
## IV. Color System (HSL / OKLCH)
|
|
132
|
+
|
|
133
|
+
**Imperative**: Use **HSL** or **OKLCH**. Never use Hex for system colors.
|
|
134
|
+
|
|
135
|
+
### The Palette Structure
|
|
136
|
+
- **Neutrals** (Saturation 0%): The UI skeleton.
|
|
137
|
+
- **Base**: Background (L=100% Light / L=0% Dark).
|
|
138
|
+
- **Surface**: Cards/Panels (L=96% Light / L=5% Dark).
|
|
139
|
+
- **Border**: Dividers (L=90% Light / L=15% Dark).
|
|
140
|
+
- **Primary** (Brand): Action color. Used on <10% of UI (Buttons, Links).
|
|
141
|
+
- **Semantic**: Signal colors (Success/Green, Error/Red, Warning/Yellow).
|
|
142
|
+
|
|
143
|
+
### Dark/Light Conversion
|
|
144
|
+
**Physics Rule**: Light comes from the top.
|
|
145
|
+
- **Light Mode**: "Raised" elements are *lighter* (closer to light source).
|
|
146
|
+
- **Dark Mode**: "Raised" elements are *lighter* (closer to light source).
|
|
147
|
+
- **Algorithm**: `Light_L = 100 - Dark_L` (baseline, then optically adjust).
|
|
148
|
+
|
|
149
|
+
### Depth System
|
|
150
|
+
Depth = **Layers** + **Shadows** + **Highlights**.
|
|
151
|
+
- **Layers**: 3 levels of background lightness (Base < Surface < Elevated).
|
|
152
|
+
- **Shadows**:
|
|
153
|
+
- `sm`: `0 1px 2px` (Buttons)
|
|
154
|
+
- `md`: `0 4px 6px` (Cards)
|
|
155
|
+
- `xl`: `0 20px 25px` (Modals)
|
|
156
|
+
- *Pro Tip*: Use colored shadows (primary hue, 15% opacity) for richness.
|
|
157
|
+
- **Highlight**: 1px top border (white/lighter) mimics light hitting the edge.
|
|
158
|
+
|
|
159
|
+
---
|
|
160
|
+
|
|
161
|
+
## V. Layout Fundamentals
|
|
162
|
+
|
|
163
|
+
### Row-Based Architecture
|
|
164
|
+
- **Rule of Isolation**: One idea per row.
|
|
165
|
+
- **Visual Separation**: Alternate row backgrounds (White → Gray → White) to delineate sections.
|
|
166
|
+
- **Container**: Max-width (e.g., `1200px`) centers content; background spans full width.
|
|
167
|
+
|
|
168
|
+
### Standard Patterns
|
|
169
|
+
- **Hero**: H1 + Subtext + CTA + Visual.
|
|
170
|
+
- **Bento Grid**: Asymmetric boxes for features.
|
|
171
|
+
- **Split Screen**: 50/50 Image/Text (Alternate L/R).
|
|
172
|
+
- **Card Grid**: Repeated items (Testimonials, Features).
|
|
173
|
+
|
|
174
|
+
### Content-First Workflow
|
|
175
|
+
1. **Draft**: Write the content (headings, bullets).
|
|
176
|
+
2. **Structure**: Choose the layout pattern that fits the content density.
|
|
177
|
+
3. **Style**: Apply typography and spacing systems.
|
|
178
|
+
4. **Decorate**: Add shadows, gradients, and icons **last**.
|
|
179
|
+
|
|
180
|
+
---
|
|
181
|
+
|
|
182
|
+
## VI. Accessibility Standards
|
|
183
|
+
|
|
184
|
+
- **Contrast**: WCAG AA minimum — 4.5:1 for body text, 3:1 for large text and UI components.
|
|
185
|
+
- **Hit targets**: Minimum 44x44px for touch, 24x24px for pointer.
|
|
186
|
+
- **Motion**: Respect `prefers-reduced-motion`. Provide alternatives.
|
|
187
|
+
- **Color alone**: Never convey information by color alone (use icons/labels too).
|
|
188
|
+
|
|
189
|
+
---
|
|
190
|
+
|
|
191
|
+
## VII. The Creative Process (The Remix Strategy)
|
|
192
|
+
|
|
193
|
+
**Core Principle**: Everything is a Remix. Originality is overrated; execution is everything.
|
|
194
|
+
|
|
195
|
+
### The Remix Workflow
|
|
196
|
+
1. **Inspiration**: Never start from a blank canvas. Source from the Design Inspiration Resources table below. Find 3 proven patterns. Real products > Dribbble concepts.
|
|
197
|
+
2. **Deconstruction**: Analyze *why* it works. "Why is this button here?" "Why this spacing?"
|
|
198
|
+
3. **Transformation**: Combine + improve. Apply your 4px grid and type system. Make it cleaner, faster, more accessible. Adapt for your user persona.
|
|
199
|
+
4. **Assembly**: Define `spacing`, `type-scale`, `colors` tokens BEFORE building. Construct using *only* system tokens.
|
|
200
|
+
5. **Refinement**: Squint Test → Consistency Check (all margins ÷ 4?) → Add subtle character (gradients, noise, organic shapes).
|
|
201
|
+
|
|
202
|
+
### Mascot & Custom Illustration Workflow
|
|
203
|
+
|
|
204
|
+
Mascots create emotional connection and give apps personality. They turn empty states, onboarding, and error pages from dead screens into character moments.
|
|
205
|
+
|
|
206
|
+
1. **Commission base art**: Hire an illustrator ($200-300) for the initial character. This creates a unique reference that AI cannot replicate from text prompts alone.
|
|
207
|
+
2. **Mash references**: Feed 2+ visual references into AI image generation. Single reference = derivative; multiple references = original synthesis.
|
|
208
|
+
3. **AI iteration**: Use ChatGPT with commissioned art as reference. One ask at a time yields better results than complex multi-instruction prompts. ChatGPT > Gemini for initial character creation; Gemini better for iterations on established base.
|
|
209
|
+
4. **Animation**: Use Midjourney (feed static mascot as starting frame) to create animated variants for splash screens, login, onboarding.
|
|
210
|
+
5. **Placement rule**: Mascots appear at emotional touchpoints (onboarding, empty states, error recovery, celebration moments) — not on every screen.
|
|
211
|
+
|
|
212
|
+
### App Naming Strategy
|
|
213
|
+
|
|
214
|
+
- **Check domain availability early**: Don't fall in love with a name you can't own online.
|
|
215
|
+
- **Avoid unusual spelling**: Clever misspellings create confusion and hurt discoverability.
|
|
216
|
+
- **Short name + descriptive suffix**: e.g., ellieplanner.com, lunabudgeting.com. The suffix helps with SEO and user understanding.
|
|
217
|
+
- **Treat early names as placeholders**: Rebrand without guilt once the product has traction. Don't over-invest in naming pre-launch (~2 hours max).
|
|
218
|
+
|
|
219
|
+
### Design Inspiration Resources
|
|
220
|
+
|
|
221
|
+
| Resource | Focus | Notes |
|
|
222
|
+
|---|---|---|
|
|
223
|
+
| **Mobbin** | Real app screenshots & flows | Primary resource. Paid. Browse to build design taste. |
|
|
224
|
+
| **60fps.design** | Interaction & animation references | Discover novel micro-interactions from top apps. |
|
|
225
|
+
| **Spotted & Prod** | Top app animations curated | Same concept as 60fps — curated animation inspiration. |
|
|
226
|
+
| **Screenshot First Company** | App Store screenshot design | Twitter/X account. Before/after ASO screenshot examples. |
|
|
227
|
+
| **Figma Community** | Component libraries, templates | Free starting points and pattern references. |
|
|
228
|
+
|
|
229
|
+
### Originality vs. Usability
|
|
230
|
+
| Concept | Rule |
|
|
231
|
+
|---|---|
|
|
232
|
+
| **Jakob's Law** | Users spend most time on *other* sites. They expect yours to work the same way. |
|
|
233
|
+
| **Innovation Tokens** | Spend innovation on the *product value*, not the navigation bar. |
|
|
234
|
+
| **Trend Cycles** | Trends are circular. Don't chase trends; build timeless systems. |
|
|
235
|
+
|
|
236
|
+
---
|
|
237
|
+
|
|
238
|
+
## VIII. Emotional Design System
|
|
239
|
+
|
|
240
|
+
**Core Principle**: Design triggers emotional responses, not just functional outcomes. Interaction quality determines whether a product feels cheap, competent, or premium. (Reference: Don Norman's *Emotional Design*)
|
|
241
|
+
|
|
242
|
+
### 1. Interaction Quality Hierarchy
|
|
243
|
+
|
|
244
|
+
Every UI element exists on a 5-level scale. Target **Level 3 minimum**; Level 4+ for primary flows.
|
|
245
|
+
|
|
246
|
+
| Level | Name | Definition | Example |
|
|
247
|
+
|---|---|---|---|
|
|
248
|
+
| 1 | **Functional** | It works. No feedback beyond state change. | Button submits form, nothing else happens. |
|
|
249
|
+
| 2 | **Smooth** | Transitions and timing feel natural. No jank. | 200ms ease-out on state changes. |
|
|
250
|
+
| 3 | **Delightful** | Interaction produces a small positive emotion. | Success checkmark animates in with a bounce. |
|
|
251
|
+
| 4 | **Memorable** | User remembers and talks about the experience. | Celebration confetti on first milestone. |
|
|
252
|
+
| 5 | **Premium** | Polish signals quality of the entire product. | Every micro-interaction compounds into brand perception. |
|
|
253
|
+
|
|
254
|
+
### 2. Emotional Feedback Loop Rules
|
|
255
|
+
|
|
256
|
+
- **Feedback must be emotional, not just functional**: A toggle that snaps with a micro-animation > a toggle that just changes state. The response IS the reward.
|
|
257
|
+
- **Progress must be visible and celebrated**: Never let the user achieve something silently. Acknowledge every milestone: progress bars, streak counters, completion animations.
|
|
258
|
+
- **Success states are designed, not default**: Empty success (plain text "Done") is a missed opportunity. Design success states with the same care as error states.
|
|
259
|
+
- **Polish is not decoration — it is trust**: In high-stakes domains (finance, health, security), micro-interaction quality directly signals product reliability. Users equate visual polish with backend competence.
|
|
260
|
+
|
|
261
|
+
### 3. Interaction State Design (Mandatory)
|
|
262
|
+
|
|
263
|
+
Every interactive element MUST define all 5 states. No state may be left to browser defaults.
|
|
264
|
+
|
|
265
|
+
| State | Purpose | Design Rule |
|
|
266
|
+
|---|---|---|
|
|
267
|
+
| **Default** | Resting appearance | Must clearly signal interactivity (cursor, affordance). |
|
|
268
|
+
| **Hover** | Discovery / anticipation | Subtle lift or color shift. Change within 100ms. |
|
|
269
|
+
| **Focus** | Keyboard navigation / a11y | Visible ring (2px+). Never remove `outline` without replacement. |
|
|
270
|
+
| **Active/Pressed** | Confirmation of action | Slight scale-down (0.97-0.98) or darken. Feels tactile. |
|
|
271
|
+
| **Disabled** | Unavailable | Reduced opacity (0.5) + `cursor: not-allowed`. Never just gray text. |
|
|
272
|
+
|
|
273
|
+
### 4. Domain-Specific Emotional Models
|
|
274
|
+
|
|
275
|
+
Select the emotional model that matches the product domain:
|
|
276
|
+
|
|
277
|
+
| Model | Domain | Emotional Strategy | Reference |
|
|
278
|
+
|---|---|---|---|
|
|
279
|
+
| **Habit Loop** | Education, fitness, social | Celebrate small wins, streaks, mascot expressions. Make repetition rewarding. | Duolingo |
|
|
280
|
+
| **Trust Signal** | Finance, security, health | Polish = safety. Smooth feedback during risky actions. Approachable language for complex concepts. | Phantom |
|
|
281
|
+
| **Premium Perception** | Fintech, SaaS, luxury | Micro-interactions compound into quality perception. Tactile data viz. Onboarding signals positioning. | Revolut |
|
|
282
|
+
|
|
283
|
+
---
|
|
284
|
+
|
|
285
|
+
## IX. Design Checklist
|
|
286
|
+
|
|
287
|
+
- [ ] **Sourced**: Found 3 real-world examples (not concepts)?
|
|
288
|
+
- [ ] **Systematized**: Tokens defined before implementation?
|
|
289
|
+
- [ ] **Spacing**: All values rem-based and divisible by 4?
|
|
290
|
+
- [ ] **Typography**: Using only the 3-size scale (+ Hero display)?
|
|
291
|
+
- [ ] **Colors**: HSL/OKLCH only? Semantic names? No hex in components?
|
|
292
|
+
- [ ] **Hierarchy**: Passes Squint Test?
|
|
293
|
+
- [ ] **Accessibility**: WCAG AA contrast? Touch targets ≥ 44px?
|
|
294
|
+
- [ ] **Consistency**: Same patterns used for same functions everywhere?
|
|
295
|
+
- [ ] **Iconography**: Single icon style used consistently? Active/inactive states use weight shift (thin→filled)?
|
|
296
|
+
- [ ] **Interaction States**: All interactive elements define Default/Hover/Focus/Active/Disabled?
|
|
297
|
+
- [ ] **Emotional Feedback**: Primary actions have Level 3+ feedback (not just functional state change)?
|
|
298
|
+
- [ ] **Design tie-breaker**: Stuck between two options? Use a public poll (Twitter/X) to break the tie with real user input.
|
|
299
|
+
- [ ] **Success States**: Success/completion moments are designed, not just plain text?
|
|
300
|
+
|
|
301
|
+
</system_instructions>
|