@su-record/vibe 2.6.16 → 2.6.18

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 (249) hide show
  1. package/CLAUDE.md +681 -681
  2. package/LICENSE +21 -21
  3. package/README.md +235 -203
  4. package/agents/architect-low.md +41 -41
  5. package/agents/architect-medium.md +59 -59
  6. package/agents/architect.md +80 -80
  7. package/agents/build-error-resolver.md +115 -115
  8. package/agents/compounder.md +261 -261
  9. package/agents/diagrammer.md +178 -178
  10. package/agents/e2e-tester.md +266 -266
  11. package/agents/explorer-low.md +42 -42
  12. package/agents/explorer-medium.md +59 -59
  13. package/agents/explorer.md +48 -48
  14. package/agents/implementer-low.md +43 -43
  15. package/agents/implementer-medium.md +52 -52
  16. package/agents/implementer.md +54 -54
  17. package/agents/refactor-cleaner.md +143 -143
  18. package/agents/research/best-practices-agent.md +199 -199
  19. package/agents/research/codebase-patterns-agent.md +157 -157
  20. package/agents/research/framework-docs-agent.md +188 -188
  21. package/agents/research/security-advisory-agent.md +213 -213
  22. package/agents/review/architecture-reviewer.md +107 -107
  23. package/agents/review/complexity-reviewer.md +116 -116
  24. package/agents/review/data-integrity-reviewer.md +88 -88
  25. package/agents/review/git-history-reviewer.md +103 -103
  26. package/agents/review/performance-reviewer.md +86 -86
  27. package/agents/review/python-reviewer.md +150 -150
  28. package/agents/review/rails-reviewer.md +139 -139
  29. package/agents/review/react-reviewer.md +144 -144
  30. package/agents/review/security-reviewer.md +80 -80
  31. package/agents/review/simplicity-reviewer.md +140 -140
  32. package/agents/review/test-coverage-reviewer.md +116 -116
  33. package/agents/review/typescript-reviewer.md +127 -127
  34. package/agents/searcher.md +54 -54
  35. package/agents/simplifier.md +120 -120
  36. package/agents/tester.md +49 -49
  37. package/agents/ui-previewer.md +268 -268
  38. package/commands/vibe.analyze.md +356 -356
  39. package/commands/vibe.reason.md +329 -329
  40. package/commands/vibe.review.md +412 -412
  41. package/commands/vibe.run.md +1266 -1266
  42. package/commands/vibe.spec.md +1054 -1054
  43. package/commands/vibe.spec.review.md +319 -319
  44. package/commands/vibe.trace.md +161 -161
  45. package/commands/vibe.utils.md +376 -376
  46. package/commands/vibe.verify.md +375 -375
  47. package/dist/cli/collaborator.js +52 -52
  48. package/dist/cli/detect.js +32 -32
  49. package/dist/cli/hud.js +20 -20
  50. package/dist/cli/index.d.ts.map +1 -1
  51. package/dist/cli/index.js +120 -118
  52. package/dist/cli/index.js.map +1 -1
  53. package/dist/cli/llm.js +144 -144
  54. package/dist/cli/postinstall.d.ts +1 -0
  55. package/dist/cli/postinstall.d.ts.map +1 -1
  56. package/dist/cli/postinstall.js +859 -859
  57. package/dist/cli/postinstall.js.map +1 -1
  58. package/dist/cli/setup/ProjectSetup.d.ts +2 -2
  59. package/dist/cli/setup/ProjectSetup.d.ts.map +1 -1
  60. package/dist/cli/setup/ProjectSetup.js +51 -17
  61. package/dist/cli/setup/ProjectSetup.js.map +1 -1
  62. package/dist/lib/DeepInit.js +24 -24
  63. package/dist/lib/IterationTracker.js +11 -11
  64. package/dist/lib/PythonParser.js +108 -108
  65. package/dist/lib/ReviewRace.js +96 -96
  66. package/dist/lib/SkillFrontmatter.js +28 -28
  67. package/dist/lib/SkillQualityGate.js +9 -9
  68. package/dist/lib/SkillRepository.js +159 -159
  69. package/dist/lib/UltraQA.js +77 -77
  70. package/dist/lib/gemini-api.js +5 -5
  71. package/dist/lib/gpt-api.js +4 -4
  72. package/dist/lib/memory/KnowledgeGraph.js +4 -4
  73. package/dist/lib/memory/MemorySearch.js +20 -20
  74. package/dist/lib/memory/MemoryStorage.js +64 -64
  75. package/dist/orchestrator/AgentManager.js +12 -12
  76. package/dist/orchestrator/MultiLlmResearch.js +8 -8
  77. package/dist/orchestrator/SmartRouter.js +11 -11
  78. package/dist/orchestrator/SwarmOrchestrator.d.ts +144 -0
  79. package/dist/orchestrator/SwarmOrchestrator.d.ts.map +1 -0
  80. package/dist/orchestrator/SwarmOrchestrator.js +361 -0
  81. package/dist/orchestrator/SwarmOrchestrator.js.map +1 -0
  82. package/dist/orchestrator/SwarmOrchestrator.test.d.ts +5 -0
  83. package/dist/orchestrator/SwarmOrchestrator.test.d.ts.map +1 -0
  84. package/dist/orchestrator/SwarmOrchestrator.test.js +95 -0
  85. package/dist/orchestrator/SwarmOrchestrator.test.js.map +1 -0
  86. package/dist/orchestrator/index.d.ts +2 -0
  87. package/dist/orchestrator/index.d.ts.map +1 -1
  88. package/dist/orchestrator/index.js +2 -0
  89. package/dist/orchestrator/index.js.map +1 -1
  90. package/dist/orchestrator/parallelResearch.js +24 -24
  91. package/dist/tools/convention/analyzeComplexity.test.js +115 -115
  92. package/dist/tools/convention/validateCodeQuality.test.js +104 -104
  93. package/dist/tools/spec/prdParser.test.js +171 -171
  94. package/dist/tools/spec/specGenerator.js +169 -169
  95. package/dist/tools/spec/traceabilityMatrix.js +64 -64
  96. package/dist/tools/spec/traceabilityMatrix.test.js +28 -28
  97. package/hooks/hooks.json +222 -222
  98. package/hooks/scripts/code-check.js +22 -22
  99. package/hooks/scripts/code-review.js +22 -22
  100. package/hooks/scripts/complexity.js +22 -22
  101. package/hooks/scripts/compound.js +23 -23
  102. package/hooks/scripts/context-save.js +33 -33
  103. package/hooks/scripts/gemini-ui-gen.js +281 -281
  104. package/hooks/scripts/generate-brand-assets.js +474 -474
  105. package/hooks/scripts/hud-multiline.js +262 -262
  106. package/hooks/scripts/hud-status.js +291 -291
  107. package/hooks/scripts/keyword-detector.js +214 -214
  108. package/hooks/scripts/llm-orchestrate.js +171 -171
  109. package/hooks/scripts/post-edit.js +97 -97
  110. package/hooks/scripts/post-tool-verify.js +210 -210
  111. package/hooks/scripts/pre-tool-guard.js +125 -125
  112. package/hooks/scripts/recall.js +22 -22
  113. package/hooks/scripts/session-start.js +30 -30
  114. package/hooks/scripts/skill-injector.js +191 -191
  115. package/hooks/scripts/utils.js +97 -97
  116. package/languages/csharp-unity.md +515 -515
  117. package/languages/gdscript-godot.md +470 -470
  118. package/languages/ruby-rails.md +489 -489
  119. package/languages/typescript-angular.md +433 -433
  120. package/languages/typescript-astro.md +416 -416
  121. package/languages/typescript-electron.md +406 -406
  122. package/languages/typescript-nestjs.md +524 -524
  123. package/languages/typescript-svelte.md +407 -407
  124. package/languages/typescript-tauri.md +365 -365
  125. package/package.json +84 -84
  126. package/skills/brand-assets.md +141 -141
  127. package/skills/commerce-patterns.md +361 -361
  128. package/skills/context7-usage.md +102 -102
  129. package/skills/e2e-commerce.md +304 -304
  130. package/skills/frontend-design.md +92 -92
  131. package/skills/git-worktree.md +181 -181
  132. package/skills/parallel-research.md +77 -77
  133. package/skills/priority-todos.md +239 -239
  134. package/skills/seo-checklist.md +244 -244
  135. package/skills/tool-fallback.md +190 -190
  136. package/skills/vibe-capabilities.md +161 -161
  137. package/vibe/constitution.md +227 -227
  138. package/vibe/rules/core/communication-guide.md +98 -98
  139. package/vibe/rules/core/development-philosophy.md +52 -52
  140. package/vibe/rules/core/quick-start.md +102 -102
  141. package/vibe/rules/quality/bdd-contract-testing.md +393 -393
  142. package/vibe/rules/quality/checklist.md +276 -276
  143. package/vibe/rules/quality/testing-strategy.md +440 -440
  144. package/vibe/rules/standards/anti-patterns.md +541 -541
  145. package/vibe/rules/standards/code-structure.md +291 -291
  146. package/vibe/rules/standards/complexity-metrics.md +313 -313
  147. package/vibe/rules/standards/naming-conventions.md +198 -198
  148. package/vibe/setup.sh +31 -31
  149. package/vibe/templates/constitution-template.md +252 -252
  150. package/vibe/templates/contract-backend-template.md +526 -526
  151. package/vibe/templates/contract-frontend-template.md +599 -599
  152. package/vibe/templates/feature-template.md +96 -96
  153. package/vibe/templates/spec-template.md +221 -221
  154. package/dist/cli/mcp.d.ts +0 -49
  155. package/dist/cli/mcp.d.ts.map +0 -1
  156. package/dist/cli/mcp.js +0 -169
  157. package/dist/cli/mcp.js.map +0 -1
  158. package/dist/lib/gemini-mcp.d.ts +0 -10
  159. package/dist/lib/gemini-mcp.d.ts.map +0 -1
  160. package/dist/lib/gemini-mcp.js +0 -353
  161. package/dist/lib/gemini-mcp.js.map +0 -1
  162. package/dist/lib/gpt-mcp.d.ts +0 -10
  163. package/dist/lib/gpt-mcp.d.ts.map +0 -1
  164. package/dist/lib/gpt-mcp.js +0 -352
  165. package/dist/lib/gpt-mcp.js.map +0 -1
  166. package/dist/tools/analytics/getUsageAnalytics.d.ts +0 -10
  167. package/dist/tools/analytics/getUsageAnalytics.d.ts.map +0 -1
  168. package/dist/tools/analytics/getUsageAnalytics.js +0 -246
  169. package/dist/tools/analytics/getUsageAnalytics.js.map +0 -1
  170. package/dist/tools/analytics/index.d.ts +0 -5
  171. package/dist/tools/analytics/index.d.ts.map +0 -1
  172. package/dist/tools/analytics/index.js +0 -5
  173. package/dist/tools/analytics/index.js.map +0 -1
  174. package/dist/tools/convention/getCodingGuide.d.ts +0 -7
  175. package/dist/tools/convention/getCodingGuide.d.ts.map +0 -1
  176. package/dist/tools/convention/getCodingGuide.js +0 -69
  177. package/dist/tools/convention/getCodingGuide.js.map +0 -1
  178. package/dist/tools/planning/analyzeRequirements.d.ts +0 -9
  179. package/dist/tools/planning/analyzeRequirements.d.ts.map +0 -1
  180. package/dist/tools/planning/analyzeRequirements.js +0 -171
  181. package/dist/tools/planning/analyzeRequirements.js.map +0 -1
  182. package/dist/tools/planning/createUserStories.d.ts +0 -9
  183. package/dist/tools/planning/createUserStories.d.ts.map +0 -1
  184. package/dist/tools/planning/createUserStories.js +0 -124
  185. package/dist/tools/planning/createUserStories.js.map +0 -1
  186. package/dist/tools/planning/featureRoadmap.d.ts +0 -10
  187. package/dist/tools/planning/featureRoadmap.d.ts.map +0 -1
  188. package/dist/tools/planning/featureRoadmap.js +0 -207
  189. package/dist/tools/planning/featureRoadmap.js.map +0 -1
  190. package/dist/tools/planning/generatePrd.d.ts +0 -11
  191. package/dist/tools/planning/generatePrd.d.ts.map +0 -1
  192. package/dist/tools/planning/generatePrd.js +0 -161
  193. package/dist/tools/planning/generatePrd.js.map +0 -1
  194. package/dist/tools/planning/index.d.ts +0 -8
  195. package/dist/tools/planning/index.d.ts.map +0 -1
  196. package/dist/tools/planning/index.js +0 -8
  197. package/dist/tools/planning/index.js.map +0 -1
  198. package/dist/tools/prompt/analyzePrompt.d.ts +0 -7
  199. package/dist/tools/prompt/analyzePrompt.d.ts.map +0 -1
  200. package/dist/tools/prompt/analyzePrompt.js +0 -150
  201. package/dist/tools/prompt/analyzePrompt.js.map +0 -1
  202. package/dist/tools/prompt/enhancePrompt.d.ts +0 -8
  203. package/dist/tools/prompt/enhancePrompt.d.ts.map +0 -1
  204. package/dist/tools/prompt/enhancePrompt.js +0 -110
  205. package/dist/tools/prompt/enhancePrompt.js.map +0 -1
  206. package/dist/tools/prompt/enhancePromptGemini.d.ts +0 -8
  207. package/dist/tools/prompt/enhancePromptGemini.d.ts.map +0 -1
  208. package/dist/tools/prompt/enhancePromptGemini.js +0 -332
  209. package/dist/tools/prompt/enhancePromptGemini.js.map +0 -1
  210. package/dist/tools/prompt/index.d.ts +0 -7
  211. package/dist/tools/prompt/index.d.ts.map +0 -1
  212. package/dist/tools/prompt/index.js +0 -7
  213. package/dist/tools/prompt/index.js.map +0 -1
  214. package/dist/tools/reasoning/applyReasoningFramework.d.ts +0 -8
  215. package/dist/tools/reasoning/applyReasoningFramework.d.ts.map +0 -1
  216. package/dist/tools/reasoning/applyReasoningFramework.js +0 -266
  217. package/dist/tools/reasoning/applyReasoningFramework.js.map +0 -1
  218. package/dist/tools/reasoning/index.d.ts +0 -5
  219. package/dist/tools/reasoning/index.d.ts.map +0 -1
  220. package/dist/tools/reasoning/index.js +0 -5
  221. package/dist/tools/reasoning/index.js.map +0 -1
  222. package/dist/tools/thinking/analyzeProblem.d.ts +0 -7
  223. package/dist/tools/thinking/analyzeProblem.d.ts.map +0 -1
  224. package/dist/tools/thinking/analyzeProblem.js +0 -55
  225. package/dist/tools/thinking/analyzeProblem.js.map +0 -1
  226. package/dist/tools/thinking/breakDownProblem.d.ts +0 -8
  227. package/dist/tools/thinking/breakDownProblem.d.ts.map +0 -1
  228. package/dist/tools/thinking/breakDownProblem.js +0 -145
  229. package/dist/tools/thinking/breakDownProblem.js.map +0 -1
  230. package/dist/tools/thinking/createThinkingChain.d.ts +0 -7
  231. package/dist/tools/thinking/createThinkingChain.d.ts.map +0 -1
  232. package/dist/tools/thinking/createThinkingChain.js +0 -44
  233. package/dist/tools/thinking/createThinkingChain.js.map +0 -1
  234. package/dist/tools/thinking/formatAsPlan.d.ts +0 -9
  235. package/dist/tools/thinking/formatAsPlan.d.ts.map +0 -1
  236. package/dist/tools/thinking/formatAsPlan.js +0 -78
  237. package/dist/tools/thinking/formatAsPlan.js.map +0 -1
  238. package/dist/tools/thinking/index.d.ts +0 -10
  239. package/dist/tools/thinking/index.d.ts.map +0 -1
  240. package/dist/tools/thinking/index.js +0 -10
  241. package/dist/tools/thinking/index.js.map +0 -1
  242. package/dist/tools/thinking/stepByStepAnalysis.d.ts +0 -8
  243. package/dist/tools/thinking/stepByStepAnalysis.d.ts.map +0 -1
  244. package/dist/tools/thinking/stepByStepAnalysis.js +0 -63
  245. package/dist/tools/thinking/stepByStepAnalysis.js.map +0 -1
  246. package/dist/tools/thinking/thinkAloudProcess.d.ts +0 -8
  247. package/dist/tools/thinking/thinkAloudProcess.d.ts.map +0 -1
  248. package/dist/tools/thinking/thinkAloudProcess.js +0 -80
  249. package/dist/tools/thinking/thinkAloudProcess.js.map +0 -1
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