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.
Files changed (61) hide show
  1. package/README.md +89 -0
  2. package/dist/cli.mjs +1738 -0
  3. package/dist/cli.mjs.map +1 -0
  4. package/dist/rules/common/typescript.mdc +21 -0
  5. package/dist/rules/react/component-conventions.mdc +24 -0
  6. package/dist/rules/react/hooks.mdc +20 -0
  7. package/dist/rules/react/react-router.mdc +18 -0
  8. package/dist/rules/react/state-management.mdc +21 -0
  9. package/dist/rules/vue/component-conventions.mdc +23 -0
  10. package/dist/rules/vue/composition-api.mdc +24 -0
  11. package/dist/rules/vue/state-management.mdc +16 -0
  12. package/dist/rules/vue/vue-router.mdc +18 -0
  13. package/dist/skills/app-ui-design/SKILL.md +62 -0
  14. package/dist/skills/app-ui-design/references/rules.md +127 -0
  15. package/dist/skills/e2e-testing/SKILL.md +327 -0
  16. package/dist/skills/eval-harness/SKILL.md +271 -0
  17. package/dist/skills/frontend-design/SKILL.md +43 -0
  18. package/dist/skills/frontend-patterns/SKILL.md +643 -0
  19. package/dist/skills/security-review/SKILL.md +496 -0
  20. package/dist/skills/tailwindcss-advanced-layouts/SKILL.md +595 -0
  21. package/dist/skills/tdd-workflow/SKILL.md +464 -0
  22. package/dist/skills/verification-loop/SKILL.md +127 -0
  23. package/dist/skills/wechat-ui-design/SKILL.md +64 -0
  24. package/dist/skills/wechat-ui-design/references/rules.md +121 -0
  25. package/dist/templates/react-rspack-ts/index.html +11 -0
  26. package/dist/templates/react-rspack-ts/package.json +20 -0
  27. package/dist/templates/react-rspack-ts/rspack.config.ts +23 -0
  28. package/dist/templates/react-rspack-ts/src/App.tsx +7 -0
  29. package/dist/templates/react-rspack-ts/src/main.tsx +9 -0
  30. package/dist/templates/react-rspack-ts/tsconfig.json +17 -0
  31. package/dist/templates/react-vite-ts/index.html +12 -0
  32. package/dist/templates/react-vite-ts/package.json +22 -0
  33. package/dist/templates/react-vite-ts/src/App.tsx +7 -0
  34. package/dist/templates/react-vite-ts/src/main.tsx +9 -0
  35. package/dist/templates/react-vite-ts/tsconfig.json +19 -0
  36. package/dist/templates/react-vite-ts/vite.config.ts +9 -0
  37. package/dist/templates/react-webpack-ts/index.html +11 -0
  38. package/dist/templates/react-webpack-ts/package.json +25 -0
  39. package/dist/templates/react-webpack-ts/src/App.tsx +7 -0
  40. package/dist/templates/react-webpack-ts/src/main.tsx +9 -0
  41. package/dist/templates/react-webpack-ts/tsconfig.json +17 -0
  42. package/dist/templates/react-webpack-ts/webpack.config.ts +29 -0
  43. package/dist/templates/vue-rspack-ts/index.html +11 -0
  44. package/dist/templates/vue-rspack-ts/package.json +18 -0
  45. package/dist/templates/vue-rspack-ts/rspack.config.ts +16 -0
  46. package/dist/templates/vue-rspack-ts/src/App.vue +7 -0
  47. package/dist/templates/vue-rspack-ts/src/main.ts +4 -0
  48. package/dist/templates/vue-rspack-ts/tsconfig.json +17 -0
  49. package/dist/templates/vue-vite-ts/index.html +12 -0
  50. package/dist/templates/vue-vite-ts/package.json +19 -0
  51. package/dist/templates/vue-vite-ts/src/App.vue +7 -0
  52. package/dist/templates/vue-vite-ts/src/main.ts +4 -0
  53. package/dist/templates/vue-vite-ts/tsconfig.json +19 -0
  54. package/dist/templates/vue-vite-ts/vite.config.ts +9 -0
  55. package/dist/templates/vue-webpack-ts/index.html +11 -0
  56. package/dist/templates/vue-webpack-ts/package.json +24 -0
  57. package/dist/templates/vue-webpack-ts/src/App.vue +7 -0
  58. package/dist/templates/vue-webpack-ts/src/main.ts +4 -0
  59. package/dist/templates/vue-webpack-ts/tsconfig.json +17 -0
  60. package/dist/templates/vue-webpack-ts/webpack.config.ts +32 -0
  61. 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
+