@su-record/vibe 2.8.48 → 2.8.50

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