fe-kit-cli 0.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 +89 -0
- package/dist/cli.mjs +1738 -0
- package/dist/cli.mjs.map +1 -0
- package/dist/rules/common/typescript.mdc +21 -0
- package/dist/rules/react/component-conventions.mdc +24 -0
- package/dist/rules/react/hooks.mdc +20 -0
- package/dist/rules/react/react-router.mdc +18 -0
- package/dist/rules/react/state-management.mdc +21 -0
- package/dist/rules/vue/component-conventions.mdc +23 -0
- package/dist/rules/vue/composition-api.mdc +24 -0
- package/dist/rules/vue/state-management.mdc +16 -0
- package/dist/rules/vue/vue-router.mdc +18 -0
- package/dist/skills/app-ui-design/SKILL.md +62 -0
- package/dist/skills/app-ui-design/references/rules.md +127 -0
- package/dist/skills/e2e-testing/SKILL.md +327 -0
- package/dist/skills/eval-harness/SKILL.md +271 -0
- package/dist/skills/frontend-design/SKILL.md +43 -0
- package/dist/skills/frontend-patterns/SKILL.md +643 -0
- package/dist/skills/security-review/SKILL.md +496 -0
- package/dist/skills/tailwindcss-advanced-layouts/SKILL.md +595 -0
- package/dist/skills/tdd-workflow/SKILL.md +464 -0
- package/dist/skills/verification-loop/SKILL.md +127 -0
- package/dist/skills/wechat-ui-design/SKILL.md +64 -0
- package/dist/skills/wechat-ui-design/references/rules.md +121 -0
- package/dist/templates/react-rspack-ts/index.html +11 -0
- package/dist/templates/react-rspack-ts/package.json +20 -0
- package/dist/templates/react-rspack-ts/rspack.config.ts +23 -0
- package/dist/templates/react-rspack-ts/src/App.tsx +7 -0
- package/dist/templates/react-rspack-ts/src/main.tsx +9 -0
- package/dist/templates/react-rspack-ts/tsconfig.json +17 -0
- package/dist/templates/react-vite-ts/index.html +12 -0
- package/dist/templates/react-vite-ts/package.json +22 -0
- package/dist/templates/react-vite-ts/src/App.tsx +7 -0
- package/dist/templates/react-vite-ts/src/main.tsx +9 -0
- package/dist/templates/react-vite-ts/tsconfig.json +19 -0
- package/dist/templates/react-vite-ts/vite.config.ts +9 -0
- package/dist/templates/react-webpack-ts/index.html +11 -0
- package/dist/templates/react-webpack-ts/package.json +25 -0
- package/dist/templates/react-webpack-ts/src/App.tsx +7 -0
- package/dist/templates/react-webpack-ts/src/main.tsx +9 -0
- package/dist/templates/react-webpack-ts/tsconfig.json +17 -0
- package/dist/templates/react-webpack-ts/webpack.config.ts +29 -0
- package/dist/templates/vue-rspack-ts/index.html +11 -0
- package/dist/templates/vue-rspack-ts/package.json +18 -0
- package/dist/templates/vue-rspack-ts/rspack.config.ts +16 -0
- package/dist/templates/vue-rspack-ts/src/App.vue +7 -0
- package/dist/templates/vue-rspack-ts/src/main.ts +4 -0
- package/dist/templates/vue-rspack-ts/tsconfig.json +17 -0
- package/dist/templates/vue-vite-ts/index.html +12 -0
- package/dist/templates/vue-vite-ts/package.json +19 -0
- package/dist/templates/vue-vite-ts/src/App.vue +7 -0
- package/dist/templates/vue-vite-ts/src/main.ts +4 -0
- package/dist/templates/vue-vite-ts/tsconfig.json +19 -0
- package/dist/templates/vue-vite-ts/vite.config.ts +9 -0
- package/dist/templates/vue-webpack-ts/index.html +11 -0
- package/dist/templates/vue-webpack-ts/package.json +24 -0
- package/dist/templates/vue-webpack-ts/src/App.vue +7 -0
- package/dist/templates/vue-webpack-ts/src/main.ts +4 -0
- package/dist/templates/vue-webpack-ts/tsconfig.json +17 -0
- package/dist/templates/vue-webpack-ts/webpack.config.ts +32 -0
- package/package.json +63 -0
|
@@ -0,0 +1,464 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: tdd-workflow
|
|
3
|
+
description: Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.
|
|
4
|
+
origin: ECC
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Test-Driven Development Workflow
|
|
8
|
+
|
|
9
|
+
This skill ensures all code development follows TDD principles with comprehensive test coverage.
|
|
10
|
+
|
|
11
|
+
## When to Activate
|
|
12
|
+
|
|
13
|
+
- Writing new features or functionality
|
|
14
|
+
- Fixing bugs or issues
|
|
15
|
+
- Refactoring existing code
|
|
16
|
+
- Adding API endpoints
|
|
17
|
+
- Creating new components
|
|
18
|
+
|
|
19
|
+
## Core Principles
|
|
20
|
+
|
|
21
|
+
### 1. Tests BEFORE Code
|
|
22
|
+
ALWAYS write tests first, then implement code to make tests pass.
|
|
23
|
+
|
|
24
|
+
### 2. Coverage Requirements
|
|
25
|
+
- Minimum 80% coverage (unit + integration + E2E)
|
|
26
|
+
- All edge cases covered
|
|
27
|
+
- Error scenarios tested
|
|
28
|
+
- Boundary conditions verified
|
|
29
|
+
|
|
30
|
+
### 3. Test Types
|
|
31
|
+
|
|
32
|
+
#### Unit Tests
|
|
33
|
+
- Individual functions and utilities
|
|
34
|
+
- Component logic
|
|
35
|
+
- Pure functions
|
|
36
|
+
- Helpers and utilities
|
|
37
|
+
|
|
38
|
+
#### Integration Tests
|
|
39
|
+
- API endpoints
|
|
40
|
+
- Database operations
|
|
41
|
+
- Service interactions
|
|
42
|
+
- External API calls
|
|
43
|
+
|
|
44
|
+
#### E2E Tests (Playwright)
|
|
45
|
+
- Critical user flows
|
|
46
|
+
- Complete workflows
|
|
47
|
+
- Browser automation
|
|
48
|
+
- UI interactions
|
|
49
|
+
|
|
50
|
+
### 4. Git Checkpoints
|
|
51
|
+
- If the repository is under Git, create a checkpoint commit after each TDD stage
|
|
52
|
+
- Do not squash or rewrite these checkpoint commits until the workflow is complete
|
|
53
|
+
- Each checkpoint commit message must describe the stage and the exact evidence captured
|
|
54
|
+
- Count only commits created on the current active branch for the current task
|
|
55
|
+
- Do not treat commits from other branches, earlier unrelated work, or distant branch history as valid checkpoint evidence
|
|
56
|
+
- Before treating a checkpoint as satisfied, verify that the commit is reachable from the current `HEAD` on the active branch and belongs to the current task sequence
|
|
57
|
+
- The preferred compact workflow is:
|
|
58
|
+
- one commit for failing test added and RED validated
|
|
59
|
+
- one commit for minimal fix applied and GREEN validated
|
|
60
|
+
- one optional commit for refactor complete
|
|
61
|
+
- Separate evidence-only commits are not required if the test commit clearly corresponds to RED and the fix commit clearly corresponds to GREEN
|
|
62
|
+
|
|
63
|
+
## TDD Workflow Steps
|
|
64
|
+
|
|
65
|
+
### Step 1: Write User Journeys
|
|
66
|
+
```
|
|
67
|
+
As a [role], I want to [action], so that [benefit]
|
|
68
|
+
|
|
69
|
+
Example:
|
|
70
|
+
As a user, I want to search for markets semantically,
|
|
71
|
+
so that I can find relevant markets even without exact keywords.
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Step 2: Generate Test Cases
|
|
75
|
+
For each user journey, create comprehensive test cases:
|
|
76
|
+
|
|
77
|
+
```typescript
|
|
78
|
+
describe('Semantic Search', () => {
|
|
79
|
+
it('returns relevant markets for query', async () => {
|
|
80
|
+
// Test implementation
|
|
81
|
+
})
|
|
82
|
+
|
|
83
|
+
it('handles empty query gracefully', async () => {
|
|
84
|
+
// Test edge case
|
|
85
|
+
})
|
|
86
|
+
|
|
87
|
+
it('falls back to substring search when Redis unavailable', async () => {
|
|
88
|
+
// Test fallback behavior
|
|
89
|
+
})
|
|
90
|
+
|
|
91
|
+
it('sorts results by similarity score', async () => {
|
|
92
|
+
// Test sorting logic
|
|
93
|
+
})
|
|
94
|
+
})
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Step 3: Run Tests (They Should Fail)
|
|
98
|
+
```bash
|
|
99
|
+
npm test
|
|
100
|
+
# Tests should fail - we haven't implemented yet
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
This step is mandatory and is the RED gate for all production changes.
|
|
104
|
+
|
|
105
|
+
Before modifying business logic or other production code, you must verify a valid RED state via one of these paths:
|
|
106
|
+
- Runtime RED:
|
|
107
|
+
- The relevant test target compiles successfully
|
|
108
|
+
- The new or changed test is actually executed
|
|
109
|
+
- The result is RED
|
|
110
|
+
- Compile-time RED:
|
|
111
|
+
- The new test newly instantiates, references, or exercises the buggy code path
|
|
112
|
+
- The compile failure is itself the intended RED signal
|
|
113
|
+
- In either case, the failure is caused by the intended business-logic bug, undefined behavior, or missing implementation
|
|
114
|
+
- The failure is not caused only by unrelated syntax errors, broken test setup, missing dependencies, or unrelated regressions
|
|
115
|
+
|
|
116
|
+
A test that was only written but not compiled and executed does not count as RED.
|
|
117
|
+
|
|
118
|
+
Do not edit production code until this RED state is confirmed.
|
|
119
|
+
|
|
120
|
+
If the repository is under Git, create a checkpoint commit immediately after this stage is validated.
|
|
121
|
+
Recommended commit message format:
|
|
122
|
+
- `test: add reproducer for <feature or bug>`
|
|
123
|
+
- This commit may also serve as the RED validation checkpoint if the reproducer was compiled and executed and failed for the intended reason
|
|
124
|
+
- Verify that this checkpoint commit is on the current active branch before continuing
|
|
125
|
+
|
|
126
|
+
### Step 4: Implement Code
|
|
127
|
+
Write minimal code to make tests pass:
|
|
128
|
+
|
|
129
|
+
```typescript
|
|
130
|
+
// Implementation guided by tests
|
|
131
|
+
export async function searchMarkets(query: string) {
|
|
132
|
+
// Implementation here
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
If the repository is under Git, stage the minimal fix now but defer the checkpoint commit until GREEN is validated in Step 5.
|
|
137
|
+
|
|
138
|
+
### Step 5: Run Tests Again
|
|
139
|
+
```bash
|
|
140
|
+
npm test
|
|
141
|
+
# Tests should now pass
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
Rerun the same relevant test target after the fix and confirm the previously failing test is now GREEN.
|
|
145
|
+
|
|
146
|
+
Only after a valid GREEN result may you proceed to refactor.
|
|
147
|
+
|
|
148
|
+
If the repository is under Git, create a checkpoint commit immediately after GREEN is validated.
|
|
149
|
+
Recommended commit message format:
|
|
150
|
+
- `fix: <feature or bug>`
|
|
151
|
+
- The fix commit may also serve as the GREEN validation checkpoint if the same relevant test target was rerun and passed
|
|
152
|
+
- Verify that this checkpoint commit is on the current active branch before continuing
|
|
153
|
+
|
|
154
|
+
### Step 6: Refactor
|
|
155
|
+
Improve code quality while keeping tests green:
|
|
156
|
+
- Remove duplication
|
|
157
|
+
- Improve naming
|
|
158
|
+
- Optimize performance
|
|
159
|
+
- Enhance readability
|
|
160
|
+
|
|
161
|
+
If the repository is under Git, create a checkpoint commit immediately after refactoring is complete and tests remain green.
|
|
162
|
+
Recommended commit message format:
|
|
163
|
+
- `refactor: clean up after <feature or bug> implementation`
|
|
164
|
+
- Verify that this checkpoint commit is on the current active branch before considering the TDD cycle complete
|
|
165
|
+
|
|
166
|
+
### Step 7: Verify Coverage
|
|
167
|
+
```bash
|
|
168
|
+
npm run test:coverage
|
|
169
|
+
# Verify 80%+ coverage achieved
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
## Testing Patterns
|
|
173
|
+
|
|
174
|
+
### Unit Test Pattern (Jest/Vitest)
|
|
175
|
+
```typescript
|
|
176
|
+
import { render, screen, fireEvent } from '@testing-library/react'
|
|
177
|
+
import { Button } from './Button'
|
|
178
|
+
|
|
179
|
+
describe('Button Component', () => {
|
|
180
|
+
it('renders with correct text', () => {
|
|
181
|
+
render(<Button>Click me</Button>)
|
|
182
|
+
expect(screen.getByText('Click me')).toBeInTheDocument()
|
|
183
|
+
})
|
|
184
|
+
|
|
185
|
+
it('calls onClick when clicked', () => {
|
|
186
|
+
const handleClick = jest.fn()
|
|
187
|
+
render(<Button onClick={handleClick}>Click</Button>)
|
|
188
|
+
|
|
189
|
+
fireEvent.click(screen.getByRole('button'))
|
|
190
|
+
|
|
191
|
+
expect(handleClick).toHaveBeenCalledTimes(1)
|
|
192
|
+
})
|
|
193
|
+
|
|
194
|
+
it('is disabled when disabled prop is true', () => {
|
|
195
|
+
render(<Button disabled>Click</Button>)
|
|
196
|
+
expect(screen.getByRole('button')).toBeDisabled()
|
|
197
|
+
})
|
|
198
|
+
})
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
### API Integration Test Pattern
|
|
202
|
+
```typescript
|
|
203
|
+
import { NextRequest } from 'next/server'
|
|
204
|
+
import { GET } from './route'
|
|
205
|
+
|
|
206
|
+
describe('GET /api/markets', () => {
|
|
207
|
+
it('returns markets successfully', async () => {
|
|
208
|
+
const request = new NextRequest('http://localhost/api/markets')
|
|
209
|
+
const response = await GET(request)
|
|
210
|
+
const data = await response.json()
|
|
211
|
+
|
|
212
|
+
expect(response.status).toBe(200)
|
|
213
|
+
expect(data.success).toBe(true)
|
|
214
|
+
expect(Array.isArray(data.data)).toBe(true)
|
|
215
|
+
})
|
|
216
|
+
|
|
217
|
+
it('validates query parameters', async () => {
|
|
218
|
+
const request = new NextRequest('http://localhost/api/markets?limit=invalid')
|
|
219
|
+
const response = await GET(request)
|
|
220
|
+
|
|
221
|
+
expect(response.status).toBe(400)
|
|
222
|
+
})
|
|
223
|
+
|
|
224
|
+
it('handles database errors gracefully', async () => {
|
|
225
|
+
// Mock database failure
|
|
226
|
+
const request = new NextRequest('http://localhost/api/markets')
|
|
227
|
+
// Test error handling
|
|
228
|
+
})
|
|
229
|
+
})
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
### E2E Test Pattern (Playwright)
|
|
233
|
+
```typescript
|
|
234
|
+
import { test, expect } from '@playwright/test'
|
|
235
|
+
|
|
236
|
+
test('user can search and filter markets', async ({ page }) => {
|
|
237
|
+
// Navigate to markets page
|
|
238
|
+
await page.goto('/')
|
|
239
|
+
await page.click('a[href="/markets"]')
|
|
240
|
+
|
|
241
|
+
// Verify page loaded
|
|
242
|
+
await expect(page.locator('h1')).toContainText('Markets')
|
|
243
|
+
|
|
244
|
+
// Search for markets
|
|
245
|
+
await page.fill('input[placeholder="Search markets"]', 'election')
|
|
246
|
+
|
|
247
|
+
// Wait for debounce and results
|
|
248
|
+
await page.waitForTimeout(600)
|
|
249
|
+
|
|
250
|
+
// Verify search results displayed
|
|
251
|
+
const results = page.locator('[data-testid="market-card"]')
|
|
252
|
+
await expect(results).toHaveCount(5, { timeout: 5000 })
|
|
253
|
+
|
|
254
|
+
// Verify results contain search term
|
|
255
|
+
const firstResult = results.first()
|
|
256
|
+
await expect(firstResult).toContainText('election', { ignoreCase: true })
|
|
257
|
+
|
|
258
|
+
// Filter by status
|
|
259
|
+
await page.click('button:has-text("Active")')
|
|
260
|
+
|
|
261
|
+
// Verify filtered results
|
|
262
|
+
await expect(results).toHaveCount(3)
|
|
263
|
+
})
|
|
264
|
+
|
|
265
|
+
test('user can create a new market', async ({ page }) => {
|
|
266
|
+
// Login first
|
|
267
|
+
await page.goto('/creator-dashboard')
|
|
268
|
+
|
|
269
|
+
// Fill market creation form
|
|
270
|
+
await page.fill('input[name="name"]', 'Test Market')
|
|
271
|
+
await page.fill('textarea[name="description"]', 'Test description')
|
|
272
|
+
await page.fill('input[name="endDate"]', '2025-12-31')
|
|
273
|
+
|
|
274
|
+
// Submit form
|
|
275
|
+
await page.click('button[type="submit"]')
|
|
276
|
+
|
|
277
|
+
// Verify success message
|
|
278
|
+
await expect(page.locator('text=Market created successfully')).toBeVisible()
|
|
279
|
+
|
|
280
|
+
// Verify redirect to market page
|
|
281
|
+
await expect(page).toHaveURL(/\/markets\/test-market/)
|
|
282
|
+
})
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
## Test File Organization
|
|
286
|
+
|
|
287
|
+
```
|
|
288
|
+
src/
|
|
289
|
+
├── components/
|
|
290
|
+
│ ├── Button/
|
|
291
|
+
│ │ ├── Button.tsx
|
|
292
|
+
│ │ ├── Button.test.tsx # Unit tests
|
|
293
|
+
│ │ └── Button.stories.tsx # Storybook
|
|
294
|
+
│ └── MarketCard/
|
|
295
|
+
│ ├── MarketCard.tsx
|
|
296
|
+
│ └── MarketCard.test.tsx
|
|
297
|
+
├── app/
|
|
298
|
+
│ └── api/
|
|
299
|
+
│ └── markets/
|
|
300
|
+
│ ├── route.ts
|
|
301
|
+
│ └── route.test.ts # Integration tests
|
|
302
|
+
└── e2e/
|
|
303
|
+
├── markets.spec.ts # E2E tests
|
|
304
|
+
├── trading.spec.ts
|
|
305
|
+
└── auth.spec.ts
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
## Mocking External Services
|
|
309
|
+
|
|
310
|
+
### Supabase Mock
|
|
311
|
+
```typescript
|
|
312
|
+
jest.mock('@/lib/supabase', () => ({
|
|
313
|
+
supabase: {
|
|
314
|
+
from: jest.fn(() => ({
|
|
315
|
+
select: jest.fn(() => ({
|
|
316
|
+
eq: jest.fn(() => Promise.resolve({
|
|
317
|
+
data: [{ id: 1, name: 'Test Market' }],
|
|
318
|
+
error: null
|
|
319
|
+
}))
|
|
320
|
+
}))
|
|
321
|
+
}))
|
|
322
|
+
}
|
|
323
|
+
}))
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
### Redis Mock
|
|
327
|
+
```typescript
|
|
328
|
+
jest.mock('@/lib/redis', () => ({
|
|
329
|
+
searchMarketsByVector: jest.fn(() => Promise.resolve([
|
|
330
|
+
{ slug: 'test-market', similarity_score: 0.95 }
|
|
331
|
+
])),
|
|
332
|
+
checkRedisHealth: jest.fn(() => Promise.resolve({ connected: true }))
|
|
333
|
+
}))
|
|
334
|
+
```
|
|
335
|
+
|
|
336
|
+
### OpenAI Mock
|
|
337
|
+
```typescript
|
|
338
|
+
jest.mock('@/lib/openai', () => ({
|
|
339
|
+
generateEmbedding: jest.fn(() => Promise.resolve(
|
|
340
|
+
new Array(1536).fill(0.1) // Mock 1536-dim embedding
|
|
341
|
+
))
|
|
342
|
+
}))
|
|
343
|
+
```
|
|
344
|
+
|
|
345
|
+
## Test Coverage Verification
|
|
346
|
+
|
|
347
|
+
### Run Coverage Report
|
|
348
|
+
```bash
|
|
349
|
+
npm run test:coverage
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
### Coverage Thresholds
|
|
353
|
+
```json
|
|
354
|
+
{
|
|
355
|
+
"jest": {
|
|
356
|
+
"coverageThresholds": {
|
|
357
|
+
"global": {
|
|
358
|
+
"branches": 80,
|
|
359
|
+
"functions": 80,
|
|
360
|
+
"lines": 80,
|
|
361
|
+
"statements": 80
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
```
|
|
367
|
+
|
|
368
|
+
## Common Testing Mistakes to Avoid
|
|
369
|
+
|
|
370
|
+
### FAIL: WRONG: Testing Implementation Details
|
|
371
|
+
```typescript
|
|
372
|
+
// Don't test internal state
|
|
373
|
+
expect(component.state.count).toBe(5)
|
|
374
|
+
```
|
|
375
|
+
|
|
376
|
+
### PASS: CORRECT: Test User-Visible Behavior
|
|
377
|
+
```typescript
|
|
378
|
+
// Test what users see
|
|
379
|
+
expect(screen.getByText('Count: 5')).toBeInTheDocument()
|
|
380
|
+
```
|
|
381
|
+
|
|
382
|
+
### FAIL: WRONG: Brittle Selectors
|
|
383
|
+
```typescript
|
|
384
|
+
// Breaks easily
|
|
385
|
+
await page.click('.css-class-xyz')
|
|
386
|
+
```
|
|
387
|
+
|
|
388
|
+
### PASS: CORRECT: Semantic Selectors
|
|
389
|
+
```typescript
|
|
390
|
+
// Resilient to changes
|
|
391
|
+
await page.click('button:has-text("Submit")')
|
|
392
|
+
await page.click('[data-testid="submit-button"]')
|
|
393
|
+
```
|
|
394
|
+
|
|
395
|
+
### FAIL: WRONG: No Test Isolation
|
|
396
|
+
```typescript
|
|
397
|
+
// Tests depend on each other
|
|
398
|
+
test('creates user', () => { /* ... */ })
|
|
399
|
+
test('updates same user', () => { /* depends on previous test */ })
|
|
400
|
+
```
|
|
401
|
+
|
|
402
|
+
### PASS: CORRECT: Independent Tests
|
|
403
|
+
```typescript
|
|
404
|
+
// Each test sets up its own data
|
|
405
|
+
test('creates user', () => {
|
|
406
|
+
const user = createTestUser()
|
|
407
|
+
// Test logic
|
|
408
|
+
})
|
|
409
|
+
|
|
410
|
+
test('updates user', () => {
|
|
411
|
+
const user = createTestUser()
|
|
412
|
+
// Update logic
|
|
413
|
+
})
|
|
414
|
+
```
|
|
415
|
+
|
|
416
|
+
## Continuous Testing
|
|
417
|
+
|
|
418
|
+
### Watch Mode During Development
|
|
419
|
+
```bash
|
|
420
|
+
npm test -- --watch
|
|
421
|
+
# Tests run automatically on file changes
|
|
422
|
+
```
|
|
423
|
+
|
|
424
|
+
### Pre-Commit Hook
|
|
425
|
+
```bash
|
|
426
|
+
# Runs before every commit
|
|
427
|
+
npm test && npm run lint
|
|
428
|
+
```
|
|
429
|
+
|
|
430
|
+
### CI/CD Integration
|
|
431
|
+
```yaml
|
|
432
|
+
# GitHub Actions
|
|
433
|
+
- name: Run Tests
|
|
434
|
+
run: npm test -- --coverage
|
|
435
|
+
- name: Upload Coverage
|
|
436
|
+
uses: codecov/codecov-action@v3
|
|
437
|
+
```
|
|
438
|
+
|
|
439
|
+
## Best Practices
|
|
440
|
+
|
|
441
|
+
1. **Write Tests First** - Always TDD
|
|
442
|
+
2. **One Assert Per Test** - Focus on single behavior
|
|
443
|
+
3. **Descriptive Test Names** - Explain what's tested
|
|
444
|
+
4. **Arrange-Act-Assert** - Clear test structure
|
|
445
|
+
5. **Mock External Dependencies** - Isolate unit tests
|
|
446
|
+
6. **Test Edge Cases** - Null, undefined, empty, large
|
|
447
|
+
7. **Test Error Paths** - Not just happy paths
|
|
448
|
+
8. **Keep Tests Fast** - Unit tests < 50ms each
|
|
449
|
+
9. **Clean Up After Tests** - No side effects
|
|
450
|
+
10. **Review Coverage Reports** - Identify gaps
|
|
451
|
+
|
|
452
|
+
## Success Metrics
|
|
453
|
+
|
|
454
|
+
- 80%+ code coverage achieved
|
|
455
|
+
- All tests passing (green)
|
|
456
|
+
- No skipped or disabled tests
|
|
457
|
+
- Fast test execution (< 30s for unit tests)
|
|
458
|
+
- E2E tests cover critical user flows
|
|
459
|
+
- Tests catch bugs before production
|
|
460
|
+
|
|
461
|
+
---
|
|
462
|
+
|
|
463
|
+
**Remember**: Tests are not optional. They are the safety net that enables confident refactoring, rapid development, and production reliability.
|
|
464
|
+
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: verification-loop
|
|
3
|
+
description: "A comprehensive verification system for Claude Code sessions."
|
|
4
|
+
origin: ECC
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Verification Loop Skill
|
|
8
|
+
|
|
9
|
+
A comprehensive verification system for Claude Code sessions.
|
|
10
|
+
|
|
11
|
+
## When to Use
|
|
12
|
+
|
|
13
|
+
Invoke this skill:
|
|
14
|
+
- After completing a feature or significant code change
|
|
15
|
+
- Before creating a PR
|
|
16
|
+
- When you want to ensure quality gates pass
|
|
17
|
+
- After refactoring
|
|
18
|
+
|
|
19
|
+
## Verification Phases
|
|
20
|
+
|
|
21
|
+
### Phase 1: Build Verification
|
|
22
|
+
```bash
|
|
23
|
+
# Check if project builds
|
|
24
|
+
npm run build 2>&1 | tail -20
|
|
25
|
+
# OR
|
|
26
|
+
pnpm build 2>&1 | tail -20
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
If build fails, STOP and fix before continuing.
|
|
30
|
+
|
|
31
|
+
### Phase 2: Type Check
|
|
32
|
+
```bash
|
|
33
|
+
# TypeScript projects
|
|
34
|
+
npx tsc --noEmit 2>&1 | head -30
|
|
35
|
+
|
|
36
|
+
# Python projects
|
|
37
|
+
pyright . 2>&1 | head -30
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Report all type errors. Fix critical ones before continuing.
|
|
41
|
+
|
|
42
|
+
### Phase 3: Lint Check
|
|
43
|
+
```bash
|
|
44
|
+
# JavaScript/TypeScript
|
|
45
|
+
npm run lint 2>&1 | head -30
|
|
46
|
+
|
|
47
|
+
# Python
|
|
48
|
+
ruff check . 2>&1 | head -30
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Phase 4: Test Suite
|
|
52
|
+
```bash
|
|
53
|
+
# Run tests with coverage
|
|
54
|
+
npm run test -- --coverage 2>&1 | tail -50
|
|
55
|
+
|
|
56
|
+
# Check coverage threshold
|
|
57
|
+
# Target: 80% minimum
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Report:
|
|
61
|
+
- Total tests: X
|
|
62
|
+
- Passed: X
|
|
63
|
+
- Failed: X
|
|
64
|
+
- Coverage: X%
|
|
65
|
+
|
|
66
|
+
### Phase 5: Security Scan
|
|
67
|
+
```bash
|
|
68
|
+
# Check for secrets
|
|
69
|
+
grep -rn "sk-" --include="*.ts" --include="*.js" . 2>/dev/null | head -10
|
|
70
|
+
grep -rn "api_key" --include="*.ts" --include="*.js" . 2>/dev/null | head -10
|
|
71
|
+
|
|
72
|
+
# Check for console.log
|
|
73
|
+
grep -rn "console.log" --include="*.ts" --include="*.tsx" src/ 2>/dev/null | head -10
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Phase 6: Diff Review
|
|
77
|
+
```bash
|
|
78
|
+
# Show what changed
|
|
79
|
+
git diff --stat
|
|
80
|
+
git diff HEAD~1 --name-only
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Review each changed file for:
|
|
84
|
+
- Unintended changes
|
|
85
|
+
- Missing error handling
|
|
86
|
+
- Potential edge cases
|
|
87
|
+
|
|
88
|
+
## Output Format
|
|
89
|
+
|
|
90
|
+
After running all phases, produce a verification report:
|
|
91
|
+
|
|
92
|
+
```
|
|
93
|
+
VERIFICATION REPORT
|
|
94
|
+
==================
|
|
95
|
+
|
|
96
|
+
Build: [PASS/FAIL]
|
|
97
|
+
Types: [PASS/FAIL] (X errors)
|
|
98
|
+
Lint: [PASS/FAIL] (X warnings)
|
|
99
|
+
Tests: [PASS/FAIL] (X/Y passed, Z% coverage)
|
|
100
|
+
Security: [PASS/FAIL] (X issues)
|
|
101
|
+
Diff: [X files changed]
|
|
102
|
+
|
|
103
|
+
Overall: [READY/NOT READY] for PR
|
|
104
|
+
|
|
105
|
+
Issues to Fix:
|
|
106
|
+
1. ...
|
|
107
|
+
2. ...
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Continuous Mode
|
|
111
|
+
|
|
112
|
+
For long sessions, run verification every 15 minutes or after major changes:
|
|
113
|
+
|
|
114
|
+
```markdown
|
|
115
|
+
Set a mental checkpoint:
|
|
116
|
+
- After completing each function
|
|
117
|
+
- After finishing a component
|
|
118
|
+
- Before moving to next task
|
|
119
|
+
|
|
120
|
+
Run: /verify
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## Integration with Hooks
|
|
124
|
+
|
|
125
|
+
This skill complements PostToolUse hooks but provides deeper verification.
|
|
126
|
+
Hooks catch issues immediately; this skill provides comprehensive review.
|
|
127
|
+
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: wechat-ui-design
|
|
3
|
+
description: Review UI code for WeChat Official Account / Mini Program UI rules compliance. Use when the user asks to “检查 UI 规范/对齐规范/审查页面”, “review UI”, “check accessibility/UX”, “按官微/小程序规范检查”, or wants a terse issues list in `file:line - finding` format plus a final `✓ pass` when clean.
|
|
4
|
+
metadata:
|
|
5
|
+
author: internal
|
|
6
|
+
version: "2.0.0"
|
|
7
|
+
argument-hint: <file-or-pattern>
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# WeChat UI Design Guidelines Checker
|
|
11
|
+
|
|
12
|
+
在开发过程中,按“官微/小程序 UI 设计规范”对指定文件进行快速审查,输出**可定位、可执行**的问题清单。
|
|
13
|
+
|
|
14
|
+
输出风格对齐 Web Interface Guidelines:**先拉取最新规范 → 读取目标文件 → 按固定格式输出问题**。
|
|
15
|
+
|
|
16
|
+
## How It Works
|
|
17
|
+
|
|
18
|
+
1. 读取最新的 UI 规范规则文件(见下方 Source)
|
|
19
|
+
2. 读取用户指定的文件/目录/模式(前端代码、样式文件、设计稿标注文档等)
|
|
20
|
+
3. 对照规则逐条检查,产出**可定位**的问题列表
|
|
21
|
+
4. 若无问题:输出 `✓ pass`
|
|
22
|
+
|
|
23
|
+
## Guidelines Source
|
|
24
|
+
|
|
25
|
+
默认从仓库内的规则说明文件读取(你可以把它当作“本项目的 WeChat UI 规范单一真源”):
|
|
26
|
+
|
|
27
|
+
- `src/skills/wechat-ui-design/references/rules.md`
|
|
28
|
+
|
|
29
|
+
可选:如果你把规则托管到远程(例如 GitHub Raw),审查时应优先从远程拉取最新版本,再进行检查。
|
|
30
|
+
|
|
31
|
+
要求:每次审查前都要确保读取的是**最新内容**(如果规则文件被更新了,重新读取即可)。
|
|
32
|
+
|
|
33
|
+
## Usage
|
|
34
|
+
|
|
35
|
+
当用户提供 `<file-or-pattern>` 时:
|
|
36
|
+
|
|
37
|
+
1. 读取 `references/rules.md`(作为审查规则)
|
|
38
|
+
2. 读取并遍历用户目标(单文件、目录或 glob pattern)
|
|
39
|
+
3. 按规则检查并输出发现
|
|
40
|
+
|
|
41
|
+
当用户没有提供 `<file-or-pattern>` 时:询问需要审查的文件/目录/模式。
|
|
42
|
+
|
|
43
|
+
## Output Format (MUST)
|
|
44
|
+
|
|
45
|
+
输出必须是**简洁问题列表**,每条一行,格式如下(示例):
|
|
46
|
+
|
|
47
|
+
```text
|
|
48
|
+
path/to/file.tsx:123 - [wechat-ui] <finding>
|
|
49
|
+
path/to/file.css:45 - [wechat-ui] <finding>
|
|
50
|
+
✓ pass - no wechat-ui issues found
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
规则:
|
|
54
|
+
|
|
55
|
+
- 每条 finding 必须能落地为“可执行动作”(要改什么/怎么对齐),不要写成散文
|
|
56
|
+
- 尽可能给出最具体的定位(文件路径 + 行号)
|
|
57
|
+
- 若无法精确到行号(例如仅能判断组件结构/布局语义),至少要定位到文件,并在 finding 中写明“无法精确行号”的原因
|
|
58
|
+
- 避免把“软方向/品牌调性”当作硬验收;若引用软方向,必须同时给出可执行的约束(例如“颜色饱和度不超过 X / 对比度不低于 Y / 字号范围”)
|
|
59
|
+
|
|
60
|
+
## Scope Notes
|
|
61
|
+
|
|
62
|
+
- 本 skill 只做“对照规则的 UI 审查”,不负责从手册抽取规则;规则维护请直接更新 `references/rules.md`
|
|
63
|
+
- 如果规则文件里存在“示例值 / 可能 OCR 错误”,审查时应以规则文件的归一化结果为准,并在 finding 中引用对应条目说明
|
|
64
|
+
|