specweave 1.0.240 → 1.0.241

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 (128) hide show
  1. package/CLAUDE.md +3 -4
  2. package/dist/plugins/specweave-ado/lib/ado-permission-gate.d.ts.map +1 -1
  3. package/dist/plugins/specweave-ado/lib/ado-permission-gate.js +17 -2
  4. package/dist/plugins/specweave-ado/lib/ado-permission-gate.js.map +1 -1
  5. package/dist/plugins/specweave-github/lib/github-feature-sync.d.ts +7 -0
  6. package/dist/plugins/specweave-github/lib/github-feature-sync.d.ts.map +1 -1
  7. package/dist/plugins/specweave-github/lib/github-feature-sync.js +53 -0
  8. package/dist/plugins/specweave-github/lib/github-feature-sync.js.map +1 -1
  9. package/dist/plugins/specweave-jira/lib/jira-permission-gate.d.ts.map +1 -1
  10. package/dist/plugins/specweave-jira/lib/jira-permission-gate.js +17 -2
  11. package/dist/plugins/specweave-jira/lib/jira-permission-gate.js.map +1 -1
  12. package/dist/plugins/specweave-testing/lib/playwright-routing.d.ts +8 -0
  13. package/dist/plugins/specweave-testing/lib/playwright-routing.d.ts.map +1 -1
  14. package/dist/plugins/specweave-testing/lib/playwright-routing.js +10 -7
  15. package/dist/plugins/specweave-testing/lib/playwright-routing.js.map +1 -1
  16. package/dist/src/adapters/agents-md-generator.js +1 -1
  17. package/dist/src/adapters/agents-md-generator.js.map +1 -1
  18. package/dist/src/adapters/claude/README.md +1 -1
  19. package/dist/src/adapters/claude-md-generator.js +1 -1
  20. package/dist/src/adapters/claude-md-generator.js.map +1 -1
  21. package/dist/src/cli/commands/init.js +2 -1
  22. package/dist/src/cli/commands/init.js.map +1 -1
  23. package/dist/src/cli/commands/refresh-marketplace.d.ts.map +1 -1
  24. package/dist/src/cli/commands/refresh-marketplace.js +7 -67
  25. package/dist/src/cli/commands/refresh-marketplace.js.map +1 -1
  26. package/dist/src/cli/commands/team.d.ts.map +1 -1
  27. package/dist/src/cli/commands/team.js +8 -5
  28. package/dist/src/cli/commands/team.js.map +1 -1
  29. package/dist/src/cli/helpers/init/plugin-installer.d.ts.map +1 -1
  30. package/dist/src/cli/helpers/init/plugin-installer.js +9 -13
  31. package/dist/src/cli/helpers/init/plugin-installer.js.map +1 -1
  32. package/dist/src/cli/helpers/issue-tracker/index.d.ts.map +1 -1
  33. package/dist/src/cli/helpers/issue-tracker/index.js +12 -6
  34. package/dist/src/cli/helpers/issue-tracker/index.js.map +1 -1
  35. package/dist/src/cli/helpers/issue-tracker/types.d.ts +2 -0
  36. package/dist/src/cli/helpers/issue-tracker/types.d.ts.map +1 -1
  37. package/dist/src/cli/helpers/issue-tracker/types.js.map +1 -1
  38. package/dist/src/core/increment/discipline-checker.js +1 -1
  39. package/dist/src/core/increment/discipline-checker.js.map +1 -1
  40. package/dist/src/core/increment/status-commands.d.ts.map +1 -1
  41. package/dist/src/core/increment/status-commands.js +7 -0
  42. package/dist/src/core/increment/status-commands.js.map +1 -1
  43. package/dist/src/core/lazy-loading/llm-plugin-detector.d.ts +2 -2
  44. package/dist/src/core/lazy-loading/llm-plugin-detector.d.ts.map +1 -1
  45. package/dist/src/core/lazy-loading/llm-plugin-detector.js +63 -25
  46. package/dist/src/core/lazy-loading/llm-plugin-detector.js.map +1 -1
  47. package/dist/src/core/reflection/reflect-handler.js +2 -2
  48. package/dist/src/core/reflection/reflect-handler.js.map +1 -1
  49. package/dist/src/core/session/handoff-context.js +2 -2
  50. package/dist/src/core/session/handoff-context.js.map +1 -1
  51. package/dist/src/sync/ado-reconciler.d.ts.map +1 -1
  52. package/dist/src/sync/ado-reconciler.js +21 -2
  53. package/dist/src/sync/ado-reconciler.js.map +1 -1
  54. package/dist/src/sync/github-reconciler.d.ts.map +1 -1
  55. package/dist/src/sync/github-reconciler.js +52 -26
  56. package/dist/src/sync/github-reconciler.js.map +1 -1
  57. package/dist/src/sync/jira-reconciler.d.ts.map +1 -1
  58. package/dist/src/sync/jira-reconciler.js +16 -3
  59. package/dist/src/sync/jira-reconciler.js.map +1 -1
  60. package/dist/src/sync/sync-coordinator.d.ts.map +1 -1
  61. package/dist/src/sync/sync-coordinator.js +31 -6
  62. package/dist/src/sync/sync-coordinator.js.map +1 -1
  63. package/dist/src/utils/auto-install.js +4 -4
  64. package/dist/src/utils/auto-install.js.map +1 -1
  65. package/package.json +1 -1
  66. package/plugins/FINAL-AUDIT-RECOMMENDATIONS.md +3 -3
  67. package/plugins/SKILLS-VS-AGENTS.md +1 -1
  68. package/plugins/specweave/PLUGIN.md +0 -2
  69. package/plugins/specweave/commands/export-skills.md +1 -1
  70. package/plugins/specweave/commands/role-orchestrator.md +1 -1
  71. package/plugins/specweave/hooks/log-decision.sh +6 -0
  72. package/plugins/specweave/hooks/stop-auto-v5.sh +17 -1
  73. package/plugins/specweave/hooks/stop-reflect.sh +16 -2
  74. package/plugins/specweave/hooks/stop-sync.sh +17 -9
  75. package/plugins/specweave/hooks/user-prompt-submit.sh +103 -35
  76. package/plugins/specweave/lib/vendor/sync/github-reconciler.js +52 -26
  77. package/plugins/specweave/lib/vendor/sync/github-reconciler.js.map +1 -1
  78. package/plugins/specweave/skills/code-review/SKILL.md +608 -0
  79. package/plugins/specweave/skills/done/SKILL.md +1 -1
  80. package/plugins/specweave/skills/grill/SKILL.md +91 -0
  81. package/plugins/specweave/skills/performance/SKILL.md +6 -0
  82. package/plugins/specweave/skills/security/SKILL.md +7 -0
  83. package/plugins/specweave/skills/security-patterns/SKILL.md +6 -0
  84. package/plugins/specweave/skills/tdd-orchestrator/SKILL.md +1 -1
  85. package/plugins/specweave/skills/team-build/SKILL.md +1 -1
  86. package/plugins/specweave/skills/team-orchestrate/SKILL.md +1 -1
  87. package/plugins/specweave/skills/tech-lead/SKILL.md +7 -0
  88. package/plugins/specweave-ado/lib/ado-permission-gate.js +18 -2
  89. package/plugins/specweave-ado/lib/ado-permission-gate.ts +19 -2
  90. package/plugins/specweave-frontend/skills/frontend/SKILL.md +138 -2
  91. package/plugins/specweave-frontend/skills/i18n-expert/SKILL.md +989 -0
  92. package/plugins/specweave-github/hooks/github-auto-create-handler.sh +23 -1
  93. package/plugins/specweave-github/lib/github-feature-sync.js +41 -0
  94. package/plugins/specweave-github/lib/github-feature-sync.ts +62 -0
  95. package/plugins/specweave-infrastructure/PLUGIN.md +2 -1
  96. package/plugins/specweave-infrastructure/skills/gcp-deep-dive/SKILL.md +1172 -0
  97. package/plugins/specweave-infrastructure/skills/observability/SKILL.md +6 -0
  98. package/plugins/specweave-infrastructure/skills/opentelemetry/SKILL.md +6 -0
  99. package/plugins/specweave-jira/lib/jira-permission-gate.js +18 -2
  100. package/plugins/specweave-jira/lib/jira-permission-gate.ts +19 -2
  101. package/plugins/specweave-mobile/PLUGIN.md +1 -2
  102. package/plugins/specweave-mobile/README.md +13 -12
  103. package/plugins/specweave-mobile/skills/capacitor-ionic/SKILL.md +4 -18
  104. package/plugins/specweave-mobile/skills/deep-linking-push/SKILL.md +4 -22
  105. package/plugins/specweave-mobile/skills/expo/SKILL.md +4 -24
  106. package/plugins/specweave-mobile/skills/mobile-testing/SKILL.md +4 -22
  107. package/plugins/specweave-mobile/skills/react-native-expert/SKILL.md +404 -47
  108. package/plugins/specweave-testing/PLUGIN.md +3 -11
  109. package/plugins/specweave-testing/lib/playwright-routing.js +1 -6
  110. package/plugins/specweave-testing/lib/playwright-routing.ts +11 -8
  111. package/plugins/specweave-testing/skills/accessibility-testing/SKILL.md +998 -0
  112. package/plugins/specweave-testing/skills/e2e-testing/SKILL.md +1 -1
  113. package/plugins/specweave-testing/skills/mutation-testing/SKILL.md +769 -0
  114. package/plugins/specweave-testing/skills/performance-testing/SKILL.md +961 -0
  115. package/plugins/specweave/.specweave/logs/decisions.jsonl +0 -12
  116. package/plugins/specweave/.specweave/logs/reflect/reflect.log +0 -8
  117. package/plugins/specweave/.specweave/logs/stop-auto.log +0 -6
  118. package/plugins/specweave/.specweave/logs/stop-sync.log +0 -10
  119. package/plugins/specweave/.specweave/state/dashboard.json +0 -43
  120. package/plugins/specweave/skills/infrastructure/SKILL.md +0 -86
  121. package/plugins/specweave/skills/qa-lead/SKILL.md +0 -77
  122. package/plugins/specweave-mobile/skills/mobile-architect/SKILL.md +0 -30
  123. package/plugins/specweave-testing/commands/e2e-setup.md +0 -1103
  124. package/plugins/specweave-testing/commands/test-coverage.md +0 -983
  125. package/plugins/specweave-testing/commands/test-generate.md +0 -1160
  126. package/plugins/specweave-testing/commands/test-init.md +0 -413
  127. package/plugins/specweave-testing/commands/ui-automate.md +0 -182
  128. package/plugins/specweave-testing/commands/ui-inspect.md +0 -82
@@ -19,6 +19,14 @@ Call me when you need to:
19
19
  - **Security review** - Find vulnerabilities before attackers do
20
20
  - **Performance check** - Identify bottlenecks and inefficiencies
21
21
 
22
+ ## Scope Boundaries
23
+
24
+ This skill is the **PRE-SHIP quality gate**. Focuses on: correctness, edge cases, performance issues, error handling.
25
+
26
+ - For deep security audits → use `/sw:security`
27
+ - For design pattern guidance → use `/sw:tech-lead`
28
+ - For code style/clarity → use `/sw:code-simplifier`
29
+
22
30
  ## My Mindset: The Demanding Reviewer
23
31
 
24
32
  I approach code like a demanding tech lead:
@@ -89,6 +97,89 @@ I categorize found issues:
89
97
 
90
98
  ---
91
99
 
100
+ ## Confidence-Based Findings
101
+
102
+ Every finding from the grill process MUST be scored for confidence. This reduces noise and ensures developers focus on real issues, not speculation.
103
+
104
+ ### Scoring System
105
+
106
+ - Each finding receives a confidence score from 0 to 100
107
+ - Only findings with confidence >= 70 are surfaced by default
108
+ - Findings below the threshold are silently dropped (they create noise, not value)
109
+ - Categories: **correctness** (bugs), **performance**, **security**, **maintainability**, **edge-case**
110
+
111
+ ### Confidence Guidelines
112
+
113
+ | Score | Meaning | Action |
114
+ |-------|---------|--------|
115
+ | 90-100 | Certain bug/issue — reproducible or provably wrong | MUST fix before shipping |
116
+ | 70-89 | Very likely issue — strong evidence but not 100% confirmed | SHOULD fix, review recommended |
117
+ | 50-69 | Possible issue — circumstantial evidence | Consider fixing, low priority |
118
+ | <50 | Speculative — gut feeling, no hard evidence | Don't report (noise reduction) |
119
+
120
+ **How to score**: Base confidence on concrete evidence. Reading the code and seeing a null dereference path = 95. Suspecting a performance issue without profiling data = 60. "This might be a problem someday" = 30 (don't report).
121
+
122
+ ### Finding Format
123
+
124
+ Each finding in the grill report MUST use this structured format:
125
+
126
+ ```markdown
127
+ ### Finding: [Descriptive Title]
128
+ - **Severity**: critical | high | medium | low
129
+ - **Confidence**: [0-100]
130
+ - **Category**: correctness | performance | security | maintainability | edge-case
131
+ - **File**: [file_path:line_number]
132
+ - **Issue**: [Clear description of the problem — what is wrong and why]
133
+ - **Suggestion**: [Specific, actionable fix — not "consider improving"]
134
+ - **Impact**: [What happens if this ships unfixed — be concrete]
135
+ ```
136
+
137
+ **Severity mapping to existing categories**:
138
+
139
+ | Confidence Finding | Legacy Severity |
140
+ |---|---|
141
+ | critical (90-100 confidence) | BLOCKER / CRITICAL |
142
+ | high (70-89 confidence) | MAJOR |
143
+ | medium (50-69 confidence) | MINOR (only if explicitly requested) |
144
+ | low (<50 confidence) | Not reported |
145
+
146
+ ### Aggregated Summary
147
+
148
+ Every grill report MUST end with a confidence-scored summary:
149
+
150
+ ```
151
+ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
152
+ GRILL SUMMARY (Confidence-Scored)
153
+ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
154
+
155
+ Total findings: {X} (above threshold)
156
+ Suppressed: {Y} (below confidence threshold)
157
+
158
+ Critical (must-fix, confidence 90+): {X}
159
+ High (should-fix, confidence 70-89): {X}
160
+ Medium (consider, confidence 50-69): {X} (only shown with --verbose)
161
+
162
+ Ship readiness: READY | NOT READY | NEEDS REVIEW
163
+
164
+ READY = 0 critical, 0 high findings
165
+ NEEDS REVIEW = 0 critical, 1+ high findings
166
+ NOT READY = 1+ critical findings
167
+ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
168
+ ```
169
+
170
+ ### Threshold Override
171
+
172
+ To see all findings including low-confidence ones:
173
+
174
+ ```
175
+ /sw:grill 0042 --verbose # Show findings with confidence >= 50
176
+ /sw:grill 0042 --threshold 30 # Show findings with confidence >= 30
177
+ ```
178
+
179
+ Default threshold is 70. Lowering it is useful when debugging a specific area or doing a thorough pre-release review.
180
+
181
+ ---
182
+
92
183
  ## Grill Report Format
93
184
 
94
185
  ```
@@ -9,6 +9,12 @@ allowed-tools: Read, Bash, Grep
9
9
 
10
10
  You are an expert Performance Engineer with 10+ years of experience optimizing web applications, databases, and distributed systems.
11
11
 
12
+ ## Scope Boundaries
13
+
14
+ This skill covers **HIGH-LEVEL PERFORMANCE**: Core Web Vitals, caching strategies, bundle optimization.
15
+
16
+ - For deep database query optimization → use `/sw-backend:database-optimizer`
17
+
12
18
  ## Core Principles
13
19
 
14
20
  1. **ONE optimization area per response** - Chunk by area
@@ -10,6 +10,13 @@ context: fork
10
10
 
11
11
  You are an expert Security Engineer with 10+ years of experience in application security, penetration testing, and security compliance.
12
12
 
13
+ ## Scope Boundaries
14
+
15
+ This skill performs **MANUAL SECURITY AUDITS**. Focuses on: OWASP Top 10, threat modeling, vulnerability assessment, penetration testing guidance.
16
+
17
+ - For real-time pattern detection → use `/sw:security-patterns` (activates automatically)
18
+ - For general code quality → use `/sw:grill`
19
+
13
20
  ## Core Principles
14
21
 
15
22
  1. **ONE security domain per response** - Chunk audits by domain
@@ -10,6 +10,12 @@ user-invocable: false
10
10
 
11
11
  This skill provides real-time security pattern detection based on Anthropic's official security-guidance plugin. It identifies potentially dangerous coding patterns BEFORE they're committed.
12
12
 
13
+ ## Scope Boundaries
14
+
15
+ This skill is a **REAL-TIME DETECTOR**. Activates proactively when writing code. Detects: command injection, XSS, unsafe deserialization, dynamic code execution.
16
+
17
+ - For comprehensive security audits → use `/sw:security`
18
+
13
19
  ## Detection Categories
14
20
 
15
21
  ### 1. Command Injection Risks
@@ -169,7 +169,7 @@ tdd:
169
169
  - `/sw:tdd:red`, `/sw:tdd:green`, `/sw:tdd:refactor` - Individual phases
170
170
 
171
171
  **Skills**:
172
- - `qa-lead` - Test strategy overlaps with TDD principles
172
+ - `sw-testing:qa-engineer` - Test strategy overlaps with TDD principles
173
173
 
174
174
  ## Project-Specific Learnings
175
175
 
@@ -141,7 +141,7 @@ Generate comprehensive test coverage across all test levels simultaneously. Each
141
141
  |---|------|----------|------|----------------|
142
142
  | 1 | Unit | `sw-testing:unit-testing` | `tests/unit/` | Write unit tests for individual functions, classes, and modules with proper mocking |
143
143
  | 2 | E2E | `sw-testing:e2e-testing` | `tests/e2e/` | Write end-to-end tests for user flows, API sequences, and cross-service interactions |
144
- | 3 | Coverage | `sw-testing:test-coverage` | `tests/` (analysis scope) | Analyze coverage gaps, generate missing test cases, ensure threshold compliance |
144
+ | 3 | Coverage | `sw-testing:qa-engineer` | `tests/` (analysis scope) | Analyze coverage gaps, generate missing test cases, ensure threshold compliance |
145
145
 
146
146
  #### Execution Chain
147
147
 
@@ -111,7 +111,7 @@ Analyze the feature request and map affected domains to SpecWeave skills.
111
111
  | **Testing** | `sw-testing:qa-engineer` | `sw-testing:e2e-testing`, `sw-testing:unit-testing` | Test strategy, E2E suites, integration tests |
112
112
  | **Security** | `sw:security` | `sw:security-patterns` | Auth, authorization, threat modeling, OWASP |
113
113
  | **DevOps** | `sw-infra:devops` | `sw-k8s:deployment-generate`, `sw-infra:observability` | CI/CD, Docker, K8s, monitoring |
114
- | **Mobile** | `sw-mobile:mobile-architect` | `sw-mobile:screen-generate`, `sw-mobile:react-native-expert` | Native/cross-platform mobile apps |
114
+ | **Mobile** | `sw-mobile:react-native-expert` | `sw-mobile:screen-generate`, `sw-mobile:expo` | Native/cross-platform mobile apps |
115
115
  | **ML** | `sw-ml:ml-engineer` | `sw-ml:pipeline`, `sw-ml:deploy` | Model training, inference pipelines, deployment |
116
116
 
117
117
  ### Auto-Detection Signals
@@ -10,6 +10,13 @@ context: fork
10
10
 
11
11
  You are an expert Technical Lead bridging architecture and implementation. You ensure code quality, provide technical guidance, and create implementation plans.
12
12
 
13
+ ## Scope Boundaries
14
+
15
+ This skill provides **DESIGN GUIDANCE**. Focuses on: architecture patterns, SOLID principles, refactoring strategies, technical debt.
16
+
17
+ - For pre-ship bug-finding → use `/sw:grill`
18
+ - For security review → use `/sw:security`
19
+
13
20
  ## Core Principles
14
21
 
15
22
  1. **ONE FILE per response** - Never implement multiple files at once
@@ -1,5 +1,19 @@
1
1
  import { promises as fs } from "node:fs";
2
2
  import * as path from "node:path";
3
+ function resolvePresetPermissions(preset) {
4
+ switch (preset) {
5
+ case "bidirectional":
6
+ return { canUpsert: true, canUpdateStatus: true };
7
+ case "push-only":
8
+ return { canUpsert: true, canUpdateStatus: true };
9
+ case "full-control":
10
+ return { canUpsert: true, canUpdateStatus: true };
11
+ case "read-only":
12
+ return { canUpsert: false, canUpdateStatus: false };
13
+ default:
14
+ return { canUpsert: false, canUpdateStatus: false };
15
+ }
16
+ }
3
17
  const DEFAULT_SYNC_SETTINGS = {
4
18
  canUpsertInternalItems: false,
5
19
  canUpdateExternalItems: false,
@@ -98,10 +112,12 @@ async function createAdoPermissionGate(projectRoot = process.cwd()) {
98
112
  try {
99
113
  const content = await fs.readFile(configPath, "utf-8");
100
114
  const config = JSON.parse(content);
115
+ const preset = config?.sync?.preset;
116
+ const presetDefaults = resolvePresetPermissions(preset);
101
117
  const settings = {
102
118
  canUpsertInternalItems: config?.sync?.settings?.canUpsertInternalItems ?? false,
103
- canUpdateExternalItems: config?.sync?.settings?.canUpdateExternalItems ?? false,
104
- canUpdateStatus: config?.sync?.settings?.canUpdateStatus ?? false
119
+ canUpdateExternalItems: config?.sync?.settings?.canUpdateExternalItems ?? presetDefaults.canUpsert,
120
+ canUpdateStatus: config?.sync?.settings?.canUpdateStatus ?? presetDefaults.canUpdateStatus
105
121
  };
106
122
  return new AdoPermissionGate(settings, configPath);
107
123
  } catch {
@@ -55,6 +55,19 @@ export interface SyncSettings {
55
55
  canUpdateStatus: boolean;
56
56
  }
57
57
 
58
+ /**
59
+ * Resolve preset permissions for fallback when explicit settings are absent
60
+ */
61
+ function resolvePresetPermissions(preset?: string): { canUpsert: boolean; canUpdateStatus: boolean } {
62
+ switch (preset) {
63
+ case 'bidirectional': return { canUpsert: true, canUpdateStatus: true };
64
+ case 'push-only': return { canUpsert: true, canUpdateStatus: true };
65
+ case 'full-control': return { canUpsert: true, canUpdateStatus: true };
66
+ case 'read-only': return { canUpsert: false, canUpdateStatus: false };
67
+ default: return { canUpsert: false, canUpdateStatus: false };
68
+ }
69
+ }
70
+
58
71
  /**
59
72
  * Default settings (all disabled for safety)
60
73
  */
@@ -187,10 +200,14 @@ export async function createAdoPermissionGate(
187
200
  const content = await fs.readFile(configPath, 'utf-8');
188
201
  const config = JSON.parse(content);
189
202
 
203
+ // v1.0.240 FIX: Honor preset (e.g., "bidirectional") when explicit settings absent
204
+ const preset = config?.sync?.preset;
205
+ const presetDefaults = resolvePresetPermissions(preset);
206
+
190
207
  const settings: SyncSettings = {
191
208
  canUpsertInternalItems: config?.sync?.settings?.canUpsertInternalItems ?? false,
192
- canUpdateExternalItems: config?.sync?.settings?.canUpdateExternalItems ?? false,
193
- canUpdateStatus: config?.sync?.settings?.canUpdateStatus ?? false,
209
+ canUpdateExternalItems: config?.sync?.settings?.canUpdateExternalItems ?? presetDefaults.canUpsert,
210
+ canUpdateStatus: config?.sync?.settings?.canUpdateStatus ?? presetDefaults.canUpdateStatus,
194
211
  };
195
212
 
196
213
  return new AdoPermissionGate(settings, configPath);
@@ -1,5 +1,5 @@
1
1
  ---
2
- description: Expert frontend developer for React, Vue, Angular, and modern JavaScript/TypeScript. Use when creating components, implementing hooks, handling state management, or building responsive web interfaces. Covers React 18+ features, custom hooks, form handling, and accessibility best practices.
2
+ description: Expert frontend developer for React, Vue, Angular, and modern JavaScript/TypeScript. Use when creating components, implementing hooks, handling state management, or building responsive web interfaces. Covers React 18/19 features (use() hook, React Compiler, Server Functions, useActionState, useOptimistic), custom hooks, form handling, and accessibility best practices.
3
3
  ---
4
4
 
5
5
  # Frontend Development Expert
@@ -18,6 +18,98 @@ You are an expert frontend developer with deep knowledge of modern frameworks, J
18
18
  - Suspense and Error Boundaries
19
19
  - Concurrent features (useTransition, useDeferredValue)
20
20
 
21
+ **React 19 Core Features**:
22
+ - `use()` hook for reading promises and context in render
23
+ - React Compiler (auto-memoization replaces manual useMemo/useCallback)
24
+ - Server Functions (`"use server"`) and Server Actions
25
+ - Form Actions with `useActionState` (replaces useFormState)
26
+ - `useOptimistic` hook for optimistic UI updates
27
+ - `<form action={fn}>` native integration
28
+ - `ref` as a prop (no more forwardRef)
29
+ - `<Context>` as a provider (no more `<Context.Provider>`)
30
+ - Metadata (`<title>`, `<meta>`) hoisted from components automatically
31
+ - Stylesheet precedence with `precedence` attribute
32
+ - Async script deduplication
33
+
34
+ **React 19 Patterns**:
35
+ ```tsx
36
+ // use() hook — read a promise during render (Suspense handles loading)
37
+ function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
38
+ const user = use(userPromise);
39
+ return <h1>{user.name}</h1>;
40
+ }
41
+
42
+ // use() hook — read context (replaces useContext, works in conditionals)
43
+ function ThemeButton() {
44
+ if (shouldUseTheme) {
45
+ const theme = use(ThemeContext);
46
+ return <button className={theme.buttonClass}>Click</button>;
47
+ }
48
+ return <button>Click</button>;
49
+ }
50
+
51
+ // useActionState for form handling
52
+ function LoginForm() {
53
+ const [state, formAction, isPending] = useActionState(loginAction, null);
54
+ return (
55
+ <form action={formAction}>
56
+ <input name="email" />
57
+ <button disabled={isPending}>Login</button>
58
+ {state?.error && <p>{state.error}</p>}
59
+ </form>
60
+ );
61
+ }
62
+
63
+ // useOptimistic for instant UI feedback
64
+ function TodoList({ todos }: { todos: Todo[] }) {
65
+ const [optimisticTodos, addOptimisticTodo] = useOptimistic(
66
+ todos,
67
+ (state, newTodo: Todo) => [...state, { ...newTodo, pending: true }]
68
+ );
69
+
70
+ async function addTodo(formData: FormData) {
71
+ const newTodo = { id: crypto.randomUUID(), title: formData.get('title') as string };
72
+ addOptimisticTodo(newTodo);
73
+ await saveTodoToServer(newTodo);
74
+ }
75
+
76
+ return (
77
+ <form action={addTodo}>
78
+ <input name="title" />
79
+ <button type="submit">Add</button>
80
+ <ul>
81
+ {optimisticTodos.map(todo => (
82
+ <li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>{todo.title}</li>
83
+ ))}
84
+ </ul>
85
+ </form>
86
+ );
87
+ }
88
+
89
+ // ref as prop (no forwardRef needed in React 19)
90
+ function Input({ ref, ...props }: { ref?: React.Ref<HTMLInputElement> }) {
91
+ return <input ref={ref} {...props} />;
92
+ }
93
+
94
+ // Server Functions (in a server component or 'use server' file)
95
+ // server-actions.ts
96
+ 'use server';
97
+ export async function submitForm(prevState: State, formData: FormData) {
98
+ const email = formData.get('email');
99
+ // validate and persist...
100
+ return { success: true };
101
+ }
102
+ ```
103
+
104
+ **React Compiler Impact**:
105
+ - Auto-memoizes components, values, and callbacks — remove manual `useMemo`/`useCallback` for performance-only usage
106
+ - Still use `useMemo` when the memo is part of semantic behavior (e.g., stable dependency for a non-React API)
107
+ - Still use `useCallback` when passing callbacks to non-React code that compares references (e.g., `addEventListener` wrappers)
108
+ - Requirements: React 19, strict mode enabled, rules of hooks followed, no rule-of-hooks ESLint violations
109
+ - Migration: install `babel-plugin-react-compiler` or enable in framework config, then gradually remove manual memos
110
+ - Compiler skips components it cannot prove are safe — no breakage, just no optimization for those
111
+ - Works with Next.js 15+, Vite via Babel plugin, and Remix
112
+
21
113
  **React Patterns**:
22
114
  - Compound components
23
115
  - Render props
@@ -166,9 +258,53 @@ You are an expert frontend developer with deep knowledge of modern frameworks, J
166
258
 
167
259
  **Modern CSS**:
168
260
  - CSS Variables (custom properties)
169
- - Container Queries
261
+ - Container Queries (`@container`) and container query units (`cqi`, `cqb`)
170
262
  - CSS Grid and Flexbox
171
263
  - Logical properties for i18n
264
+ - CSS Nesting (native, no preprocessor required)
265
+ - `@layer` for cascade control and specificity management
266
+ - `@scope` for scoped styles
267
+ - `color-mix()` and relative color syntax
268
+ - View Transitions API for page transitions
269
+
270
+ **Modern CSS Patterns**:
271
+ ```css
272
+ /* Container queries — responsive based on parent, not viewport */
273
+ .card-container {
274
+ container-type: inline-size;
275
+ container-name: card;
276
+ }
277
+ @container card (min-width: 400px) {
278
+ .card { flex-direction: row; }
279
+ }
280
+
281
+ /* CSS nesting — native, no Sass needed */
282
+ .nav {
283
+ background: var(--surface);
284
+
285
+ & a {
286
+ color: var(--text);
287
+
288
+ &:hover {
289
+ color: var(--primary);
290
+ }
291
+ }
292
+
293
+ @media (width < 768px) {
294
+ flex-direction: column;
295
+ }
296
+ }
297
+
298
+ /* @layer for cascade control */
299
+ @layer reset, base, components, utilities;
300
+
301
+ @layer components {
302
+ .btn { padding: 0.5rem 1rem; border-radius: 0.25rem; }
303
+ }
304
+ @layer utilities {
305
+ .p-4 { padding: 1rem; } /* always wins over components */
306
+ }
307
+ ```
172
308
 
173
309
  ### 8. Performance Optimization
174
310