@su-record/vibe 2.9.23 → 2.9.25

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 (464) hide show
  1. package/.env.example +37 -37
  2. package/CLAUDE.md +106 -105
  3. package/LICENSE +21 -21
  4. package/README.en.md +220 -0
  5. package/README.md +75 -124
  6. package/agents/architect-low.md +41 -41
  7. package/agents/architect-medium.md +59 -59
  8. package/agents/architect.md +80 -80
  9. package/agents/build-error-resolver.md +115 -115
  10. package/agents/compounder.md +261 -261
  11. package/agents/diagrammer.md +178 -178
  12. package/agents/docs/api-documenter.md +99 -99
  13. package/agents/docs/changelog-writer.md +93 -93
  14. package/agents/e2e-tester.md +294 -294
  15. package/agents/event/event-comms.md +78 -78
  16. package/agents/event/event-content.md +68 -68
  17. package/agents/event/event-image.md +95 -95
  18. package/agents/event/event-ops.md +84 -84
  19. package/agents/event/event-scheduler.md +69 -69
  20. package/agents/event/event-speaker.md +86 -86
  21. package/agents/explorer-low.md +42 -42
  22. package/agents/explorer-medium.md +59 -59
  23. package/agents/explorer.md +48 -48
  24. package/agents/implementer-low.md +43 -43
  25. package/agents/implementer-medium.md +52 -52
  26. package/agents/implementer.md +54 -54
  27. package/agents/junior-mentor.md +141 -141
  28. package/agents/planning/requirements-analyst.md +84 -84
  29. package/agents/planning/ux-advisor.md +83 -83
  30. package/agents/qa/acceptance-tester.md +86 -86
  31. package/agents/qa/edge-case-finder.md +93 -93
  32. package/agents/qa/qa-coordinator.md +131 -131
  33. package/agents/refactor-cleaner.md +143 -143
  34. package/agents/research/best-practices-agent.md +199 -199
  35. package/agents/research/codebase-patterns-agent.md +157 -157
  36. package/agents/research/framework-docs-agent.md +188 -188
  37. package/agents/research/security-advisory-agent.md +213 -213
  38. package/agents/review/architecture-reviewer.md +107 -107
  39. package/agents/review/complexity-reviewer.md +116 -116
  40. package/agents/review/data-integrity-reviewer.md +88 -88
  41. package/agents/review/git-history-reviewer.md +103 -103
  42. package/agents/review/performance-reviewer.md +86 -86
  43. package/agents/review/python-reviewer.md +150 -150
  44. package/agents/review/rails-reviewer.md +139 -139
  45. package/agents/review/react-reviewer.md +144 -144
  46. package/agents/review/security-reviewer.md +80 -80
  47. package/agents/review/simplicity-reviewer.md +140 -140
  48. package/agents/review/test-coverage-reviewer.md +116 -116
  49. package/agents/review/typescript-reviewer.md +127 -127
  50. package/agents/searcher.md +54 -54
  51. package/agents/simplifier.md +120 -120
  52. package/agents/teams/debug-team.md +70 -70
  53. package/agents/teams/dev-team.md +88 -88
  54. package/agents/teams/docs-team.md +80 -80
  55. package/agents/teams/figma/figma-analyst.md +52 -52
  56. package/agents/teams/figma/figma-architect.md +112 -112
  57. package/agents/teams/figma/figma-auditor.md +82 -82
  58. package/agents/teams/figma/figma-builder.md +100 -100
  59. package/agents/teams/figma-team.md +85 -85
  60. package/agents/teams/fullstack-team.md +83 -83
  61. package/agents/teams/lite-team.md +69 -69
  62. package/agents/teams/migration-team.md +78 -78
  63. package/agents/teams/refactor-team.md +94 -94
  64. package/agents/teams/research-team.md +86 -86
  65. package/agents/teams/review-debate-team.md +125 -125
  66. package/agents/teams/security-team.md +81 -81
  67. package/agents/tester.md +49 -49
  68. package/agents/ui/ui-a11y-auditor.md +93 -93
  69. package/agents/ui/ui-antipattern-detector.md +102 -102
  70. package/agents/ui/ui-dataviz-advisor.md +69 -69
  71. package/agents/ui/ui-design-system-gen.md +57 -57
  72. package/agents/ui/ui-industry-analyzer.md +49 -49
  73. package/agents/ui/ui-layout-architect.md +65 -65
  74. package/agents/ui/ui-stack-implementer.md +68 -68
  75. package/agents/ui/ux-compliance-reviewer.md +81 -81
  76. package/agents/ui-previewer.md +258 -258
  77. package/commands/vibe.analyze.md +533 -533
  78. package/commands/vibe.contract.md +105 -105
  79. package/commands/vibe.docs.md +33 -33
  80. package/commands/vibe.event.md +163 -163
  81. package/commands/vibe.figma.md +584 -584
  82. package/commands/vibe.harness.md +177 -177
  83. package/commands/vibe.regress.md +73 -73
  84. package/commands/vibe.review.md +624 -624
  85. package/commands/vibe.run.md +1940 -1940
  86. package/commands/vibe.scaffold.md +195 -195
  87. package/commands/vibe.spec.md +577 -577
  88. package/commands/vibe.test.md +49 -96
  89. package/commands/vibe.trace.md +276 -276
  90. package/commands/vibe.utils.md +413 -413
  91. package/commands/vibe.verify.md +550 -550
  92. package/dist/cli/collaborator.js +52 -52
  93. package/dist/cli/commands/codex-proxy.js +15 -15
  94. package/dist/cli/commands/config.js +9 -9
  95. package/dist/cli/commands/evolution.js +12 -12
  96. package/dist/cli/commands/figma.js +20 -20
  97. package/dist/cli/commands/info.js +52 -52
  98. package/dist/cli/commands/init.js +5 -5
  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/detect.js +32 -32
  106. package/dist/cli/index.js +33 -33
  107. package/dist/cli/llm/claude-commands.js +16 -16
  108. package/dist/cli/llm/config.js +18 -18
  109. package/dist/cli/llm/gemini-commands.js +16 -16
  110. package/dist/cli/llm/gpt-commands.js +19 -19
  111. package/dist/cli/llm/help.js +21 -21
  112. package/dist/cli/postinstall/constants.d.ts.map +1 -1
  113. package/dist/cli/postinstall/constants.js +1 -0
  114. package/dist/cli/postinstall/constants.js.map +1 -1
  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 +409 -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 +271 -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/llm-orchestrate.js +645 -645
  198. package/hooks/scripts/post-edit.js +35 -32
  199. package/hooks/scripts/pr-test-gate.js +52 -52
  200. package/hooks/scripts/pre-tool-guard.js +259 -254
  201. package/hooks/scripts/prompt-dispatcher.js +190 -190
  202. package/hooks/scripts/sentinel-guard.js +130 -130
  203. package/hooks/scripts/session-start.js +186 -186
  204. package/hooks/scripts/skill-injector.js +83 -83
  205. package/hooks/scripts/stop-notify.js +209 -209
  206. package/hooks/scripts/utils.js +257 -257
  207. package/languages/csharp-unity.md +515 -515
  208. package/languages/gdscript-godot.md +470 -470
  209. package/languages/ruby-rails.md +489 -489
  210. package/languages/typescript-angular.md +433 -433
  211. package/languages/typescript-astro.md +416 -416
  212. package/languages/typescript-electron.md +406 -406
  213. package/languages/typescript-nestjs.md +524 -524
  214. package/languages/typescript-svelte.md +407 -407
  215. package/languages/typescript-tauri.md +365 -365
  216. package/package.json +1 -1
  217. package/skills/agents-md/SKILL.md +121 -121
  218. package/skills/agents-md/rubrics/what-to-keep.md +49 -49
  219. package/skills/agents-md/templates/agents-md.md +36 -36
  220. package/skills/arch-guard/SKILL.md +181 -181
  221. package/skills/arch-guard/agents/detector.md +48 -48
  222. package/skills/arch-guard/agents/reporter.md +48 -48
  223. package/skills/arch-guard/agents/rule-generator.md +49 -49
  224. package/skills/arch-guard/agents/violation-checker.md +51 -51
  225. package/skills/arch-guard/frameworks/clean-architecture.md +108 -108
  226. package/skills/arch-guard/frameworks/solid.md +102 -102
  227. package/skills/arch-guard/scripts/check-boundaries.js +90 -90
  228. package/skills/arch-guard/templates/arch-rules.json +47 -47
  229. package/skills/arch-guard/templates/violation-report.md +53 -53
  230. package/skills/brand-assets/SKILL.md +147 -147
  231. package/skills/brand-assets/rubrics/asset-checklist.md +98 -98
  232. package/skills/brand-assets/templates/brand-guide.md +161 -161
  233. package/skills/capability-loop/SKILL.md +272 -272
  234. package/skills/capability-loop/agents/capability-designer.md +61 -61
  235. package/skills/capability-loop/agents/failure-analyst.md +55 -55
  236. package/skills/capability-loop/agents/implementer.md +50 -50
  237. package/skills/capability-loop/agents/tester.md +53 -53
  238. package/skills/capability-loop/templates/capability-spec.md +118 -118
  239. package/skills/capability-loop/templates/failure-analysis.md +118 -118
  240. package/skills/characterization-test/SKILL.md +207 -207
  241. package/skills/characterization-test/agents/behavior-capturer.md +50 -50
  242. package/skills/characterization-test/agents/coverage-checker.md +54 -54
  243. package/skills/characterization-test/agents/reporter.md +50 -50
  244. package/skills/characterization-test/agents/test-writer.md +49 -49
  245. package/skills/characterization-test/rubrics/coverage-criteria.md +53 -53
  246. package/skills/characterization-test/templates/test-template.ts +101 -101
  247. package/skills/chub-usage/SKILL.md +139 -139
  248. package/skills/claude-md-guide/SKILL.md +351 -351
  249. package/skills/claude-md-guide/rubrics/anti-patterns.md +88 -88
  250. package/skills/claude-md-guide/templates/claude-md.md +54 -54
  251. package/skills/commerce-patterns/SKILL.md +64 -64
  252. package/skills/commerce-patterns/rubrics/checkout-flow.md +48 -48
  253. package/skills/commerce-patterns/templates/product-schema.md +85 -85
  254. package/skills/commit-push-pr/SKILL.md +77 -77
  255. package/skills/commit-push-pr/agents/change-analyzer.md +55 -55
  256. package/skills/commit-push-pr/agents/message-writer.md +50 -50
  257. package/skills/commit-push-pr/agents/pr-writer.md +58 -58
  258. package/skills/commit-push-pr/agents/reviewer.md +52 -52
  259. package/skills/commit-push-pr/rubrics/commit-message.md +73 -73
  260. package/skills/commit-push-pr/templates/pr-body.md +63 -63
  261. package/skills/context7-usage/SKILL.md +106 -106
  262. package/skills/context7-usage/rubrics/when-to-use.md +50 -50
  263. package/skills/create-prd/SKILL.md +90 -90
  264. package/skills/create-prd/agents/edge-case-finder.md +48 -48
  265. package/skills/create-prd/agents/prioritizer.md +60 -60
  266. package/skills/create-prd/agents/requirements-writer.md +48 -48
  267. package/skills/create-prd/agents/researcher.md +55 -55
  268. package/skills/create-prd/agents/reviewer.md +54 -54
  269. package/skills/create-prd/frameworks/jobs-to-be-done.md +96 -96
  270. package/skills/create-prd/frameworks/rice-scoring.md +97 -97
  271. package/skills/create-prd/orchestrator.md +70 -70
  272. package/skills/create-prd/rubrics/completeness.md +58 -58
  273. package/skills/create-prd/templates/prd.md +139 -139
  274. package/skills/design-audit/SKILL.md +152 -152
  275. package/skills/design-audit/agents/a11y-auditor.md +43 -43
  276. package/skills/design-audit/agents/performance-auditor.md +46 -46
  277. package/skills/design-audit/agents/responsive-auditor.md +46 -46
  278. package/skills/design-audit/agents/scorer.md +47 -47
  279. package/skills/design-audit/agents/slop-detector.md +47 -47
  280. package/skills/design-audit/frameworks/core-web-vitals.md +107 -107
  281. package/skills/design-audit/frameworks/wcag-checklist.md +64 -64
  282. package/skills/design-audit/orchestrator.md +64 -64
  283. package/skills/design-audit/rubrics/ai-slop-patterns.md +83 -83
  284. package/skills/design-audit/rubrics/scoring.md +63 -63
  285. package/skills/design-audit/templates/report.md +88 -88
  286. package/skills/design-critique/SKILL.md +139 -139
  287. package/skills/design-critique/rubrics/ux-heuristics.md +143 -143
  288. package/skills/design-critique/templates/critique-report.md +86 -86
  289. package/skills/design-distill/SKILL.md +130 -130
  290. package/skills/design-distill/templates/design-system.md +132 -132
  291. package/skills/design-normalize/SKILL.md +133 -133
  292. package/skills/design-normalize/rubrics/token-naming.md +117 -117
  293. package/skills/design-normalize/templates/token-audit.md +89 -89
  294. package/skills/design-polish/SKILL.md +131 -131
  295. package/skills/design-polish/rubrics/polish-checklist.md +68 -68
  296. package/skills/design-polish/templates/polish-report.md +64 -64
  297. package/skills/design-teach/SKILL.md +182 -182
  298. package/skills/design-teach/rubrics/brand-personality.md +73 -73
  299. package/skills/design-teach/templates/design-context.json +36 -36
  300. package/skills/devlog/SKILL.md +143 -143
  301. package/skills/e2e-commerce/SKILL.md +62 -62
  302. package/skills/e2e-commerce/templates/test-scenarios.md +170 -170
  303. package/skills/event-comms/SKILL.md +172 -172
  304. package/skills/event-comms/templates/email-invite.md +99 -99
  305. package/skills/event-comms/templates/sns-post.md +133 -133
  306. package/skills/event-ops/SKILL.md +207 -207
  307. package/skills/event-ops/rubrics/contingency.md +85 -85
  308. package/skills/event-ops/templates/d-day-checklist.md +65 -65
  309. package/skills/event-planning/SKILL.md +144 -144
  310. package/skills/event-planning/rubrics/timeline.md +70 -70
  311. package/skills/event-planning/templates/event-plan.md +91 -91
  312. package/skills/exec-plan/SKILL.md +149 -149
  313. package/skills/exec-plan/agents/decomposer.md +47 -47
  314. package/skills/exec-plan/agents/dependency-mapper.md +44 -44
  315. package/skills/exec-plan/agents/estimator.md +43 -43
  316. package/skills/exec-plan/agents/validator.md +55 -55
  317. package/skills/exec-plan/orchestrator.md +70 -70
  318. package/skills/exec-plan/rubrics/complexity-scoring.md +75 -75
  319. package/skills/exec-plan/templates/plan.md +147 -147
  320. package/skills/git-worktree/SKILL.md +73 -73
  321. package/skills/git-worktree/rubrics/when-to-use.md +55 -55
  322. package/skills/handoff/SKILL.md +110 -110
  323. package/skills/handoff/agents/context-summarizer.md +51 -51
  324. package/skills/handoff/agents/document-writer.md +63 -63
  325. package/skills/handoff/agents/state-collector.md +53 -53
  326. package/skills/handoff/agents/verifier.md +48 -48
  327. package/skills/handoff/rubrics/completeness.md +62 -62
  328. package/skills/handoff/templates/handoff.md +107 -107
  329. package/skills/parallel-research/SKILL.md +104 -104
  330. package/skills/parallel-research/agents/best-practices.md +43 -43
  331. package/skills/parallel-research/agents/codebase-patterns.md +46 -46
  332. package/skills/parallel-research/agents/framework-docs.md +45 -45
  333. package/skills/parallel-research/agents/security-advisory.md +46 -46
  334. package/skills/parallel-research/agents/synthesizer.md +57 -57
  335. package/skills/parallel-research/experts/best-practices.md +50 -50
  336. package/skills/parallel-research/experts/codebase-patterns.md +70 -70
  337. package/skills/parallel-research/experts/framework-docs.md +65 -65
  338. package/skills/parallel-research/experts/security-advisory.md +69 -69
  339. package/skills/parallel-research/orchestrator.md +79 -79
  340. package/skills/parallel-research/templates/awesome-list.md +32 -32
  341. package/skills/parallel-research/templates/paper.md +88 -88
  342. package/skills/parallel-research/templates/synthesis.md +101 -101
  343. package/skills/prioritization-frameworks/SKILL.md +87 -87
  344. package/skills/prioritization-frameworks/rubrics/frameworks.md +79 -79
  345. package/skills/prioritization-frameworks/templates/scoring-matrix.md +69 -69
  346. package/skills/priority-todos/SKILL.md +64 -64
  347. package/skills/priority-todos/rubrics/prioritization.md +70 -70
  348. package/skills/priority-todos/templates/todo-board.md +59 -59
  349. package/skills/seo-checklist/SKILL.md +58 -58
  350. package/skills/seo-checklist/frameworks/structured-data.md +153 -153
  351. package/skills/seo-checklist/rubrics/content-seo.md +42 -42
  352. package/skills/seo-checklist/rubrics/technical-seo.md +48 -48
  353. package/skills/techdebt/SKILL.md +124 -124
  354. package/skills/techdebt/agents/analyzer.md +50 -50
  355. package/skills/techdebt/agents/fixer.md +41 -41
  356. package/skills/techdebt/agents/reviewer.md +47 -47
  357. package/skills/techdebt/agents/scanner.md +44 -44
  358. package/skills/techdebt/orchestrator.md +70 -70
  359. package/skills/techdebt/rubrics/severity.md +51 -51
  360. package/skills/techdebt/scripts/scan.js +90 -90
  361. package/skills/techdebt/templates/report.md +86 -86
  362. package/skills/tool-fallback/SKILL.md +104 -104
  363. package/skills/tool-fallback/rubrics/fallback-chain.md +58 -58
  364. package/skills/typescript-advanced-types/SKILL.md +67 -67
  365. package/skills/typescript-advanced-types/rubrics/type-patterns.md +109 -109
  366. package/skills/ui-ux-pro-max/SKILL.md +236 -236
  367. package/skills/ui-ux-pro-max/reference/color-and-contrast.md +517 -517
  368. package/skills/ui-ux-pro-max/reference/interaction-design.md +544 -544
  369. package/skills/ui-ux-pro-max/reference/motion-design.md +591 -591
  370. package/skills/ui-ux-pro-max/reference/responsive-design.md +463 -463
  371. package/skills/ui-ux-pro-max/reference/spatial-design.md +390 -390
  372. package/skills/ui-ux-pro-max/reference/typography.md +455 -455
  373. package/skills/ui-ux-pro-max/reference/ux-writing.md +469 -469
  374. package/skills/ui-ux-pro-max/rubrics/interaction-states.md +83 -83
  375. package/skills/ui-ux-pro-max/rubrics/responsive-breakpoints.md +99 -99
  376. package/skills/user-personas/SKILL.md +75 -75
  377. package/skills/user-personas/rubrics/research-methods.md +56 -56
  378. package/skills/user-personas/templates/persona.md +89 -89
  379. package/skills/vercel-react-best-practices/SKILL.md +60 -60
  380. package/skills/vercel-react-best-practices/rubrics/performance.md +82 -82
  381. package/skills/vercel-react-best-practices/rubrics/server-components.md +86 -86
  382. package/skills/vibe-contract/SKILL.md +166 -166
  383. package/skills/vibe-docs/templates/architecture.md +80 -80
  384. package/skills/vibe-docs/templates/readme.md +84 -84
  385. package/skills/vibe-docs/templates/release-notes.md +74 -74
  386. package/skills/vibe-figma/SKILL.md +363 -363
  387. package/skills/vibe-figma/rubrics/extraction-checklist.md +51 -51
  388. package/skills/vibe-figma/templates/component-index.md +126 -126
  389. package/skills/vibe-figma/templates/component-spec.md +168 -168
  390. package/skills/vibe-figma/templates/figma-handoff.md +100 -100
  391. package/skills/vibe-figma/templates/remapped-tree.md +277 -277
  392. package/skills/vibe-figma-convert/SKILL.md +235 -235
  393. package/skills/vibe-figma-convert/rubrics/conversion-rules.md +141 -141
  394. package/skills/vibe-figma-convert/templates/component.md +140 -140
  395. package/skills/vibe-figma-extract/SKILL.md +219 -219
  396. package/skills/vibe-figma-extract/rubrics/image-rules.md +157 -157
  397. package/skills/vibe-interview/SKILL.md +358 -358
  398. package/skills/vibe-interview/checklists/api.md +101 -101
  399. package/skills/vibe-interview/checklists/feature.md +88 -88
  400. package/skills/vibe-interview/checklists/library.md +95 -95
  401. package/skills/vibe-interview/checklists/mobile.md +89 -89
  402. package/skills/vibe-interview/checklists/webapp.md +97 -97
  403. package/skills/vibe-interview/checklists/website.md +99 -99
  404. package/skills/vibe-plan/SKILL.md +254 -254
  405. package/skills/vibe-regress/SKILL.md +174 -174
  406. package/skills/vibe-regress/templates/bug.md +44 -44
  407. package/skills/vibe-regress/templates/test-jest.md +29 -29
  408. package/skills/vibe-regress/templates/test-vitest.md +30 -30
  409. package/skills/vibe-spec/SKILL.md +1195 -1195
  410. package/skills/vibe-spec-review/SKILL.md +726 -726
  411. package/skills/vibe-test/SKILL.md +140 -247
  412. package/skills/video-production/SKILL.md +52 -52
  413. package/skills/video-production/rubrics/quality-checklist.md +58 -58
  414. package/skills/video-production/templates/production-plan.md +104 -104
  415. package/vibe/config.json +29 -29
  416. package/vibe/constitution.md +227 -227
  417. package/vibe/rules/principles/communication-guide.md +98 -98
  418. package/vibe/rules/principles/development-philosophy.md +52 -52
  419. package/vibe/rules/principles/quick-start.md +102 -102
  420. package/vibe/rules/quality/bdd-contract-testing.md +393 -393
  421. package/vibe/rules/quality/checklist.md +276 -276
  422. package/vibe/rules/quality/performance.md +236 -236
  423. package/vibe/rules/quality/testing-strategy.md +440 -440
  424. package/vibe/rules/standards/anti-patterns.md +541 -541
  425. package/vibe/rules/standards/code-structure.md +291 -291
  426. package/vibe/rules/standards/complexity-metrics.md +313 -313
  427. package/vibe/rules/standards/git-workflow.md +237 -237
  428. package/vibe/rules/standards/naming-conventions.md +198 -198
  429. package/vibe/rules/standards/security.md +305 -305
  430. package/vibe/rules/writing/document-style.md +74 -74
  431. package/vibe/setup.sh +31 -31
  432. package/vibe/templates/claudemd-template.md +74 -74
  433. package/vibe/templates/constitution-template.md +267 -267
  434. package/vibe/templates/contract-backend-template.md +526 -526
  435. package/vibe/templates/contract-frontend-template.md +599 -599
  436. package/vibe/templates/feature-template.md +96 -96
  437. package/vibe/templates/plan-template.md +194 -194
  438. package/vibe/templates/spec-template.md +221 -221
  439. package/vibe/ui-ux-data/charts.csv +26 -26
  440. package/vibe/ui-ux-data/colors.csv +97 -97
  441. package/vibe/ui-ux-data/icons.csv +101 -101
  442. package/vibe/ui-ux-data/landing.csv +31 -31
  443. package/vibe/ui-ux-data/products.csv +96 -96
  444. package/vibe/ui-ux-data/react-performance.csv +45 -45
  445. package/vibe/ui-ux-data/stacks/astro.csv +54 -54
  446. package/vibe/ui-ux-data/stacks/flutter.csv +53 -53
  447. package/vibe/ui-ux-data/stacks/html-tailwind.csv +56 -56
  448. package/vibe/ui-ux-data/stacks/jetpack-compose.csv +53 -53
  449. package/vibe/ui-ux-data/stacks/nextjs.csv +53 -53
  450. package/vibe/ui-ux-data/stacks/nuxt-ui.csv +51 -51
  451. package/vibe/ui-ux-data/stacks/nuxtjs.csv +59 -59
  452. package/vibe/ui-ux-data/stacks/react-native.csv +52 -52
  453. package/vibe/ui-ux-data/stacks/react.csv +54 -54
  454. package/vibe/ui-ux-data/stacks/shadcn.csv +61 -61
  455. package/vibe/ui-ux-data/stacks/svelte.csv +54 -54
  456. package/vibe/ui-ux-data/stacks/swiftui.csv +51 -51
  457. package/vibe/ui-ux-data/stacks/vue.csv +50 -50
  458. package/vibe/ui-ux-data/styles.csv +68 -68
  459. package/vibe/ui-ux-data/typography.csv +57 -57
  460. package/vibe/ui-ux-data/ui-reasoning.csv +101 -101
  461. package/vibe/ui-ux-data/ux-guidelines.csv +99 -99
  462. package/vibe/ui-ux-data/version.json +31 -31
  463. package/vibe/ui-ux-data/web-interface.csv +31 -31
  464. package/README.ko.md +0 -171
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