@vudovn/antigravity-kit 1.0.1

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 (95) hide show
  1. package/README.md +311 -0
  2. package/bin/index.js +240 -0
  3. package/package.json +39 -0
  4. package/templates/.agent/.shared/ui-ux-pro-max/data/charts.csv +26 -0
  5. package/templates/.agent/.shared/ui-ux-pro-max/data/colors.csv +97 -0
  6. package/templates/.agent/.shared/ui-ux-pro-max/data/icons.csv +101 -0
  7. package/templates/.agent/.shared/ui-ux-pro-max/data/landing.csv +31 -0
  8. package/templates/.agent/.shared/ui-ux-pro-max/data/products.csv +97 -0
  9. package/templates/.agent/.shared/ui-ux-pro-max/data/prompts.csv +24 -0
  10. package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
  11. package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
  12. package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
  13. package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
  14. package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
  15. package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
  16. package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/react.csv +54 -0
  17. package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
  18. package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
  19. package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
  20. package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/vue.csv +50 -0
  21. package/templates/.agent/.shared/ui-ux-pro-max/data/styles.csv +59 -0
  22. package/templates/.agent/.shared/ui-ux-pro-max/data/typography.csv +58 -0
  23. package/templates/.agent/.shared/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
  24. package/templates/.agent/.shared/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc +0 -0
  25. package/templates/.agent/.shared/ui-ux-pro-max/scripts/__pycache__/core.cpython-313.pyc +0 -0
  26. package/templates/.agent/.shared/ui-ux-pro-max/scripts/core.py +245 -0
  27. package/templates/.agent/.shared/ui-ux-pro-max/scripts/search.py +69 -0
  28. package/templates/.agent/rules/01-identity.md +17 -0
  29. package/templates/.agent/rules/02-task-classification.md +36 -0
  30. package/templates/.agent/rules/03-mode-consulting.md +54 -0
  31. package/templates/.agent/rules/04-mode-build.md +54 -0
  32. package/templates/.agent/rules/05-mode-debug.md +66 -0
  33. package/templates/.agent/rules/06-mode-optimize.md +64 -0
  34. package/templates/.agent/rules/07-technical-standards.md +61 -0
  35. package/templates/.agent/rules/08-communication.md +34 -0
  36. package/templates/.agent/rules/09-checklist.md +45 -0
  37. package/templates/.agent/rules/10-special-situations.md +81 -0
  38. package/templates/.agent/skills/accessibility-expert/SKILL.md +430 -0
  39. package/templates/.agent/skills/ai-sdk-expert/SKILL.md +541 -0
  40. package/templates/.agent/skills/auth-expert/SKILL.md +105 -0
  41. package/templates/.agent/skills/cli-expert/SKILL.md +848 -0
  42. package/templates/.agent/skills/code-review/SKILL.md +424 -0
  43. package/templates/.agent/skills/css-expert/SKILL.md +401 -0
  44. package/templates/.agent/skills/database-expert/SKILL.md +324 -0
  45. package/templates/.agent/skills/devops-expert/SKILL.md +784 -0
  46. package/templates/.agent/skills/docker-expert/SKILL.md +409 -0
  47. package/templates/.agent/skills/documentation-expert/SKILL.md +493 -0
  48. package/templates/.agent/skills/git-expert/SKILL.md +522 -0
  49. package/templates/.agent/skills/github-actions-expert/SKILL.md +454 -0
  50. package/templates/.agent/skills/jest-expert/SKILL.md +957 -0
  51. package/templates/.agent/skills/mongodb-expert/SKILL.md +761 -0
  52. package/templates/.agent/skills/nestjs-expert/SKILL.md +552 -0
  53. package/templates/.agent/skills/nextjs-expert/SKILL.md +443 -0
  54. package/templates/.agent/skills/nodejs-expert/SKILL.md +192 -0
  55. package/templates/.agent/skills/oracle/SKILL.md +340 -0
  56. package/templates/.agent/skills/playwright-expert/SKILL.md +214 -0
  57. package/templates/.agent/skills/postgres-expert/SKILL.md +642 -0
  58. package/templates/.agent/skills/prisma-expert/SKILL.md +355 -0
  59. package/templates/.agent/skills/react-expert/SKILL.md +310 -0
  60. package/templates/.agent/skills/react-performance/SKILL.md +816 -0
  61. package/templates/.agent/skills/refactoring-expert/SKILL.md +394 -0
  62. package/templates/.agent/skills/research-expert/SKILL.md +231 -0
  63. package/templates/.agent/skills/rest-api-expert/SKILL.md +469 -0
  64. package/templates/.agent/skills/state-management-expert/SKILL.md +157 -0
  65. package/templates/.agent/skills/testing-expert/SKILL.md +621 -0
  66. package/templates/.agent/skills/triage-expert/SKILL.md +419 -0
  67. package/templates/.agent/skills/typescript-expert/SKILL.md +429 -0
  68. package/templates/.agent/skills/typescript-type/SKILL.md +790 -0
  69. package/templates/.agent/skills/ui-ux-pro-max/SKILL.md +228 -0
  70. package/templates/.agent/skills/vite-expert/SKILL.md +785 -0
  71. package/templates/.agent/skills/vitest-expert/SKILL.md +325 -0
  72. package/templates/.agent/skills/webpack-expert/SKILL.md +745 -0
  73. package/templates/.agent/workflows/request.md +82 -0
  74. package/templates/.agent/workflows/ui-ux-pro-max.md +231 -0
  75. package/templates/web/README.md +36 -0
  76. package/templates/web/eslint.config.mjs +18 -0
  77. package/templates/web/next.config.ts +8 -0
  78. package/templates/web/package-lock.json +6549 -0
  79. package/templates/web/package.json +27 -0
  80. package/templates/web/postcss.config.mjs +7 -0
  81. package/templates/web/public/favicon.ico +0 -0
  82. package/templates/web/public/images/antigravity-kit-logo.png +0 -0
  83. package/templates/web/public/images/claudekit.png +0 -0
  84. package/templates/web/public/images/logo.png +0 -0
  85. package/templates/web/src/app/globals.css +276 -0
  86. package/templates/web/src/app/layout.tsx +55 -0
  87. package/templates/web/src/app/page.tsx +23 -0
  88. package/templates/web/src/components/Credits.tsx +162 -0
  89. package/templates/web/src/components/Features.tsx +92 -0
  90. package/templates/web/src/components/Footer.tsx +74 -0
  91. package/templates/web/src/components/Hero.tsx +117 -0
  92. package/templates/web/src/components/HowItWorks.tsx +96 -0
  93. package/templates/web/src/components/Navbar.tsx +87 -0
  94. package/templates/web/src/components/Skills.tsx +182 -0
  95. package/templates/web/tsconfig.json +34 -0
@@ -0,0 +1,469 @@
1
+ ---
2
+ name: rest-api-expert
3
+ description: REST API design and development expert specializing in endpoint design, HTTP semantics, versioning, error handling, pagination, and OpenAPI documentation. Use PROACTIVELY for API architecture decisions, endpoint design issues, HTTP status code selection, or API documentation needs.
4
+ ---
5
+
6
+ # REST API Expert
7
+
8
+ You are an expert in REST API design and development with deep knowledge of HTTP semantics, resource modeling, versioning strategies, error handling, and API documentation.
9
+
10
+ ## When Invoked
11
+
12
+ ### Step 0: Recommend Specialist and Stop
13
+ If the issue is specifically about:
14
+ - **GraphQL APIs**: Stop and consider GraphQL patterns
15
+ - **gRPC/Protocol Buffers**: Stop and recommend appropriate expert
16
+ - **Authentication implementation**: Stop and recommend auth-expert
17
+ - **Database query optimization**: Stop and recommend database-expert
18
+
19
+ ### Environment Detection
20
+ ```bash
21
+ # Check for API framework
22
+ grep -r "express\|fastify\|koa\|nestjs\|hono" package.json 2>/dev/null
23
+
24
+ # Check for OpenAPI/Swagger
25
+ ls -la swagger.* openapi.* 2>/dev/null
26
+ find . -name "*.yaml" -o -name "*.json" | xargs grep -l "openapi" 2>/dev/null | head -3
27
+
28
+ # Check existing API routes
29
+ find . -type f \( -name "*.ts" -o -name "*.js" \) -path "*/routes/*" -o -path "*/controllers/*" | head -10
30
+ ```
31
+
32
+ ### Apply Strategy
33
+ 1. Identify the API design issue or requirement
34
+ 2. Apply RESTful principles and best practices
35
+ 3. Consider backward compatibility and versioning
36
+ 4. Validate with appropriate testing
37
+
38
+ ## Problem Playbooks
39
+
40
+ ### Endpoint Design
41
+ **Common Issues:**
42
+ - Non-RESTful URL patterns (verbs in URLs)
43
+ - Inconsistent naming conventions
44
+ - Poor resource hierarchy
45
+ - Missing or unclear resource relationships
46
+
47
+ **Prioritized Fixes:**
48
+ 1. **Minimal**: Rename endpoints to use nouns, not verbs
49
+ 2. **Better**: Restructure to proper resource hierarchy
50
+ 3. **Complete**: Implement full HATEOAS with links
51
+
52
+ **RESTful URL Design:**
53
+ ```typescript
54
+ // ❌ BAD: Verb-based endpoints
55
+ GET /getUsers
56
+ POST /createUser
57
+ PUT /updateUser/123
58
+ DELETE /deleteUser/123
59
+ GET /getUserOrders/123
60
+
61
+ // ✅ GOOD: Resource-based endpoints
62
+ GET /users # List users
63
+ POST /users # Create user
64
+ GET /users/123 # Get user
65
+ PUT /users/123 # Update user (full)
66
+ PATCH /users/123 # Update user (partial)
67
+ DELETE /users/123 # Delete user
68
+ GET /users/123/orders # User's orders (nested resource)
69
+
70
+ // ✅ GOOD: Filtering, sorting, pagination
71
+ GET /users?status=active&sort=-createdAt&page=2&limit=20
72
+
73
+ // ✅ GOOD: Search as sub-resource
74
+ GET /users/search?q=john&fields=name,email
75
+
76
+ // ✅ GOOD: Actions as sub-resources (when needed)
77
+ POST /users/123/activate # Action on resource
78
+ POST /orders/456/cancel # State transition
79
+ ```
80
+
81
+ **Resources:**
82
+ - https://restfulapi.net/resource-naming/
83
+ - https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm
84
+
85
+ ### HTTP Methods & Status Codes
86
+ **Common Issues:**
87
+ - Using GET for state-changing operations
88
+ - Inconsistent status code usage
89
+ - Missing appropriate error codes
90
+ - Ignoring idempotency
91
+
92
+ **HTTP Methods Semantics:**
93
+ ```typescript
94
+ // Method characteristics
95
+ // GET - Safe, Idempotent, Cacheable
96
+ // POST - Not Safe, Not Idempotent
97
+ // PUT - Not Safe, Idempotent
98
+ // PATCH - Not Safe, Not Idempotent
99
+ // DELETE - Not Safe, Idempotent
100
+
101
+ // Express example with proper methods
102
+ import { Router } from 'express';
103
+
104
+ const router = Router();
105
+
106
+ // GET - Retrieve resources (safe, idempotent)
107
+ router.get('/products', listProducts);
108
+ router.get('/products/:id', getProduct);
109
+
110
+ // POST - Create resources (not idempotent)
111
+ router.post('/products', createProduct);
112
+
113
+ // PUT - Replace entire resource (idempotent)
114
+ router.put('/products/:id', replaceProduct);
115
+
116
+ // PATCH - Partial update (not idempotent typically)
117
+ router.patch('/products/:id', updateProduct);
118
+
119
+ // DELETE - Remove resource (idempotent)
120
+ router.delete('/products/:id', deleteProduct);
121
+ ```
122
+
123
+ **Status Code Guide:**
124
+ ```typescript
125
+ // 2xx Success
126
+ 200 OK // GET success, PUT/PATCH success with body
127
+ 201 Created // POST success (include Location header)
128
+ 204 No Content // DELETE success, PUT/PATCH success without body
129
+
130
+ // 3xx Redirection
131
+ 301 Moved Permanently // Resource URL changed permanently
132
+ 304 Not Modified // Cached response is still valid
133
+
134
+ // 4xx Client Errors
135
+ 400 Bad Request // Invalid request body/params
136
+ 401 Unauthorized // Missing or invalid authentication
137
+ 403 Forbidden // Authenticated but not authorized
138
+ 404 Not Found // Resource doesn't exist
139
+ 405 Method Not Allowed // HTTP method not supported
140
+ 409 Conflict // State conflict (e.g., duplicate)
141
+ 422 Unprocessable Entity // Validation errors
142
+ 429 Too Many Requests // Rate limit exceeded
143
+
144
+ // 5xx Server Errors
145
+ 500 Internal Server Error // Unexpected server error
146
+ 502 Bad Gateway // Upstream service error
147
+ 503 Service Unavailable // Temporary overload/maintenance
148
+ ```
149
+
150
+ ### Error Handling
151
+ **Common Issues:**
152
+ - Inconsistent error response formats
153
+ - Exposing internal error details
154
+ - Missing error codes for client handling
155
+ - No error documentation
156
+
157
+ **Standard Error Response Format:**
158
+ ```typescript
159
+ // Error response structure
160
+ interface ApiError {
161
+ status: number; // HTTP status code
162
+ code: string; // Application-specific error code
163
+ message: string; // Human-readable message
164
+ details?: ErrorDetail[]; // Field-level errors (for validation)
165
+ requestId?: string; // For debugging/support
166
+ timestamp?: string; // ISO 8601
167
+ }
168
+
169
+ interface ErrorDetail {
170
+ field: string;
171
+ message: string;
172
+ code: string;
173
+ }
174
+
175
+ // Example responses
176
+ // 400 Bad Request - Validation Error
177
+ {
178
+ "status": 400,
179
+ "code": "VALIDATION_ERROR",
180
+ "message": "Request validation failed",
181
+ "details": [
182
+ { "field": "email", "message": "Invalid email format", "code": "INVALID_EMAIL" },
183
+ { "field": "age", "message": "Must be at least 18", "code": "MIN_VALUE" }
184
+ ],
185
+ "requestId": "req_abc123",
186
+ "timestamp": "2024-01-15T10:30:00Z"
187
+ }
188
+
189
+ // 404 Not Found
190
+ {
191
+ "status": 404,
192
+ "code": "RESOURCE_NOT_FOUND",
193
+ "message": "User with ID '123' not found",
194
+ "requestId": "req_def456",
195
+ "timestamp": "2024-01-15T10:30:00Z"
196
+ }
197
+
198
+ // 500 Internal Server Error
199
+ {
200
+ "status": 500,
201
+ "code": "INTERNAL_ERROR",
202
+ "message": "An unexpected error occurred. Please try again later.",
203
+ "requestId": "req_ghi789",
204
+ "timestamp": "2024-01-15T10:30:00Z"
205
+ }
206
+ ```
207
+
208
+ **Error Handling Middleware:**
209
+ ```typescript
210
+ // Express error handler
211
+ import { Request, Response, NextFunction } from 'express';
212
+
213
+ class AppError extends Error {
214
+ constructor(
215
+ public status: number,
216
+ public code: string,
217
+ message: string,
218
+ public details?: ErrorDetail[]
219
+ ) {
220
+ super(message);
221
+ }
222
+ }
223
+
224
+ function errorHandler(
225
+ err: Error,
226
+ req: Request,
227
+ res: Response,
228
+ next: NextFunction
229
+ ) {
230
+ const requestId = req.headers['x-request-id'] || generateRequestId();
231
+
232
+ if (err instanceof AppError) {
233
+ return res.status(err.status).json({
234
+ status: err.status,
235
+ code: err.code,
236
+ message: err.message,
237
+ details: err.details,
238
+ requestId,
239
+ timestamp: new Date().toISOString(),
240
+ });
241
+ }
242
+
243
+ // Log unexpected errors
244
+ console.error('Unexpected error:', err);
245
+
246
+ // Don't expose internal errors to clients
247
+ return res.status(500).json({
248
+ status: 500,
249
+ code: 'INTERNAL_ERROR',
250
+ message: 'An unexpected error occurred',
251
+ requestId,
252
+ timestamp: new Date().toISOString(),
253
+ });
254
+ }
255
+ ```
256
+
257
+ ### Pagination
258
+ **Common Issues:**
259
+ - Inconsistent pagination parameters
260
+ - Missing total count for UI
261
+ - No cursor-based option for large datasets
262
+ - Performance issues with offset pagination
263
+
264
+ **Pagination Strategies:**
265
+ ```typescript
266
+ // 1. Offset-based pagination (simple, but slow for large offsets)
267
+ GET /products?page=2&limit=20
268
+
269
+ {
270
+ "data": [...],
271
+ "pagination": {
272
+ "page": 2,
273
+ "limit": 20,
274
+ "total": 150,
275
+ "totalPages": 8,
276
+ "hasNext": true,
277
+ "hasPrev": true
278
+ }
279
+ }
280
+
281
+ // 2. Cursor-based pagination (efficient for large datasets)
282
+ GET /products?cursor=eyJpZCI6MTAwfQ&limit=20
283
+
284
+ {
285
+ "data": [...],
286
+ "pagination": {
287
+ "limit": 20,
288
+ "nextCursor": "eyJpZCI6MTIwfQ",
289
+ "prevCursor": "eyJpZCI6ODB9",
290
+ "hasNext": true,
291
+ "hasPrev": true
292
+ }
293
+ }
294
+
295
+ // Implementation example
296
+ async function paginateWithCursor(
297
+ cursor: string | null,
298
+ limit: number = 20
299
+ ) {
300
+ const decodedCursor = cursor
301
+ ? JSON.parse(Buffer.from(cursor, 'base64').toString())
302
+ : null;
303
+
304
+ const items = await prisma.product.findMany({
305
+ take: limit + 1, // Fetch one extra to check hasNext
306
+ cursor: decodedCursor ? { id: decodedCursor.id } : undefined,
307
+ skip: decodedCursor ? 1 : 0,
308
+ orderBy: { id: 'asc' },
309
+ });
310
+
311
+ const hasNext = items.length > limit;
312
+ const data = hasNext ? items.slice(0, -1) : items;
313
+
314
+ return {
315
+ data,
316
+ pagination: {
317
+ limit,
318
+ nextCursor: hasNext
319
+ ? Buffer.from(JSON.stringify({ id: data[data.length - 1].id })).toString('base64')
320
+ : null,
321
+ hasNext,
322
+ },
323
+ };
324
+ }
325
+ ```
326
+
327
+ ### API Versioning
328
+ **Common Issues:**
329
+ - No versioning strategy
330
+ - Breaking changes without version bump
331
+ - Inconsistent versioning across endpoints
332
+ - No deprecation communication
333
+
334
+ **Versioning Strategies:**
335
+ ```typescript
336
+ // 1. URL Path Versioning (recommended)
337
+ GET /api/v1/users
338
+ GET /api/v2/users
339
+
340
+ // Implementation
341
+ import { Router } from 'express';
342
+
343
+ const v1Router = Router();
344
+ const v2Router = Router();
345
+
346
+ // V1 routes
347
+ v1Router.get('/users', getUsersV1);
348
+
349
+ // V2 routes with breaking changes
350
+ v2Router.get('/users', getUsersV2);
351
+
352
+ app.use('/api/v1', v1Router);
353
+ app.use('/api/v2', v2Router);
354
+
355
+ // 2. Header Versioning
356
+ GET /api/users
357
+ Accept: application/vnd.myapi.v2+json
358
+
359
+ // 3. Query Parameter (not recommended for APIs)
360
+ GET /api/users?version=2
361
+ ```
362
+
363
+ **Deprecation Headers:**
364
+ ```typescript
365
+ // Communicate deprecation
366
+ res.setHeader('Deprecation', 'true');
367
+ res.setHeader('Sunset', 'Sat, 01 Jun 2025 00:00:00 GMT');
368
+ res.setHeader('Link', '</api/v2/users>; rel="successor-version"');
369
+ ```
370
+
371
+ ### Request/Response Design
372
+ **Common Issues:**
373
+ - Inconsistent field naming (camelCase vs snake_case)
374
+ - Missing content type headers
375
+ - No request validation
376
+ - Overly verbose responses
377
+
378
+ **Request/Response Best Practices:**
379
+ ```typescript
380
+ // Consistent naming convention (pick one, stick to it)
381
+ // JavaScript/TypeScript typically uses camelCase
382
+
383
+ // Request validation with Zod
384
+ import { z } from 'zod';
385
+
386
+ const CreateUserSchema = z.object({
387
+ email: z.string().email(),
388
+ name: z.string().min(2).max(100),
389
+ age: z.number().int().min(18).optional(),
390
+ role: z.enum(['user', 'admin']).default('user'),
391
+ });
392
+
393
+ // Validate in middleware
394
+ function validate(schema: z.ZodSchema) {
395
+ return (req: Request, res: Response, next: NextFunction) => {
396
+ try {
397
+ req.body = schema.parse(req.body);
398
+ next();
399
+ } catch (error) {
400
+ if (error instanceof z.ZodError) {
401
+ return res.status(400).json({
402
+ status: 400,
403
+ code: 'VALIDATION_ERROR',
404
+ message: 'Request validation failed',
405
+ details: error.errors.map(e => ({
406
+ field: e.path.join('.'),
407
+ message: e.message,
408
+ code: e.code,
409
+ })),
410
+ });
411
+ }
412
+ next(error);
413
+ }
414
+ };
415
+ }
416
+
417
+ // Response envelope for consistency
418
+ interface ApiResponse<T> {
419
+ data: T;
420
+ meta?: {
421
+ pagination?: PaginationInfo;
422
+ [key: string]: any;
423
+ };
424
+ }
425
+
426
+ // Partial responses (field selection)
427
+ GET /users/123?fields=id,name,email
428
+ ```
429
+
430
+ ## Code Review Checklist
431
+
432
+ ### Endpoint Design
433
+ - [ ] URLs use nouns, not verbs
434
+ - [ ] Consistent naming convention (kebab-case or snake_case)
435
+ - [ ] Proper resource hierarchy
436
+ - [ ] No deeply nested resources (max 2 levels)
437
+
438
+ ### HTTP Semantics
439
+ - [ ] Correct HTTP methods for operations
440
+ - [ ] Appropriate status codes
441
+ - [ ] Idempotency for PUT/DELETE
442
+ - [ ] Safe methods (GET) don't modify state
443
+
444
+ ### Error Handling
445
+ - [ ] Consistent error response format
446
+ - [ ] Meaningful error codes
447
+ - [ ] Validation errors include field details
448
+ - [ ] No internal errors exposed to clients
449
+
450
+ ### Performance
451
+ - [ ] Pagination for list endpoints
452
+ - [ ] Field selection supported
453
+ - [ ] Appropriate caching headers
454
+ - [ ] Rate limiting implemented
455
+
456
+ ### Documentation
457
+ - [ ] OpenAPI/Swagger spec up to date
458
+ - [ ] Examples for all endpoints
459
+ - [ ] Error codes documented
460
+ - [ ] Deprecation warnings for old versions
461
+
462
+ ## Anti-Patterns to Avoid
463
+
464
+ 1. **RPC-style URLs**: `/createUser`, `/updateProduct` → Use nouns with HTTP methods
465
+ 2. **Ignoring HTTP Semantics**: Using POST for everything
466
+ 3. **Exposing Internal IDs**: Use UUIDs or opaque IDs instead of auto-increment
467
+ 4. **Overfetching**: Return only requested/needed fields
468
+ 5. **Version in Response Body**: Version in URL is cleaner
469
+ 6. **Tight Coupling**: API should be independent of frontend implementation
@@ -0,0 +1,157 @@
1
+ ---
2
+ name: state-management-expert
3
+ description: Expert in React state management including Redux Toolkit, Zustand, Jotai, React Query/TanStack Query, and Context API. Use for state architecture decisions, performance issues, or complex state logic.
4
+ ---
5
+
6
+ # State Management Expert
7
+
8
+ Expert in React state management patterns and libraries.
9
+
10
+ ## When Invoked
11
+
12
+ ### Recommend Specialist
13
+ - **React component issues**: recommend react-expert
14
+ - **Performance profiling**: recommend react-performance-expert
15
+ - **API data fetching only**: recommend rest-api-expert
16
+
17
+ ### Environment Detection
18
+ ```bash
19
+ grep -E "redux|zustand|jotai|recoil|@tanstack/react-query" package.json 2>/dev/null
20
+ find . -name "store*" -o -name "*slice*" | head -5
21
+ ```
22
+
23
+ ## State Management Decision Tree
24
+
25
+ ```
26
+ State Type?
27
+ ├─ Server State (API data) → TanStack Query / SWR
28
+ ├─ Global UI State → Zustand / Redux Toolkit
29
+ ├─ Form State → React Hook Form / Formik
30
+ ├─ URL State → nuqs / useSearchParams
31
+ └─ Local State → useState / useReducer
32
+ ```
33
+
34
+ ## Problem Playbooks
35
+
36
+ ### Zustand (Recommended for most apps)
37
+
38
+ ```typescript
39
+ import { create } from 'zustand';
40
+ import { devtools, persist } from 'zustand/middleware';
41
+
42
+ interface UserStore {
43
+ user: User | null;
44
+ setUser: (user: User | null) => void;
45
+ logout: () => void;
46
+ }
47
+
48
+ export const useUserStore = create<UserStore>()(
49
+ devtools(
50
+ persist(
51
+ (set) => ({
52
+ user: null,
53
+ setUser: (user) => set({ user }),
54
+ logout: () => set({ user: null }),
55
+ }),
56
+ { name: 'user-store' }
57
+ )
58
+ )
59
+ );
60
+
61
+ // Usage
62
+ function Component() {
63
+ const user = useUserStore((state) => state.user);
64
+ const setUser = useUserStore((state) => state.setUser);
65
+ }
66
+ ```
67
+
68
+ ### Redux Toolkit
69
+
70
+ ```typescript
71
+ import { createSlice, configureStore } from '@reduxjs/toolkit';
72
+
73
+ const counterSlice = createSlice({
74
+ name: 'counter',
75
+ initialState: { value: 0 },
76
+ reducers: {
77
+ increment: (state) => { state.value += 1; },
78
+ decrement: (state) => { state.value -= 1; },
79
+ },
80
+ });
81
+
82
+ export const store = configureStore({
83
+ reducer: { counter: counterSlice.reducer },
84
+ });
85
+
86
+ export const { increment, decrement } = counterSlice.actions;
87
+ ```
88
+
89
+ ### TanStack Query (Server State)
90
+
91
+ ```typescript
92
+ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
93
+
94
+ function usePosts() {
95
+ return useQuery({
96
+ queryKey: ['posts'],
97
+ queryFn: () => fetch('/api/posts').then(r => r.json()),
98
+ staleTime: 5 * 60 * 1000, // 5 minutes
99
+ });
100
+ }
101
+
102
+ function useCreatePost() {
103
+ const queryClient = useQueryClient();
104
+
105
+ return useMutation({
106
+ mutationFn: (data: CreatePostDto) =>
107
+ fetch('/api/posts', {
108
+ method: 'POST',
109
+ body: JSON.stringify(data),
110
+ }),
111
+ onSuccess: () => {
112
+ queryClient.invalidateQueries({ queryKey: ['posts'] });
113
+ },
114
+ });
115
+ }
116
+ ```
117
+
118
+ ### Context API (Simple cases)
119
+
120
+ ```typescript
121
+ const ThemeContext = createContext<ThemeContextValue | null>(null);
122
+
123
+ export function ThemeProvider({ children }: { children: ReactNode }) {
124
+ const [theme, setTheme] = useState<'light' | 'dark'>('light');
125
+
126
+ const value = useMemo(() => ({ theme, setTheme }), [theme]);
127
+
128
+ return (
129
+ <ThemeContext.Provider value={value}>
130
+ {children}
131
+ </ThemeContext.Provider>
132
+ );
133
+ }
134
+
135
+ export function useTheme() {
136
+ const context = useContext(ThemeContext);
137
+ if (!context) throw new Error('useTheme must be within ThemeProvider');
138
+ return context;
139
+ }
140
+ ```
141
+
142
+ ## Code Review Checklist
143
+
144
+ - [ ] Server state uses TanStack Query or SWR
145
+ - [ ] No prop drilling >2 levels
146
+ - [ ] Selectors used for derived state
147
+ - [ ] State normalized (no duplicates)
148
+ - [ ] Optimistic updates for mutations
149
+ - [ ] Loading/error states handled
150
+
151
+ ## Anti-Patterns
152
+
153
+ 1. **Storing server data in Redux** - Use React Query
154
+ 2. **Global state for local concerns** - Use useState
155
+ 3. **Over-fetching with Context** - Split contexts
156
+ 4. **Missing selectors** - Causes unnecessary re-renders
157
+ 5. **Duplicate state** - Single source of truth