@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.
- package/README.md +311 -0
- package/bin/index.js +240 -0
- package/package.json +39 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/charts.csv +26 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/colors.csv +97 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/icons.csv +101 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/landing.csv +31 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/products.csv +97 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/prompts.csv +24 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/react.csv +54 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/stacks/vue.csv +50 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/styles.csv +59 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/typography.csv +58 -0
- package/templates/.agent/.shared/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
- package/templates/.agent/.shared/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc +0 -0
- package/templates/.agent/.shared/ui-ux-pro-max/scripts/__pycache__/core.cpython-313.pyc +0 -0
- package/templates/.agent/.shared/ui-ux-pro-max/scripts/core.py +245 -0
- package/templates/.agent/.shared/ui-ux-pro-max/scripts/search.py +69 -0
- package/templates/.agent/rules/01-identity.md +17 -0
- package/templates/.agent/rules/02-task-classification.md +36 -0
- package/templates/.agent/rules/03-mode-consulting.md +54 -0
- package/templates/.agent/rules/04-mode-build.md +54 -0
- package/templates/.agent/rules/05-mode-debug.md +66 -0
- package/templates/.agent/rules/06-mode-optimize.md +64 -0
- package/templates/.agent/rules/07-technical-standards.md +61 -0
- package/templates/.agent/rules/08-communication.md +34 -0
- package/templates/.agent/rules/09-checklist.md +45 -0
- package/templates/.agent/rules/10-special-situations.md +81 -0
- package/templates/.agent/skills/accessibility-expert/SKILL.md +430 -0
- package/templates/.agent/skills/ai-sdk-expert/SKILL.md +541 -0
- package/templates/.agent/skills/auth-expert/SKILL.md +105 -0
- package/templates/.agent/skills/cli-expert/SKILL.md +848 -0
- package/templates/.agent/skills/code-review/SKILL.md +424 -0
- package/templates/.agent/skills/css-expert/SKILL.md +401 -0
- package/templates/.agent/skills/database-expert/SKILL.md +324 -0
- package/templates/.agent/skills/devops-expert/SKILL.md +784 -0
- package/templates/.agent/skills/docker-expert/SKILL.md +409 -0
- package/templates/.agent/skills/documentation-expert/SKILL.md +493 -0
- package/templates/.agent/skills/git-expert/SKILL.md +522 -0
- package/templates/.agent/skills/github-actions-expert/SKILL.md +454 -0
- package/templates/.agent/skills/jest-expert/SKILL.md +957 -0
- package/templates/.agent/skills/mongodb-expert/SKILL.md +761 -0
- package/templates/.agent/skills/nestjs-expert/SKILL.md +552 -0
- package/templates/.agent/skills/nextjs-expert/SKILL.md +443 -0
- package/templates/.agent/skills/nodejs-expert/SKILL.md +192 -0
- package/templates/.agent/skills/oracle/SKILL.md +340 -0
- package/templates/.agent/skills/playwright-expert/SKILL.md +214 -0
- package/templates/.agent/skills/postgres-expert/SKILL.md +642 -0
- package/templates/.agent/skills/prisma-expert/SKILL.md +355 -0
- package/templates/.agent/skills/react-expert/SKILL.md +310 -0
- package/templates/.agent/skills/react-performance/SKILL.md +816 -0
- package/templates/.agent/skills/refactoring-expert/SKILL.md +394 -0
- package/templates/.agent/skills/research-expert/SKILL.md +231 -0
- package/templates/.agent/skills/rest-api-expert/SKILL.md +469 -0
- package/templates/.agent/skills/state-management-expert/SKILL.md +157 -0
- package/templates/.agent/skills/testing-expert/SKILL.md +621 -0
- package/templates/.agent/skills/triage-expert/SKILL.md +419 -0
- package/templates/.agent/skills/typescript-expert/SKILL.md +429 -0
- package/templates/.agent/skills/typescript-type/SKILL.md +790 -0
- package/templates/.agent/skills/ui-ux-pro-max/SKILL.md +228 -0
- package/templates/.agent/skills/vite-expert/SKILL.md +785 -0
- package/templates/.agent/skills/vitest-expert/SKILL.md +325 -0
- package/templates/.agent/skills/webpack-expert/SKILL.md +745 -0
- package/templates/.agent/workflows/request.md +82 -0
- package/templates/.agent/workflows/ui-ux-pro-max.md +231 -0
- package/templates/web/README.md +36 -0
- package/templates/web/eslint.config.mjs +18 -0
- package/templates/web/next.config.ts +8 -0
- package/templates/web/package-lock.json +6549 -0
- package/templates/web/package.json +27 -0
- package/templates/web/postcss.config.mjs +7 -0
- package/templates/web/public/favicon.ico +0 -0
- package/templates/web/public/images/antigravity-kit-logo.png +0 -0
- package/templates/web/public/images/claudekit.png +0 -0
- package/templates/web/public/images/logo.png +0 -0
- package/templates/web/src/app/globals.css +276 -0
- package/templates/web/src/app/layout.tsx +55 -0
- package/templates/web/src/app/page.tsx +23 -0
- package/templates/web/src/components/Credits.tsx +162 -0
- package/templates/web/src/components/Features.tsx +92 -0
- package/templates/web/src/components/Footer.tsx +74 -0
- package/templates/web/src/components/Hero.tsx +117 -0
- package/templates/web/src/components/HowItWorks.tsx +96 -0
- package/templates/web/src/components/Navbar.tsx +87 -0
- package/templates/web/src/components/Skills.tsx +182 -0
- 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
|