@su-record/vibe 2.7.18 → 2.7.20

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