@su-record/vibe 2.9.23 → 2.9.24

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 (461) hide show
  1. package/.env.example +37 -37
  2. package/CLAUDE.md +105 -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 +96 -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/cursor-agents.js +32 -32
  113. package/dist/cli/postinstall/cursor-rules.js +83 -83
  114. package/dist/cli/postinstall/cursor-skills.js +743 -743
  115. package/dist/cli/setup/Provisioner.js +42 -42
  116. package/dist/infra/lib/DeepInit.js +24 -24
  117. package/dist/infra/lib/IterationTracker.js +11 -11
  118. package/dist/infra/lib/PythonParser.js +108 -108
  119. package/dist/infra/lib/ReviewRace.js +96 -96
  120. package/dist/infra/lib/SkillFrontmatter.js +28 -28
  121. package/dist/infra/lib/SkillQualityGate.js +9 -9
  122. package/dist/infra/lib/SkillRepository.js +159 -159
  123. package/dist/infra/lib/UltraQA.js +99 -99
  124. package/dist/infra/lib/autonomy/AuditStore.js +41 -41
  125. package/dist/infra/lib/autonomy/ConfirmationStore.js +30 -30
  126. package/dist/infra/lib/autonomy/EventOutbox.js +38 -38
  127. package/dist/infra/lib/autonomy/PolicyEngine.d.ts +3 -3
  128. package/dist/infra/lib/autonomy/PolicyEngine.js +18 -18
  129. package/dist/infra/lib/autonomy/SecuritySentinel.js +1 -1
  130. package/dist/infra/lib/autonomy/SuggestionStore.js +33 -33
  131. package/dist/infra/lib/embedding/VectorStore.js +22 -22
  132. package/dist/infra/lib/evolution/AgentAnalyzer.js +10 -10
  133. package/dist/infra/lib/evolution/DescriptionOptimizer.js +21 -21
  134. package/dist/infra/lib/evolution/GenerationRegistry.js +36 -36
  135. package/dist/infra/lib/evolution/InsightStore.js +90 -90
  136. package/dist/infra/lib/evolution/ParityTester.js +57 -57
  137. package/dist/infra/lib/evolution/RollbackManager.js +5 -5
  138. package/dist/infra/lib/evolution/SkillBenchmark.js +23 -23
  139. package/dist/infra/lib/evolution/SkillEvalRunner.js +50 -50
  140. package/dist/infra/lib/evolution/SkillGapDetector.js +10 -10
  141. package/dist/infra/lib/evolution/UsageTracker.js +28 -28
  142. package/dist/infra/lib/gemini/orchestration.js +5 -5
  143. package/dist/infra/lib/gpt/orchestration.js +4 -4
  144. package/dist/infra/lib/memory/KnowledgeGraph.js +4 -4
  145. package/dist/infra/lib/memory/MemorySearch.js +57 -57
  146. package/dist/infra/lib/memory/MemoryStorage.js +181 -181
  147. package/dist/infra/lib/memory/ObservationStore.js +28 -28
  148. package/dist/infra/lib/memory/ReflectionStore.js +30 -30
  149. package/dist/infra/lib/memory/SessionRAGRetriever.js +7 -7
  150. package/dist/infra/lib/memory/SessionRAGStore.js +225 -225
  151. package/dist/infra/lib/memory/SessionSummarizer.js +9 -9
  152. package/dist/infra/orchestrator/AgentManager.js +12 -12
  153. package/dist/infra/orchestrator/AgentRegistry.js +65 -65
  154. package/dist/infra/orchestrator/MultiLlmResearch.js +8 -8
  155. package/dist/infra/orchestrator/SwarmOrchestrator.test.js +16 -16
  156. package/dist/infra/orchestrator/parallelResearch.js +24 -24
  157. package/dist/tools/convention/analyzeComplexity.test.js +115 -115
  158. package/dist/tools/convention/validateCodeQuality.test.js +104 -104
  159. package/dist/tools/memory/createMemoryTimeline.js +10 -10
  160. package/dist/tools/memory/getMemoryGraph.js +12 -12
  161. package/dist/tools/memory/getSessionContext.js +9 -9
  162. package/dist/tools/memory/linkMemories.js +14 -14
  163. package/dist/tools/memory/listMemories.js +4 -4
  164. package/dist/tools/memory/recallMemory.js +4 -4
  165. package/dist/tools/memory/saveMemory.js +4 -4
  166. package/dist/tools/memory/searchMemoriesAdvanced.js +23 -23
  167. package/dist/tools/semantic/analyzeDependencyGraph.js +12 -12
  168. package/dist/tools/semantic/astGrep.test.js +6 -6
  169. package/dist/tools/spec/prdParser.test.js +171 -171
  170. package/dist/tools/spec/specGenerator.js +169 -169
  171. package/dist/tools/spec/traceabilityMatrix.js +64 -64
  172. package/dist/tools/spec/traceabilityMatrix.test.js +28 -28
  173. package/hooks/gemini-hooks.json +73 -73
  174. package/hooks/hooks.json +126 -126
  175. package/hooks/scripts/__tests__/keyword-detector.test.js +199 -199
  176. package/hooks/scripts/__tests__/pre-tool-guard.test.js +368 -368
  177. package/hooks/scripts/__tests__/sentinel-guard.test.js +208 -208
  178. package/hooks/scripts/auto-commit.js +97 -97
  179. package/hooks/scripts/auto-format.js +64 -64
  180. package/hooks/scripts/auto-test.js +81 -81
  181. package/hooks/scripts/code-check.js +271 -268
  182. package/hooks/scripts/codex-detect.js +46 -46
  183. package/hooks/scripts/codex-review-gate.js +80 -80
  184. package/hooks/scripts/command-log.js +32 -32
  185. package/hooks/scripts/context-save.js +353 -353
  186. package/hooks/scripts/evolution-engine.js +91 -91
  187. package/hooks/scripts/figma-extract.js +635 -635
  188. package/hooks/scripts/figma-guard.js +219 -219
  189. package/hooks/scripts/figma-refine.js +315 -315
  190. package/hooks/scripts/figma-to-scss.js +394 -394
  191. package/hooks/scripts/figma-validate.js +353 -353
  192. package/hooks/scripts/hud-status.js +321 -321
  193. package/hooks/scripts/keyword-detector.js +214 -214
  194. package/hooks/scripts/llm-orchestrate.js +645 -645
  195. package/hooks/scripts/post-edit.js +35 -32
  196. package/hooks/scripts/pr-test-gate.js +52 -52
  197. package/hooks/scripts/pre-tool-guard.js +254 -254
  198. package/hooks/scripts/prompt-dispatcher.js +190 -190
  199. package/hooks/scripts/sentinel-guard.js +130 -130
  200. package/hooks/scripts/session-start.js +186 -186
  201. package/hooks/scripts/skill-injector.js +83 -83
  202. package/hooks/scripts/stop-notify.js +209 -209
  203. package/hooks/scripts/utils.js +257 -257
  204. package/languages/csharp-unity.md +515 -515
  205. package/languages/gdscript-godot.md +470 -470
  206. package/languages/ruby-rails.md +489 -489
  207. package/languages/typescript-angular.md +433 -433
  208. package/languages/typescript-astro.md +416 -416
  209. package/languages/typescript-electron.md +406 -406
  210. package/languages/typescript-nestjs.md +524 -524
  211. package/languages/typescript-svelte.md +407 -407
  212. package/languages/typescript-tauri.md +365 -365
  213. package/package.json +1 -1
  214. package/skills/agents-md/SKILL.md +121 -121
  215. package/skills/agents-md/rubrics/what-to-keep.md +49 -49
  216. package/skills/agents-md/templates/agents-md.md +36 -36
  217. package/skills/arch-guard/SKILL.md +181 -181
  218. package/skills/arch-guard/agents/detector.md +48 -48
  219. package/skills/arch-guard/agents/reporter.md +48 -48
  220. package/skills/arch-guard/agents/rule-generator.md +49 -49
  221. package/skills/arch-guard/agents/violation-checker.md +51 -51
  222. package/skills/arch-guard/frameworks/clean-architecture.md +108 -108
  223. package/skills/arch-guard/frameworks/solid.md +102 -102
  224. package/skills/arch-guard/scripts/check-boundaries.js +90 -90
  225. package/skills/arch-guard/templates/arch-rules.json +47 -47
  226. package/skills/arch-guard/templates/violation-report.md +53 -53
  227. package/skills/brand-assets/SKILL.md +147 -147
  228. package/skills/brand-assets/rubrics/asset-checklist.md +98 -98
  229. package/skills/brand-assets/templates/brand-guide.md +161 -161
  230. package/skills/capability-loop/SKILL.md +272 -272
  231. package/skills/capability-loop/agents/capability-designer.md +61 -61
  232. package/skills/capability-loop/agents/failure-analyst.md +55 -55
  233. package/skills/capability-loop/agents/implementer.md +50 -50
  234. package/skills/capability-loop/agents/tester.md +53 -53
  235. package/skills/capability-loop/templates/capability-spec.md +118 -118
  236. package/skills/capability-loop/templates/failure-analysis.md +118 -118
  237. package/skills/characterization-test/SKILL.md +207 -207
  238. package/skills/characterization-test/agents/behavior-capturer.md +50 -50
  239. package/skills/characterization-test/agents/coverage-checker.md +54 -54
  240. package/skills/characterization-test/agents/reporter.md +50 -50
  241. package/skills/characterization-test/agents/test-writer.md +49 -49
  242. package/skills/characterization-test/rubrics/coverage-criteria.md +53 -53
  243. package/skills/characterization-test/templates/test-template.ts +101 -101
  244. package/skills/chub-usage/SKILL.md +139 -139
  245. package/skills/claude-md-guide/SKILL.md +351 -351
  246. package/skills/claude-md-guide/rubrics/anti-patterns.md +88 -88
  247. package/skills/claude-md-guide/templates/claude-md.md +54 -54
  248. package/skills/commerce-patterns/SKILL.md +64 -64
  249. package/skills/commerce-patterns/rubrics/checkout-flow.md +48 -48
  250. package/skills/commerce-patterns/templates/product-schema.md +85 -85
  251. package/skills/commit-push-pr/SKILL.md +77 -77
  252. package/skills/commit-push-pr/agents/change-analyzer.md +55 -55
  253. package/skills/commit-push-pr/agents/message-writer.md +50 -50
  254. package/skills/commit-push-pr/agents/pr-writer.md +58 -58
  255. package/skills/commit-push-pr/agents/reviewer.md +52 -52
  256. package/skills/commit-push-pr/rubrics/commit-message.md +73 -73
  257. package/skills/commit-push-pr/templates/pr-body.md +63 -63
  258. package/skills/context7-usage/SKILL.md +106 -106
  259. package/skills/context7-usage/rubrics/when-to-use.md +50 -50
  260. package/skills/create-prd/SKILL.md +90 -90
  261. package/skills/create-prd/agents/edge-case-finder.md +48 -48
  262. package/skills/create-prd/agents/prioritizer.md +60 -60
  263. package/skills/create-prd/agents/requirements-writer.md +48 -48
  264. package/skills/create-prd/agents/researcher.md +55 -55
  265. package/skills/create-prd/agents/reviewer.md +54 -54
  266. package/skills/create-prd/frameworks/jobs-to-be-done.md +96 -96
  267. package/skills/create-prd/frameworks/rice-scoring.md +97 -97
  268. package/skills/create-prd/orchestrator.md +70 -70
  269. package/skills/create-prd/rubrics/completeness.md +58 -58
  270. package/skills/create-prd/templates/prd.md +139 -139
  271. package/skills/design-audit/SKILL.md +152 -152
  272. package/skills/design-audit/agents/a11y-auditor.md +43 -43
  273. package/skills/design-audit/agents/performance-auditor.md +46 -46
  274. package/skills/design-audit/agents/responsive-auditor.md +46 -46
  275. package/skills/design-audit/agents/scorer.md +47 -47
  276. package/skills/design-audit/agents/slop-detector.md +47 -47
  277. package/skills/design-audit/frameworks/core-web-vitals.md +107 -107
  278. package/skills/design-audit/frameworks/wcag-checklist.md +64 -64
  279. package/skills/design-audit/orchestrator.md +64 -64
  280. package/skills/design-audit/rubrics/ai-slop-patterns.md +83 -83
  281. package/skills/design-audit/rubrics/scoring.md +63 -63
  282. package/skills/design-audit/templates/report.md +88 -88
  283. package/skills/design-critique/SKILL.md +139 -139
  284. package/skills/design-critique/rubrics/ux-heuristics.md +143 -143
  285. package/skills/design-critique/templates/critique-report.md +86 -86
  286. package/skills/design-distill/SKILL.md +130 -130
  287. package/skills/design-distill/templates/design-system.md +132 -132
  288. package/skills/design-normalize/SKILL.md +133 -133
  289. package/skills/design-normalize/rubrics/token-naming.md +117 -117
  290. package/skills/design-normalize/templates/token-audit.md +89 -89
  291. package/skills/design-polish/SKILL.md +131 -131
  292. package/skills/design-polish/rubrics/polish-checklist.md +68 -68
  293. package/skills/design-polish/templates/polish-report.md +64 -64
  294. package/skills/design-teach/SKILL.md +182 -182
  295. package/skills/design-teach/rubrics/brand-personality.md +73 -73
  296. package/skills/design-teach/templates/design-context.json +36 -36
  297. package/skills/devlog/SKILL.md +143 -143
  298. package/skills/e2e-commerce/SKILL.md +62 -62
  299. package/skills/e2e-commerce/templates/test-scenarios.md +170 -170
  300. package/skills/event-comms/SKILL.md +172 -172
  301. package/skills/event-comms/templates/email-invite.md +99 -99
  302. package/skills/event-comms/templates/sns-post.md +133 -133
  303. package/skills/event-ops/SKILL.md +207 -207
  304. package/skills/event-ops/rubrics/contingency.md +85 -85
  305. package/skills/event-ops/templates/d-day-checklist.md +65 -65
  306. package/skills/event-planning/SKILL.md +144 -144
  307. package/skills/event-planning/rubrics/timeline.md +70 -70
  308. package/skills/event-planning/templates/event-plan.md +91 -91
  309. package/skills/exec-plan/SKILL.md +149 -149
  310. package/skills/exec-plan/agents/decomposer.md +47 -47
  311. package/skills/exec-plan/agents/dependency-mapper.md +44 -44
  312. package/skills/exec-plan/agents/estimator.md +43 -43
  313. package/skills/exec-plan/agents/validator.md +55 -55
  314. package/skills/exec-plan/orchestrator.md +70 -70
  315. package/skills/exec-plan/rubrics/complexity-scoring.md +75 -75
  316. package/skills/exec-plan/templates/plan.md +147 -147
  317. package/skills/git-worktree/SKILL.md +73 -73
  318. package/skills/git-worktree/rubrics/when-to-use.md +55 -55
  319. package/skills/handoff/SKILL.md +110 -110
  320. package/skills/handoff/agents/context-summarizer.md +51 -51
  321. package/skills/handoff/agents/document-writer.md +63 -63
  322. package/skills/handoff/agents/state-collector.md +53 -53
  323. package/skills/handoff/agents/verifier.md +48 -48
  324. package/skills/handoff/rubrics/completeness.md +62 -62
  325. package/skills/handoff/templates/handoff.md +107 -107
  326. package/skills/parallel-research/SKILL.md +104 -104
  327. package/skills/parallel-research/agents/best-practices.md +43 -43
  328. package/skills/parallel-research/agents/codebase-patterns.md +46 -46
  329. package/skills/parallel-research/agents/framework-docs.md +45 -45
  330. package/skills/parallel-research/agents/security-advisory.md +46 -46
  331. package/skills/parallel-research/agents/synthesizer.md +57 -57
  332. package/skills/parallel-research/experts/best-practices.md +50 -50
  333. package/skills/parallel-research/experts/codebase-patterns.md +70 -70
  334. package/skills/parallel-research/experts/framework-docs.md +65 -65
  335. package/skills/parallel-research/experts/security-advisory.md +69 -69
  336. package/skills/parallel-research/orchestrator.md +79 -79
  337. package/skills/parallel-research/templates/awesome-list.md +32 -32
  338. package/skills/parallel-research/templates/paper.md +88 -88
  339. package/skills/parallel-research/templates/synthesis.md +101 -101
  340. package/skills/prioritization-frameworks/SKILL.md +87 -87
  341. package/skills/prioritization-frameworks/rubrics/frameworks.md +79 -79
  342. package/skills/prioritization-frameworks/templates/scoring-matrix.md +69 -69
  343. package/skills/priority-todos/SKILL.md +64 -64
  344. package/skills/priority-todos/rubrics/prioritization.md +70 -70
  345. package/skills/priority-todos/templates/todo-board.md +59 -59
  346. package/skills/seo-checklist/SKILL.md +58 -58
  347. package/skills/seo-checklist/frameworks/structured-data.md +153 -153
  348. package/skills/seo-checklist/rubrics/content-seo.md +42 -42
  349. package/skills/seo-checklist/rubrics/technical-seo.md +48 -48
  350. package/skills/techdebt/SKILL.md +124 -124
  351. package/skills/techdebt/agents/analyzer.md +50 -50
  352. package/skills/techdebt/agents/fixer.md +41 -41
  353. package/skills/techdebt/agents/reviewer.md +47 -47
  354. package/skills/techdebt/agents/scanner.md +44 -44
  355. package/skills/techdebt/orchestrator.md +70 -70
  356. package/skills/techdebt/rubrics/severity.md +51 -51
  357. package/skills/techdebt/scripts/scan.js +90 -90
  358. package/skills/techdebt/templates/report.md +86 -86
  359. package/skills/tool-fallback/SKILL.md +104 -104
  360. package/skills/tool-fallback/rubrics/fallback-chain.md +58 -58
  361. package/skills/typescript-advanced-types/SKILL.md +67 -67
  362. package/skills/typescript-advanced-types/rubrics/type-patterns.md +109 -109
  363. package/skills/ui-ux-pro-max/SKILL.md +236 -236
  364. package/skills/ui-ux-pro-max/reference/color-and-contrast.md +517 -517
  365. package/skills/ui-ux-pro-max/reference/interaction-design.md +544 -544
  366. package/skills/ui-ux-pro-max/reference/motion-design.md +591 -591
  367. package/skills/ui-ux-pro-max/reference/responsive-design.md +463 -463
  368. package/skills/ui-ux-pro-max/reference/spatial-design.md +390 -390
  369. package/skills/ui-ux-pro-max/reference/typography.md +455 -455
  370. package/skills/ui-ux-pro-max/reference/ux-writing.md +469 -469
  371. package/skills/ui-ux-pro-max/rubrics/interaction-states.md +83 -83
  372. package/skills/ui-ux-pro-max/rubrics/responsive-breakpoints.md +99 -99
  373. package/skills/user-personas/SKILL.md +75 -75
  374. package/skills/user-personas/rubrics/research-methods.md +56 -56
  375. package/skills/user-personas/templates/persona.md +89 -89
  376. package/skills/vercel-react-best-practices/SKILL.md +60 -60
  377. package/skills/vercel-react-best-practices/rubrics/performance.md +82 -82
  378. package/skills/vercel-react-best-practices/rubrics/server-components.md +86 -86
  379. package/skills/vibe-contract/SKILL.md +166 -166
  380. package/skills/vibe-docs/templates/architecture.md +80 -80
  381. package/skills/vibe-docs/templates/readme.md +84 -84
  382. package/skills/vibe-docs/templates/release-notes.md +74 -74
  383. package/skills/vibe-figma/SKILL.md +363 -363
  384. package/skills/vibe-figma/rubrics/extraction-checklist.md +51 -51
  385. package/skills/vibe-figma/templates/component-index.md +126 -126
  386. package/skills/vibe-figma/templates/component-spec.md +168 -168
  387. package/skills/vibe-figma/templates/figma-handoff.md +100 -100
  388. package/skills/vibe-figma/templates/remapped-tree.md +277 -277
  389. package/skills/vibe-figma-convert/SKILL.md +235 -235
  390. package/skills/vibe-figma-convert/rubrics/conversion-rules.md +141 -141
  391. package/skills/vibe-figma-convert/templates/component.md +140 -140
  392. package/skills/vibe-figma-extract/SKILL.md +219 -219
  393. package/skills/vibe-figma-extract/rubrics/image-rules.md +157 -157
  394. package/skills/vibe-interview/SKILL.md +358 -358
  395. package/skills/vibe-interview/checklists/api.md +101 -101
  396. package/skills/vibe-interview/checklists/feature.md +88 -88
  397. package/skills/vibe-interview/checklists/library.md +95 -95
  398. package/skills/vibe-interview/checklists/mobile.md +89 -89
  399. package/skills/vibe-interview/checklists/webapp.md +97 -97
  400. package/skills/vibe-interview/checklists/website.md +99 -99
  401. package/skills/vibe-plan/SKILL.md +254 -254
  402. package/skills/vibe-regress/SKILL.md +174 -174
  403. package/skills/vibe-regress/templates/bug.md +44 -44
  404. package/skills/vibe-regress/templates/test-jest.md +29 -29
  405. package/skills/vibe-regress/templates/test-vitest.md +30 -30
  406. package/skills/vibe-spec/SKILL.md +1195 -1195
  407. package/skills/vibe-spec-review/SKILL.md +726 -726
  408. package/skills/vibe-test/SKILL.md +247 -247
  409. package/skills/video-production/SKILL.md +52 -52
  410. package/skills/video-production/rubrics/quality-checklist.md +58 -58
  411. package/skills/video-production/templates/production-plan.md +104 -104
  412. package/vibe/config.json +29 -29
  413. package/vibe/constitution.md +227 -227
  414. package/vibe/rules/principles/communication-guide.md +98 -98
  415. package/vibe/rules/principles/development-philosophy.md +52 -52
  416. package/vibe/rules/principles/quick-start.md +102 -102
  417. package/vibe/rules/quality/bdd-contract-testing.md +393 -393
  418. package/vibe/rules/quality/checklist.md +276 -276
  419. package/vibe/rules/quality/performance.md +236 -236
  420. package/vibe/rules/quality/testing-strategy.md +440 -440
  421. package/vibe/rules/standards/anti-patterns.md +541 -541
  422. package/vibe/rules/standards/code-structure.md +291 -291
  423. package/vibe/rules/standards/complexity-metrics.md +313 -313
  424. package/vibe/rules/standards/git-workflow.md +237 -237
  425. package/vibe/rules/standards/naming-conventions.md +198 -198
  426. package/vibe/rules/standards/security.md +305 -305
  427. package/vibe/rules/writing/document-style.md +74 -74
  428. package/vibe/setup.sh +31 -31
  429. package/vibe/templates/claudemd-template.md +74 -74
  430. package/vibe/templates/constitution-template.md +267 -267
  431. package/vibe/templates/contract-backend-template.md +526 -526
  432. package/vibe/templates/contract-frontend-template.md +599 -599
  433. package/vibe/templates/feature-template.md +96 -96
  434. package/vibe/templates/plan-template.md +194 -194
  435. package/vibe/templates/spec-template.md +221 -221
  436. package/vibe/ui-ux-data/charts.csv +26 -26
  437. package/vibe/ui-ux-data/colors.csv +97 -97
  438. package/vibe/ui-ux-data/icons.csv +101 -101
  439. package/vibe/ui-ux-data/landing.csv +31 -31
  440. package/vibe/ui-ux-data/products.csv +96 -96
  441. package/vibe/ui-ux-data/react-performance.csv +45 -45
  442. package/vibe/ui-ux-data/stacks/astro.csv +54 -54
  443. package/vibe/ui-ux-data/stacks/flutter.csv +53 -53
  444. package/vibe/ui-ux-data/stacks/html-tailwind.csv +56 -56
  445. package/vibe/ui-ux-data/stacks/jetpack-compose.csv +53 -53
  446. package/vibe/ui-ux-data/stacks/nextjs.csv +53 -53
  447. package/vibe/ui-ux-data/stacks/nuxt-ui.csv +51 -51
  448. package/vibe/ui-ux-data/stacks/nuxtjs.csv +59 -59
  449. package/vibe/ui-ux-data/stacks/react-native.csv +52 -52
  450. package/vibe/ui-ux-data/stacks/react.csv +54 -54
  451. package/vibe/ui-ux-data/stacks/shadcn.csv +61 -61
  452. package/vibe/ui-ux-data/stacks/svelte.csv +54 -54
  453. package/vibe/ui-ux-data/stacks/swiftui.csv +51 -51
  454. package/vibe/ui-ux-data/stacks/vue.csv +50 -50
  455. package/vibe/ui-ux-data/styles.csv +68 -68
  456. package/vibe/ui-ux-data/typography.csv +57 -57
  457. package/vibe/ui-ux-data/ui-reasoning.csv +101 -101
  458. package/vibe/ui-ux-data/ux-guidelines.csv +99 -99
  459. package/vibe/ui-ux-data/version.json +31 -31
  460. package/vibe/ui-ux-data/web-interface.csv +31 -31
  461. 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