claude-dev-env 1.38.0 → 1.39.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.
Files changed (271) hide show
  1. package/CLAUDE.md +10 -36
  2. package/_shared/pr-loop/audit-reply-template.md +147 -0
  3. package/_shared/pr-loop/fix-protocol.md +25 -4
  4. package/_shared/pr-loop/gh-payloads.md +37 -50
  5. package/_shared/pr-loop/scripts/code_rules_gate.py +0 -60
  6. package/_shared/pr-loop/scripts/config/post_audit_thread_constants.py +189 -0
  7. package/_shared/pr-loop/scripts/post_audit_thread.py +947 -0
  8. package/_shared/pr-loop/scripts/tests/test_code_rules_gate.py +0 -19
  9. package/_shared/pr-loop/scripts/tests/test_post_audit_thread.py +923 -0
  10. package/_shared/pr-loop/scripts/tests/test_post_audit_thread_constants.py +127 -0
  11. package/_shared/pr-loop/state-schema.md +1 -1
  12. package/agents/clean-coder.md +2 -2
  13. package/bin/install.mjs +6 -7
  14. package/bin/install.test.mjs +8 -0
  15. package/commands/doc-gist.md +16 -0
  16. package/commands/plan.md +0 -2
  17. package/commands/review-plan.md +1 -1
  18. package/docs/CODE_RULES.md +122 -2
  19. package/hooks/blocking/bot_mention_comment_blocker.py +75 -0
  20. package/hooks/blocking/code_rules_enforcer.py +1236 -161
  21. package/hooks/blocking/convergence_gate_blocker.py +130 -0
  22. package/hooks/blocking/destructive_command_blocker.py +74 -0
  23. package/hooks/blocking/gh_body_arg_blocker.py +30 -0
  24. package/hooks/blocking/md_to_html_blocker.py +119 -0
  25. package/hooks/blocking/test_bot_mention_comment_blocker.py +131 -0
  26. package/hooks/blocking/test_code_rules_enforcer.py +21 -0
  27. package/hooks/blocking/test_code_rules_enforcer_any_exempt_files.py +70 -0
  28. package/hooks/blocking/test_code_rules_enforcer_any_imports_and_cast.py +92 -0
  29. package/hooks/blocking/test_code_rules_enforcer_banned_import_alias.py +143 -0
  30. package/hooks/blocking/test_code_rules_enforcer_banned_prefixes.py +152 -0
  31. package/hooks/blocking/test_code_rules_enforcer_bare_except.py +120 -0
  32. package/hooks/blocking/test_code_rules_enforcer_boundary_types.py +175 -0
  33. package/hooks/blocking/test_code_rules_enforcer_cap_meta.py +0 -1
  34. package/hooks/blocking/test_code_rules_enforcer_collection_prefix.py +50 -0
  35. package/hooks/blocking/test_code_rules_enforcer_docstring_format.py +255 -0
  36. package/hooks/blocking/test_code_rules_enforcer_inline_tuple_string_magic.py +130 -0
  37. package/hooks/blocking/test_code_rules_enforcer_stub_implementations.py +141 -0
  38. package/hooks/blocking/test_code_rules_enforcer_test_branching.py +143 -0
  39. package/hooks/blocking/test_code_rules_enforcer_thin_wrapper_files.py +169 -0
  40. package/hooks/blocking/test_code_rules_enforcer_todo_markers.py +99 -0
  41. package/hooks/blocking/test_code_rules_enforcer_typed_dict_pairs.py +141 -0
  42. package/hooks/blocking/test_code_rules_enforcer_unused_imports.py +158 -0
  43. package/hooks/blocking/test_convergence_gate_blocker.py +63 -0
  44. package/hooks/blocking/test_destructive_command_blocker.py +146 -0
  45. package/hooks/blocking/test_destructive_command_blocker_no_verify.py +102 -0
  46. package/hooks/blocking/test_gh_body_arg_blocker.py +45 -0
  47. package/hooks/blocking/test_md_to_html_blocker.py +317 -0
  48. package/hooks/config/any_type_config.py +7 -0
  49. package/hooks/config/banned_identifiers_constants.py +11 -0
  50. package/hooks/config/blocking_check_limits.py +38 -0
  51. package/hooks/config/bot_mention_comment_blocker_constants.py +20 -0
  52. package/hooks/config/code_rules_enforcer_constants.py +53 -0
  53. package/hooks/config/convergence_branch_constants.py +9 -0
  54. package/hooks/config/doc_gist_auto_publish_constants.py +18 -0
  55. package/hooks/config/html_companion_constants.py +20 -0
  56. package/hooks/config/inline_tuple_string_magic_constants.py +22 -0
  57. package/hooks/config/test_banned_identifiers_constants.py +17 -0
  58. package/hooks/hooks.json +28 -20
  59. package/hooks/pyproject.toml +69 -0
  60. package/hooks/validators/mypy_integration.py +47 -1
  61. package/hooks/validators/run_all_validators.py +3 -3
  62. package/hooks/validators/test_mypy_integration.py +50 -1
  63. package/hooks/workflow/doc_gist_auto_publish.py +144 -0
  64. package/hooks/workflow/md_to_html_companion.py +365 -0
  65. package/hooks/workflow/test_doc_gist_auto_publish.py +117 -0
  66. package/hooks/workflow/test_md_to_html_companion.py +452 -0
  67. package/package.json +1 -1
  68. package/rules/gh-body-file.md +2 -0
  69. package/scripts/Install-SweepEmptyDirs.ps1 +111 -0
  70. package/scripts/check.ps1 +106 -0
  71. package/scripts/config/timing.py +11 -0
  72. package/scripts/sweep_empty_dirs.py +138 -0
  73. package/scripts/sync_to_cursor/rules.py +1 -1
  74. package/scripts/test_sweep_empty_dirs.py +183 -0
  75. package/skills/_shared/pr-loop/prompts/pr-consistency-audit.xml +323 -0
  76. package/skills/_shared/pr-loop/scripts/_cli_utils.py +22 -0
  77. package/skills/_shared/pr-loop/scripts/_path_resolver.py +165 -0
  78. package/skills/_shared/pr-loop/scripts/_xml_utils.py +20 -0
  79. package/skills/_shared/pr-loop/scripts/build_audit_prompt.py +182 -0
  80. package/skills/_shared/pr-loop/scripts/build_fix_prompt.py +185 -0
  81. package/skills/_shared/pr-loop/scripts/config/__init__.py +0 -0
  82. package/skills/_shared/pr-loop/scripts/config/path_resolver_constants.py +78 -0
  83. package/skills/_shared/pr-loop/scripts/init_loop_state.py +135 -0
  84. package/skills/_shared/pr-loop/scripts/teardown_worktrees.py +175 -0
  85. package/skills/_shared/pr-loop/scripts/write_audit_outcomes.py +182 -0
  86. package/skills/_shared/pr-loop/scripts/write_fix_outcomes.py +206 -0
  87. package/skills/bugteam/CONSTRAINTS.md +21 -22
  88. package/skills/bugteam/EXAMPLES.md +3 -3
  89. package/skills/bugteam/PROMPTS.md +227 -67
  90. package/skills/bugteam/SKILL.md +114 -455
  91. package/skills/bugteam/reference/README.md +1 -1
  92. package/skills/bugteam/reference/audit-and-teammates.md +112 -39
  93. package/skills/bugteam/reference/audit-contract.md +4 -22
  94. package/skills/bugteam/reference/copilot-gap-analysis.md +8 -5
  95. package/skills/bugteam/reference/design-rationale.md +2 -2
  96. package/skills/bugteam/reference/github-pr-reviews.md +50 -57
  97. package/skills/bugteam/reference/obstacles/audit-assign-ids.md +13 -0
  98. package/skills/bugteam/reference/obstacles/audit-capture-excerpts.md +13 -0
  99. package/skills/bugteam/reference/obstacles/audit-walk-categories.md +13 -0
  100. package/skills/bugteam/reference/obstacles/audit-write-xml.md +13 -0
  101. package/skills/bugteam/reference/obstacles/fix-append-summary.md +13 -0
  102. package/skills/bugteam/reference/obstacles/fix-apply-fixes.md +13 -0
  103. package/skills/bugteam/reference/obstacles/fix-git-add-commit.md +13 -0
  104. package/skills/bugteam/reference/obstacles/fix-git-push.md +13 -0
  105. package/skills/bugteam/reference/obstacles/fix-post-reply.md +13 -0
  106. package/skills/bugteam/reference/obstacles/fix-publish-summary.md +13 -0
  107. package/skills/bugteam/reference/obstacles/fix-py-compile.md +13 -0
  108. package/skills/bugteam/reference/obstacles/fix-read-files.md +13 -0
  109. package/skills/bugteam/reference/obstacles/fix-resolve-thread.md +13 -0
  110. package/skills/bugteam/reference/obstacles/fix-test-suite.md +13 -0
  111. package/skills/bugteam/reference/obstacles/fix-violation-count.md +13 -0
  112. package/skills/bugteam/reference/obstacles/fix-write-xml.md +13 -0
  113. package/skills/bugteam/reference/team-setup.md +106 -9
  114. package/skills/bugteam/reference/teardown-publish-permissions.md +39 -8
  115. package/skills/bugteam/scripts/README.md +60 -0
  116. package/skills/bugteam/scripts/_claude_permissions_common.py +358 -0
  117. package/skills/bugteam/scripts/bugteam_code_rules_gate.py +976 -0
  118. package/skills/bugteam/scripts/bugteam_fix_hookspath.py +375 -0
  119. package/skills/bugteam/scripts/bugteam_preflight.py +294 -0
  120. package/skills/bugteam/scripts/config/bugteam_code_rules_gate_constants.py +25 -0
  121. package/skills/bugteam/scripts/config/bugteam_fix_hookspath_constants.py +26 -0
  122. package/skills/bugteam/scripts/config/bugteam_preflight_constants.py +35 -0
  123. package/skills/bugteam/scripts/config/claude_permissions_common_constants.py +20 -0
  124. package/skills/bugteam/scripts/config/probe_code_rules_enforcer_check_constants.py +12 -0
  125. package/skills/bugteam/scripts/config/windows_safe_rmtree_constants.py +7 -0
  126. package/skills/bugteam/scripts/grant_project_claude_permissions.py +175 -0
  127. package/skills/bugteam/scripts/probe_code_rules_enforcer_check.py +107 -0
  128. package/skills/bugteam/scripts/revoke_project_claude_permissions.py +220 -0
  129. package/skills/bugteam/scripts/test__claude_permissions_common.py +112 -0
  130. package/skills/bugteam/scripts/test_bugteam_code_rules_gate.py +400 -0
  131. package/skills/bugteam/scripts/test_bugteam_fix_hookspath.py +384 -0
  132. package/skills/bugteam/scripts/test_bugteam_preflight.py +268 -0
  133. package/skills/bugteam/scripts/test_claude_permissions_common.py +195 -0
  134. package/skills/bugteam/scripts/test_grant_project_claude_permissions.py +55 -0
  135. package/skills/bugteam/scripts/test_probe_code_rules_enforcer_check.py +76 -0
  136. package/skills/bugteam/scripts/test_revoke_project_claude_permissions.py +55 -0
  137. package/skills/bugteam/scripts/test_windows_safe_rmtree.py +108 -0
  138. package/skills/bugteam/scripts/windows_safe_rmtree.py +100 -0
  139. package/skills/bugteam/test_skill_additions.py +1 -11
  140. package/skills/code/SKILL.md +176 -0
  141. package/skills/doc-gist/SKILL.md +99 -0
  142. package/skills/doc-gist/references/examples/01-exploration-code-approaches.html +453 -0
  143. package/skills/doc-gist/references/examples/02-exploration-visual-designs.html +515 -0
  144. package/skills/doc-gist/references/examples/03-code-review-pr.html +638 -0
  145. package/skills/doc-gist/references/examples/04-code-understanding.html +491 -0
  146. package/skills/doc-gist/references/examples/05-design-system.html +629 -0
  147. package/skills/doc-gist/references/examples/06-component-variants.html +605 -0
  148. package/skills/doc-gist/references/examples/07-prototype-animation.html +455 -0
  149. package/skills/doc-gist/references/examples/08-prototype-interaction.html +396 -0
  150. package/skills/doc-gist/references/examples/09-slide-deck.html +592 -0
  151. package/skills/doc-gist/references/examples/10-svg-illustrations.html +492 -0
  152. package/skills/doc-gist/references/examples/11-status-report.html +528 -0
  153. package/skills/doc-gist/references/examples/12-incident-report.html +596 -0
  154. package/skills/doc-gist/references/examples/13-flowchart-diagram.html +395 -0
  155. package/skills/doc-gist/references/examples/14-research-feature-explainer.html +381 -0
  156. package/skills/doc-gist/references/examples/15-research-concept-explainer.html +368 -0
  157. package/skills/doc-gist/references/examples/16-implementation-plan.html +702 -0
  158. package/skills/doc-gist/references/examples/17-pr-writeup.html +595 -0
  159. package/skills/doc-gist/references/examples/18-editor-triage-board.html +573 -0
  160. package/skills/doc-gist/references/examples/19-editor-feature-flags.html +663 -0
  161. package/skills/doc-gist/references/examples/20-editor-prompt-tuner.html +722 -0
  162. package/skills/doc-gist/references/examples/README.md +5 -0
  163. package/skills/doc-gist/scripts/config/__init__.py +0 -0
  164. package/skills/doc-gist/scripts/config/gist_upload_constants.py +16 -0
  165. package/skills/doc-gist/scripts/gist_upload.py +177 -0
  166. package/skills/doc-gist/scripts/test_gist_upload.py +51 -0
  167. package/skills/findbugs/SKILL.md +68 -2
  168. package/skills/monitor-open-prs/SKILL.md +13 -32
  169. package/skills/monitor-open-prs/test_skill_contract.py +0 -11
  170. package/skills/pr-consistency-audit/SKILL.md +112 -0
  171. package/skills/pr-consistency-audit/reference/detection-rules.md +96 -0
  172. package/skills/pr-consistency-audit/reference/illustrations.md +78 -0
  173. package/skills/pr-converge/SKILL.md +227 -23
  174. package/skills/pr-converge/config/__init__.py +0 -0
  175. package/skills/pr-converge/config/constants.py +62 -0
  176. package/skills/pr-converge/reference/convergence-gates.md +138 -44
  177. package/skills/pr-converge/reference/examples.md +43 -11
  178. package/skills/pr-converge/reference/fix-protocol.md +6 -5
  179. package/skills/pr-converge/reference/ground-rules.md +5 -3
  180. package/skills/pr-converge/reference/multi-pr-orchestration.md +44 -19
  181. package/skills/pr-converge/reference/obstacles/fix-post-replies.md +13 -0
  182. package/skills/pr-converge/reference/obstacles/fix-publish-summary.md +13 -0
  183. package/skills/pr-converge/reference/obstacles/fix-push.md +13 -0
  184. package/skills/pr-converge/reference/obstacles/fix-read-filelines.md +13 -0
  185. package/skills/pr-converge/reference/obstacles/fix-reset-state.md +13 -0
  186. package/skills/pr-converge/reference/obstacles/fix-resolve-threads.md +13 -0
  187. package/skills/pr-converge/reference/obstacles/fix-spawn-clean-coder.md +13 -0
  188. package/skills/pr-converge/reference/obstacles/fix-stage-commit.md +13 -0
  189. package/skills/pr-converge/reference/obstacles/fix-trigger-bugbot.md +13 -0
  190. package/skills/pr-converge/reference/obstacles/fix-write-test.md +13 -0
  191. package/skills/pr-converge/reference/per-tick.md +90 -31
  192. package/skills/pr-converge/reference/state-schema.md +22 -1
  193. package/skills/pr-converge/reference/stop-conditions.md +9 -7
  194. package/skills/pr-converge/scripts/README.md +34 -46
  195. package/skills/pr-converge/scripts/check_bugbot_ci.py +174 -0
  196. package/skills/pr-converge/scripts/check_convergence.py +497 -0
  197. package/skills/pr-converge/scripts/check_pending_reviews.py +154 -0
  198. package/skills/pr-converge/scripts/config/pr_converge_constants.py +118 -0
  199. package/skills/pr-converge/scripts/fetch_copilot_reviews.py +134 -0
  200. package/skills/pr-converge/scripts/post_fix_reply.py +168 -0
  201. package/skills/pr-converge/workflows/schedule-wakeup-loop.md +5 -12
  202. package/skills/qbug/SKILL.md +132 -27
  203. package/skills/session-log/SKILL.md +216 -114
  204. package/skills/session-tidy/SKILL.md +1 -1
  205. package/skills/skill-builder/SKILL.md +138 -56
  206. package/skills/skill-builder/references/delegation-map.md +72 -113
  207. package/skills/skill-builder/references/progressive-disclosure.md +122 -0
  208. package/skills/skill-builder/references/self-audit-checklist.md +92 -0
  209. package/skills/skill-builder/references/skill-types.md +228 -0
  210. package/skills/skill-builder/references/thariq-x-post-skills.json +33 -0
  211. package/skills/skill-builder/templates/gap-analysis.md +15 -8
  212. package/skills/skill-builder/workflows/improve-skill.md +86 -57
  213. package/skills/skill-builder/workflows/new-skill.md +80 -168
  214. package/skills/skill-builder/workflows/polish-skill.md +78 -54
  215. package/skills/structure-prompt/SKILL.md +50 -0
  216. package/skills/structure-prompt/reference/adversarial-tuning.md +62 -0
  217. package/skills/structure-prompt/reference/block-classification.md +27 -0
  218. package/skills/structure-prompt/reference/canonical-case.md +48 -0
  219. package/skills/structure-prompt/reference/citation-depth.md +70 -0
  220. package/skills/structure-prompt/reference/cleanup.md +33 -0
  221. package/skills/structure-prompt/reference/constraints.md +33 -0
  222. package/skills/structure-prompt/reference/directives.md +37 -0
  223. package/skills/structure-prompt/reference/examples.md +72 -0
  224. package/skills/structure-prompt/reference/instantiation.md +51 -0
  225. package/skills/structure-prompt/reference/output-contract.md +72 -0
  226. package/skills/structure-prompt/reference/per-category.md +23 -0
  227. package/skills/structure-prompt/reference/persona.md +38 -0
  228. package/skills/structure-prompt/reference/research.md +33 -0
  229. package/skills/structure-prompt/reference/structure.md +28 -0
  230. package/agents/code-standards-agent.md +0 -93
  231. package/agents/groq-coder.md +0 -113
  232. package/agents/plan-executor.md +0 -226
  233. package/agents/project-docs-analyzer.md +0 -53
  234. package/agents/project-structure-organizer-agent.md +0 -72
  235. package/agents/skill-to-agent-converter.md +0 -370
  236. package/agents/skill-writer-agent.md +0 -470
  237. package/agents/user-docs-writer.md +0 -67
  238. package/agents/workflow-visual-documenter.md +0 -82
  239. package/commands/readability-review.md +0 -20
  240. package/hooks/mypy.ini +0 -2
  241. package/hooks/notification/attention_needed_notify.py +0 -71
  242. package/hooks/notification/claude_notification_handler.py +0 -67
  243. package/hooks/notification/notification_utils.py +0 -267
  244. package/hooks/notification/subagent_complete_notify.py +0 -381
  245. package/hooks/notification/test_attention_needed_notify.py +0 -47
  246. package/hooks/notification/test_claude_notification_handler.py +0 -54
  247. package/hooks/notification/test_notification_utils.py +0 -91
  248. package/hooks/notification/test_subagent_complete_notify.py +0 -79
  249. package/scripts/config/groq_bugteam_config.py +0 -230
  250. package/scripts/config/test_groq_bugteam_config.py +0 -83
  251. package/scripts/config/test_spec_implementer_prompt.py +0 -32
  252. package/scripts/groq_bugteam.README.md +0 -131
  253. package/scripts/groq_bugteam.py +0 -647
  254. package/scripts/groq_bugteam_dotenv.py +0 -40
  255. package/scripts/groq_bugteam_spec.py +0 -226
  256. package/scripts/test_groq_bugteam.py +0 -529
  257. package/scripts/test_groq_bugteam_apply_fix_from_spec.py +0 -426
  258. package/scripts/test_groq_bugteam_dotenv.py +0 -66
  259. package/scripts/test_groq_bugteam_spec.py +0 -338
  260. package/skills/bugteam/SKILL_EVALS.md +0 -309
  261. package/skills/dream/SKILL.md +0 -118
  262. package/skills/ingest/SKILL.md +0 -40
  263. package/skills/npm-creator/SKILL.md +0 -187
  264. package/skills/readability-review/SKILL.md +0 -127
  265. package/skills/resume-review/SKILL.md +0 -261
  266. package/skills/rule-audit/SKILL.md +0 -307
  267. package/skills/rule-creator/SKILL.md +0 -150
  268. package/skills/searching-obsidian-vault/SKILL.md +0 -131
  269. package/skills/skill-writer/REFERENCE.md +0 -284
  270. package/skills/skill-writer/SKILL.md +0 -222
  271. package/skills/tdd-team/SKILL.md +0 -128
package/skills/doc-gist/references/examples/02-exploration-visual-designs.html ADDED
@@ -0,0 +1,515 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Empty state — four visual directions</title>
7
+ <style>
8
+ :root {
9
+ --ivory: #FAF9F5;
10
+ --slate: #141413;
11
+ --clay: #D97757;
12
+ --oat: #E3DACC;
13
+ --olive: #788C5D;
14
+ --gray-150: #F0EEE6;
15
+ --gray-300: #D1CFC5;
16
+ --gray-500: #87867F;
17
+ --gray-700: #3D3D3A;
18
+ --white: #FFFFFF;
19
+
20
+ --serif: ui-serif, Georgia, 'Times New Roman', serif;
21
+ --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
22
+ --mono: ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
23
+ }
24
+
25
+ * { margin: 0; padding: 0; box-sizing: border-box; }
26
+
27
+ body {
28
+ font-family: var(--sans);
29
+ background: var(--ivory);
30
+ color: var(--gray-700);
31
+ line-height: 1.55;
32
+ -webkit-font-smoothing: antialiased;
33
+ padding-bottom: 96px;
34
+ }
35
+
36
+ /* ---------- sticky toolbar ---------- */
37
+
38
+ .toolbar {
39
+ position: sticky;
40
+ top: 0;
41
+ z-index: 10;
42
+ background: var(--ivory);
43
+ border-bottom: 1.5px solid var(--gray-300);
44
+ padding: 14px 32px;
45
+ display: flex;
46
+ align-items: center;
47
+ gap: 18px;
48
+ font-size: 13px;
49
+ }
50
+
51
+ .toolbar .title {
52
+ font-family: var(--mono);
53
+ font-size: 12px;
54
+ letter-spacing: 0.04em;
55
+ color: var(--gray-500);
56
+ margin-right: auto;
57
+ }
58
+
59
+ .toolbar .field {
60
+ display: flex;
61
+ align-items: center;
62
+ gap: 10px;
63
+ }
64
+
65
+ .toolbar .field > span {
66
+ color: var(--gray-700);
67
+ font-weight: 500;
68
+ }
69
+
70
+ .seg {
71
+ display: inline-flex;
72
+ border: 1.5px solid var(--gray-300);
73
+ border-radius: 8px;
74
+ overflow: hidden;
75
+ background: var(--white);
76
+ }
77
+
78
+ .seg label {
79
+ padding: 6px 14px;
80
+ cursor: pointer;
81
+ font-size: 13px;
82
+ color: var(--gray-700);
83
+ user-select: none;
84
+ }
85
+
86
+ .seg label + label {
87
+ border-left: 1.5px solid var(--gray-300);
88
+ }
89
+
90
+ .seg input { display: none; }
91
+
92
+ .seg input:checked + span {
93
+ color: var(--slate);
94
+ font-weight: 600;
95
+ }
96
+
97
+ .seg label:has(input:checked) {
98
+ background: var(--oat);
99
+ }
100
+
101
+ /* ---------- page header ---------- */
102
+
103
+ .page {
104
+ max-width: 1240px;
105
+ margin: 0 auto;
106
+ padding: 48px 32px 0;
107
+ }
108
+
109
+ header.page-head {
110
+ max-width: 720px;
111
+ margin-bottom: 40px;
112
+ }
113
+
114
+ .eyebrow {
115
+ font-size: 12px;
116
+ letter-spacing: 0.08em;
117
+ text-transform: uppercase;
118
+ color: var(--gray-500);
119
+ margin-bottom: 12px;
120
+ }
121
+
122
+ h1 {
123
+ font-family: var(--serif);
124
+ font-weight: 500;
125
+ font-size: 38px;
126
+ line-height: 1.15;
127
+ color: var(--slate);
128
+ margin-bottom: 18px;
129
+ letter-spacing: -0.01em;
130
+ }
131
+
132
+ .prompt-box {
133
+ background: var(--gray-150);
134
+ border: 1.5px solid var(--gray-300);
135
+ border-radius: 12px;
136
+ padding: 16px 20px;
137
+ font-size: 14.5px;
138
+ }
139
+
140
+ .prompt-box .label {
141
+ font-family: var(--mono);
142
+ font-size: 11px;
143
+ text-transform: uppercase;
144
+ letter-spacing: 0.06em;
145
+ color: var(--gray-500);
146
+ display: block;
147
+ margin-bottom: 6px;
148
+ }
149
+
150
+ /* ---------- artboard grid ---------- */
151
+
152
+ .board {
153
+ display: grid;
154
+ grid-template-columns: 1fr 1fr;
155
+ gap: 32px;
156
+ }
157
+
158
+ @media (max-width: 960px) {
159
+ .board { grid-template-columns: 1fr; }
160
+ }
161
+
162
+ .artboard {
163
+ background: var(--white);
164
+ border: 1.5px solid var(--gray-300);
165
+ border-radius: 12px;
166
+ padding: 20px;
167
+ position: relative;
168
+ }
169
+
170
+ .tag {
171
+ position: absolute;
172
+ top: 14px;
173
+ left: 14px;
174
+ font-family: var(--mono);
175
+ font-size: 11px;
176
+ letter-spacing: 0.02em;
177
+ background: var(--oat);
178
+ color: var(--slate);
179
+ padding: 4px 10px;
180
+ border-radius: 8px;
181
+ z-index: 2;
182
+ }
183
+
184
+ .stage {
185
+ height: 280px;
186
+ border-radius: 8px;
187
+ border: 1.5px solid var(--gray-300);
188
+ background: var(--ivory);
189
+ display: flex;
190
+ align-items: center;
191
+ justify-content: center;
192
+ padding: 24px;
193
+ transition: background 0.15s, border-color 0.15s;
194
+ overflow: hidden;
195
+ }
196
+
197
+ .stage.dark {
198
+ background: var(--slate);
199
+ border-color: var(--slate);
200
+ }
201
+
202
+ .rationale {
203
+ margin-top: 16px;
204
+ font-size: 13px;
205
+ color: var(--gray-500);
206
+ line-height: 1.5;
207
+ }
208
+
209
+ /* =========================================================
210
+ Empty-state variants — each scoped under .es-*
211
+ Theme tokens flip when .stage.dark is present.
212
+ ========================================================= */
213
+
214
+ .stage { --fg: var(--slate); --muted: var(--gray-500); --line: var(--gray-300); --panel: var(--white); }
215
+ .stage.dark { --fg: #F0EEE6; --muted: #9C9A93; --line: #3D3D3A; --panel: #1F1E1B; }
216
+
217
+ /* ---- A · Minimal ---- */
218
+
219
+ .es-a {
220
+ text-align: center;
221
+ max-width: 300px;
222
+ }
223
+ .es-a h3 {
224
+ font-family: var(--serif);
225
+ font-weight: 500;
226
+ font-size: 19px;
227
+ color: var(--fg);
228
+ margin-bottom: 6px;
229
+ }
230
+ .es-a p {
231
+ font-size: 13px;
232
+ color: var(--muted);
233
+ margin-bottom: 18px;
234
+ }
235
+ .es-a .btn {
236
+ display: inline-block;
237
+ font-size: 13px;
238
+ color: var(--fg);
239
+ border: 1.5px solid var(--line);
240
+ border-radius: 8px;
241
+ padding: 8px 16px;
242
+ background: transparent;
243
+ }
244
+
245
+ /* ---- B · Illustrated ---- */
246
+
247
+ .es-b {
248
+ text-align: center;
249
+ max-width: 320px;
250
+ }
251
+ .es-b svg {
252
+ display: block;
253
+ margin: 0 auto 18px;
254
+ }
255
+ .es-b h3 {
256
+ font-family: var(--serif);
257
+ font-weight: 500;
258
+ font-size: 19px;
259
+ color: var(--fg);
260
+ margin-bottom: 6px;
261
+ }
262
+ .es-b p {
263
+ font-size: 13px;
264
+ color: var(--muted);
265
+ margin-bottom: 16px;
266
+ }
267
+ .es-b .btn {
268
+ display: inline-block;
269
+ font-size: 13px;
270
+ font-weight: 500;
271
+ color: var(--white);
272
+ background: var(--clay);
273
+ border-radius: 8px;
274
+ padding: 8px 16px;
275
+ }
276
+ .stage.dark .es-b .btn { color: var(--slate); background: var(--oat); }
277
+
278
+ /* ---- C · Playful ---- */
279
+
280
+ .es-c {
281
+ text-align: center;
282
+ max-width: 300px;
283
+ }
284
+ .es-c .float {
285
+ width: 56px;
286
+ height: 56px;
287
+ margin: 0 auto 20px;
288
+ position: relative;
289
+ animation: bob 3.2s ease-in-out infinite;
290
+ }
291
+ .es-c .float .card {
292
+ position: absolute;
293
+ inset: 0;
294
+ border-radius: 10px;
295
+ background: var(--panel);
296
+ border: 1.5px solid var(--line);
297
+ }
298
+ .es-c .float .card:nth-child(1) { transform: rotate(-8deg) translate(-6px, 4px); opacity: 0.5; }
299
+ .es-c .float .card:nth-child(2) { transform: rotate( 6deg) translate( 6px, 2px); opacity: 0.75; }
300
+ .es-c .float .card:nth-child(3) { background: var(--oat); border-color: var(--oat); }
301
+ .stage.dark .es-c .float .card:nth-child(3) { background: var(--clay); border-color: var(--clay); }
302
+ .es-c .shadow {
303
+ width: 44px;
304
+ height: 8px;
305
+ margin: -8px auto 22px;
306
+ border-radius: 50%;
307
+ background: rgba(0,0,0,0.12);
308
+ filter: blur(2px);
309
+ animation: shadow 3.2s ease-in-out infinite;
310
+ }
311
+ .stage.dark .es-c .shadow { background: rgba(0,0,0,0.5); }
312
+ .es-c h3 {
313
+ font-family: var(--serif);
314
+ font-weight: 500;
315
+ font-size: 19px;
316
+ color: var(--fg);
317
+ margin-bottom: 6px;
318
+ }
319
+ .es-c p {
320
+ font-size: 13px;
321
+ color: var(--muted);
322
+ }
323
+
324
+ @keyframes bob {
325
+ 0%, 100% { transform: translateY(0); }
326
+ 50% { transform: translateY(-10px); }
327
+ }
328
+ @keyframes shadow {
329
+ 0%, 100% { transform: scaleX(1); opacity: 0.9; }
330
+ 50% { transform: scaleX(0.8); opacity: 0.5; }
331
+ }
332
+
333
+ /* ---- D · Instructional ---- */
334
+
335
+ .es-d {
336
+ width: 100%;
337
+ max-width: 360px;
338
+ }
339
+ .es-d h3 {
340
+ font-family: var(--serif);
341
+ font-weight: 500;
342
+ font-size: 18px;
343
+ color: var(--fg);
344
+ margin-bottom: 14px;
345
+ }
346
+ .es-d ol {
347
+ list-style: none;
348
+ counter-reset: step;
349
+ display: flex;
350
+ flex-direction: column;
351
+ gap: 10px;
352
+ }
353
+ .es-d li {
354
+ counter-increment: step;
355
+ display: flex;
356
+ align-items: flex-start;
357
+ gap: 12px;
358
+ background: var(--panel);
359
+ border: 1.5px solid var(--line);
360
+ border-radius: 8px;
361
+ padding: 10px 14px;
362
+ font-size: 13px;
363
+ color: var(--fg);
364
+ }
365
+ .es-d li::before {
366
+ content: counter(step);
367
+ font-family: var(--mono);
368
+ font-size: 11px;
369
+ flex: 0 0 20px;
370
+ height: 20px;
371
+ border-radius: 50%;
372
+ background: var(--oat);
373
+ color: var(--slate);
374
+ display: inline-flex;
375
+ align-items: center;
376
+ justify-content: center;
377
+ margin-top: 1px;
378
+ }
379
+ .es-d li span { color: var(--muted); display: block; font-size: 12px; margin-top: 2px; }
380
+ </style>
381
+ </head>
382
+ <body>
383
+
384
+ <div class="toolbar">
385
+ <div class="title">Birchline · design exploration</div>
386
+ <div class="field">
387
+ <span>Background:</span>
388
+ <div class="seg" id="bg-seg">
389
+ <label><input type="radio" name="bg" value="light" checked><span>Light</span></label>
390
+ <label><input type="radio" name="bg" value="dark"><span>Dark</span></label>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <div class="page">
396
+
397
+ <header class="page-head">
398
+ <div class="eyebrow">Exploration · Empty states</div>
399
+ <h1>Four visual directions for the “no tasks yet” state</h1>
400
+ <div class="prompt-box">
401
+ <span class="label">Prompt</span>
402
+ Explore four visual directions for our empty-state component. Render each
403
+ live so we can compare tone, density, and how well they hold up on light
404
+ and dark surfaces.
405
+ </div>
406
+ </header>
407
+
408
+ <section class="board">
409
+
410
+ <!-- ================= A — Minimal ================= -->
411
+ <article class="artboard">
412
+ <span class="tag">A — Minimal</span>
413
+ <div class="stage">
414
+ <div class="es-a">
415
+ <h3>No tasks yet</h3>
416
+ <p>When you create a task it will show up here.</p>
417
+ <span class="btn">New task</span>
418
+ </div>
419
+ </div>
420
+ <p class="rationale">
421
+ Pure typography, single quiet action. Reads as calm and confident;
422
+ assumes the surrounding UI already carries enough personality.
423
+ </p>
424
+ </article>
425
+
426
+ <!-- ================= B — Illustrated ================= -->
427
+ <article class="artboard">
428
+ <span class="tag">B — Illustrated</span>
429
+ <div class="stage">
430
+ <div class="es-b">
431
+ <svg width="120" height="90" viewBox="0 0 120 90" aria-hidden="true">
432
+ <rect x="14" y="20" width="72" height="54" rx="8"
433
+ fill="var(--panel)" stroke="var(--line)" stroke-width="1.5"/>
434
+ <rect x="34" y="10" width="72" height="54" rx="8"
435
+ fill="var(--oat)"/>
436
+ <line x1="46" y1="26" x2="92" y2="26"
437
+ stroke="var(--slate)" stroke-width="2" stroke-linecap="round"/>
438
+ <line x1="46" y1="38" x2="80" y2="38"
439
+ stroke="var(--slate)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
440
+ <circle cx="98" cy="60" r="12" fill="var(--clay)"/>
441
+ <path d="M98 55 v10 M93 60 h10"
442
+ stroke="white" stroke-width="2" stroke-linecap="round"/>
443
+ </svg>
444
+ <h3>Start your first list</h3>
445
+ <p>Group related work and watch progress roll up automatically.</p>
446
+ <span class="btn">Create a task</span>
447
+ </div>
448
+ </div>
449
+ <p class="rationale">
450
+ A small geometric spot illustration anchors the eye and explains the
451
+ object model (lists contain tasks) without a wall of copy.
452
+ </p>
453
+ </article>
454
+
455
+ <!-- ================= C — Playful ================= -->
456
+ <article class="artboard">
457
+ <span class="tag">C — Playful</span>
458
+ <div class="stage">
459
+ <div class="es-c">
460
+ <div class="float">
461
+ <div class="card"></div>
462
+ <div class="card"></div>
463
+ <div class="card"></div>
464
+ </div>
465
+ <div class="shadow"></div>
466
+ <h3>Nothing on your plate</h3>
467
+ <p>Enjoy the quiet, or add something to get moving.</p>
468
+ </div>
469
+ </div>
470
+ <p class="rationale">
471
+ A gently bobbing stack adds life to an otherwise static screen. Motion
472
+ is subtle enough to loop indefinitely without drawing complaints.
473
+ </p>
474
+ </article>
475
+
476
+ <!-- ================= D — Instructional ================= -->
477
+ <article class="artboard">
478
+ <span class="tag">D — Instructional</span>
479
+ <div class="stage">
480
+ <div class="es-d">
481
+ <h3>Set up this project</h3>
482
+ <ol>
483
+ <li>
484
+ Create your first task
485
+ <span>Give it a name and an owner.</span>
486
+ </li>
487
+ <li>
488
+ Add a due date
489
+ <span>Birchline will surface it on the timeline.</span>
490
+ </li>
491
+ <li>
492
+ Invite a teammate
493
+ <span>Shared projects stay in sync automatically.</span>
494
+ </li>
495
+ </ol>
496
+ </div>
497
+ </div>
498
+ <p class="rationale">
499
+ Treats the empty state as onboarding. Higher density, but every line is
500
+ actionable — best when the user is new to the product, not just the view.
501
+ </p>
502
+ </article>
503
+
504
+ </section>
505
+ </div>
506
+
507
+ <script>
508
+ const stages = document.querySelectorAll('.stage');
509
+ document.getElementById('bg-seg').addEventListener('change', (e) => {
510
+ const dark = e.target.value === 'dark';
511
+ stages.forEach((s) => s.classList.toggle('dark', dark));
512
+ });
513
+ </script>
514
+ </body>
515
+ </html>