@skill-graph/cli 0.5.6

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 (330) hide show
  1. package/CHANGELOG.md +247 -0
  2. package/LICENSE +200 -0
  3. package/NOTICE +62 -0
  4. package/README.md +398 -0
  5. package/SKILL_GRAPH.md +443 -0
  6. package/bin/skill-graph.js +374 -0
  7. package/docs/ADOPTION.md +117 -0
  8. package/docs/CONFORMANCE.md +66 -0
  9. package/docs/PRIMER.md +384 -0
  10. package/docs/QUICKSTART-30MIN.md +333 -0
  11. package/docs/ROUTING-METRICS.md +120 -0
  12. package/docs/SKILL-MD-FORMAT-COMPATIBILITY.md +127 -0
  13. package/docs/SKILL_AUDIT_CHECKLIST.md +199 -0
  14. package/docs/SKILL_AUDIT_LOOP.md +195 -0
  15. package/docs/SKILL_METADATA_PROTOCOL.md +609 -0
  16. package/docs/_archived/marketplace-publication-priority-2026-05-18.md +239 -0
  17. package/docs/adr/0001-predicate-set.md +69 -0
  18. package/docs/adr/0002-json-ld-context.md +82 -0
  19. package/docs/adr/0003-ontoclean-rigidity-tags.md +65 -0
  20. package/docs/adr/0004-persistent-identifiers.md +74 -0
  21. package/docs/adr/0005-freshness-consolidation.md +70 -0
  22. package/docs/adr/0006-revise-predicate-rename.md +105 -0
  23. package/docs/adr/0007-audit-loop-cadence.md +99 -0
  24. package/docs/adr/0008-skill-surface-split-and-curation-policy.md +93 -0
  25. package/docs/category-consumers.md +168 -0
  26. package/docs/concept-map.md +194 -0
  27. package/docs/diagrams/drift-states.mmd +21 -0
  28. package/docs/diagrams/manifest-pipeline.mmd +25 -0
  29. package/docs/diagrams/routing-harness.mmd +41 -0
  30. package/docs/diagrams/starter-graph.mmd +53 -0
  31. package/docs/field-decision-guide.md +315 -0
  32. package/docs/field-rationale.md +211 -0
  33. package/docs/field-reference.generated.md +624 -0
  34. package/docs/field-reference.md +1426 -0
  35. package/docs/glossary.md +190 -0
  36. package/docs/head-noun-glossary.md +63 -0
  37. package/docs/images/audit-phases.png +0 -0
  38. package/docs/images/drift-states.png +0 -0
  39. package/docs/images/graded-mode.png +0 -0
  40. package/docs/images/manifest-pipeline.png +0 -0
  41. package/docs/images/routing-harness.png +0 -0
  42. package/docs/images/skill-anatomy.png +0 -0
  43. package/docs/images/starter-graph.png +0 -0
  44. package/docs/images/system-model.png +0 -0
  45. package/docs/integrations/github-actions.md +155 -0
  46. package/docs/manifest-field-mapping.md +443 -0
  47. package/docs/marketplace-publication-queue.generated.md +240 -0
  48. package/docs/marketplace-release-agent-prompt.md +82 -0
  49. package/docs/marketplace-skill-candidate-list.md +272 -0
  50. package/docs/marketplace-syndication.md +222 -0
  51. package/docs/migration-sample-review.md +155 -0
  52. package/docs/migrations/v4-to-v5.md +168 -0
  53. package/docs/migrations/v5-to-v6.md +221 -0
  54. package/docs/name-exceptions.yaml +37 -0
  55. package/docs/plans/marketplace-p1-public-migration-plan.md +41 -0
  56. package/docs/plans/multi-root-workspace.md +148 -0
  57. package/docs/plans/scripts-roadmap.md +107 -0
  58. package/docs/plans/v4-schema-bump.md +160 -0
  59. package/docs/plans/wave-2-extraction.md +122 -0
  60. package/docs/positioning-vs-marketplaces.md +175 -0
  61. package/docs/proposals/skill-audit-loop-positioning.md +160 -0
  62. package/docs/quality-doctrine.md +138 -0
  63. package/docs/recommended-skills.md +150 -0
  64. package/docs/research/skill-comprehension-eval-research.md +1830 -0
  65. package/docs/research/skill-retrieval-evidence.md +66 -0
  66. package/docs/skill-metadata-protocol.md +471 -0
  67. package/docs/skills-sh-maintainer-cleanup-request.md +80 -0
  68. package/examples/audits/a11y/findings.md +52 -0
  69. package/examples/audits/a11y/scorecard.md +21 -0
  70. package/examples/audits/a11y/verdict.md +44 -0
  71. package/examples/audits/debugging/findings.md +59 -0
  72. package/examples/audits/debugging/scorecard.md +22 -0
  73. package/examples/audits/debugging/verdict.md +33 -0
  74. package/examples/audits/documentation/findings.md +59 -0
  75. package/examples/audits/documentation/scorecard.md +22 -0
  76. package/examples/audits/documentation/verdict.md +33 -0
  77. package/examples/evals/a11y.json +140 -0
  78. package/examples/evals/api-design.json +52 -0
  79. package/examples/evals/code-review.json +52 -0
  80. package/examples/evals/data-modeling.json +52 -0
  81. package/examples/evals/database-migration.json +52 -0
  82. package/examples/evals/debugging.json +118 -0
  83. package/examples/evals/dependency-architecture.json +52 -0
  84. package/examples/evals/design-system-architecture.json +52 -0
  85. package/examples/evals/error-tracking.json +52 -0
  86. package/examples/evals/event-contract-design.json +52 -0
  87. package/examples/evals/form-ux-architecture.json +52 -0
  88. package/examples/evals/framework-fit-analysis.json +52 -0
  89. package/examples/evals/graph-audit.json +139 -0
  90. package/examples/evals/information-architecture.json +52 -0
  91. package/examples/evals/interaction-feedback.json +52 -0
  92. package/examples/evals/interaction-patterns.json +52 -0
  93. package/examples/evals/layout-composition.json +52 -0
  94. package/examples/evals/lint-overlay.json +117 -0
  95. package/examples/evals/microcopy.json +52 -0
  96. package/examples/evals/observability-modeling.json +52 -0
  97. package/examples/evals/pattern-recognition.json +96 -0
  98. package/examples/evals/performance-engineering.json +52 -0
  99. package/examples/evals/refactor.json +128 -0
  100. package/examples/evals/semiotics.json +52 -0
  101. package/examples/evals/skill-infrastructure.json +96 -0
  102. package/examples/evals/skill-router.json +140 -0
  103. package/examples/evals/skill-router.routing.json +113 -0
  104. package/examples/evals/system-interface-contracts.json +52 -0
  105. package/examples/evals/task-analysis.json +52 -0
  106. package/examples/evals/testing-strategy.json +118 -0
  107. package/examples/evals/type-safety.json +249 -0
  108. package/examples/evals/visual-design-foundations.json +52 -0
  109. package/examples/evals/webhook-integration.json +52 -0
  110. package/examples/exports/a11y.skill-md.md +80 -0
  111. package/examples/exports/debugging.skill-md.md +80 -0
  112. package/examples/exports/refactor.skill-md.md +78 -0
  113. package/examples/exports/testing-strategy.skill-md.md +81 -0
  114. package/examples/projects/markdown-static-site/README.md +115 -0
  115. package/examples/projects/markdown-static-site/skills/content-source-router/SKILL.md +131 -0
  116. package/examples/projects/markdown-static-site/skills/image-optimization-pipeline-config/SKILL.md +132 -0
  117. package/examples/projects/markdown-static-site/skills/link-rot-detection/SKILL.md +103 -0
  118. package/examples/projects/markdown-static-site/skills/markdown-post-frontmatter-validation/SKILL.md +133 -0
  119. package/examples/projects/markdown-static-site/skills/migrate-posts-to-v2-frontmatter/SKILL.md +140 -0
  120. package/examples/projects/saas-stripe-postgres/README.md +208 -0
  121. package/examples/projects/saas-stripe-postgres/db/migrations/0004_canonicalize_orders.sql +37 -0
  122. package/examples/projects/saas-stripe-postgres/db/schema.sql +112 -0
  123. package/examples/projects/saas-stripe-postgres/skills/migrate-orders-to-canonical-schema/SKILL.md +149 -0
  124. package/examples/projects/saas-stripe-postgres/skills/nextjs-server-action-validation/SKILL.md +154 -0
  125. package/examples/projects/saas-stripe-postgres/skills/payment-provider-router/SKILL.md +153 -0
  126. package/examples/projects/saas-stripe-postgres/skills/postgres-rls-pattern/SKILL.md +163 -0
  127. package/examples/projects/saas-stripe-postgres/skills/stripe-webhook-signature-verification/SKILL.md +137 -0
  128. package/examples/protocol/skill-metadata-template.md +301 -0
  129. package/examples/protocol/skills.manifest.sample.json +13245 -0
  130. package/examples/skill-metadata-template.md +317 -0
  131. package/examples/skills.manifest.sample.json +13519 -0
  132. package/examples/tests/v3-1-skos-fixture/SKILL.md +93 -0
  133. package/marketplace/README.md +17 -0
  134. package/marketplace/skills/a11y/SKILL.md +66 -0
  135. package/marketplace/skills/acid-fundamentals/SKILL.md +106 -0
  136. package/marketplace/skills/agent-engineering/SKILL.md +386 -0
  137. package/marketplace/skills/agent-eval-design/SKILL.md +55 -0
  138. package/marketplace/skills/ai-native-development/SKILL.md +294 -0
  139. package/marketplace/skills/api-design/SKILL.md +60 -0
  140. package/marketplace/skills/architecture-decision-records/SKILL.md +55 -0
  141. package/marketplace/skills/background-jobs/SKILL.md +265 -0
  142. package/marketplace/skills/bounded-context-mapping/SKILL.md +55 -0
  143. package/marketplace/skills/cap-theorem-tradeoffs/SKILL.md +127 -0
  144. package/marketplace/skills/client-server-boundary/SKILL.md +187 -0
  145. package/marketplace/skills/code-review/SKILL.md +120 -0
  146. package/marketplace/skills/color-system-design/SKILL.md +43 -0
  147. package/marketplace/skills/component-architecture/SKILL.md +126 -0
  148. package/marketplace/skills/compression/SKILL.md +112 -0
  149. package/marketplace/skills/conceptual-modeling/SKILL.md +181 -0
  150. package/marketplace/skills/connection-pooling/SKILL.md +105 -0
  151. package/marketplace/skills/constraint-awareness/SKILL.md +287 -0
  152. package/marketplace/skills/content-monitor/SKILL.md +209 -0
  153. package/marketplace/skills/context-engineering/SKILL.md +320 -0
  154. package/marketplace/skills/context-graph/SKILL.md +174 -0
  155. package/marketplace/skills/context-management/SKILL.md +174 -0
  156. package/marketplace/skills/context-window/SKILL.md +239 -0
  157. package/marketplace/skills/contract-testing/SKILL.md +120 -0
  158. package/marketplace/skills/cron-scheduling/SKILL.md +223 -0
  159. package/marketplace/skills/dark-mode-implementation/SKILL.md +47 -0
  160. package/marketplace/skills/data-modeling/SKILL.md +59 -0
  161. package/marketplace/skills/data-modeling-fundamentals/SKILL.md +117 -0
  162. package/marketplace/skills/database-migration/SKILL.md +429 -0
  163. package/marketplace/skills/debugging/SKILL.md +67 -0
  164. package/marketplace/skills/dependency-architecture/SKILL.md +58 -0
  165. package/marketplace/skills/design-module-composition/SKILL.md +43 -0
  166. package/marketplace/skills/design-system-architecture/SKILL.md +61 -0
  167. package/marketplace/skills/design-thinking/SKILL.md +44 -0
  168. package/marketplace/skills/diagnosis/SKILL.md +296 -0
  169. package/marketplace/skills/diff-analysis/SKILL.md +188 -0
  170. package/marketplace/skills/e2e-test-design/SKILL.md +113 -0
  171. package/marketplace/skills/entity-relationship-modeling/SKILL.md +218 -0
  172. package/marketplace/skills/epistemic-grounding/SKILL.md +112 -0
  173. package/marketplace/skills/error-boundary/SKILL.md +235 -0
  174. package/marketplace/skills/error-tracking/SKILL.md +261 -0
  175. package/marketplace/skills/eval-driven-development/SKILL.md +147 -0
  176. package/marketplace/skills/evaluation/SKILL.md +113 -0
  177. package/marketplace/skills/event-contract-design/SKILL.md +60 -0
  178. package/marketplace/skills/event-storming/SKILL.md +56 -0
  179. package/marketplace/skills/form-ux-architecture/SKILL.md +60 -0
  180. package/marketplace/skills/framework-fit-analysis/SKILL.md +59 -0
  181. package/marketplace/skills/frontend-architecture/SKILL.md +43 -0
  182. package/marketplace/skills/generative-ui/SKILL.md +118 -0
  183. package/marketplace/skills/graph-audit/SKILL.md +81 -0
  184. package/marketplace/skills/guardrails/SKILL.md +118 -0
  185. package/marketplace/skills/hooks-patterns/SKILL.md +185 -0
  186. package/marketplace/skills/http-semantics/SKILL.md +136 -0
  187. package/marketplace/skills/ideation/SKILL.md +41 -0
  188. package/marketplace/skills/indexing-strategy/SKILL.md +108 -0
  189. package/marketplace/skills/information-architecture/SKILL.md +59 -0
  190. package/marketplace/skills/integration-test-design/SKILL.md +111 -0
  191. package/marketplace/skills/intent-recognition/SKILL.md +136 -0
  192. package/marketplace/skills/interaction-feedback/SKILL.md +59 -0
  193. package/marketplace/skills/interaction-patterns/SKILL.md +59 -0
  194. package/marketplace/skills/journey-mapping/SKILL.md +41 -0
  195. package/marketplace/skills/keywords/SKILL.md +213 -0
  196. package/marketplace/skills/knowledge-modeling/SKILL.md +232 -0
  197. package/marketplace/skills/layout-composition/SKILL.md +59 -0
  198. package/marketplace/skills/linguistics/SKILL.md +429 -0
  199. package/marketplace/skills/lint-overlay/SKILL.md +76 -0
  200. package/marketplace/skills/mental-models/SKILL.md +126 -0
  201. package/marketplace/skills/merge-queue/SKILL.md +94 -0
  202. package/marketplace/skills/methodology/SKILL.md +317 -0
  203. package/marketplace/skills/microcopy/SKILL.md +232 -0
  204. package/marketplace/skills/middleware-patterns/SKILL.md +363 -0
  205. package/marketplace/skills/mobile-responsive-ux/SKILL.md +287 -0
  206. package/marketplace/skills/mutation-testing/SKILL.md +112 -0
  207. package/marketplace/skills/naming-conventions/SKILL.md +112 -0
  208. package/marketplace/skills/observability-modeling/SKILL.md +59 -0
  209. package/marketplace/skills/ontology-modeling/SKILL.md +67 -0
  210. package/marketplace/skills/owasp-security/SKILL.md +153 -0
  211. package/marketplace/skills/pattern-recognition/SKILL.md +472 -0
  212. package/marketplace/skills/performance-budgets/SKILL.md +185 -0
  213. package/marketplace/skills/performance-engineering/SKILL.md +58 -0
  214. package/marketplace/skills/performance-testing/SKILL.md +125 -0
  215. package/marketplace/skills/printify/SKILL.md +42 -0
  216. package/marketplace/skills/prioritization/SKILL.md +118 -0
  217. package/marketplace/skills/problem-framing/SKILL.md +41 -0
  218. package/marketplace/skills/problem-locating-solving/SKILL.md +203 -0
  219. package/marketplace/skills/project-knowledge-extraction/SKILL.md +54 -0
  220. package/marketplace/skills/prompt-craft/SKILL.md +134 -0
  221. package/marketplace/skills/prompt-injection-defense/SKILL.md +132 -0
  222. package/marketplace/skills/property-based-testing/SKILL.md +100 -0
  223. package/marketplace/skills/prototyping/SKILL.md +43 -0
  224. package/marketplace/skills/query-optimization/SKILL.md +144 -0
  225. package/marketplace/skills/real-time-updates/SKILL.md +324 -0
  226. package/marketplace/skills/ref-patterns/SKILL.md +284 -0
  227. package/marketplace/skills/refactor/SKILL.md +65 -0
  228. package/marketplace/skills/rendering-models/SKILL.md +142 -0
  229. package/marketplace/skills/replication-patterns/SKILL.md +110 -0
  230. package/marketplace/skills/research-synthesis/SKILL.md +41 -0
  231. package/marketplace/skills/route-handler-design/SKILL.md +347 -0
  232. package/marketplace/skills/schema-evolution/SKILL.md +140 -0
  233. package/marketplace/skills/security-fundamentals/SKILL.md +139 -0
  234. package/marketplace/skills/semantic-center/SKILL.md +194 -0
  235. package/marketplace/skills/semantic-relations/SKILL.md +250 -0
  236. package/marketplace/skills/semantics/SKILL.md +366 -0
  237. package/marketplace/skills/semiotics/SKILL.md +230 -0
  238. package/marketplace/skills/seo-strategy/SKILL.md +260 -0
  239. package/marketplace/skills/server-actions-design/SKILL.md +243 -0
  240. package/marketplace/skills/server-components-design/SKILL.md +190 -0
  241. package/marketplace/skills/sharding-strategy/SKILL.md +123 -0
  242. package/marketplace/skills/shopify/SKILL.md +42 -0
  243. package/marketplace/skills/skill-infrastructure/SKILL.md +320 -0
  244. package/marketplace/skills/skill-router/SKILL.md +71 -0
  245. package/marketplace/skills/skill-scaffold/SKILL.md +105 -0
  246. package/marketplace/skills/snapshot-testing/SKILL.md +120 -0
  247. package/marketplace/skills/spec-driven-development/SKILL.md +148 -0
  248. package/marketplace/skills/state-machine-modeling/SKILL.md +56 -0
  249. package/marketplace/skills/state-management/SKILL.md +134 -0
  250. package/marketplace/skills/streaming-architecture/SKILL.md +194 -0
  251. package/marketplace/skills/summarization/SKILL.md +156 -0
  252. package/marketplace/skills/suspense-patterns/SKILL.md +265 -0
  253. package/marketplace/skills/system-interface-contracts/SKILL.md +59 -0
  254. package/marketplace/skills/task-analysis/SKILL.md +201 -0
  255. package/marketplace/skills/taxonomy-design/SKILL.md +66 -0
  256. package/marketplace/skills/test-coverage-strategy/SKILL.md +108 -0
  257. package/marketplace/skills/test-doubles-design/SKILL.md +98 -0
  258. package/marketplace/skills/test-driven-development/SKILL.md +96 -0
  259. package/marketplace/skills/testing-strategy/SKILL.md +67 -0
  260. package/marketplace/skills/theme-system-design/SKILL.md +43 -0
  261. package/marketplace/skills/tool-call-flow/SKILL.md +229 -0
  262. package/marketplace/skills/tool-call-strategy/SKILL.md +292 -0
  263. package/marketplace/skills/transaction-isolation/SKILL.md +98 -0
  264. package/marketplace/skills/type-safety/SKILL.md +177 -0
  265. package/marketplace/skills/typography-system/SKILL.md +43 -0
  266. package/marketplace/skills/usability-testing/SKILL.md +43 -0
  267. package/marketplace/skills/user-research/SKILL.md +43 -0
  268. package/marketplace/skills/vercel-composition-patterns/SKILL.md +157 -0
  269. package/marketplace/skills/version-control/SKILL.md +233 -0
  270. package/marketplace/skills/visual-design-foundations/SKILL.md +59 -0
  271. package/marketplace/skills/visual-hierarchy/SKILL.md +43 -0
  272. package/marketplace/skills/webhook-integration/SKILL.md +331 -0
  273. package/marketplace/skills/writing-humanizer/SKILL.md +380 -0
  274. package/package.json +67 -0
  275. package/schemas/manifest.schema.json +811 -0
  276. package/schemas/manifest.v2.schema.json +164 -0
  277. package/schemas/manifest.v3.schema.json +758 -0
  278. package/schemas/manifest.v4.schema.json +755 -0
  279. package/schemas/manifest.v5.schema.json +755 -0
  280. package/schemas/manifest.v6.schema.json +811 -0
  281. package/schemas/skill.context.jsonld +279 -0
  282. package/schemas/skill.schema.json +919 -0
  283. package/schemas/skill.v2.schema.json +201 -0
  284. package/schemas/skill.v3.schema.json +827 -0
  285. package/schemas/skill.v4.schema.json +822 -0
  286. package/schemas/skill.v5.schema.json +830 -0
  287. package/schemas/skill.v6.schema.json +946 -0
  288. package/schemas/vocabulary/keywords.json +180 -0
  289. package/schemas/vocabulary/workspace_tags.json +23 -0
  290. package/scripts/__tests__/migrate-skill-v2-to-v3.test.js +161 -0
  291. package/scripts/__tests__/migrate-skill-v3-to-v4.test.js +158 -0
  292. package/scripts/__tests__/test-export-parser-drift.js +149 -0
  293. package/scripts/__tests__/test-marketplace-export.js +114 -0
  294. package/scripts/__tests__/test-router-paths.js +82 -0
  295. package/scripts/__tests__/test-stability-promotion.js +244 -0
  296. package/scripts/__tests__/test-v3-1-alias-contract.js +109 -0
  297. package/scripts/__tests__/test-v3-1-skos-runtime.js +116 -0
  298. package/scripts/backfill-schema-version.js +198 -0
  299. package/scripts/build-field-reference.js +160 -0
  300. package/scripts/build-retrieval-baseline.js +511 -0
  301. package/scripts/check-markdown-links.js +211 -0
  302. package/scripts/check-protocol-consistency.js +979 -0
  303. package/scripts/export-marketplace-skills.js +610 -0
  304. package/scripts/export-skill.js +374 -0
  305. package/scripts/generate-manifest.js +787 -0
  306. package/scripts/lib/alias-contract.js +83 -0
  307. package/scripts/lib/audit-prompt-builder.js +771 -0
  308. package/scripts/lib/mock-grader.js +134 -0
  309. package/scripts/lib/parse-frontmatter.js +429 -0
  310. package/scripts/lib/roots.js +119 -0
  311. package/scripts/lint/check-archetype-sections.js +185 -0
  312. package/scripts/lint/check-category-enum.js +83 -0
  313. package/scripts/lint/check-routing-eval.js +146 -0
  314. package/scripts/lint/check-routing-quality.js +211 -0
  315. package/scripts/lint/check-stability-promotion.js +220 -0
  316. package/scripts/lint/format-code-frame.js +206 -0
  317. package/scripts/marketplace-install.js +125 -0
  318. package/scripts/migrate-category-to-enum.js +169 -0
  319. package/scripts/migrate-skill-v2-to-v3.js +424 -0
  320. package/scripts/migrate-skill-v3-to-v4.js +200 -0
  321. package/scripts/migrate-skill-v5-to-v6.js +304 -0
  322. package/scripts/restructure-by-category.js +85 -0
  323. package/scripts/seed-publication-classification.js +282 -0
  324. package/scripts/skill-audit.js +893 -0
  325. package/scripts/skill-graph-drift.js +483 -0
  326. package/scripts/skill-graph-route.js +766 -0
  327. package/scripts/skill-graph-routing-eval.js +393 -0
  328. package/scripts/skill-lint.js +1317 -0
  329. package/scripts/skill-overlap.js +213 -0
  330. package/scripts/verify-skill-md-export.js +201 -0
@@ -0,0 +1,120 @@
1
+ ---
2
+ name: snapshot-testing
3
+ description: "Use when reasoning about snapshot testing as a tactical technique: the capture-and-compare-against-baseline pattern, the difference between data snapshots (serialized object trees), DOM snapshots (rendered HTML trees), and visual snapshots (pixel images), the approval-cycle discipline that determines whether the technique adds testing value or just maintenance burden, the failure modes (auto-update without review, snapshot churn on irrelevant changes, large snapshots that hide diffs), where snapshot testing fits (structural regression of complex outputs) and where it doesn't (behavioral specification of contracts), and the relationship to visual regression testing tools (Chromatic, Percy, Loki, Playwright screenshots). Do NOT use for behavioral assertions about output values (use example tests in testing-strategy), for universal property claims (use property-based-testing), for the construction of test doubles (use test-doubles-design), or for end-to-end user-journey testing (use e2e-test-design)."
4
+ license: MIT
5
+ allowed-tools: Read Grep
6
+ metadata:
7
+ metadata: "{\"schema_version\":6,\"version\":\"1.0.0\",\"type\":\"capability\",\"category\":\"quality\",\"domain\":\"quality/testing\",\"scope\":\"reference\",\"owner\":\"skill-graph-maintainer\",\"freshness\":\"2026-05-16\",\"drift_check\":\"{\\\\\\\"last_verified\\\\\\\":\\\\\\\"2026-05-16\\\\\\\"}\",\"eval_artifacts\":\"planned\",\"eval_state\":\"unverified\",\"routing_eval\":\"absent\",\"comprehension_state\":\"present\",\"stability\":\"experimental\",\"keywords\":\"[\\\\\\\"snapshot testing\\\\\\\",\\\\\\\"golden file\\\\\\\",\\\\\\\"characterization test\\\\\\\",\\\\\\\"approval testing\\\\\\\",\\\\\\\"visual regression\\\\\\\",\\\\\\\"Chromatic\\\\\\\",\\\\\\\"Percy\\\\\\\",\\\\\\\"Storybook\\\\\\\",\\\\\\\"Jest snapshot\\\\\\\",\\\\\\\"DOM snapshot\\\\\\\",\\\\\\\"image snapshot\\\\\\\",\\\\\\\"approval cycle\\\\\\\"]\",\"triggers\":\"[\\\\\\\"should this be a snapshot test\\\\\\\",\\\\\\\"the snapshot keeps changing\\\\\\\",\\\\\\\"is visual regression testing the same thing\\\\\\\",\\\\\\\"should we auto-update snapshots\\\\\\\",\\\\\\\"snapshot file is too big\\\\\\\"]\",\"examples\":\"[\\\\\\\"decide whether a rendered component is a candidate for a snapshot test or for behavioral tests\\\\\\\",\\\\\\\"diagnose a test suite where every PR updates snapshot files — likely snapshot churn from non-stable inputs\\\\\\\",\\\\\\\"explain why auto-updating snapshots without review removes the testing value\\\\\\\",\\\\\\\"design an approval cycle for a visual regression suite (Chromatic / Percy)\\\\\\\"]\",\"anti_examples\":\"[\\\\\\\"specify the exact return value of a calculation (use example tests under testing-strategy)\\\\\\\",\\\\\\\"verify a universal property like sort correctness (use property-based-testing)\\\\\\\",\\\\\\\"design end-to-end user journey tests (use e2e-test-design)\\\\\\\"]\",\"relations\":\"{\\\\\\\"related\\\\\\\":[\\\\\\\"testing-strategy\\\\\\\",\\\\\\\"property-based-testing\\\\\\\",\\\\\\\"test-driven-development\\\\\\\",\\\\\\\"code-review\\\\\\\"],\\\\\\\"boundary\\\\\\\":[{\\\\\\\"skill\\\\\\\":\\\\\\\"testing-strategy\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"testing-strategy owns the strategic question of what to test at which level; this skill owns one tactical technique (capture-and-compare) within that strategy.\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"property-based-testing\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"property-based-testing asserts universal claims about output structure; snapshot testing captures a specific output and asserts equality to a baseline. The two complement: PBT for universal contracts, snapshots for complex structural outputs that are easier to capture than specify.\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"test-driven-development\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"TDD prescribes writing the test before the code; snapshot testing requires the code to exist before the snapshot can be captured. Snapshot testing fits poorly with strict TDD on greenfield code and well with characterization of existing code.\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"code-review\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"Snapshot diffs surface change evidence that code review must read and approve; the approval cycle of snapshot testing is operationally part of the review process the code-review discipline owns.\\\\\\\"}],\\\\\\\"verify_with\\\\\\\":[\\\\\\\"testing-strategy\\\\\\\",\\\\\\\"code-review\\\\\\\"]}\",\"mental_model\":\"|\",\"purpose\":\"|\",\"boundary\":\"|\",\"analogy\":\"A snapshot test is to a piece of output what a wedding photograph is to a memory of the day — the photograph does not say what the wedding *should* have looked like, only what it did look like; on the next anniversary, you compare the room to the photograph and notice 'the curtains are different' (intentional — they were replaced) or 'the picture is crooked' (unintentional — fix it). A photograph filed away without anyone ever looking at it again is not a record; it is paper. A snapshot file the team auto-accepts via `-u` is the same.\",\"misconception\":\"|\",\"concept\":\"{\\\\\\\"definition\\\\\\\":\\\\\\\"Snapshot testing is a tactical testing technique in which the output of a system under test is captured on a known-good run, stored as an artifact (the snapshot), and compared against fresh output on each subsequent test run. A mismatch is the test failure. The snapshot itself is the assertion — there is no hand-written claim about what the output should be; the claim is 'the output should equal what it was last time, until someone deliberately approves a new baseline.' The discipline is in the *approval cycle*: when the output legitimately changes, a human reviews the diff and accepts the new baseline; when the change is unexpected, the test failure surfaces the regression. A snapshot test without disciplined approval review is not a test; it is a record of whatever the output happened to be on the day the snapshot was last updated.\\\\\\\",\\\\\\\"mental_model\\\\\\\":\\\\\\\"|\\\\\\\",\\\\\\\"purpose\\\\\\\":\\\\\\\"|\\\\\\\",\\\\\\\"boundary\\\\\\\":\\\\\\\"|\\\\\\\",\\\\\\\"taxonomy\\\\\\\":\\\\\\\"|\\\\\\\",\\\\\\\"analogy\\\\\\\":\\\\\\\"|\\\\\\\",\\\\\\\"misconception\\\\\\\":\\\\\\\"|\\\\\\\"}\",\"skill_graph_source_repo\":\"https://github.com/jacob-balslev/skill-graph\",\"skill_graph_protocol\":\"Skill Metadata Protocol v5\",\"skill_graph_project\":\"Skill Graph\",\"skill_graph_canonical_skill\":\"skills/snapshot-testing/SKILL.md\"}"
8
+ skill_graph_source_repo: "https://github.com/jacob-balslev/skill-graph"
9
+ skill_graph_protocol: Skill Metadata Protocol v4
10
+ skill_graph_project: Skill Graph
11
+ skill_graph_canonical_skill: skills/snapshot-testing/SKILL.md
12
+ ---
13
+
14
+ # Snapshot Testing
15
+
16
+ ## Coverage
17
+
18
+ The tactical testing technique in which the output of a system under test is captured on a known-good run, stored as an artifact, and compared against fresh output on each subsequent test run. Covers the five primitives (target output, snapshot artifact, comparison and diff, approval cycle, stability discipline), the taxonomy across output target (data / DOM / image / text), storage location (inline / file / centralized service), approval process (auto-update / manual edit / PR-integrated review), comparison strategy (exact / perceptual / structural / property-equality), and scope (unit / integration / full-page visual). Covers the Feathers characterization-test pattern as a legitimate use, and the auto-update-without-review anti-pattern as the technique's most common failure mode.
19
+
20
+ ## Philosophy
21
+
22
+ A snapshot test is a photograph of the output. The photograph itself is not a specification — it doesn't say what the output should be, only what it was on the day of capture. The technique's value is in surfacing every subsequent change to a reviewer's eye, so that intentional changes are approved and unintentional changes are caught as regressions.
23
+
24
+ The discipline is the approval cycle. When a snapshot test fails, the developer reads the diff, decides whether the change was intentional, and either updates the baseline (intentional) or fixes the production code (unintentional). A team that types `jest -u` reflexively in response to every failing snapshot has automated the maintenance and removed the verification.
25
+
26
+ Snapshot testing fits where the output is structurally complex enough that hand-specifying every part is expensive, where small drift should be visible, and where the team will honor the approval cycle. It fits poorly where the output is simple (use precise assertions), unstable (the snapshot will churn), or where the team treats failures as nuisances to silence rather than signals to read.
27
+
28
+ ## Output Target Matrix
29
+
30
+ | Target | Serialization | Diff format | Common tooling |
31
+ |---|---|---|---|
32
+ | Data structure | JSON or framework-specific | Line-by-line text diff | Jest `toMatchSnapshot`, Vitest snapshot |
33
+ | DOM / HTML | Pretty-printed HTML or virtual-DOM tree | Line-by-line text diff | `@testing-library` + Jest, Enzyme legacy |
34
+ | Image | PNG (or other lossless) | Perceptual diff with threshold | Chromatic, Percy, Argos, Loki, Playwright screenshots |
35
+ | Text | Plain text | Line-by-line text diff | Approval test libraries; framework snapshot |
36
+ | Generated code | Plain text | Line-by-line text diff | Same as text |
37
+
38
+ The target's serialization stability is the technique's precondition. Outputs that include timestamps, random IDs, iteration-order-dependent collections, or environment-dependent values must be normalized before snapshot capture or the test will churn.
39
+
40
+ ## The Approval Cycle In Detail
41
+
42
+ ```
43
+ Test fails (snapshot != fresh output)
44
+
45
+
46
+ Read the diff carefully
47
+
48
+
49
+ ┌─────────────┴─────────────┐
50
+ │ │
51
+ Change was intended Change was not intended
52
+ │ │
53
+ ▼ ▼
54
+ Update the snapshot Fix the production code
55
+ (the new baseline is the (the snapshot stays;
56
+ intended output) the code is what changed
57
+ unintentionally)
58
+ ```
59
+
60
+ The discipline is the read. The diff must be small enough to read, the diff format must be legible, and the developer must read it. Tooling that bypasses the read (auto-update, mass-accept) is incompatible with the technique.
61
+
62
+ ## When Snapshot Testing Fits
63
+
64
+ | Fits well | Fits poorly |
65
+ |---|---|
66
+ | Complex rendered DOM components | Simple return values |
67
+ | Large JSON API responses | Single primitive outputs |
68
+ | Generated SQL or code output | Random or nondeterministic outputs |
69
+ | Visual regression of UI components | Outputs that change frequently for unrelated reasons |
70
+ | Characterizing legacy code for refactoring | Greenfield code under strict TDD |
71
+ | Full-page visual diff | Behavioral contracts that need explicit specification |
72
+ | Detecting structural drift over time | Cases where every diff is expected and uninformative |
73
+
74
+ ## Stability Sources To Control
75
+
76
+ | Source | Mitigation |
77
+ |---|---|
78
+ | Wall-clock timestamps | Inject a deterministic clock; freeze time in tests |
79
+ | Random IDs (UUID, nanoid) | Inject a seeded ID generator in tests |
80
+ | Iteration order of unordered collections | Sort before serialization |
81
+ | Environment-dependent values (env vars, hostnames) | Fix or mock in test environment |
82
+ | Browser/OS rendering differences (image snapshots) | Use a snapshot service that pins the environment; tolerance threshold for perceptual diff |
83
+ | Pretty-printer changes across library versions | Pin the serializer version |
84
+ | Locale-dependent formatting | Fix locale in tests |
85
+
86
+ A snapshot test on output without these controls churns on noise and trains the team to ignore the failures.
87
+
88
+ ## Verification
89
+
90
+ After applying this skill, verify:
91
+ - [ ] Every snapshot test has a designated approval cycle. The team's response to a failed snapshot test is "read the diff," not "run `-u`."
92
+ - [ ] Snapshot files are small enough that the diff between baseline and fresh output is readable by a human reviewer. Snapshots over a few hundred lines are split or replaced with per-property assertions.
93
+ - [ ] The target output is *stable* — timestamps, IDs, ordering, and environment values are controlled. Snapshots that churn on noise are diagnosed as instability, not accepted as normal.
94
+ - [ ] Snapshot tests are paired with example tests for behaviors that need specification. The suite is not snapshot-only.
95
+ - [ ] Visual snapshots use perceptual diff with a tolerance threshold, not bit-for-bit equality. The threshold is tuned to ignore rendering noise while catching real changes.
96
+ - [ ] PR review surfaces snapshot diffs; reviewers actually read them. (For visual snapshots, the snapshot service's review UI is the integration point.)
97
+ - [ ] Characterization snapshots are recognized as safety nets for legacy refactoring, not as specifications. They are progressively replaced with example or property tests as the code is understood.
98
+ - [ ] Snapshot files in source control are reviewed for size. Repository bloat from large snapshot files is a real cost that needs counterweight (technique fit, review discipline).
99
+
100
+ ## Do NOT Use When
101
+
102
+ | Instead of this skill | Use | Why |
103
+ |---|---|---|
104
+ | Specifying one concrete behavior with explicit assertions | example tests (see `testing-strategy`) | examples specify with reasoning; snapshots capture without |
105
+ | Asserting a universal property like sort correctness | `property-based-testing` | properties assert universal claims; snapshots assert "equals last time" |
106
+ | Constructing test doubles | `test-doubles-design` | test-doubles owns the stand-in construction |
107
+ | Designing end-to-end user journey tests | `e2e-test-design` | e2e owns user-level behavioral testing; snapshot-of-screenshot is one tool inside it |
108
+ | Choosing test levels (unit/integration/e2e) | `testing-strategy` | strategy owns level choice; this skill is one tactical technique within |
109
+ | Reviewing intended visual changes against a design system | dedicated design-review process | visual design intent assessment is its own discipline; visual snapshots surface unintended changes, not whether intended ones are good |
110
+
111
+ ## Key Sources
112
+
113
+ - Feathers, M. (2004). *Working Effectively with Legacy Code*. Prentice Hall. Introduces "characterization tests" — capturing current behavior as a safety net for refactoring legacy code. The conceptual ancestor of snapshot testing.
114
+ - Jest Team. ["Snapshot Testing — Jest Documentation"](https://jestjs.io/docs/snapshot-testing). The most-adopted JavaScript snapshot-testing implementation; canonical reference for inline snapshots, the `__snapshots__/` convention, and the `--updateSnapshot` flag and its discipline implications.
115
+ - Llopis, N. ["Approval Tests"](https://approvaltests.com/). Cross-language framework explicitly focused on the approval cycle as the central discipline; useful as a contrast to auto-update-heavy tools.
116
+ - Chromatic. ["Visual Testing Handbook"](https://www.chromatic.com/blog/visual-testing-handbook/). Practitioner-oriented guide to visual snapshot testing, perceptual diff, cross-browser concerns, and PR-integrated review UI.
117
+ - Percy / BrowserStack. ["Visual Testing Documentation"](https://docs.percy.io/). Reference for the centralized-snapshot-service pattern in visual regression testing.
118
+ - Storybook Team. ["Visual testing with Storybook"](https://storybook.js.org/docs/writing-tests/visual-testing). Reference for integrating visual snapshot testing with component development workflows.
119
+ - Reactive Tests. ["Testing Library — Snapshot considerations"](https://testing-library.com/docs/queries/about/#priority) and broader [Testing Library documentation](https://testing-library.com/). Practitioner reference for DOM snapshot best practices in React/Vue test suites.
120
+ - Spadini, D., Schvarcbacher, M., Oprescu, A.-M., Bruntink, M., & Bacchelli, A. (2020). ["Investigating Severity Thresholds for Test Smells"](https://dl.acm.org/doi/10.1145/3387940.3392177). Industrial study including snapshot-test smells; useful empirical signal on approval-cycle failure modes.
@@ -0,0 +1,148 @@
1
+ ---
2
+ name: spec-driven-development
3
+ description: "This skill provides Spec Driven Development (SDD) expertise for AI engineering: the Specify → Plan → Tasks → Implement lifecycle. Use when starting any non-trivial task, refactoring a core module, or when an agent loop has stalled due to ambiguous requirements. Do NOT use for one-line edits or README fixes."
4
+ license: MIT
5
+ compatibility: "Markdown, Git, agent-skill runtimes"
6
+ allowed-tools: Read Grep Bash
7
+ metadata:
8
+ metadata: "{\"schema_version\":6,\"version\":\"1.0.0\",\"type\":\"workflow\",\"category\":\"engineering\",\"domain\":\"engineering/methodology\",\"scope\":\"reference\",\"owner\":\"skill-graph-maintainer\",\"freshness\":\"2026-03-28\",\"drift_check\":\"{\\\\\\\"last_verified\\\\\\\":\\\\\\\"2026-03-28\\\\\\\"}\",\"eval_artifacts\":\"planned\",\"eval_state\":\"unverified\",\"routing_eval\":\"absent\",\"stability\":\"experimental\",\"keywords\":\"[\\\\\\\"spec driven development\\\\\\\",\\\\\\\"SDD\\\\\\\",\\\\\\\"technical plan\\\\\\\",\\\\\\\"task decomposition\\\\\\\",\\\\\\\"specification\\\\\\\",\\\\\\\"architecture plan\\\\\\\",\\\\\\\"phase gates\\\\\\\",\\\\\\\"AI engineering methodology\\\\\\\"]\",\"triggers\":\"[\\\\\\\"sdd-skill\\\\\\\",\\\\\\\"planning-mode\\\\\\\",\\\\\\\"spec-driven-development\\\\\\\"]\",\"relations\":\"{\\\\\\\"verify_with\\\\\\\":[\\\\\\\"code-review\\\\\\\"]}\",\"portability\":\"{\\\\\\\"readiness\\\\\\\":\\\\\\\"scripted\\\\\\\",\\\\\\\"targets\\\\\\\":[\\\\\\\"skill-md\\\\\\\"]}\",\"lifecycle\":\"{\\\\\\\"stale_after_days\\\\\\\":90,\\\\\\\"review_cadence\\\\\\\":\\\\\\\"quarterly\\\\\\\"}\",\"skill_graph_source_repo\":\"https://github.com/jacob-balslev/skill-graph\",\"skill_graph_protocol\":\"Skill Metadata Protocol v5\",\"skill_graph_project\":\"Skill Graph\",\"skill_graph_canonical_skill\":\"skills/spec-driven-development/SKILL.md\"}"
9
+ skill_graph_source_repo: "https://github.com/jacob-balslev/skill-graph"
10
+ skill_graph_protocol: Skill Metadata Protocol v4
11
+ skill_graph_project: Skill Graph
12
+ skill_graph_canonical_skill: skills/spec-driven-development/SKILL.md
13
+ ---
14
+ # Spec Driven Development (SDD)
15
+
16
+ ## Domain Context
17
+
18
+ **What is this skill?** This skill provides Spec Driven Development (SDD) expertise for AI engineering: the Specify → Plan → Tasks → Implement lifecycle. Use when starting any non-trivial task, refactoring a core module, or when an agent loop has stalled due to ambiguous requirements. Do NOT use for one-line edits or README fixes.
19
+
20
+ ## Workflow
21
+
22
+ Use the ordered phases, checklists, and guardrails in the sections below as the canonical workflow for this skill. When multiple subsections describe steps, follow them in the order presented.
23
+
24
+ ## Coverage
25
+
26
+ The 5-phase SDD lifecycle (Specify, Plan, Decompose, Implement, Verify), spec.md and plan.md artifact authoring, atomic task decomposition (<10 min per task with topological ordering), verification gates (spec compliance, zero regressions, visual QA, doc updates), and the Build-Measure-Learn validation loop for post-implementation learning.
27
+
28
+ ## Philosophy
29
+
30
+ AI agents default to implementation-first thinking: receive a prompt, start coding. This produces features that "work" but miss edge cases, violate constraints, and accumulate design debt. SDD exists because fixing a design flaw in Markdown costs 10x less than fixing it in a pull request. By forcing the Specify and Plan phases before any code is written, agents surface hidden dependencies, breaking changes, and security constraints while they are cheap to address. Observed failure: agents that skip specs produce code that passes tests but fails real-world scenarios the spec would have caught.
31
+
32
+ > Spec Driven Development is the methodology of separating **"What"** (Specification) from **"How"** (Implementation). In the age of AI agents, SDD replaces "vibe coding" (iterative prompting without a plan) with systematic engineering.
33
+
34
+ ## 1. The SDD Lifecycle
35
+
36
+ Every non-trivial task follows these five phases:
37
+
38
+ | Phase | Agent Role | Output Artifact | Exit Criteria |
39
+ |-------|------------|-----------------|---------------|
40
+ | **1. Specify** | Researcher | `spec.md` | Human approval of requirements |
41
+ | **2. Plan** | Architect | `plan.md` | Human approval of architecture |
42
+ | **3. Decompose**| Project Manager | Linear Tasks | Tasks are atomic (<10 mins) |
43
+ | **4. Implement**| Solver | Code + Tests | Tests pass, linting clear |
44
+ | **5. Verify** | Validator | RESULT report | Spec compliance confirmed |
45
+
46
+ **Rule**: Never start coding until the **Plan** phase is approved. Fixing a design flaw in Markdown is 10x cheaper than in a Pull Request.
47
+
48
+ ## 2. The Specification (`spec.md`)
49
+
50
+ The `spec.md` defines the intent, constraints, and success criteria.
51
+
52
+ - **Requirements**: User stories and "Must-Haves"
53
+ - **Constraints**: Architecture, security, and PII rules (GDPR)
54
+ - **Success Criteria**: Observable behaviors that prove the task is "Done"
55
+ - **Edge Cases**: Zero states, error states, and high-volume data handling
56
+
57
+ > **Anti-pattern**: Describing implementation details (e.g., "Use a `for` loop") in the spec. The spec is for "What", not "How".
58
+
59
+ ## 3. The Technical Plan (`plan.md`)
60
+
61
+ The `plan.md` defines the implementation strategy and architecture.
62
+
63
+ - **Architecture**: Affected modules, new components, and DB schema changes
64
+ - **Data Flow**: How data moves from input to storage to output
65
+ - **API Contracts**: Request/Response shapes and status codes
66
+ - **Testing Strategy**: Unit, integration, and E2E coverage targets
67
+
68
+ **Rule**: The plan must identify **hidden dependencies** and **breaking changes** before the first line of code is written.
69
+
70
+ ## 4. Task Decomposition
71
+
72
+ Break the plan into atomic, testable tasks.
73
+
74
+ - **Atomic**: One behavioral change per task
75
+ - **Time-bound**: Each task should take an agent <10 minutes to implement
76
+ - **Verifiable**: Each task must have a verification step (e.g., run a specific test)
77
+ - **Topological Order**: Respect dependencies (Task B depends on Task A)
78
+
79
+ > **Source**: `skills/task-lifecycle/SKILL.md` task decomposition rules.
80
+
81
+ ## 5. Verification Gates
82
+
83
+ Verification is the only path to finality.
84
+
85
+ - **SDD spec-compliance**: Every "Must-Have" in the spec is demonstrably true
86
+ - **Zero-regressions**: Existing tests still pass
87
+ - **Visual-QA**: UI changes match design-tokens and `composition-theory`
88
+ - **Doc-update**: AGENTS.md, CONTEXT.md, and relevant domain docs updated
89
+
90
+ ## 6. Validate (Build-Measure-Learn)
91
+
92
+ After implementation, validate that the change actually solves the problem. This phase comes from Eric Ries's Lean Startup methodology.
93
+
94
+ ### The BML Loop
95
+ 1. **Build** — Minimum viable implementation (already done in Phase 4)
96
+ 2. **Measure** — Collect data on whether the change achieved its goal
97
+ - Does the DORA rework rate stay stable or improve?
98
+ - Does user activation improve (if user-facing)?
99
+ - Does the target metric move in the right direction?
100
+ 3. **Learn** — Draw conclusions and decide next steps
101
+ - **Persevere** — The hypothesis was correct, continue investing
102
+ - **Pivot** — The hypothesis was wrong, change approach
103
+ - **Stop** — The problem isn't worth solving at this time
104
+
105
+ ### Validation Checklist
106
+ - [ ] Success metric defined before implementation (from the spec)
107
+ - [ ] Measurement mechanism in place (analytics, telemetry, user feedback)
108
+ - [ ] Data collected for at least one cycle
109
+ - [ ] Decision documented (persevere/pivot/stop) in Linear or decision ledger
110
+
111
+ ### When to Skip Validation
112
+ - Pure infrastructure/tooling changes (validate via tests instead)
113
+ - Bug fixes (validate via regression test)
114
+ - Cosmetic changes under 10 lines
115
+
116
+ > Source: Eric Ries "The Lean Startup" (2011)
117
+
118
+ ---
119
+
120
+ ## 7. Verification Checklist
121
+
122
+ ```text
123
+ SDD CHECK
124
+ =========
125
+ [ ] spec.md approved by human (or documented rationale)
126
+ [ ] plan.md approved by human (or documented rationale)
127
+ [ ] Tasks are atomic (<10 min execution)
128
+ [ ] Dependencies are explicitly ordered
129
+ [ ] No code written until Plan phase is complete
130
+ [ ] Every task has an associated test case
131
+ [ ] Final verification confirms ALL spec success criteria met
132
+ ```
133
+
134
+ ## Do NOT Use When
135
+
136
+ | Instead of this skill | Use | Why |
137
+ |---|---|---|
138
+ | One-line edits, README fixes, or trivial changes | `effort` | Effort calibration determines when fast-track is appropriate |
139
+ | Breaking a plan into atomic tasks with dependencies | `task` | Task skill owns decomposition mechanics and topological ordering |
140
+ | Reviewing code quality after implementation | `code-review` | Code review owns post-implementation quality assessment |
141
+ | Designing the UI layout and visual contracts | `design-execution` | Design execution owns the visual implementation doctrine |
142
+
143
+
144
+ ## Verification
145
+
146
+ After applying this skill, verify:
147
+ - [ ] Changes follow the patterns documented above
148
+ - [ ] No regressions in affected functionality
@@ -0,0 +1,56 @@
1
+ ---
2
+ name: state-machine-modeling
3
+ description: "Use when modeling lifecycle states, transitions, guards, events, side effects, invalid states, retries, and state invariants for workflows or domain objects. Do NOT use for broad event discovery (use `event-storming`), database schema design (use `data-modeling`), or observability instrumentation after the lifecycle already exists (use `observability-modeling`)."
4
+ license: MIT
5
+ compatibility: "Portable state-machine discipline for product workflows, domain lifecycles, retries, background jobs, and UI flow control."
6
+ allowed-tools: Read Grep
7
+ metadata:
8
+ metadata: "{\"schema_version\":6,\"version\":\"1.0.0\",\"type\":\"capability\",\"category\":\"engineering\",\"domain\":\"modeling/state-machines\",\"scope\":\"portable\",\"owner\":\"skill-graph-maintainer\",\"freshness\":\"2026-05-11\",\"drift_check\":\"{\\\\\\\"last_verified\\\\\\\":\\\\\\\"2026-05-11\\\\\\\"}\",\"eval_artifacts\":\"planned\",\"eval_state\":\"unverified\",\"routing_eval\":\"absent\",\"stability\":\"experimental\",\"keywords\":\"[\\\\\\\"state machine\\\\\\\",\\\\\\\"state modeling\\\\\\\",\\\\\\\"lifecycle states\\\\\\\",\\\\\\\"transitions\\\\\\\",\\\\\\\"guards\\\\\\\",\\\\\\\"finite state machine\\\\\\\",\\\\\\\"invalid states\\\\\\\",\\\\\\\"status field\\\\\\\",\\\\\\\"workflow invariants\\\\\\\"]\",\"examples\":\"[\\\\\\\"model the order fulfillment status lifecycle so invalid transitions are impossible\\\\\\\",\\\\\\\"this status field keeps growing flags - should it become a state machine?\\\\\\\",\\\\\\\"define guards and side effects for onboarding steps\\\\\\\",\\\\\\\"find impossible states in this workflow before we implement it\\\\\\\"]\",\"anti_examples\":\"[\\\\\\\"discover the domain events and policies for the whole business process\\\\\\\",\\\\\\\"create database tables and constraints for this lifecycle\\\\\\\",\\\\\\\"instrument metrics and traces for an existing workflow\\\\\\\",\\\\\\\"debug why this job got stuck yesterday\\\\\\\"]\",\"relations\":\"{\\\\\\\"boundary\\\\\\\":[{\\\\\\\"skill\\\\\\\":\\\\\\\"event-storming\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"event-storming discovers domain behavior broadly; state-machine-modeling formalizes a specific lifecycle\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"data-modeling\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"data-modeling persists state; state-machine-modeling defines legal state behavior\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"observability-modeling\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"observability-modeling instruments a lifecycle; state-machine-modeling defines the lifecycle itself\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"debugging\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"debugging investigates an observed stuck state; state-machine-modeling prevents invalid states by design\\\\\\\"}],\\\\\\\"related\\\\\\\":[\\\\\\\"event-storming\\\\\\\",\\\\\\\"system-interface-contracts\\\\\\\",\\\\\\\"testing-strategy\\\\\\\",\\\\\\\"api-design\\\\\\\"],\\\\\\\"verify_with\\\\\\\":[\\\\\\\"testing-strategy\\\\\\\",\\\\\\\"system-interface-contracts\\\\\\\"]}\",\"portability\":\"{\\\\\\\"readiness\\\\\\\":\\\\\\\"scripted\\\\\\\",\\\\\\\"targets\\\\\\\":[\\\\\\\"skill-md\\\\\\\"]}\",\"lifecycle\":\"{\\\\\\\"stale_after_days\\\\\\\":365,\\\\\\\"review_cadence\\\\\\\":\\\\\\\"quarterly\\\\\\\"}\",\"skill_graph_source_repo\":\"https://github.com/jacob-balslev/skill-graph\",\"skill_graph_protocol\":\"Skill Metadata Protocol v5\",\"skill_graph_project\":\"Skill Graph\",\"skill_graph_canonical_skill\":\"skills/state-machine-modeling/SKILL.md\"}"
9
+ skill_graph_source_repo: "https://github.com/jacob-balslev/skill-graph"
10
+ skill_graph_protocol: Skill Metadata Protocol v4
11
+ skill_graph_project: Skill Graph
12
+ skill_graph_canonical_skill: skills/state-machine-modeling/SKILL.md
13
+ ---
14
+
15
+ # State Machine Modeling
16
+
17
+ ## Coverage
18
+
19
+ Define legal lifecycle behavior for a domain object, UI flow, job, integration, or process. Covers states, transitions, events, guards, side effects, terminal states, retries, timeouts, compensation, invalid states, and transition verification.
20
+
21
+ ## Philosophy
22
+
23
+ State modeling prevents boolean sprawl. When a workflow has several flags that can combine into impossible conditions, the model is already a state machine - just an implicit and unsafe one.
24
+
25
+ Make illegal states unrepresentable where possible. Where that is not possible, make illegal transitions impossible and detectable.
26
+
27
+ ## Method
28
+
29
+ 1. Name the entity whose state is being modeled.
30
+ 2. List observable states as nouns or adjectives, not events.
31
+ 3. List events or commands that trigger transitions.
32
+ 4. Add guards: conditions required before a transition is legal.
33
+ 5. Add side effects separately from state changes.
34
+ 6. Mark terminal, retryable, and compensating states.
35
+ 7. Define invalid transitions and expected error behavior.
36
+ 8. Create transition-table tests before implementation.
37
+
38
+ ## Verification
39
+
40
+ - [ ] States are mutually exclusive unless explicitly modeled as parallel regions
41
+ - [ ] Every transition has a trigger
42
+ - [ ] Guards are explicit where transitions depend on conditions
43
+ - [ ] Side effects are not confused with state changes
44
+ - [ ] Terminal and retry states are named
45
+ - [ ] Invalid transitions have deterministic behavior
46
+ - [ ] Tests cover allowed and forbidden transitions
47
+
48
+ ## Do NOT Use When
49
+
50
+ | Use instead | When |
51
+ |---|---|
52
+ | `event-storming` | You need to discover the broader domain flow, commands, policies, and aggregates. |
53
+ | `data-modeling` | You need persistence schema or query shape for state data. |
54
+ | `observability-modeling` | The lifecycle is settled and you need metrics, logs, traces, or alerts. |
55
+ | `debugging` | A stateful system has already failed and needs root-cause analysis. |
56
+
@@ -0,0 +1,134 @@
1
+ ---
2
+ name: state-management
3
+ description: "Use when deciding where state lives, how it propagates, and how it composes: local component state vs lifted/shared state vs application state, server state vs client state, URL as state, persistent state, derived state, and the cross-cutting decision of who owns which piece. Covers state colocation, lifting up, derivation vs duplication, single source of truth, optimistic updates, server-state cache invalidation (React Query/SWR model), URL state for deep-linking, and anti-patterns like prop-drilling, state sprawl, and global-state-by-default. Do NOT use for specific state library choice (Redux vs Zustand — tactical), data fetching mechanics (use api-design or rendering-models), client/server boundary (use client-server-boundary), distributed system state (use replication-patterns), or finite state machines (use state-machine-modeling)."
4
+ license: MIT
5
+ allowed-tools: Read Grep
6
+ metadata:
7
+ metadata: "{\"schema_version\":6,\"version\":\"1.0.0\",\"type\":\"capability\",\"category\":\"engineering\",\"domain\":\"engineering/frontend\",\"scope\":\"reference\",\"owner\":\"skill-graph-maintainer\",\"freshness\":\"2026-05-16\",\"drift_check\":\"{\\\\\\\"last_verified\\\\\\\":\\\\\\\"2026-05-16\\\\\\\"}\",\"eval_artifacts\":\"planned\",\"eval_state\":\"unverified\",\"routing_eval\":\"absent\",\"comprehension_state\":\"present\",\"stability\":\"experimental\",\"keywords\":\"[\\\\\\\"state management\\\\\\\",\\\\\\\"state colocation\\\\\\\",\\\\\\\"lifting state\\\\\\\",\\\\\\\"state derivation\\\\\\\",\\\\\\\"single source of truth\\\\\\\",\\\\\\\"server state\\\\\\\",\\\\\\\"client state\\\\\\\",\\\\\\\"URL state\\\\\\\",\\\\\\\"persistent state\\\\\\\",\\\\\\\"ephemeral state\\\\\\\",\\\\\\\"global state\\\\\\\",\\\\\\\"prop drilling\\\\\\\",\\\\\\\"state sprawl\\\\\\\",\\\\\\\"optimistic update\\\\\\\",\\\\\\\"cache invalidation\\\\\\\",\\\\\\\"state ownership\\\\\\\",\\\\\\\"list state filtering sorting pagination\\\\\\\",\\\\\\\"state across routes\\\\\\\"]\",\"triggers\":\"[\\\\\\\"where should this state live\\\\\\\",\\\\\\\"should this be in component state or global\\\\\\\",\\\\\\\"I have state across multiple routes\\\\\\\",\\\\\\\"this prop is drilled through 5 components\\\\\\\",\\\\\\\"is this server state or client state\\\\\\\",\\\\\\\"should this be in the URL\\\\\\\"]\",\"examples\":\"[\\\\\\\"decide where the filter/sort/page state for a data table should live\\\\\\\",\\\\\\\"decide whether a piece of state should be in the URL, component state, or persistent storage\\\\\\\",\\\\\\\"diagnose whether a piece of duplicated state is a real performance need or accidental sprawl\\\\\\\",\\\\\\\"structure state for a form that spans multiple steps and survives navigation\\\\\\\"]\",\"anti_examples\":\"[\\\\\\\"implement a specific Redux reducer (tactical, library-specific)\\\\\\\",\\\\\\\"design the JSON shape of an API response (use api-design)\\\\\\\",\\\\\\\"model the state transitions of a multi-step workflow (use state-machine-modeling)\\\\\\\",\\\\\\\"configure HTTP cache headers on the server (use rendering-models or http-semantics)\\\\\\\"]\",\"relations\":\"{\\\\\\\"related\\\\\\\":[\\\\\\\"rendering-models\\\\\\\",\\\\\\\"client-server-boundary\\\\\\\",\\\\\\\"frontend-architecture\\\\\\\",\\\\\\\"api-design\\\\\\\",\\\\\\\"state-machine-modeling\\\\\\\"],\\\\\\\"boundary\\\\\\\":[{\\\\\\\"skill\\\\\\\":\\\\\\\"client-server-boundary\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"client-server-boundary owns the line between code-that-runs-where (server components, client components, the serialization boundary); this skill owns the orthogonal question of which side owns which piece of state. They compose: the boundary skill says what code runs where; this skill says what state lives where.\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"state-machine-modeling\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"state-machine-modeling owns finite-state representation of workflows (states, transitions, guards); this skill owns the decision of where state of any kind lives. The two compose when a workflow has a finite state space whose value still has to live somewhere — the machine names the values, this skill names the location.\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"api-design\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"api-design owns the external request/response shape; this skill owns where the response data lives once it arrives, and how it's invalidated. Server state cache management (React Query / SWR doctrine) is in scope of this skill; the API surface itself is not.\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"rendering-models\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"rendering-models owns the question of when content is generated (SSR, RSC, CSR, ISR); this skill owns the question of where data backing that content lives. The two intersect in 'server state' — data fetched on the server that the client needs.\\\\\\\"}],\\\\\\\"verify_with\\\\\\\":[\\\\\\\"rendering-models\\\\\\\",\\\\\\\"api-design\\\\\\\"]}\",\"mental_model\":\"|\",\"purpose\":\"|\",\"boundary\":\"|\",\"analogy\":\"State management is to a frontend application what addressing is to a postal system — you do not ask 'should this letter exist?', you ask 'where does it live?', and the right destination depends entirely on the letter's kind: a registered package (server data with provable delivery), a postcard (URL state, public on the back), a private letter (client UI state, inside an envelope), a deed (persistent state, kept in the safe). One mailbox for everything produces predictable failures.\",\"misconception\":\"|\",\"concept\":\"{\\\\\\\"definition\\\\\\\":\\\\\\\"State management is the architectural discipline of deciding, for each distinct piece of data that an application reads or writes, where that data lives, who owns it, how it propagates to the components that need it, and how it stays consistent across changes. The discipline is upstream of any specific state library: it asks 'should this be local, lifted, global, server-cached, URL-encoded, or persisted' before asking 'which library do I use to hold it.' State is not a single thing; it is a category with at least four distinct kinds (server state, client UI state, URL state, persistent state), each with different lifetimes, invalidation rules, and consistency requirements. The discipline is the recognition that treating all state the same — putting all of it in one global store, or scattering it across every component — produces the recurring frontend problems of prop drilling, stale data, broken back-buttons, and tests that pass while users are confused.\\\\\\\",\\\\\\\"mental_model\\\\\\\":\\\\\\\"|\\\\\\\",\\\\\\\"purpose\\\\\\\":\\\\\\\"|\\\\\\\",\\\\\\\"boundary\\\\\\\":\\\\\\\"|\\\\\\\",\\\\\\\"taxonomy\\\\\\\":\\\\\\\"|\\\\\\\",\\\\\\\"analogy\\\\\\\":\\\\\\\"|\\\\\\\",\\\\\\\"misconception\\\\\\\":\\\\\\\"|\\\\\\\"}\",\"skill_graph_source_repo\":\"https://github.com/jacob-balslev/skill-graph\",\"skill_graph_protocol\":\"Skill Metadata Protocol v5\",\"skill_graph_project\":\"Skill Graph\",\"skill_graph_canonical_skill\":\"skills/state-management/SKILL.md\",\"skill_graph_export_description\":\"shortened for Agent Skills 1024-character description limit; canonical source keeps the full routing contract\",\"skill_graph_canonical_description_length\":\"1122\"}"
8
+ skill_graph_source_repo: "https://github.com/jacob-balslev/skill-graph"
9
+ skill_graph_protocol: Skill Metadata Protocol v4
10
+ skill_graph_project: Skill Graph
11
+ skill_graph_canonical_skill: skills/state-management/SKILL.md
12
+ ---
13
+
14
+ # State Management
15
+
16
+ ## Coverage
17
+
18
+ The architectural discipline of deciding, for each distinct piece of data an application reads or writes, where it lives, who owns it, how it propagates, and how it stays consistent. Covers the four kinds of state (server, client UI, URL, persistent), the colocation default and the lifting move, the single-source-of-truth principle, the React Query / SWR doctrine for server state, the URL as a state container, the architectural anti-patterns of premature globalization and state sprawl, optimistic-update trade-offs, and the framing of state ownership as a design contract distinct from state-library selection.
19
+
20
+ ## Philosophy
21
+
22
+ State management is a series of location and ownership decisions, each of which has a correct default. The defaults are: colocate locally; lift only when needed; put server state in a server-state library; put URL-worthy state in the URL; put session-survival state in persistent storage; never have two sources of truth for one value. Most recurring frontend bugs (broken back-button, stale data, prop drilling, "why is this re-rendering," changes that don't reflect everywhere) are violations of these defaults. The discipline is not the library; it is the application of the defaults.
23
+
24
+ The discipline matters because state is not one thing — server state, client UI state, URL state, and persistent state have different lifetimes, invalidation rules, and consistency requirements. Treating them as one category (one store, one set of patterns) produces a codebase that gets all four kinds of state slightly wrong simultaneously. Treating them as four categories produces a codebase where each kind is handled by the tool best suited to it.
25
+
26
+ For agents writing or reviewing frontend code, the discipline is the framework that lets the agent reason locally — pick up a piece of state, classify it (server / client / URL / persistent), check its current location against the right location for its kind, and make targeted fixes. Without the framework, the agent pattern-matches against whatever the codebase already does, replicating existing choices without questioning whether they were correct.
27
+
28
+ ## The Four Kinds Of State
29
+
30
+ | Kind | Owned by | Lifetime | Invalidation rule | Common tools |
31
+ |---|---|---|---|---|
32
+ | **Server state** | A backend | Session, with revalidation | Time-based (stale-while-revalidate); event-based (mutation, focus, reconnect); manual | React Query, SWR, RTK Query, Apollo, Server Components |
33
+ | **Client UI state** | A component or hook in the active session | Ephemeral within a render lifecycle | Recreated on unmount | useState, useReducer, Context, Zustand, Jotai |
34
+ | **URL state** | The URL itself; framework router | Until URL changes | URL navigation | useSearchParams, route params, nuqs |
35
+ | **Persistent state** | The browser's local storage | Until cleared | Manual via app code | localStorage, IndexedDB, cookies |
36
+
37
+ Each piece of state in an application falls into one of these. Misclassifying produces predictable bugs — server data in a general-purpose store loses automatic revalidation; URL-worthy state in component state breaks the back-button; persistent state in component state loses on refresh.
38
+
39
+ ## The Colocation Rule (Kent C. Dodds)
40
+
41
+ > **"State should live as close as possible to where it's used."** — colocation, deliberate lifting, escalation only by need.
42
+
43
+ The decision procedure:
44
+
45
+ 1. **Start local.** Put new state in the component that needs it. Use `useState` or `useReducer`.
46
+ 2. **Two consumers? Lift.** When a second component needs to read or write the state, lift to the nearest common ancestor and pass by props. Track the prop's path; if it goes through ≥4 intermediate components, consider Context or composition.
47
+ 3. **Tree-scoped? Context.** When the state is genuinely shared by a sub-tree (theme, viewer, auth) and the value changes rarely, use Context. Use `useContextSelector` or pattern-match to slice if many consumers depend on different parts of a large value.
48
+ 4. **Application-wide with frequent fine-grained updates? Store.** When you have many components depending on many slices of a value that changes often, a state library (Zustand, Jotai, Redux Toolkit) provides selector-based subscriptions that minimize re-renders. This is the rare case, not the default.
49
+ 5. **Server data? Server-state library.** Always. Don't put server data in a general-purpose store.
50
+ 6. **URL-worthy? URL state.** When the state should survive refresh, be shareable, respond to back-button.
51
+
52
+ Premature jumps (skipping step 2 to land at step 4, or starting at step 4 by default) cause state sprawl. The cost of climbing the ladder later (refactoring local to lifted) is less than the cost of being too high up to start.
53
+
54
+ ## The Server-State Distinction
55
+
56
+ Server state has four properties that no general-purpose store handles by default:
57
+
58
+ | Property | What it requires | Why a server-state library wins |
59
+ |---|---|---|
60
+ | **Remote canonical source** | The client cache may diverge from the server | Built-in stale-while-revalidate, refetch on focus/reconnect |
61
+ | **Deduplication** | Two components asking for the same data should fetch once | Query-key cache prevents duplicate fetches |
62
+ | **Staleness** | Old data should be replaced | Time-based and event-based invalidation |
63
+ | **Mutation-triggered invalidation** | Updating data should refresh related queries | Mutate-then-invalidate pattern by query key |
64
+
65
+ The recurring failure: using Redux/Zustand for everything, then manually building "refetch on focus" middleware, manual deduplication, manual cache expiry, and manual mutation-invalidation rules. Each one of those is correct in concept; together they reimplement React Query, badly. The disciplined answer is to use a server-state library for server data and keep the general-purpose store (if any) for genuinely client UI state.
66
+
67
+ ## URL State Decision Rule
68
+
69
+ > **"Should two people opening this URL see the same view?"**
70
+
71
+ If yes, the state belongs in the URL. If no, it doesn't.
72
+
73
+ | State | URL-worthy? | Why |
74
+ |---|---|---|
75
+ | Current filter, sort, page | Yes | Sharing a link reproduces the view; back-button works |
76
+ | Selected tab in a multi-tab panel | Often yes | Bookmark-able sub-view |
77
+ | Open/closed of a sidebar | Usually no | Personal preference, not the shared view |
78
+ | Modal open/closed | Sometimes | If it's a deep-linkable modal (sharable URL), yes; if it's transient confirmation, no |
79
+ | Form values mid-edit | No | Ephemeral; shouldn't survive refresh from a stranger's link |
80
+ | Pagination cursor | Yes | Restores state on refresh; shareable position |
81
+ | Search query | Yes | Canonical "what is this user looking for" |
82
+ | Currently-hovered element | No | Ephemeral; not part of the shareable view |
83
+
84
+ ## Anti-Patterns And Their Fixes
85
+
86
+ | Anti-pattern | Symptom | Fix |
87
+ |---|---|---|
88
+ | **Premature globalization** | Every new state goes into the global store; the store grows; nobody knows what's in it | Start local. Only lift on observed need. Audit the store for entries that haven't been read in N months. |
89
+ | **Server data in a general-purpose store** | Custom middleware for refetch, dedup, invalidation; bugs in each | Migrate server data to React Query/SWR/RTK Query. Keep the general store for UI state only. |
90
+ | **URL-worthy state in component state** | Back-button doesn't work; refresh loses filters; can't share a link | Move to `useSearchParams` or equivalent. Adopt nuqs for type-safe URL state. |
91
+ | **Prop drilling through 7 layers** | Tedious to maintain; refactors break | Context for tree-shared data; or composition (children-as-prop) to avoid intermediate awareness. |
92
+ | **Duplicated state (same value, two locations)** | Updates in one place don't reflect in the other | Identify the canonical owner; derive in the other location or sync explicitly. |
93
+ | **Stored derived state without need** | Caches go stale; bugs from "I updated X but Y still shows old" | Compute derived state at read time. Use `useMemo` only with measured perf evidence. |
94
+ | **Optimistic updates for high-failure mutations** | "Did that work? Oh no, it didn't" UX | Use pessimistic (loading then success/error) for low-confidence mutations; optimistic for high-confidence only. |
95
+ | **localStorage for everything user-prefs** | Server doesn't know on first render; no cross-device sync | Server-side store for prefs that affect SSR; URL state for session-scoped prefs; localStorage only when local-only is correct. |
96
+
97
+ ## Verification
98
+
99
+ After applying this skill, verify:
100
+ - [ ] Every distinct piece of state in scope has been classified into one of the four kinds (server / client UI / URL / persistent).
101
+ - [ ] Server data is held by a server-state library (React Query, SWR, RTK Query, Apollo, Server Components), not a general-purpose store.
102
+ - [ ] State that should survive refresh, be shareable, or respond to back-button is in the URL.
103
+ - [ ] No piece of state is duplicated (same value held in two independent locations) without an explicit synchronization mechanism and a recorded reason.
104
+ - [ ] Local state stays local; lifts have a documented justification.
105
+ - [ ] Context use is limited to genuinely tree-scoped data; large frequently-changing values that go through Context have been migrated to a store with selector-based subscriptions.
106
+ - [ ] Derived state is computed at read time; stored derived values have measured performance evidence.
107
+ - [ ] Optimistic updates are limited to high-confidence mutations; rollback paths exist where they are used.
108
+ - [ ] Persistent state choices match what the data actually needs (localStorage / IndexedDB / cookies / server-stored prefs).
109
+ - [ ] The state model is documented enough that a new contributor can answer "where does X live" in under a minute.
110
+
111
+ ## Do NOT Use When
112
+
113
+ | Instead of this skill | Use | Why |
114
+ |---|---|---|
115
+ | Choosing between Redux, Zustand, Jotai, Recoil, MobX, etc. | Library docs + framework conventions | Library choice is a tactical decision below this skill |
116
+ | Designing the JSON shape of an API endpoint | `api-design` | api-design owns the external request/response surface; this skill owns where the response lives once it arrives |
117
+ | Modeling the finite-state transitions of a workflow | `state-machine-modeling` | state-machine-modeling owns the workflow representation; this skill owns the location decision |
118
+ | Encoding/decoding URL search params, route params, hash | `url-state-management` | url-state-management owns the encoding patterns; this skill owns the upstream "should it be in the URL" decision |
119
+ | Building distributed state across services | `replication-patterns` | replication-patterns owns multi-replica consistency; this skill applies to single-client state |
120
+ | Deciding what runs on server vs client | `client-server-boundary` | client-server-boundary owns the code-location boundary; this skill owns the state-location decision orthogonal to it |
121
+ | Building the cache infrastructure of a server-state library | the library itself (React Query docs, etc.) | The library is the implementation of what this skill recommends; don't reimplement |
122
+ | Concurrency control across multiple users editing the same record | (no direct skill — out of scope) | Conflict resolution mechanisms (versioning, OT, CRDT) are a separate concern |
123
+
124
+ ## Key Sources
125
+
126
+ - Dodds, K. C. (2019). ["Application State Management with React"](https://kentcdodds.com/blog/application-state-management-with-react) and ["State Colocation will make your React app faster"](https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster). Foundational essays on the colocation rule and the lift-when-needed discipline; widely cited as the modern doctrine successor to Redux-by-default.
127
+ - TanStack. [React Query overview and motivation](https://tanstack.com/query/latest/docs/framework/react/overview). The canonical articulation of the server-state distinction: "React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze."
128
+ - Vercel. [SWR docs](https://swr.vercel.app/). The first widely-adopted server-state library to make stale-while-revalidate the default mental model in React.
129
+ - Abramov, D. (2019). ["You Might Not Need Redux"](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367) and follow-ups. Redux's author articulating that Redux is not always the right answer; foundational for the modern "store-by-need, not by-default" doctrine.
130
+ - React Team. [Sharing State Between Components](https://react.dev/learn/sharing-state-between-components) and [Choosing the State Structure](https://react.dev/learn/choosing-the-state-structure). The official React docs' framing of lifting state up, single source of truth, and avoiding state duplication.
131
+ - Karlton, P. (attributed). "There are only two hard things in Computer Science: cache invalidation and naming things." The canonical statement of why server-state caching is not trivial — its difficulty is one of the two named hardest problems in the field.
132
+ - Marquardt, J. (2024). ["URL as the state of your app"](https://www.epicreact.dev/url-state). Modern articulation of the URL-as-state-container principle in the App Router era.
133
+ - Pelle, M. (2024). [nuqs documentation](https://nuqs.47ng.com/). Type-safe URL state library; reference implementation of the URL-as-state pattern with serialization, parsing, and React integration.
134
+ - Fowler, M. (2003). *Patterns of Enterprise Application Architecture*. Addison-Wesley. The classic treatment of the Service Layer / Data Mapper / Identity Map / Unit of Work patterns; the Identity Map pattern is the original articulation of "deduplicate fetches by entity key" that server-state libraries operationalize.