@su-record/vibe 2.9.22 → 2.9.23

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 (466) hide show
  1. package/.env.example +37 -37
  2. package/CLAUDE.md +105 -105
  3. package/LICENSE +21 -21
  4. package/agents/architect-low.md +41 -41
  5. package/agents/architect-medium.md +59 -59
  6. package/agents/architect.md +80 -80
  7. package/agents/build-error-resolver.md +115 -115
  8. package/agents/compounder.md +261 -261
  9. package/agents/diagrammer.md +178 -178
  10. package/agents/docs/api-documenter.md +99 -99
  11. package/agents/docs/changelog-writer.md +93 -93
  12. package/agents/e2e-tester.md +294 -294
  13. package/agents/event/event-comms.md +78 -78
  14. package/agents/event/event-content.md +68 -68
  15. package/agents/event/event-image.md +95 -95
  16. package/agents/event/event-ops.md +84 -84
  17. package/agents/event/event-scheduler.md +69 -69
  18. package/agents/event/event-speaker.md +86 -86
  19. package/agents/explorer-low.md +42 -42
  20. package/agents/explorer-medium.md +59 -59
  21. package/agents/explorer.md +48 -48
  22. package/agents/implementer-low.md +43 -43
  23. package/agents/implementer-medium.md +52 -52
  24. package/agents/implementer.md +54 -54
  25. package/agents/junior-mentor.md +141 -141
  26. package/agents/planning/requirements-analyst.md +84 -84
  27. package/agents/planning/ux-advisor.md +83 -83
  28. package/agents/qa/acceptance-tester.md +86 -86
  29. package/agents/qa/edge-case-finder.md +93 -93
  30. package/agents/qa/qa-coordinator.md +131 -131
  31. package/agents/refactor-cleaner.md +143 -143
  32. package/agents/research/best-practices-agent.md +199 -199
  33. package/agents/research/codebase-patterns-agent.md +157 -157
  34. package/agents/research/framework-docs-agent.md +188 -188
  35. package/agents/research/security-advisory-agent.md +213 -213
  36. package/agents/review/architecture-reviewer.md +107 -107
  37. package/agents/review/complexity-reviewer.md +116 -116
  38. package/agents/review/data-integrity-reviewer.md +88 -88
  39. package/agents/review/git-history-reviewer.md +103 -103
  40. package/agents/review/performance-reviewer.md +86 -86
  41. package/agents/review/python-reviewer.md +150 -150
  42. package/agents/review/rails-reviewer.md +139 -139
  43. package/agents/review/react-reviewer.md +144 -144
  44. package/agents/review/security-reviewer.md +80 -80
  45. package/agents/review/simplicity-reviewer.md +140 -140
  46. package/agents/review/test-coverage-reviewer.md +116 -116
  47. package/agents/review/typescript-reviewer.md +127 -127
  48. package/agents/searcher.md +54 -54
  49. package/agents/simplifier.md +120 -120
  50. package/agents/teams/debug-team.md +70 -70
  51. package/agents/teams/dev-team.md +88 -88
  52. package/agents/teams/docs-team.md +80 -80
  53. package/agents/teams/figma/figma-analyst.md +52 -52
  54. package/agents/teams/figma/figma-architect.md +112 -112
  55. package/agents/teams/figma/figma-auditor.md +82 -82
  56. package/agents/teams/figma/figma-builder.md +100 -100
  57. package/agents/teams/figma-team.md +85 -85
  58. package/agents/teams/fullstack-team.md +83 -83
  59. package/agents/teams/lite-team.md +69 -69
  60. package/agents/teams/migration-team.md +78 -78
  61. package/agents/teams/refactor-team.md +94 -94
  62. package/agents/teams/research-team.md +86 -86
  63. package/agents/teams/review-debate-team.md +125 -125
  64. package/agents/teams/security-team.md +81 -81
  65. package/agents/tester.md +49 -49
  66. package/agents/ui/ui-a11y-auditor.md +93 -93
  67. package/agents/ui/ui-antipattern-detector.md +102 -102
  68. package/agents/ui/ui-dataviz-advisor.md +69 -69
  69. package/agents/ui/ui-design-system-gen.md +57 -57
  70. package/agents/ui/ui-industry-analyzer.md +49 -49
  71. package/agents/ui/ui-layout-architect.md +65 -65
  72. package/agents/ui/ui-stack-implementer.md +68 -68
  73. package/agents/ui/ux-compliance-reviewer.md +81 -81
  74. package/agents/ui-previewer.md +258 -258
  75. package/commands/vibe.analyze.md +533 -533
  76. package/commands/vibe.contract.md +105 -105
  77. package/commands/vibe.docs.md +33 -33
  78. package/commands/vibe.event.md +163 -163
  79. package/commands/vibe.figma.md +584 -584
  80. package/commands/vibe.harness.md +177 -177
  81. package/commands/vibe.regress.md +73 -73
  82. package/commands/vibe.review.md +624 -624
  83. package/commands/vibe.run.md +1940 -1940
  84. package/commands/vibe.scaffold.md +195 -195
  85. package/commands/vibe.spec.md +577 -577
  86. package/commands/vibe.test.md +96 -96
  87. package/commands/vibe.trace.md +276 -276
  88. package/commands/vibe.utils.md +413 -413
  89. package/commands/vibe.verify.md +550 -550
  90. package/dist/cli/collaborator.js +52 -52
  91. package/dist/cli/commands/codex-proxy.js +15 -15
  92. package/dist/cli/commands/config.js +9 -9
  93. package/dist/cli/commands/evolution.js +12 -12
  94. package/dist/cli/commands/figma.js +20 -20
  95. package/dist/cli/commands/info.js +52 -52
  96. package/dist/cli/commands/init.d.ts.map +1 -1
  97. package/dist/cli/commands/init.js +16 -5
  98. package/dist/cli/commands/init.js.map +1 -1
  99. package/dist/cli/commands/remove.js +14 -14
  100. package/dist/cli/commands/sentinel.js +27 -27
  101. package/dist/cli/commands/skills.js +5 -5
  102. package/dist/cli/commands/slack.js +10 -10
  103. package/dist/cli/commands/stats.js +6 -6
  104. package/dist/cli/commands/telegram.js +12 -12
  105. package/dist/cli/commands/update.d.ts.map +1 -1
  106. package/dist/cli/commands/update.js +16 -0
  107. package/dist/cli/commands/update.js.map +1 -1
  108. package/dist/cli/detect.js +32 -32
  109. package/dist/cli/index.js +33 -33
  110. package/dist/cli/llm/claude-commands.js +16 -16
  111. package/dist/cli/llm/config.js +18 -18
  112. package/dist/cli/llm/gemini-commands.js +16 -16
  113. package/dist/cli/llm/gpt-commands.js +19 -19
  114. package/dist/cli/llm/help.js +21 -21
  115. package/dist/cli/postinstall/cursor-agents.js +32 -32
  116. package/dist/cli/postinstall/cursor-rules.js +83 -83
  117. package/dist/cli/postinstall/cursor-skills.js +743 -743
  118. package/dist/cli/setup/Provisioner.js +42 -42
  119. package/dist/infra/lib/DeepInit.js +24 -24
  120. package/dist/infra/lib/IterationTracker.js +11 -11
  121. package/dist/infra/lib/PythonParser.js +108 -108
  122. package/dist/infra/lib/ReviewRace.js +96 -96
  123. package/dist/infra/lib/SkillFrontmatter.js +28 -28
  124. package/dist/infra/lib/SkillQualityGate.js +9 -9
  125. package/dist/infra/lib/SkillRepository.js +159 -159
  126. package/dist/infra/lib/UltraQA.js +99 -99
  127. package/dist/infra/lib/autonomy/AuditStore.js +41 -41
  128. package/dist/infra/lib/autonomy/ConfirmationStore.js +30 -30
  129. package/dist/infra/lib/autonomy/EventOutbox.js +38 -38
  130. package/dist/infra/lib/autonomy/PolicyEngine.d.ts +3 -3
  131. package/dist/infra/lib/autonomy/PolicyEngine.js +18 -18
  132. package/dist/infra/lib/autonomy/SecuritySentinel.js +1 -1
  133. package/dist/infra/lib/autonomy/SuggestionStore.js +33 -33
  134. package/dist/infra/lib/embedding/VectorStore.js +22 -22
  135. package/dist/infra/lib/evolution/AgentAnalyzer.js +10 -10
  136. package/dist/infra/lib/evolution/DescriptionOptimizer.js +21 -21
  137. package/dist/infra/lib/evolution/GenerationRegistry.js +36 -36
  138. package/dist/infra/lib/evolution/InsightStore.js +90 -90
  139. package/dist/infra/lib/evolution/ParityTester.js +57 -57
  140. package/dist/infra/lib/evolution/RollbackManager.js +5 -5
  141. package/dist/infra/lib/evolution/SkillBenchmark.js +23 -23
  142. package/dist/infra/lib/evolution/SkillEvalRunner.js +50 -50
  143. package/dist/infra/lib/evolution/SkillGapDetector.js +10 -10
  144. package/dist/infra/lib/evolution/UsageTracker.js +28 -28
  145. package/dist/infra/lib/gemini/orchestration.js +5 -5
  146. package/dist/infra/lib/gpt/orchestration.js +4 -4
  147. package/dist/infra/lib/memory/KnowledgeGraph.js +4 -4
  148. package/dist/infra/lib/memory/MemorySearch.js +57 -57
  149. package/dist/infra/lib/memory/MemoryStorage.js +181 -181
  150. package/dist/infra/lib/memory/ObservationStore.js +28 -28
  151. package/dist/infra/lib/memory/ReflectionStore.js +30 -30
  152. package/dist/infra/lib/memory/SessionRAGRetriever.js +7 -7
  153. package/dist/infra/lib/memory/SessionRAGStore.js +225 -225
  154. package/dist/infra/lib/memory/SessionSummarizer.js +9 -9
  155. package/dist/infra/orchestrator/AgentManager.js +12 -12
  156. package/dist/infra/orchestrator/AgentRegistry.js +65 -65
  157. package/dist/infra/orchestrator/MultiLlmResearch.js +8 -8
  158. package/dist/infra/orchestrator/SwarmOrchestrator.test.js +16 -16
  159. package/dist/infra/orchestrator/parallelResearch.js +24 -24
  160. package/dist/tools/convention/analyzeComplexity.test.js +115 -115
  161. package/dist/tools/convention/validateCodeQuality.test.js +104 -104
  162. package/dist/tools/memory/createMemoryTimeline.js +10 -10
  163. package/dist/tools/memory/getMemoryGraph.js +12 -12
  164. package/dist/tools/memory/getSessionContext.js +9 -9
  165. package/dist/tools/memory/linkMemories.js +14 -14
  166. package/dist/tools/memory/listMemories.js +4 -4
  167. package/dist/tools/memory/recallMemory.js +4 -4
  168. package/dist/tools/memory/saveMemory.js +4 -4
  169. package/dist/tools/memory/searchMemoriesAdvanced.js +23 -23
  170. package/dist/tools/semantic/analyzeDependencyGraph.js +12 -12
  171. package/dist/tools/semantic/astGrep.test.js +6 -6
  172. package/dist/tools/spec/prdParser.test.js +171 -171
  173. package/dist/tools/spec/specGenerator.js +169 -169
  174. package/dist/tools/spec/traceabilityMatrix.js +64 -64
  175. package/dist/tools/spec/traceabilityMatrix.test.js +28 -28
  176. package/hooks/gemini-hooks.json +73 -73
  177. package/hooks/hooks.json +126 -126
  178. package/hooks/scripts/__tests__/keyword-detector.test.js +199 -199
  179. package/hooks/scripts/__tests__/pre-tool-guard.test.js +368 -368
  180. package/hooks/scripts/__tests__/sentinel-guard.test.js +208 -208
  181. package/hooks/scripts/auto-commit.js +97 -97
  182. package/hooks/scripts/auto-format.js +64 -64
  183. package/hooks/scripts/auto-test.js +81 -81
  184. package/hooks/scripts/code-check.js +268 -268
  185. package/hooks/scripts/codex-detect.js +46 -46
  186. package/hooks/scripts/codex-review-gate.js +80 -80
  187. package/hooks/scripts/command-log.js +32 -32
  188. package/hooks/scripts/context-save.js +353 -353
  189. package/hooks/scripts/evolution-engine.js +91 -91
  190. package/hooks/scripts/figma-extract.js +635 -635
  191. package/hooks/scripts/figma-guard.js +219 -219
  192. package/hooks/scripts/figma-refine.js +315 -315
  193. package/hooks/scripts/figma-to-scss.js +394 -394
  194. package/hooks/scripts/figma-validate.js +353 -353
  195. package/hooks/scripts/hud-status.js +321 -321
  196. package/hooks/scripts/keyword-detector.js +214 -214
  197. package/hooks/scripts/lib/scope-from-spec.js +261 -0
  198. package/hooks/scripts/llm-orchestrate.js +645 -645
  199. package/hooks/scripts/post-edit.js +32 -32
  200. package/hooks/scripts/pr-test-gate.js +52 -52
  201. package/hooks/scripts/pre-tool-dispatcher.js +5 -0
  202. package/hooks/scripts/pre-tool-guard.js +254 -254
  203. package/hooks/scripts/prompt-dispatcher.js +190 -190
  204. package/hooks/scripts/scope-guard.js +145 -0
  205. package/hooks/scripts/sentinel-guard.js +130 -130
  206. package/hooks/scripts/session-start.js +186 -177
  207. package/hooks/scripts/skill-injector.js +83 -83
  208. package/hooks/scripts/stop-notify.js +209 -209
  209. package/hooks/scripts/utils.js +257 -257
  210. package/languages/csharp-unity.md +515 -515
  211. package/languages/gdscript-godot.md +470 -470
  212. package/languages/ruby-rails.md +489 -489
  213. package/languages/typescript-angular.md +433 -433
  214. package/languages/typescript-astro.md +416 -416
  215. package/languages/typescript-electron.md +406 -406
  216. package/languages/typescript-nestjs.md +524 -524
  217. package/languages/typescript-svelte.md +407 -407
  218. package/languages/typescript-tauri.md +365 -365
  219. package/package.json +10 -5
  220. package/skills/agents-md/SKILL.md +121 -121
  221. package/skills/agents-md/rubrics/what-to-keep.md +49 -49
  222. package/skills/agents-md/templates/agents-md.md +36 -36
  223. package/skills/arch-guard/SKILL.md +181 -181
  224. package/skills/arch-guard/agents/detector.md +48 -48
  225. package/skills/arch-guard/agents/reporter.md +48 -48
  226. package/skills/arch-guard/agents/rule-generator.md +49 -49
  227. package/skills/arch-guard/agents/violation-checker.md +51 -51
  228. package/skills/arch-guard/frameworks/clean-architecture.md +108 -108
  229. package/skills/arch-guard/frameworks/solid.md +102 -102
  230. package/skills/arch-guard/scripts/check-boundaries.js +90 -90
  231. package/skills/arch-guard/templates/arch-rules.json +47 -47
  232. package/skills/arch-guard/templates/violation-report.md +53 -53
  233. package/skills/brand-assets/SKILL.md +147 -147
  234. package/skills/brand-assets/rubrics/asset-checklist.md +98 -98
  235. package/skills/brand-assets/templates/brand-guide.md +161 -161
  236. package/skills/capability-loop/SKILL.md +272 -272
  237. package/skills/capability-loop/agents/capability-designer.md +61 -61
  238. package/skills/capability-loop/agents/failure-analyst.md +55 -55
  239. package/skills/capability-loop/agents/implementer.md +50 -50
  240. package/skills/capability-loop/agents/tester.md +53 -53
  241. package/skills/capability-loop/templates/capability-spec.md +118 -118
  242. package/skills/capability-loop/templates/failure-analysis.md +118 -118
  243. package/skills/characterization-test/SKILL.md +207 -207
  244. package/skills/characterization-test/agents/behavior-capturer.md +50 -50
  245. package/skills/characterization-test/agents/coverage-checker.md +54 -54
  246. package/skills/characterization-test/agents/reporter.md +50 -50
  247. package/skills/characterization-test/agents/test-writer.md +49 -49
  248. package/skills/characterization-test/rubrics/coverage-criteria.md +53 -53
  249. package/skills/characterization-test/templates/test-template.ts +101 -101
  250. package/skills/chub-usage/SKILL.md +139 -139
  251. package/skills/claude-md-guide/SKILL.md +351 -351
  252. package/skills/claude-md-guide/rubrics/anti-patterns.md +88 -88
  253. package/skills/claude-md-guide/templates/claude-md.md +54 -54
  254. package/skills/commerce-patterns/SKILL.md +64 -64
  255. package/skills/commerce-patterns/rubrics/checkout-flow.md +48 -48
  256. package/skills/commerce-patterns/templates/product-schema.md +85 -85
  257. package/skills/commit-push-pr/SKILL.md +77 -77
  258. package/skills/commit-push-pr/agents/change-analyzer.md +55 -55
  259. package/skills/commit-push-pr/agents/message-writer.md +50 -50
  260. package/skills/commit-push-pr/agents/pr-writer.md +58 -58
  261. package/skills/commit-push-pr/agents/reviewer.md +52 -52
  262. package/skills/commit-push-pr/rubrics/commit-message.md +73 -73
  263. package/skills/commit-push-pr/templates/pr-body.md +63 -63
  264. package/skills/context7-usage/SKILL.md +106 -106
  265. package/skills/context7-usage/rubrics/when-to-use.md +50 -50
  266. package/skills/create-prd/SKILL.md +90 -90
  267. package/skills/create-prd/agents/edge-case-finder.md +48 -48
  268. package/skills/create-prd/agents/prioritizer.md +60 -60
  269. package/skills/create-prd/agents/requirements-writer.md +48 -48
  270. package/skills/create-prd/agents/researcher.md +55 -55
  271. package/skills/create-prd/agents/reviewer.md +54 -54
  272. package/skills/create-prd/frameworks/jobs-to-be-done.md +96 -96
  273. package/skills/create-prd/frameworks/rice-scoring.md +97 -97
  274. package/skills/create-prd/orchestrator.md +70 -70
  275. package/skills/create-prd/rubrics/completeness.md +58 -58
  276. package/skills/create-prd/templates/prd.md +139 -139
  277. package/skills/design-audit/SKILL.md +152 -152
  278. package/skills/design-audit/agents/a11y-auditor.md +43 -43
  279. package/skills/design-audit/agents/performance-auditor.md +46 -46
  280. package/skills/design-audit/agents/responsive-auditor.md +46 -46
  281. package/skills/design-audit/agents/scorer.md +47 -47
  282. package/skills/design-audit/agents/slop-detector.md +47 -47
  283. package/skills/design-audit/frameworks/core-web-vitals.md +107 -107
  284. package/skills/design-audit/frameworks/wcag-checklist.md +64 -64
  285. package/skills/design-audit/orchestrator.md +64 -64
  286. package/skills/design-audit/rubrics/ai-slop-patterns.md +83 -83
  287. package/skills/design-audit/rubrics/scoring.md +63 -63
  288. package/skills/design-audit/templates/report.md +88 -88
  289. package/skills/design-critique/SKILL.md +139 -139
  290. package/skills/design-critique/rubrics/ux-heuristics.md +143 -143
  291. package/skills/design-critique/templates/critique-report.md +86 -86
  292. package/skills/design-distill/SKILL.md +130 -130
  293. package/skills/design-distill/templates/design-system.md +132 -132
  294. package/skills/design-normalize/SKILL.md +133 -133
  295. package/skills/design-normalize/rubrics/token-naming.md +117 -117
  296. package/skills/design-normalize/templates/token-audit.md +89 -89
  297. package/skills/design-polish/SKILL.md +131 -131
  298. package/skills/design-polish/rubrics/polish-checklist.md +68 -68
  299. package/skills/design-polish/templates/polish-report.md +64 -64
  300. package/skills/design-teach/SKILL.md +182 -182
  301. package/skills/design-teach/rubrics/brand-personality.md +73 -73
  302. package/skills/design-teach/templates/design-context.json +36 -36
  303. package/skills/devlog/SKILL.md +143 -143
  304. package/skills/e2e-commerce/SKILL.md +62 -62
  305. package/skills/e2e-commerce/templates/test-scenarios.md +170 -170
  306. package/skills/event-comms/SKILL.md +172 -172
  307. package/skills/event-comms/templates/email-invite.md +99 -99
  308. package/skills/event-comms/templates/sns-post.md +133 -133
  309. package/skills/event-ops/SKILL.md +207 -207
  310. package/skills/event-ops/rubrics/contingency.md +85 -85
  311. package/skills/event-ops/templates/d-day-checklist.md +65 -65
  312. package/skills/event-planning/SKILL.md +144 -144
  313. package/skills/event-planning/rubrics/timeline.md +70 -70
  314. package/skills/event-planning/templates/event-plan.md +91 -91
  315. package/skills/exec-plan/SKILL.md +149 -149
  316. package/skills/exec-plan/agents/decomposer.md +47 -47
  317. package/skills/exec-plan/agents/dependency-mapper.md +44 -44
  318. package/skills/exec-plan/agents/estimator.md +43 -43
  319. package/skills/exec-plan/agents/validator.md +55 -55
  320. package/skills/exec-plan/orchestrator.md +70 -70
  321. package/skills/exec-plan/rubrics/complexity-scoring.md +75 -75
  322. package/skills/exec-plan/templates/plan.md +147 -147
  323. package/skills/git-worktree/SKILL.md +73 -73
  324. package/skills/git-worktree/rubrics/when-to-use.md +55 -55
  325. package/skills/handoff/SKILL.md +110 -110
  326. package/skills/handoff/agents/context-summarizer.md +51 -51
  327. package/skills/handoff/agents/document-writer.md +63 -63
  328. package/skills/handoff/agents/state-collector.md +53 -53
  329. package/skills/handoff/agents/verifier.md +48 -48
  330. package/skills/handoff/rubrics/completeness.md +62 -62
  331. package/skills/handoff/templates/handoff.md +107 -107
  332. package/skills/parallel-research/SKILL.md +104 -104
  333. package/skills/parallel-research/agents/best-practices.md +43 -43
  334. package/skills/parallel-research/agents/codebase-patterns.md +46 -46
  335. package/skills/parallel-research/agents/framework-docs.md +45 -45
  336. package/skills/parallel-research/agents/security-advisory.md +46 -46
  337. package/skills/parallel-research/agents/synthesizer.md +57 -57
  338. package/skills/parallel-research/experts/best-practices.md +50 -50
  339. package/skills/parallel-research/experts/codebase-patterns.md +70 -70
  340. package/skills/parallel-research/experts/framework-docs.md +65 -65
  341. package/skills/parallel-research/experts/security-advisory.md +69 -69
  342. package/skills/parallel-research/orchestrator.md +79 -79
  343. package/skills/parallel-research/templates/awesome-list.md +32 -32
  344. package/skills/parallel-research/templates/paper.md +88 -88
  345. package/skills/parallel-research/templates/synthesis.md +101 -101
  346. package/skills/prioritization-frameworks/SKILL.md +87 -87
  347. package/skills/prioritization-frameworks/rubrics/frameworks.md +79 -79
  348. package/skills/prioritization-frameworks/templates/scoring-matrix.md +69 -69
  349. package/skills/priority-todos/SKILL.md +64 -64
  350. package/skills/priority-todos/rubrics/prioritization.md +70 -70
  351. package/skills/priority-todos/templates/todo-board.md +59 -59
  352. package/skills/seo-checklist/SKILL.md +58 -58
  353. package/skills/seo-checklist/frameworks/structured-data.md +153 -153
  354. package/skills/seo-checklist/rubrics/content-seo.md +42 -42
  355. package/skills/seo-checklist/rubrics/technical-seo.md +48 -48
  356. package/skills/techdebt/SKILL.md +124 -124
  357. package/skills/techdebt/agents/analyzer.md +50 -50
  358. package/skills/techdebt/agents/fixer.md +41 -41
  359. package/skills/techdebt/agents/reviewer.md +47 -47
  360. package/skills/techdebt/agents/scanner.md +44 -44
  361. package/skills/techdebt/orchestrator.md +70 -70
  362. package/skills/techdebt/rubrics/severity.md +51 -51
  363. package/skills/techdebt/scripts/scan.js +90 -90
  364. package/skills/techdebt/templates/report.md +86 -86
  365. package/skills/tool-fallback/SKILL.md +104 -104
  366. package/skills/tool-fallback/rubrics/fallback-chain.md +58 -58
  367. package/skills/typescript-advanced-types/SKILL.md +67 -67
  368. package/skills/typescript-advanced-types/rubrics/type-patterns.md +109 -109
  369. package/skills/ui-ux-pro-max/SKILL.md +236 -236
  370. package/skills/ui-ux-pro-max/reference/color-and-contrast.md +517 -517
  371. package/skills/ui-ux-pro-max/reference/interaction-design.md +544 -544
  372. package/skills/ui-ux-pro-max/reference/motion-design.md +591 -591
  373. package/skills/ui-ux-pro-max/reference/responsive-design.md +463 -463
  374. package/skills/ui-ux-pro-max/reference/spatial-design.md +390 -390
  375. package/skills/ui-ux-pro-max/reference/typography.md +455 -455
  376. package/skills/ui-ux-pro-max/reference/ux-writing.md +469 -469
  377. package/skills/ui-ux-pro-max/rubrics/interaction-states.md +83 -83
  378. package/skills/ui-ux-pro-max/rubrics/responsive-breakpoints.md +99 -99
  379. package/skills/user-personas/SKILL.md +75 -75
  380. package/skills/user-personas/rubrics/research-methods.md +56 -56
  381. package/skills/user-personas/templates/persona.md +89 -89
  382. package/skills/vercel-react-best-practices/SKILL.md +60 -60
  383. package/skills/vercel-react-best-practices/rubrics/performance.md +82 -82
  384. package/skills/vercel-react-best-practices/rubrics/server-components.md +86 -86
  385. package/skills/vibe-contract/SKILL.md +166 -166
  386. package/skills/vibe-docs/templates/architecture.md +80 -80
  387. package/skills/vibe-docs/templates/readme.md +84 -84
  388. package/skills/vibe-docs/templates/release-notes.md +74 -74
  389. package/skills/vibe-figma/SKILL.md +363 -363
  390. package/skills/vibe-figma/rubrics/extraction-checklist.md +51 -51
  391. package/skills/vibe-figma/templates/component-index.md +126 -126
  392. package/skills/vibe-figma/templates/component-spec.md +168 -168
  393. package/skills/vibe-figma/templates/figma-handoff.md +100 -100
  394. package/skills/vibe-figma/templates/remapped-tree.md +277 -277
  395. package/skills/vibe-figma-convert/SKILL.md +235 -235
  396. package/skills/vibe-figma-convert/rubrics/conversion-rules.md +141 -141
  397. package/skills/vibe-figma-convert/templates/component.md +140 -140
  398. package/skills/vibe-figma-extract/SKILL.md +219 -219
  399. package/skills/vibe-figma-extract/rubrics/image-rules.md +157 -157
  400. package/skills/vibe-interview/SKILL.md +358 -358
  401. package/skills/vibe-interview/checklists/api.md +101 -101
  402. package/skills/vibe-interview/checklists/feature.md +88 -88
  403. package/skills/vibe-interview/checklists/library.md +95 -95
  404. package/skills/vibe-interview/checklists/mobile.md +89 -89
  405. package/skills/vibe-interview/checklists/webapp.md +97 -97
  406. package/skills/vibe-interview/checklists/website.md +99 -99
  407. package/skills/vibe-plan/SKILL.md +254 -254
  408. package/skills/vibe-regress/SKILL.md +174 -174
  409. package/skills/vibe-regress/templates/bug.md +44 -44
  410. package/skills/vibe-regress/templates/test-jest.md +29 -29
  411. package/skills/vibe-regress/templates/test-vitest.md +30 -30
  412. package/skills/vibe-spec/SKILL.md +1195 -1195
  413. package/skills/vibe-spec-review/SKILL.md +726 -726
  414. package/skills/vibe-test/SKILL.md +247 -247
  415. package/skills/video-production/SKILL.md +52 -52
  416. package/skills/video-production/rubrics/quality-checklist.md +58 -58
  417. package/skills/video-production/templates/production-plan.md +104 -104
  418. package/vibe/config.json +29 -29
  419. package/vibe/constitution.md +227 -227
  420. package/vibe/rules/principles/communication-guide.md +98 -98
  421. package/vibe/rules/principles/development-philosophy.md +52 -52
  422. package/vibe/rules/principles/quick-start.md +102 -102
  423. package/vibe/rules/quality/bdd-contract-testing.md +393 -393
  424. package/vibe/rules/quality/checklist.md +276 -276
  425. package/vibe/rules/quality/performance.md +236 -236
  426. package/vibe/rules/quality/testing-strategy.md +440 -440
  427. package/vibe/rules/standards/anti-patterns.md +541 -541
  428. package/vibe/rules/standards/code-structure.md +291 -291
  429. package/vibe/rules/standards/complexity-metrics.md +313 -313
  430. package/vibe/rules/standards/git-workflow.md +237 -237
  431. package/vibe/rules/standards/naming-conventions.md +198 -198
  432. package/vibe/rules/standards/security.md +305 -305
  433. package/vibe/rules/writing/document-style.md +74 -74
  434. package/vibe/setup.sh +31 -31
  435. package/vibe/templates/claudemd-template.md +74 -74
  436. package/vibe/templates/constitution-template.md +267 -267
  437. package/vibe/templates/contract-backend-template.md +526 -526
  438. package/vibe/templates/contract-frontend-template.md +599 -599
  439. package/vibe/templates/feature-template.md +96 -96
  440. package/vibe/templates/plan-template.md +194 -194
  441. package/vibe/templates/spec-template.md +221 -221
  442. package/vibe/ui-ux-data/charts.csv +26 -26
  443. package/vibe/ui-ux-data/colors.csv +97 -97
  444. package/vibe/ui-ux-data/icons.csv +101 -101
  445. package/vibe/ui-ux-data/landing.csv +31 -31
  446. package/vibe/ui-ux-data/products.csv +96 -96
  447. package/vibe/ui-ux-data/react-performance.csv +45 -45
  448. package/vibe/ui-ux-data/stacks/astro.csv +54 -54
  449. package/vibe/ui-ux-data/stacks/flutter.csv +53 -53
  450. package/vibe/ui-ux-data/stacks/html-tailwind.csv +56 -56
  451. package/vibe/ui-ux-data/stacks/jetpack-compose.csv +53 -53
  452. package/vibe/ui-ux-data/stacks/nextjs.csv +53 -53
  453. package/vibe/ui-ux-data/stacks/nuxt-ui.csv +51 -51
  454. package/vibe/ui-ux-data/stacks/nuxtjs.csv +59 -59
  455. package/vibe/ui-ux-data/stacks/react-native.csv +52 -52
  456. package/vibe/ui-ux-data/stacks/react.csv +54 -54
  457. package/vibe/ui-ux-data/stacks/shadcn.csv +61 -61
  458. package/vibe/ui-ux-data/stacks/svelte.csv +54 -54
  459. package/vibe/ui-ux-data/stacks/swiftui.csv +51 -51
  460. package/vibe/ui-ux-data/stacks/vue.csv +50 -50
  461. package/vibe/ui-ux-data/styles.csv +68 -68
  462. package/vibe/ui-ux-data/typography.csv +57 -57
  463. package/vibe/ui-ux-data/ui-reasoning.csv +101 -101
  464. package/vibe/ui-ux-data/ux-guidelines.csv +99 -99
  465. package/vibe/ui-ux-data/version.json +31 -31
  466. package/vibe/ui-ux-data/web-interface.csv +31 -31
package/languages/typescript-astro.md CHANGED
@@ -1,416 +1,416 @@
1
- # 🚀 TypeScript + Astro Quality Rules
2
-
3
- ## Core Principles (inherited from core)
4
-
5
- ```markdown
6
- ✅ Single Responsibility (SRP)
7
- ✅ Don't Repeat Yourself (DRY)
8
- ✅ Reusability
9
- ✅ Low Complexity
10
- ✅ Functions ≤ 30 lines
11
- ✅ Nesting ≤ 3 levels
12
- ✅ Cyclomatic complexity ≤ 10
13
- ```
14
-
15
- ## Astro Architecture
16
-
17
- ```
18
- ┌─────────────────────────────────────────────┐
19
- │ .astro Components (Server-first) │
20
- │ - Zero JS by default │
21
- │ - HTML + CSS + optional JS │
22
- ├─────────────────────────────────────────────┤
23
- │ Islands (Interactive Components) │
24
- │ - React, Vue, Svelte, Solid │
25
- │ - Hydration on demand │
26
- ├─────────────────────────────────────────────┤
27
- │ Content Collections (Type-safe content) │
28
- │ - Markdown, MDX │
29
- │ - Schema validation │
30
- └─────────────────────────────────────────────┘
31
- ```
32
-
33
- ## Astro Component Patterns
34
-
35
- ### 1. Basic Component Structure
36
-
37
- ```astro
38
- ---
39
- // Component Script (Server-side TypeScript)
40
- interface Props {
41
- title: string;
42
- description?: string;
43
- tags?: string[];
44
- }
45
-
46
- const { title, description, tags = [] } = Astro.props;
47
-
48
- // Server-side data fetching
49
- const posts = await fetch('https://api.example.com/posts').then(r => r.json());
50
- ---
51
-
52
- <!-- Component Template -->
53
- <article class="card">
54
- <h2>{title}</h2>
55
- {description && <p>{description}</p>}
56
-
57
- {tags.length > 0 && (
58
- <ul class="tags">
59
- {tags.map(tag => <li>{tag}</li>)}
60
- </ul>
61
- )}
62
- </article>
63
-
64
- <style>
65
- /* Scoped styles by default */
66
- .card {
67
- padding: 1rem;
68
- border: 1px solid #ccc;
69
- border-radius: 8px;
70
- }
71
-
72
- .tags {
73
- display: flex;
74
- gap: 0.5rem;
75
- list-style: none;
76
- padding: 0;
77
- }
78
- </style>
79
- ```
80
-
81
- ### 2. Slots and Named Slots
82
-
83
- ```astro
84
- ---
85
- // Layout.astro
86
- interface Props {
87
- title: string;
88
- }
89
-
90
- const { title } = Astro.props;
91
- ---
92
-
93
- <!DOCTYPE html>
94
- <html>
95
- <head>
96
- <title>{title}</title>
97
- <slot name="head" />
98
- </head>
99
- <body>
100
- <header>
101
- <slot name="header">
102
- <h1>{title}</h1>
103
- </slot>
104
- </header>
105
-
106
- <main>
107
- <slot /> <!-- Default slot -->
108
- </main>
109
-
110
- <footer>
111
- <slot name="footer">
112
- <p>© 2024</p>
113
- </slot>
114
- </footer>
115
- </body>
116
- </html>
117
-
118
- <!-- Usage -->
119
- ---
120
- import Layout from '../layouts/Layout.astro';
121
- ---
122
-
123
- <Layout title="Home">
124
- <Fragment slot="header">
125
- <nav>...</nav>
126
- </Fragment>
127
-
128
- <p>Main content goes here</p>
129
-
130
- <p slot="footer">Custom footer</p>
131
- </Layout>
132
- ```
133
-
134
- ### 3. Content Collections
135
-
136
- ```typescript
137
- // src/content/config.ts
138
- import { defineCollection, z } from 'astro:content';
139
-
140
- const blogCollection = defineCollection({
141
- type: 'content',
142
- schema: z.object({
143
- title: z.string(),
144
- description: z.string(),
145
- pubDate: z.coerce.date(),
146
- author: z.string().default('Anonymous'),
147
- tags: z.array(z.string()).default([]),
148
- image: z.string().optional(),
149
- draft: z.boolean().default(false),
150
- }),
151
- });
152
-
153
- const authorsCollection = defineCollection({
154
- type: 'data',
155
- schema: z.object({
156
- name: z.string(),
157
- email: z.string().email(),
158
- avatar: z.string().url(),
159
- }),
160
- });
161
-
162
- export const collections = {
163
- blog: blogCollection,
164
- authors: authorsCollection,
165
- };
166
- ```
167
-
168
- ```astro
169
- ---
170
- // src/pages/blog/[...slug].astro
171
- import { getCollection, getEntry } from 'astro:content';
172
- import Layout from '../../layouts/Layout.astro';
173
-
174
- export async function getStaticPaths() {
175
- const posts = await getCollection('blog', ({ data }) => !data.draft);
176
-
177
- return posts.map(post => ({
178
- params: { slug: post.slug },
179
- props: { post },
180
- }));
181
- }
182
-
183
- const { post } = Astro.props;
184
- const { Content, headings } = await post.render();
185
- ---
186
-
187
- <Layout title={post.data.title}>
188
- <article>
189
- <h1>{post.data.title}</h1>
190
- <time datetime={post.data.pubDate.toISOString()}>
191
- {post.data.pubDate.toLocaleDateString()}
192
- </time>
193
- <Content />
194
- </article>
195
- </Layout>
196
- ```
197
-
198
- ### 4. Islands (Client Interactivity)
199
-
200
- ```astro
201
- ---
202
- // Using React component
203
- import Counter from '../components/Counter.tsx';
204
- import SearchBar from '../components/SearchBar.tsx';
205
- import Newsletter from '../components/Newsletter.tsx';
206
- import Comments from '../components/Comments.tsx';
207
- ---
208
-
209
- <!-- No JS - static HTML -->
210
- <h1>My Page</h1>
211
-
212
- <!-- Hydrate on page load -->
213
- <Counter client:load initialCount={0} />
214
-
215
- <!-- Hydrate when visible in viewport -->
216
- <Comments client:visible postId="123" />
217
-
218
- <!-- Hydrate on idle (requestIdleCallback) -->
219
- <Newsletter client:idle />
220
-
221
- <!-- Hydrate on media query match -->
222
- <SearchBar client:media="(min-width: 768px)" />
223
-
224
- <!-- Never hydrate - just render HTML -->
225
- <StaticComponent />
226
- ```
227
-
228
- ### 5. API Routes
229
-
230
- ```typescript
231
- // src/pages/api/posts.ts
232
- import type { APIRoute } from 'astro';
233
-
234
- export const GET: APIRoute = async ({ request, url }) => {
235
- const page = Number(url.searchParams.get('page') ?? '1');
236
- const limit = Number(url.searchParams.get('limit') ?? '10');
237
-
238
- const posts = await db.post.findMany({
239
- skip: (page - 1) * limit,
240
- take: limit,
241
- });
242
-
243
- return new Response(JSON.stringify(posts), {
244
- status: 200,
245
- headers: { 'Content-Type': 'application/json' },
246
- });
247
- };
248
-
249
- export const POST: APIRoute = async ({ request }) => {
250
- try {
251
- const body = await request.json();
252
-
253
- if (!body.title) {
254
- return new Response(JSON.stringify({ error: 'Title is required' }), {
255
- status: 400,
256
- headers: { 'Content-Type': 'application/json' },
257
- });
258
- }
259
-
260
- const post = await db.post.create({ data: body });
261
-
262
- return new Response(JSON.stringify(post), {
263
- status: 201,
264
- headers: { 'Content-Type': 'application/json' },
265
- });
266
- } catch (error) {
267
- return new Response(JSON.stringify({ error: 'Server error' }), {
268
- status: 500,
269
- headers: { 'Content-Type': 'application/json' },
270
- });
271
- }
272
- };
273
- ```
274
-
275
- ### 6. Middleware
276
-
277
- ```typescript
278
- // src/middleware.ts
279
- import { defineMiddleware, sequence } from 'astro:middleware';
280
-
281
- const auth = defineMiddleware(async ({ locals, request, redirect }, next) => {
282
- const token = request.headers.get('Authorization')?.replace('Bearer ', '');
283
-
284
- if (token) {
285
- const user = await validateToken(token);
286
- if (user) {
287
- locals.user = user;
288
- }
289
- }
290
-
291
- // Protected routes
292
- if (request.url.includes('/admin') && !locals.user?.isAdmin) {
293
- return redirect('/login');
294
- }
295
-
296
- return next();
297
- });
298
-
299
- const logger = defineMiddleware(async ({ request }, next) => {
300
- console.log(`${request.method} ${request.url}`);
301
- const response = await next();
302
- console.log(`Response: ${response.status}`);
303
- return response;
304
- });
305
-
306
- export const onRequest = sequence(logger, auth);
307
- ```
308
-
309
- ### 7. View Transitions
310
-
311
- ```astro
312
- ---
313
- // Layout.astro
314
- import { ViewTransitions } from 'astro:transitions';
315
- ---
316
-
317
- <html>
318
- <head>
319
- <ViewTransitions />
320
- </head>
321
- <body>
322
- <header transition:persist>
323
- <nav>...</nav>
324
- </header>
325
-
326
- <main transition:animate="slide">
327
- <slot />
328
- </main>
329
- </body>
330
- </html>
331
-
332
- <!-- Custom animation -->
333
- <div transition:animate={{
334
- old: {
335
- name: 'fadeOut',
336
- duration: '0.2s',
337
- easing: 'ease-out',
338
- },
339
- new: {
340
- name: 'fadeIn',
341
- duration: '0.3s',
342
- easing: 'ease-in',
343
- },
344
- }}>
345
- Content
346
- </div>
347
- ```
348
-
349
- ### 8. Environment Variables
350
-
351
- ```typescript
352
- // astro.config.mjs
353
- export default defineConfig({
354
- vite: {
355
- define: {
356
- 'import.meta.env.PUBLIC_API_URL': JSON.stringify(process.env.PUBLIC_API_URL),
357
- },
358
- },
359
- });
360
-
361
- // Usage in .astro files
362
- ---
363
- const apiUrl = import.meta.env.PUBLIC_API_URL; // Client-safe
364
- const dbUrl = import.meta.env.DATABASE_URL; // Server-only
365
- ---
366
-
367
- // Type declarations (env.d.ts)
368
- /// <reference types="astro/client" />
369
- interface ImportMetaEnv {
370
- readonly DATABASE_URL: string;
371
- readonly PUBLIC_API_URL: string;
372
- }
373
- ```
374
-
375
- ## Project Structure
376
-
377
- ```
378
- src/
379
- ├── components/
380
- │ ├── Card.astro
381
- │ ├── Header.astro
382
- │ └── islands/ # Interactive components
383
- │ ├── Counter.tsx
384
- │ └── Search.svelte
385
- ├── content/
386
- │ ├── config.ts # Collection schemas
387
- │ └── blog/
388
- │ ├── post-1.md
389
- │ └── post-2.mdx
390
- ├── layouts/
391
- │ ├── Layout.astro
392
- │ └── BlogPost.astro
393
- ├── pages/
394
- │ ├── index.astro
395
- │ ├── blog/
396
- │ │ ├── index.astro
397
- │ │ └── [...slug].astro
398
- │ └── api/
399
- │ └── posts.ts
400
- ├── styles/
401
- │ └── global.css
402
- └── middleware.ts
403
- ```
404
-
405
- ## Checklist
406
-
407
- - [ ] Use `.astro` for static content
408
- - [ ] Use Islands only where needed (client:*)
409
- - [ ] Define Content Collections with schemas
410
- - [ ] Use TypeScript for type safety
411
- - [ ] Scope styles by default
412
- - [ ] Use slots for composition
413
- - [ ] Implement proper error handling
414
- - [ ] Use middleware for auth/logging
415
- - [ ] Enable View Transitions for SPA-like navigation
416
- - [ ] Optimize images with astro:assets
1
+ # 🚀 TypeScript + Astro Quality Rules
2
+
3
+ ## Core Principles (inherited from core)
4
+
5
+ ```markdown
6
+ ✅ Single Responsibility (SRP)
7
+ ✅ Don't Repeat Yourself (DRY)
8
+ ✅ Reusability
9
+ ✅ Low Complexity
10
+ ✅ Functions ≤ 30 lines
11
+ ✅ Nesting ≤ 3 levels
12
+ ✅ Cyclomatic complexity ≤ 10
13
+ ```
14
+
15
+ ## Astro Architecture
16
+
17
+ ```
18
+ ┌─────────────────────────────────────────────┐
19
+ │ .astro Components (Server-first) │
20
+ │ - Zero JS by default │
21
+ │ - HTML + CSS + optional JS │
22
+ ├─────────────────────────────────────────────┤
23
+ │ Islands (Interactive Components) │
24
+ │ - React, Vue, Svelte, Solid │
25
+ │ - Hydration on demand │
26
+ ├─────────────────────────────────────────────┤
27
+ │ Content Collections (Type-safe content) │
28
+ │ - Markdown, MDX │
29
+ │ - Schema validation │
30
+ └─────────────────────────────────────────────┘
31
+ ```
32
+
33
+ ## Astro Component Patterns
34
+
35
+ ### 1. Basic Component Structure
36
+
37
+ ```astro
38
+ ---
39
+ // Component Script (Server-side TypeScript)
40
+ interface Props {
41
+ title: string;
42
+ description?: string;
43
+ tags?: string[];
44
+ }
45
+
46
+ const { title, description, tags = [] } = Astro.props;
47
+
48
+ // Server-side data fetching
49
+ const posts = await fetch('https://api.example.com/posts').then(r => r.json());
50
+ ---
51
+
52
+ <!-- Component Template -->
53
+ <article class="card">
54
+ <h2>{title}</h2>
55
+ {description && <p>{description}</p>}
56
+
57
+ {tags.length > 0 && (
58
+ <ul class="tags">
59
+ {tags.map(tag => <li>{tag}</li>)}
60
+ </ul>
61
+ )}
62
+ </article>
63
+
64
+ <style>
65
+ /* Scoped styles by default */
66
+ .card {
67
+ padding: 1rem;
68
+ border: 1px solid #ccc;
69
+ border-radius: 8px;
70
+ }
71
+
72
+ .tags {
73
+ display: flex;
74
+ gap: 0.5rem;
75
+ list-style: none;
76
+ padding: 0;
77
+ }
78
+ </style>
79
+ ```
80
+
81
+ ### 2. Slots and Named Slots
82
+
83
+ ```astro
84
+ ---
85
+ // Layout.astro
86
+ interface Props {
87
+ title: string;
88
+ }
89
+
90
+ const { title } = Astro.props;
91
+ ---
92
+
93
+ <!DOCTYPE html>
94
+ <html>
95
+ <head>
96
+ <title>{title}</title>
97
+ <slot name="head" />
98
+ </head>
99
+ <body>
100
+ <header>
101
+ <slot name="header">
102
+ <h1>{title}</h1>
103
+ </slot>
104
+ </header>
105
+
106
+ <main>
107
+ <slot /> <!-- Default slot -->
108
+ </main>
109
+
110
+ <footer>
111
+ <slot name="footer">
112
+ <p>© 2024</p>
113
+ </slot>
114
+ </footer>
115
+ </body>
116
+ </html>
117
+
118
+ <!-- Usage -->
119
+ ---
120
+ import Layout from '../layouts/Layout.astro';
121
+ ---
122
+
123
+ <Layout title="Home">
124
+ <Fragment slot="header">
125
+ <nav>...</nav>
126
+ </Fragment>
127
+
128
+ <p>Main content goes here</p>
129
+
130
+ <p slot="footer">Custom footer</p>
131
+ </Layout>
132
+ ```
133
+
134
+ ### 3. Content Collections
135
+
136
+ ```typescript
137
+ // src/content/config.ts
138
+ import { defineCollection, z } from 'astro:content';
139
+
140
+ const blogCollection = defineCollection({
141
+ type: 'content',
142
+ schema: z.object({
143
+ title: z.string(),
144
+ description: z.string(),
145
+ pubDate: z.coerce.date(),
146
+ author: z.string().default('Anonymous'),
147
+ tags: z.array(z.string()).default([]),
148
+ image: z.string().optional(),
149
+ draft: z.boolean().default(false),
150
+ }),
151
+ });
152
+
153
+ const authorsCollection = defineCollection({
154
+ type: 'data',
155
+ schema: z.object({
156
+ name: z.string(),
157
+ email: z.string().email(),
158
+ avatar: z.string().url(),
159
+ }),
160
+ });
161
+
162
+ export const collections = {
163
+ blog: blogCollection,
164
+ authors: authorsCollection,
165
+ };
166
+ ```
167
+
168
+ ```astro
169
+ ---
170
+ // src/pages/blog/[...slug].astro
171
+ import { getCollection, getEntry } from 'astro:content';
172
+ import Layout from '../../layouts/Layout.astro';
173
+
174
+ export async function getStaticPaths() {
175
+ const posts = await getCollection('blog', ({ data }) => !data.draft);
176
+
177
+ return posts.map(post => ({
178
+ params: { slug: post.slug },
179
+ props: { post },
180
+ }));
181
+ }
182
+
183
+ const { post } = Astro.props;
184
+ const { Content, headings } = await post.render();
185
+ ---
186
+
187
+ <Layout title={post.data.title}>
188
+ <article>
189
+ <h1>{post.data.title}</h1>
190
+ <time datetime={post.data.pubDate.toISOString()}>
191
+ {post.data.pubDate.toLocaleDateString()}
192
+ </time>
193
+ <Content />
194
+ </article>
195
+ </Layout>
196
+ ```
197
+
198
+ ### 4. Islands (Client Interactivity)
199
+
200
+ ```astro
201
+ ---
202
+ // Using React component
203
+ import Counter from '../components/Counter.tsx';
204
+ import SearchBar from '../components/SearchBar.tsx';
205
+ import Newsletter from '../components/Newsletter.tsx';
206
+ import Comments from '../components/Comments.tsx';
207
+ ---
208
+
209
+ <!-- No JS - static HTML -->
210
+ <h1>My Page</h1>
211
+
212
+ <!-- Hydrate on page load -->
213
+ <Counter client:load initialCount={0} />
214
+
215
+ <!-- Hydrate when visible in viewport -->
216
+ <Comments client:visible postId="123" />
217
+
218
+ <!-- Hydrate on idle (requestIdleCallback) -->
219
+ <Newsletter client:idle />
220
+
221
+ <!-- Hydrate on media query match -->
222
+ <SearchBar client:media="(min-width: 768px)" />
223
+
224
+ <!-- Never hydrate - just render HTML -->
225
+ <StaticComponent />
226
+ ```
227
+
228
+ ### 5. API Routes
229
+
230
+ ```typescript
231
+ // src/pages/api/posts.ts
232
+ import type { APIRoute } from 'astro';
233
+
234
+ export const GET: APIRoute = async ({ request, url }) => {
235
+ const page = Number(url.searchParams.get('page') ?? '1');
236
+ const limit = Number(url.searchParams.get('limit') ?? '10');
237
+
238
+ const posts = await db.post.findMany({
239
+ skip: (page - 1) * limit,
240
+ take: limit,
241
+ });
242
+
243
+ return new Response(JSON.stringify(posts), {
244
+ status: 200,
245
+ headers: { 'Content-Type': 'application/json' },
246
+ });
247
+ };
248
+
249
+ export const POST: APIRoute = async ({ request }) => {
250
+ try {
251
+ const body = await request.json();
252
+
253
+ if (!body.title) {
254
+ return new Response(JSON.stringify({ error: 'Title is required' }), {
255
+ status: 400,
256
+ headers: { 'Content-Type': 'application/json' },
257
+ });
258
+ }
259
+
260
+ const post = await db.post.create({ data: body });
261
+
262
+ return new Response(JSON.stringify(post), {
263
+ status: 201,
264
+ headers: { 'Content-Type': 'application/json' },
265
+ });
266
+ } catch (error) {
267
+ return new Response(JSON.stringify({ error: 'Server error' }), {
268
+ status: 500,
269
+ headers: { 'Content-Type': 'application/json' },
270
+ });
271
+ }
272
+ };
273
+ ```
274
+
275
+ ### 6. Middleware
276
+
277
+ ```typescript
278
+ // src/middleware.ts
279
+ import { defineMiddleware, sequence } from 'astro:middleware';
280
+
281
+ const auth = defineMiddleware(async ({ locals, request, redirect }, next) => {
282
+ const token = request.headers.get('Authorization')?.replace('Bearer ', '');
283
+
284
+ if (token) {
285
+ const user = await validateToken(token);
286
+ if (user) {
287
+ locals.user = user;
288
+ }
289
+ }
290
+
291
+ // Protected routes
292
+ if (request.url.includes('/admin') && !locals.user?.isAdmin) {
293
+ return redirect('/login');
294
+ }
295
+
296
+ return next();
297
+ });
298
+
299
+ const logger = defineMiddleware(async ({ request }, next) => {
300
+ console.log(`${request.method} ${request.url}`);
301
+ const response = await next();
302
+ console.log(`Response: ${response.status}`);
303
+ return response;
304
+ });
305
+
306
+ export const onRequest = sequence(logger, auth);
307
+ ```
308
+
309
+ ### 7. View Transitions
310
+
311
+ ```astro
312
+ ---
313
+ // Layout.astro
314
+ import { ViewTransitions } from 'astro:transitions';
315
+ ---
316
+
317
+ <html>
318
+ <head>
319
+ <ViewTransitions />
320
+ </head>
321
+ <body>
322
+ <header transition:persist>
323
+ <nav>...</nav>
324
+ </header>
325
+
326
+ <main transition:animate="slide">
327
+ <slot />
328
+ </main>
329
+ </body>
330
+ </html>
331
+
332
+ <!-- Custom animation -->
333
+ <div transition:animate={{
334
+ old: {
335
+ name: 'fadeOut',
336
+ duration: '0.2s',
337
+ easing: 'ease-out',
338
+ },
339
+ new: {
340
+ name: 'fadeIn',
341
+ duration: '0.3s',
342
+ easing: 'ease-in',
343
+ },
344
+ }}>
345
+ Content
346
+ </div>
347
+ ```
348
+
349
+ ### 8. Environment Variables
350
+
351
+ ```typescript
352
+ // astro.config.mjs
353
+ export default defineConfig({
354
+ vite: {
355
+ define: {
356
+ 'import.meta.env.PUBLIC_API_URL': JSON.stringify(process.env.PUBLIC_API_URL),
357
+ },
358
+ },
359
+ });
360
+
361
+ // Usage in .astro files
362
+ ---
363
+ const apiUrl = import.meta.env.PUBLIC_API_URL; // Client-safe
364
+ const dbUrl = import.meta.env.DATABASE_URL; // Server-only
365
+ ---
366
+
367
+ // Type declarations (env.d.ts)
368
+ /// <reference types="astro/client" />
369
+ interface ImportMetaEnv {
370
+ readonly DATABASE_URL: string;
371
+ readonly PUBLIC_API_URL: string;
372
+ }
373
+ ```
374
+
375
+ ## Project Structure
376
+
377
+ ```
378
+ src/
379
+ ├── components/
380
+ │ ├── Card.astro
381
+ │ ├── Header.astro
382
+ │ └── islands/ # Interactive components
383
+ │ ├── Counter.tsx
384
+ │ └── Search.svelte
385
+ ├── content/
386
+ │ ├── config.ts # Collection schemas
387
+ │ └── blog/
388
+ │ ├── post-1.md
389
+ │ └── post-2.mdx
390
+ ├── layouts/
391
+ │ ├── Layout.astro
392
+ │ └── BlogPost.astro
393
+ ├── pages/
394
+ │ ├── index.astro
395
+ │ ├── blog/
396
+ │ │ ├── index.astro
397
+ │ │ └── [...slug].astro
398
+ │ └── api/
399
+ │ └── posts.ts
400
+ ├── styles/
401
+ │ └── global.css
402
+ └── middleware.ts
403
+ ```
404
+
405
+ ## Checklist
406
+
407
+ - [ ] Use `.astro` for static content
408
+ - [ ] Use Islands only where needed (client:*)
409
+ - [ ] Define Content Collections with schemas
410
+ - [ ] Use TypeScript for type safety
411
+ - [ ] Scope styles by default
412
+ - [ ] Use slots for composition
413
+ - [ ] Implement proper error handling
414
+ - [ ] Use middleware for auth/logging
415
+ - [ ] Enable View Transitions for SPA-like navigation
416
+ - [ ] Optimize images with astro:assets