omgkit 2.1.0 → 2.2.0

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 (56) hide show
  1. package/package.json +1 -1
  2. package/plugin/skills/SKILL_STANDARDS.md +743 -0
  3. package/plugin/skills/databases/mongodb/SKILL.md +797 -28
  4. package/plugin/skills/databases/postgresql/SKILL.md +494 -18
  5. package/plugin/skills/databases/prisma/SKILL.md +776 -30
  6. package/plugin/skills/databases/redis/SKILL.md +885 -25
  7. package/plugin/skills/devops/aws/SKILL.md +686 -28
  8. package/plugin/skills/devops/docker/SKILL.md +466 -18
  9. package/plugin/skills/devops/github-actions/SKILL.md +684 -29
  10. package/plugin/skills/devops/kubernetes/SKILL.md +621 -24
  11. package/plugin/skills/frameworks/django/SKILL.md +920 -20
  12. package/plugin/skills/frameworks/express/SKILL.md +1361 -35
  13. package/plugin/skills/frameworks/fastapi/SKILL.md +1260 -33
  14. package/plugin/skills/frameworks/laravel/SKILL.md +1244 -31
  15. package/plugin/skills/frameworks/nestjs/SKILL.md +1005 -26
  16. package/plugin/skills/frameworks/nextjs/SKILL.md +407 -44
  17. package/plugin/skills/frameworks/rails/SKILL.md +594 -28
  18. package/plugin/skills/frameworks/react/SKILL.md +1006 -32
  19. package/plugin/skills/frameworks/spring/SKILL.md +528 -35
  20. package/plugin/skills/frameworks/vue/SKILL.md +1296 -27
  21. package/plugin/skills/frontend/accessibility/SKILL.md +1108 -34
  22. package/plugin/skills/frontend/frontend-design/SKILL.md +1304 -26
  23. package/plugin/skills/frontend/responsive/SKILL.md +847 -21
  24. package/plugin/skills/frontend/shadcn-ui/SKILL.md +976 -38
  25. package/plugin/skills/frontend/tailwindcss/SKILL.md +831 -35
  26. package/plugin/skills/frontend/threejs/SKILL.md +1298 -29
  27. package/plugin/skills/languages/javascript/SKILL.md +935 -31
  28. package/plugin/skills/languages/python/SKILL.md +489 -25
  29. package/plugin/skills/languages/typescript/SKILL.md +379 -30
  30. package/plugin/skills/methodology/brainstorming/SKILL.md +597 -23
  31. package/plugin/skills/methodology/defense-in-depth/SKILL.md +832 -34
  32. package/plugin/skills/methodology/dispatching-parallel-agents/SKILL.md +665 -31
  33. package/plugin/skills/methodology/executing-plans/SKILL.md +556 -24
  34. package/plugin/skills/methodology/finishing-development-branch/SKILL.md +595 -25
  35. package/plugin/skills/methodology/problem-solving/SKILL.md +429 -61
  36. package/plugin/skills/methodology/receiving-code-review/SKILL.md +536 -24
  37. package/plugin/skills/methodology/requesting-code-review/SKILL.md +632 -21
  38. package/plugin/skills/methodology/root-cause-tracing/SKILL.md +641 -30
  39. package/plugin/skills/methodology/sequential-thinking/SKILL.md +262 -3
  40. package/plugin/skills/methodology/systematic-debugging/SKILL.md +571 -32
  41. package/plugin/skills/methodology/test-driven-development/SKILL.md +779 -24
  42. package/plugin/skills/methodology/testing-anti-patterns/SKILL.md +691 -29
  43. package/plugin/skills/methodology/token-optimization/SKILL.md +598 -29
  44. package/plugin/skills/methodology/verification-before-completion/SKILL.md +543 -22
  45. package/plugin/skills/methodology/writing-plans/SKILL.md +590 -18
  46. package/plugin/skills/omega/omega-architecture/SKILL.md +838 -39
  47. package/plugin/skills/omega/omega-coding/SKILL.md +636 -39
  48. package/plugin/skills/omega/omega-sprint/SKILL.md +855 -48
  49. package/plugin/skills/omega/omega-testing/SKILL.md +940 -41
  50. package/plugin/skills/omega/omega-thinking/SKILL.md +703 -50
  51. package/plugin/skills/security/better-auth/SKILL.md +1065 -28
  52. package/plugin/skills/security/oauth/SKILL.md +968 -31
  53. package/plugin/skills/security/owasp/SKILL.md +894 -33
  54. package/plugin/skills/testing/playwright/SKILL.md +764 -38
  55. package/plugin/skills/testing/pytest/SKILL.md +873 -36
  56. package/plugin/skills/testing/vitest/SKILL.md +980 -35
@@ -0,0 +1,743 @@
1
+ # OMGKIT Skill Standards v2.0
2
+
3
+ > Claude-Standard, BigTech-Level Skill Development Guidelines
4
+ > *Aligned with Agent-Quality Documentation*
5
+
6
+ This document defines the quality standards for all OMGKIT skills. Every skill MUST follow these guidelines to ensure consistency, comprehensiveness, and production-readiness.
7
+
8
+ ---
9
+
10
+ ## 1. Frontmatter Requirements
11
+
12
+ Every skill MUST have complete YAML frontmatter:
13
+
14
+ ```yaml
15
+ ---
16
+ name: skill-name
17
+ description: One-line description of what the skill does and when to use it
18
+ category: category-name # One of: backend, databases, devops, frameworks, frontend, integrations, languages, methodology, mobile, omega, security, testing, tools
19
+ triggers:
20
+ - keyword1
21
+ - keyword2
22
+ - phrase trigger
23
+ - technology name
24
+ ---
25
+ ```
26
+
27
+ ### Frontmatter Rules:
28
+ - `name`: lowercase, hyphen-separated (e.g., `api-architecture`)
29
+ - `description`: 60-120 characters, action-oriented (e.g., "Enterprise API design with REST, GraphQL patterns")
30
+ - `category`: MUST be one of the defined categories
31
+ - `triggers`: 5-10 keywords/phrases that should activate this skill
32
+
33
+ ---
34
+
35
+ ## 2. Document Structure (Agent-Aligned)
36
+
37
+ Every skill MUST follow this structure in order:
38
+
39
+ ```markdown
40
+ # Skill Name
41
+
42
+ {One paragraph overview - 2-3 sentences explaining the skill at a high level}
43
+
44
+ ## Core Philosophy ← NEW: Required Section
45
+
46
+ > "A memorable quote or principle that captures the essence"
47
+
48
+ {2-3 paragraphs explaining WHY this technology/approach matters.
49
+ What mental model should developers adopt?}
50
+
51
+ ### Guiding Principles
52
+ 1. **Principle Name**: Brief explanation
53
+ 2. **Principle Name**: Brief explanation
54
+ 3. **Principle Name**: Brief explanation (minimum 3)
55
+
56
+ ## Purpose
57
+
58
+ {Why this skill matters and when to use it}
59
+
60
+ - Bullet point 1
61
+ - Bullet point 2
62
+ - Bullet point 3 (minimum 5 points)
63
+
64
+ ## Features
65
+
66
+ ### 1. Feature Name
67
+
68
+ {Brief explanation}
69
+
70
+ ```language
71
+ {Production-ready code example}
72
+ ```
73
+
74
+ ### 2. Feature Name
75
+ ...
76
+
77
+ ### N. Feature Name (minimum 5 features)
78
+ ...
79
+
80
+ ## Decision Framework ← NEW: Required Section
81
+
82
+ ### When to Use [Pattern A] vs [Pattern B]
83
+
84
+ | Decision Point | Pattern A | Pattern B |
85
+ |---|---|---|
86
+ | Use when... | Condition | Condition |
87
+ | Avoid when... | Condition | Condition |
88
+
89
+ ### Decision Tree
90
+ ```
91
+ Question 1?
92
+ ├─ Yes: Use Pattern A
93
+ └─ No: Question 2?
94
+ ├─ Yes: Use Pattern B
95
+ └─ No: Use Pattern C
96
+ ```
97
+
98
+ ## Use Cases
99
+
100
+ ### Use Case 1: [Industry Context]
101
+ ```language
102
+ {Real-world implementation}
103
+ ```
104
+
105
+ ### Use Case 2
106
+ ...
107
+
108
+ ## Anti-Patterns ← ENHANCED: Visual Formatting
109
+
110
+ ### ❌ Anti-Pattern Name
111
+ ```language
112
+ // Wrong approach
113
+ {bad code example}
114
+ ```
115
+ **Why it's problematic**:
116
+ - Reason 1
117
+ - Reason 2
118
+
119
+ ### ✅ Correct Approach
120
+ ```language
121
+ // Better approach
122
+ {good code example}
123
+ ```
124
+
125
+ ## Best Practices
126
+
127
+ ### Do's
128
+ - ✓ Practice 1 - *Brief explanation*
129
+ - ✓ Practice 2 - *Brief explanation* (minimum 5)
130
+
131
+ ### Don'ts
132
+ - ✗ Anti-pattern 1 - *Why it's bad*
133
+ - ✗ Anti-pattern 2 - *Why it's bad* (minimum 5)
134
+
135
+ ## Scaling Considerations ← NEW: Required for Technical Skills
136
+
137
+ ### At Small Scale (1K-10K)
138
+ - Configuration/recommendation
139
+
140
+ ### At Medium Scale (10K-100K)
141
+ - Configuration/recommendation
142
+
143
+ ### At Large Scale (100K+)
144
+ - Configuration/recommendation
145
+
146
+ ## Commands ← NEW: Optional but Recommended
147
+
148
+ - `/skill:action` - Description
149
+ - `/skill:variant` - Description
150
+
151
+ ## Related Skills
152
+
153
+ - **skill-name** - How it relates
154
+ - **skill-name** - How it relates (minimum 3)
155
+
156
+ ## References
157
+
158
+ - [Link 1](url)
159
+ - [Link 2](url) (minimum 3 references)
160
+ ```
161
+
162
+ ---
163
+
164
+ ## 3. Content Quality Standards
165
+
166
+ ### 3.1 Overview Paragraph
167
+ - MUST be 2-3 sentences
168
+ - MUST include bold emphasis on key technology
169
+ - MUST mention "following industry best practices" or similar
170
+ - Example: "Enterprise-grade **TypeScript development** following industry best practices."
171
+
172
+ ### 3.2 Core Philosophy Section (NEW)
173
+ - MUST open with a memorable quote or principle
174
+ - MUST explain the "why" at a conceptual level
175
+ - MUST include 3+ guiding principles
176
+ - Should help developers build mental models
177
+ - Example structure:
178
+ ```markdown
179
+ ## Core Philosophy
180
+
181
+ > "Design for the access patterns, not the data model."
182
+
183
+ MongoDB excels when you think about how data will be queried rather than
184
+ how it's related. Unlike relational databases that normalize first and
185
+ join later, document databases let you structure data around your queries.
186
+
187
+ ### Guiding Principles
188
+ 1. **Access Pattern First**: Define your queries before designing schemas
189
+ 2. **Strategic Denormalization**: Store related data together when read together
190
+ 3. **Indexing Strategy**: Every query should have an index
191
+ ```
192
+
193
+ ### 3.3 Purpose Section
194
+ - MUST explain the "why" not just the "what"
195
+ - MUST include at least 5 specific capabilities
196
+ - MUST be action-oriented (e.g., "Design APIs that scale")
197
+
198
+ ### 3.4 Features Section
199
+ - MUST have at least 5 numbered features (### 1., ### 2., etc.)
200
+ - MUST include production-ready code examples
201
+ - Code examples MUST be:
202
+ - Complete (not snippets with `...`)
203
+ - Properly typed (for typed languages)
204
+ - Include comments explaining key concepts
205
+ - Follow the technology's best practices
206
+
207
+ ### 3.5 Decision Framework Section (NEW)
208
+ - MUST help developers choose between approaches
209
+ - SHOULD include comparison tables
210
+ - SHOULD include decision trees where applicable
211
+ - Example:
212
+ ```markdown
213
+ ## Decision Framework
214
+
215
+ ### Embedding vs Referencing
216
+
217
+ | Factor | Embed | Reference |
218
+ |--------|-------|-----------|
219
+ | Read together? | Always | Sometimes |
220
+ | Update frequency | Low | High |
221
+ | Array size | <100 | >100 |
222
+ | Data duplication | Acceptable | Not acceptable |
223
+ ```
224
+
225
+ ### 3.6 Code Examples Requirements
226
+ - MUST use modern syntax (ES2022+, Python 3.10+, etc.)
227
+ - MUST include proper error handling
228
+ - MUST show both the "what" and "why" in comments
229
+ - MUST be copy-paste ready
230
+ - SHOULD include TypeScript/type hints where applicable
231
+
232
+ ### 3.7 Use Cases Section
233
+ - MUST include at least 2 real-world scenarios
234
+ - MUST be complete, runnable examples
235
+ - SHOULD cover common industry patterns (e-commerce, SaaS, etc.)
236
+
237
+ ### 3.8 Anti-Patterns Section (ENHANCED)
238
+ - MUST use visual formatting (❌ and ✅)
239
+ - MUST show both wrong and correct code
240
+ - MUST explain WHY the anti-pattern is problematic
241
+ - Example:
242
+ ```markdown
243
+ ### ❌ Silent Error Swallowing
244
+ ```typescript
245
+ try {
246
+ await riskyOperation();
247
+ } catch (err) {
248
+ console.log(err); // Lost forever!
249
+ }
250
+ ```
251
+ **Why it's problematic**:
252
+ - Errors disappear without notification
253
+ - No way to debug production issues
254
+ - Users see broken state without explanation
255
+
256
+ ### ✅ Proper Error Handling
257
+ ```typescript
258
+ try {
259
+ await riskyOperation();
260
+ } catch (err) {
261
+ logger.error('Operation failed', { error: err, context });
262
+ throw new AppError('Operation failed', { cause: err });
263
+ }
264
+ ```
265
+ ```
266
+
267
+ ### 3.9 Best Practices Section
268
+ - MUST have separate Do's and Don'ts subsections
269
+ - MUST include at least 5 items in each
270
+ - MUST be actionable and specific
271
+ - SHOULD explain WHY each practice matters
272
+ - SHOULD use ✓ and ✗ symbols for clarity
273
+
274
+ ### 3.10 Scaling Considerations Section (NEW)
275
+ - MUST include guidance for different scales
276
+ - SHOULD cover at least 3 scale levels
277
+ - SHOULD be specific to the technology
278
+ - Example:
279
+ ```markdown
280
+ ## Scaling Considerations
281
+
282
+ ### At 10K Records
283
+ - Single instance sufficient
284
+ - Basic indexes on primary keys
285
+ - Memory: <1GB
286
+
287
+ ### At 100K Records
288
+ - Add read replicas
289
+ - Analyze slow query log
290
+ - Consider caching layer
291
+ - Memory: 1-10GB
292
+
293
+ ### At 1M+ Records
294
+ - Sharding strategy required
295
+ - Multiple indexes needed
296
+ - CDN for static assets
297
+ - Memory: 10GB+
298
+ ```
299
+
300
+ ### 3.11 Commands Section (NEW - Optional)
301
+ - Define invocation patterns if applicable
302
+ - Use slash command format
303
+ - Group by purpose:
304
+ ```markdown
305
+ ## Commands
306
+
307
+ ### Design Commands
308
+ - `/mongodb:schema` - Design database schema
309
+ - `/mongodb:index` - Create indexing strategy
310
+
311
+ ### Optimization Commands
312
+ - `/mongodb:optimize` - Analyze and optimize queries
313
+ - `/mongodb:profile` - Profile database performance
314
+ ```
315
+
316
+ ### 3.12 Related Skills Section
317
+ - MUST include at least 3 related skills
318
+ - MUST explain HOW they relate
319
+ - Format: `**skill-name** - relationship description`
320
+
321
+ ### 3.13 References Section
322
+ - MUST include at least 3 authoritative links
323
+ - MUST include official documentation
324
+ - SHOULD include community resources
325
+
326
+ ---
327
+
328
+ ## 4. Length Requirements
329
+
330
+ | Skill Type | Minimum Lines | Target Lines |
331
+ |------------|---------------|--------------|
332
+ | Frameworks | 400 | 600+ |
333
+ | Languages | 350 | 500+ |
334
+ | Databases | 350 | 500+ |
335
+ | DevOps | 300 | 450+ |
336
+ | Security | 350 | 500+ |
337
+ | Testing | 300 | 450+ |
338
+ | Methodology | 300 | 450+ |
339
+ | Frontend | 300 | 450+ |
340
+ | Backend | 400 | 600+ |
341
+ | Integrations | 400 | 600+ |
342
+ | Tools | 400 | 600+ |
343
+ | Mobile | 350 | 500+ |
344
+ | Omega | 500 | 700+ |
345
+
346
+ ---
347
+
348
+ ## 5. Visual Formatting Standards
349
+
350
+ ### 5.1 Use Visual Markers
351
+ - ✓ for positive/recommended
352
+ - ✗ for negative/avoid
353
+ - ❌ for anti-patterns
354
+ - ✅ for correct approaches
355
+ - → for flow/sequence
356
+ - ⚠️ for warnings (sparingly)
357
+
358
+ ### 5.2 ASCII Diagrams
359
+ Include ASCII diagrams for:
360
+ - Architecture overviews
361
+ - Data flow
362
+ - Decision trees
363
+ - Process flows
364
+
365
+ Example:
366
+ ```
367
+ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
368
+ │ Client │────▶│ Server │────▶│ Database │
369
+ └─────────────┘ └─────────────┘ └─────────────┘
370
+ ```
371
+
372
+ ### 5.3 Tables for Comparisons
373
+ Use tables when comparing:
374
+ - Options/alternatives
375
+ - Trade-offs
376
+ - Configuration options
377
+ - Feature comparisons
378
+
379
+ ---
380
+
381
+ ## 6. Language/Technology Specific Guidelines
382
+
383
+ ### TypeScript/JavaScript Skills
384
+ - Always use TypeScript with strict types
385
+ - Include interface/type definitions
386
+ - Show async/await patterns
387
+ - Include error handling
388
+
389
+ ### Python Skills
390
+ - Use type hints throughout
391
+ - Show both sync and async patterns
392
+ - Include Pydantic for validation
393
+ - Follow PEP 8
394
+
395
+ ### Database Skills
396
+ - Include schema design
397
+ - Show query optimization
398
+ - Include index strategies
399
+ - Show transaction patterns
400
+ - Add scaling considerations
401
+
402
+ ### DevOps Skills
403
+ - Include complete configuration files
404
+ - Show security considerations
405
+ - Include health checks
406
+ - Show production vs development configs
407
+
408
+ ### Framework Skills
409
+ - Show project structure
410
+ - Include routing patterns
411
+ - Show data fetching
412
+ - Include testing patterns
413
+
414
+ ---
415
+
416
+ ## 7. Quality Checklist
417
+
418
+ Before finalizing a skill, verify:
419
+
420
+ ### Structure
421
+ - [ ] Frontmatter is complete with all required fields
422
+ - [ ] 5+ triggers are defined
423
+ - [ ] Overview is 2-3 sentences with bold key term
424
+ - [ ] Core Philosophy section with quote and principles
425
+ - [ ] Purpose section has 5+ specific capabilities
426
+
427
+ ### Content
428
+ - [ ] 5+ numbered features with code examples
429
+ - [ ] All code is production-ready and runnable
430
+ - [ ] Decision Framework with comparison table
431
+ - [ ] 2+ use cases with complete examples
432
+
433
+ ### Best Practices
434
+ - [ ] Anti-patterns with ❌/✅ visual formatting
435
+ - [ ] Do's section has 5+ items with ✓
436
+ - [ ] Don'ts section has 5+ items with ✗
437
+ - [ ] Scaling considerations for technical skills
438
+
439
+ ### References
440
+ - [ ] 3+ related skills referenced
441
+ - [ ] 3+ reference links included
442
+
443
+ ### Quality
444
+ - [ ] Meets minimum line count for category
445
+ - [ ] No placeholder text or `...` in code
446
+ - [ ] ASCII diagrams where helpful
447
+
448
+ ---
449
+
450
+ ## 8. Anti-Patterns to Avoid in Skill Writing
451
+
452
+ ### ❌ Don't: Generic Descriptions
453
+ ```markdown
454
+ ## Purpose
455
+ Use for MongoDB development.
456
+ ```
457
+
458
+ ### ✅ Do: Specific, Actionable Descriptions
459
+ ```markdown
460
+ ## Purpose
461
+ Build production-ready document databases with confidence:
462
+ - Design schemas optimized for your query patterns
463
+ - Implement aggregation pipelines for complex analytics
464
+ - Configure sharding for horizontal scalability
465
+ ```
466
+
467
+ ### ❌ Don't: Incomplete Code
468
+ ```typescript
469
+ const user = await db.users.findOne({ ... });
470
+ // Handle result
471
+ ```
472
+
473
+ ### ✅ Do: Complete, Production-Ready Code
474
+ ```typescript
475
+ interface User {
476
+ _id: ObjectId;
477
+ email: string;
478
+ name: string;
479
+ }
480
+
481
+ async function findUserByEmail(email: string): Promise<User | null> {
482
+ const user = await db.collection<User>('users').findOne({
483
+ email: email.toLowerCase()
484
+ });
485
+
486
+ if (!user) {
487
+ logger.debug('User not found', { email });
488
+ return null;
489
+ }
490
+
491
+ return user;
492
+ }
493
+ ```
494
+
495
+ ### ❌ Don't: Skip Decision Guidance
496
+ ```markdown
497
+ ## Features
498
+ ### 1. Embedding
499
+ {shows embedding}
500
+
501
+ ### 2. Referencing
502
+ {shows referencing}
503
+ ```
504
+
505
+ ### ✅ Do: Include Decision Framework
506
+ ```markdown
507
+ ## Decision Framework
508
+
509
+ ### When to Embed vs Reference
510
+
511
+ | Factor | Embed | Reference |
512
+ |--------|-------|-----------|
513
+ | Data read together | Always | Sometimes |
514
+ | Update frequency | Rarely | Frequently |
515
+ | Array growth | Bounded | Unbounded |
516
+
517
+ ### Decision Tree
518
+ ```
519
+ Is the data always read together?
520
+ ├─ Yes: Is the array bounded (<100 items)?
521
+ │ ├─ Yes: → Embed
522
+ │ └─ No: → Reference with subset pattern
523
+ └─ No: → Reference
524
+ ```
525
+ ```
526
+
527
+ ---
528
+
529
+ ## 9. Example: Ideal Skill Structure (v2.0)
530
+
531
+ ```markdown
532
+ ---
533
+ name: example-skill
534
+ description: Example skill demonstrating ideal structure with complete patterns
535
+ category: frameworks
536
+ triggers:
537
+ - example
538
+ - demo
539
+ - template
540
+ - skill structure
541
+ ---
542
+
543
+ # Example Skill
544
+
545
+ Enterprise-grade **example development** following industry best practices.
546
+ This skill covers component design, state management, and production deployment.
547
+
548
+ ## Core Philosophy
549
+
550
+ > "Build components that are easy to use correctly and hard to use incorrectly."
551
+
552
+ Great component design anticipates how developers will use your code.
553
+ The best APIs make the right thing easy and the wrong thing obvious.
554
+
555
+ ### Guiding Principles
556
+ 1. **Composition Over Inheritance**: Build from small, focused pieces
557
+ 2. **Explicit Over Implicit**: Make behavior obvious, not magical
558
+ 3. **Fail Fast**: Catch errors early with strong typing and validation
559
+
560
+ ## Purpose
561
+
562
+ Build production-ready applications with confidence:
563
+
564
+ - Master component architecture and composition
565
+ - Implement efficient state management
566
+ - Handle data fetching and caching
567
+ - Write comprehensive tests
568
+ - Optimize for performance and SEO
569
+
570
+ ## Features
571
+
572
+ ### 1. Component Architecture
573
+
574
+ Design components that are reusable and testable:
575
+
576
+ ```typescript
577
+ interface ButtonProps {
578
+ variant: 'primary' | 'secondary' | 'danger';
579
+ size: 'sm' | 'md' | 'lg';
580
+ disabled?: boolean;
581
+ loading?: boolean;
582
+ onClick: () => void;
583
+ children: React.ReactNode;
584
+ }
585
+
586
+ export function Button({
587
+ variant,
588
+ size,
589
+ disabled = false,
590
+ loading = false,
591
+ onClick,
592
+ children
593
+ }: ButtonProps) {
594
+ return (
595
+ <button
596
+ className={cn(
597
+ 'btn',
598
+ `btn-${variant}`,
599
+ `btn-${size}`,
600
+ loading && 'btn-loading'
601
+ )}
602
+ disabled={disabled || loading}
603
+ onClick={onClick}
604
+ >
605
+ {loading ? <Spinner size={size} /> : children}
606
+ </button>
607
+ );
608
+ }
609
+ ```
610
+
611
+ ### 2. State Management
612
+ {Complete example}
613
+
614
+ ### 3. Data Fetching
615
+ {Complete example}
616
+
617
+ ### 4. Error Handling
618
+ {Complete example}
619
+
620
+ ### 5. Testing Patterns
621
+ {Complete example}
622
+
623
+ ## Decision Framework
624
+
625
+ ### State Management Options
626
+
627
+ | Approach | Complexity | Performance | Use When |
628
+ |----------|------------|-------------|----------|
629
+ | useState | Low | High | Local component state |
630
+ | useReducer | Medium | High | Complex local state |
631
+ | Context | Medium | Medium | Shared UI state |
632
+ | Zustand | Low | High | Global app state |
633
+ | Redux | High | High | Large teams, dev tools |
634
+
635
+ ### Decision Tree
636
+ ```
637
+ Is state shared across components?
638
+ ├─ No: Is state logic complex?
639
+ │ ├─ Yes: → useReducer
640
+ │ └─ No: → useState
641
+ └─ Yes: Is it server state?
642
+ ├─ Yes: → React Query / SWR
643
+ └─ No: → Zustand / Context
644
+ ```
645
+
646
+ ## Use Cases
647
+
648
+ ### E-commerce Product Page
649
+ ```typescript
650
+ // Complete implementation
651
+ ```
652
+
653
+ ### Real-time Dashboard
654
+ ```typescript
655
+ // Complete implementation
656
+ ```
657
+
658
+ ## Anti-Patterns
659
+
660
+ ### ❌ Prop Drilling
661
+ ```typescript
662
+ // Wrong: Passing props through many levels
663
+ <App user={user}>
664
+ <Layout user={user}>
665
+ <Sidebar user={user}>
666
+ <UserMenu user={user} /> // 4 levels deep!
667
+ </Sidebar>
668
+ </Layout>
669
+ </App>
670
+ ```
671
+ **Why it's problematic**:
672
+ - Every intermediate component must know about the prop
673
+ - Changes require updating multiple files
674
+ - Makes refactoring difficult
675
+
676
+ ### ✅ Context or State Management
677
+ ```typescript
678
+ // Better: Use context for cross-cutting concerns
679
+ const UserContext = createContext<User | null>(null);
680
+
681
+ function UserMenu() {
682
+ const user = useContext(UserContext);
683
+ return <Avatar user={user} />;
684
+ }
685
+ ```
686
+
687
+ ## Best Practices
688
+
689
+ ### Do's
690
+ - ✓ Use TypeScript for type safety - *catches errors at compile time*
691
+ - ✓ Implement proper error boundaries - *prevents white screen of death*
692
+ - ✓ Follow accessibility guidelines - *makes app usable for everyone*
693
+ - ✓ Write unit and integration tests - *ensures reliability*
694
+ - ✓ Optimize bundle size - *improves load time*
695
+
696
+ ### Don'ts
697
+ - ✗ Use `any` types - *defeats TypeScript's purpose*
698
+ - ✗ Skip error handling - *creates poor UX*
699
+ - ✗ Ignore accessibility - *excludes users*
700
+ - ✗ Write untestable code - *increases tech debt*
701
+ - ✗ Over-engineer solutions - *adds complexity*
702
+
703
+ ## Scaling Considerations
704
+
705
+ ### Small App (<10 components)
706
+ - useState for local state
707
+ - Props for component communication
708
+ - No external state library needed
709
+
710
+ ### Medium App (10-50 components)
711
+ - Context for shared state
712
+ - Consider React Query for server state
713
+ - Add error boundaries at route level
714
+
715
+ ### Large App (50+ components)
716
+ - Zustand or Redux for state management
717
+ - React Query for all server state
718
+ - Module federation for code splitting
719
+ - Component library extraction
720
+
721
+ ## Commands
722
+
723
+ - `/example:component` - Generate component template
724
+ - `/example:hook` - Create custom hook
725
+ - `/example:test` - Generate test suite
726
+
727
+ ## Related Skills
728
+
729
+ - **typescript** - Type system fundamentals
730
+ - **testing** - Test patterns and frameworks
731
+ - **performance** - Optimization techniques
732
+
733
+ ## References
734
+
735
+ - [Official Documentation](https://example.com)
736
+ - [Best Practices Guide](https://example.com)
737
+ - [Community Resources](https://example.com)
738
+ ```
739
+
740
+ ---
741
+
742
+ *Updated: 2024-12-30*
743
+ *Version: 2.0 - Agent-Aligned Standards*