@ryuenn3123/agentic-senior-core 1.8.0 → 1.8.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/.agent-context/blueprints/mobile-app.md +21 -0
- package/.agent-context/review-checklists/frontend-skill-parity.md +28 -0
- package/.agent-context/skills/README.md +63 -0
- package/.agent-context/skills/backend/README.md +68 -0
- package/.agent-context/skills/backend/architecture.md +361 -0
- package/.agent-context/skills/backend/data-access.md +231 -0
- package/.agent-context/skills/backend/errors.md +138 -0
- package/.agent-context/skills/backend/validation.md +117 -0
- package/.agent-context/skills/backend.md +29 -0
- package/.agent-context/skills/cli/README.md +50 -0
- package/.agent-context/skills/cli/init.md +38 -0
- package/.agent-context/skills/cli/output.md +36 -0
- package/.agent-context/skills/cli/upgrade.md +38 -0
- package/.agent-context/skills/cli.md +29 -0
- package/.agent-context/skills/distribution/README.md +19 -0
- package/.agent-context/skills/distribution/compatibility.md +32 -0
- package/.agent-context/skills/distribution/publish.md +37 -0
- package/.agent-context/skills/distribution/rollback.md +32 -0
- package/.agent-context/skills/distribution.md +29 -0
- package/.agent-context/skills/frontend/README.md +36 -0
- package/.agent-context/skills/frontend/accessibility.md +107 -0
- package/.agent-context/skills/frontend/motion.md +67 -0
- package/.agent-context/skills/frontend/performance.md +63 -0
- package/.agent-context/skills/frontend/ui-architecture.md +128 -0
- package/.agent-context/skills/frontend.md +30 -0
- package/.agent-context/skills/fullstack/README.md +19 -0
- package/.agent-context/skills/fullstack/contracts.md +53 -0
- package/.agent-context/skills/fullstack/end-to-end.md +42 -0
- package/.agent-context/skills/fullstack/feature-slicing.md +65 -0
- package/.agent-context/skills/fullstack.md +27 -0
- package/.agent-context/skills/index.json +107 -0
- package/.agent-context/skills/review-quality/README.md +19 -0
- package/.agent-context/skills/review-quality/benchmark.md +30 -0
- package/.agent-context/skills/review-quality/planning.md +38 -0
- package/.agent-context/skills/review-quality/security.md +34 -0
- package/.agent-context/skills/review-quality.md +28 -0
- package/.agent-context/stacks/flutter.md +16 -0
- package/.agent-context/stacks/react-native.md +16 -0
- package/.agent-context/state/benchmark-analysis.json +431 -0
- package/.agent-context/state/benchmark-thresholds.json +10 -0
- package/.agent-context/state/benchmark-watchlist.json +19 -0
- package/.agent-context/state/skill-platform.json +38 -0
- package/.cursorrules +1 -1
- package/.github/workflows/benchmark-intelligence.yml +50 -0
- package/.windsurfrules +1 -1
- package/README.md +81 -2
- package/bin/agentic-senior-core.js +412 -3
- package/package.json +4 -2
- package/scripts/benchmark-gate.mjs +121 -0
- package/scripts/benchmark-intelligence.mjs +140 -0
- package/scripts/skill-tier-policy.mjs +76 -0
- package/scripts/validate.mjs +82 -0
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# Distribution Engineering Skills
|
|
2
|
+
|
|
3
|
+
Default tier: `expert`
|
|
4
|
+
|
|
5
|
+
This domain governs release packaging, compatibility policy, and rollback readiness.
|
|
6
|
+
|
|
7
|
+
## Topics
|
|
8
|
+
- [Publish Hygiene](publish.md) - Package integrity, provenance, and release evidence
|
|
9
|
+
- [Rollback](rollback.md) - Recovery-first release operations
|
|
10
|
+
- [Compatibility](compatibility.md) - Runtime/tooling support policy and guardrails
|
|
11
|
+
|
|
12
|
+
## Operating Model
|
|
13
|
+
- Use `expert` as the default distribution tier.
|
|
14
|
+
- Block release if rollback and compatibility guarantees are not verified.
|
|
15
|
+
|
|
16
|
+
## Above-Line Additions
|
|
17
|
+
- Release gates tied to benchmark and compatibility checks.
|
|
18
|
+
- Supply-chain artifacts (SBOM/provenance) as first-class outputs.
|
|
19
|
+
- Explicit rollback drills before critical releases.
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
# Compatibility
|
|
2
|
+
|
|
3
|
+
Tier: ADVANCE
|
|
4
|
+
|
|
5
|
+
Compatibility policy prevents shipping builds that break on supported runtimes or tooling ecosystems.
|
|
6
|
+
|
|
7
|
+
## Compatibility Matrix
|
|
8
|
+
|
|
9
|
+
Define supported combinations explicitly:
|
|
10
|
+
- Runtime versions (Node, Python, Java, etc.)
|
|
11
|
+
- OS/platform scope
|
|
12
|
+
- IDE/editor integration versions
|
|
13
|
+
- Dependency constraints
|
|
14
|
+
|
|
15
|
+
## Gate Strategy
|
|
16
|
+
|
|
17
|
+
- Validate package against supported runtime matrix in CI.
|
|
18
|
+
- Block release on unsupported runtime regressions.
|
|
19
|
+
- Mark deprecated support windows and removal timeline.
|
|
20
|
+
|
|
21
|
+
## Breaking Change Protocol
|
|
22
|
+
|
|
23
|
+
- Major version for incompatible behavior.
|
|
24
|
+
- Migration notes for changed defaults.
|
|
25
|
+
- Transitional compatibility period when feasible.
|
|
26
|
+
|
|
27
|
+
## Review Checklist
|
|
28
|
+
|
|
29
|
+
- [ ] Supported runtime matrix is current and tested.
|
|
30
|
+
- [ ] Incompatible changes are versioned correctly.
|
|
31
|
+
- [ ] Migration notes exist for user-impacting changes.
|
|
32
|
+
- [ ] CI verifies compatibility before publish.
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# Publish Hygiene
|
|
2
|
+
|
|
3
|
+
Tier: EXPERT
|
|
4
|
+
|
|
5
|
+
Publishing should be repeatable, auditable, and minimal in surface area.
|
|
6
|
+
|
|
7
|
+
## Pre-Publish Gates
|
|
8
|
+
|
|
9
|
+
- Validate package contents and metadata.
|
|
10
|
+
- Run tests and policy validators.
|
|
11
|
+
- Confirm version/changelog consistency.
|
|
12
|
+
- Generate SBOM and provenance artifacts.
|
|
13
|
+
|
|
14
|
+
## Package Surface Control
|
|
15
|
+
|
|
16
|
+
- Use explicit allow-list for publish files.
|
|
17
|
+
- Exclude internal scripts, test fixtures, and local configs.
|
|
18
|
+
- Verify CLI entry points and executable permissions.
|
|
19
|
+
|
|
20
|
+
## Ownership and Provenance
|
|
21
|
+
|
|
22
|
+
- Ensure publisher identity is controlled.
|
|
23
|
+
- Record commit SHA and release timestamp.
|
|
24
|
+
- Attach generated reports (gate, benchmark, SBOM) to release artifacts.
|
|
25
|
+
|
|
26
|
+
## Failure Policy
|
|
27
|
+
|
|
28
|
+
- Abort publish on failing quality gate.
|
|
29
|
+
- Abort publish on unresolved high-severity security findings.
|
|
30
|
+
- Abort publish on missing changelog entry.
|
|
31
|
+
|
|
32
|
+
## Review Checklist
|
|
33
|
+
|
|
34
|
+
- [ ] Package contents match expected release manifest.
|
|
35
|
+
- [ ] Quality and security gates passed.
|
|
36
|
+
- [ ] Version and changelog are aligned.
|
|
37
|
+
- [ ] Provenance artifacts are generated and stored.
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
# Rollback
|
|
2
|
+
|
|
3
|
+
Tier: EXPERT
|
|
4
|
+
|
|
5
|
+
Rollback is a mandatory release capability, not an afterthought.
|
|
6
|
+
|
|
7
|
+
## Rollback Readiness
|
|
8
|
+
|
|
9
|
+
- Define rollback trigger conditions before release.
|
|
10
|
+
- Keep previous stable artifact available for immediate redeploy.
|
|
11
|
+
- Preserve migration rollback scripts for data-affecting changes.
|
|
12
|
+
|
|
13
|
+
## Rollback Flow
|
|
14
|
+
|
|
15
|
+
1. Detect failure signal (error spike, failed SLO, functional regression).
|
|
16
|
+
2. Freeze new rollout.
|
|
17
|
+
3. Re-deploy previous known-good version.
|
|
18
|
+
4. Verify health checks and key journeys.
|
|
19
|
+
5. Publish incident summary with root-cause owner.
|
|
20
|
+
|
|
21
|
+
## Data Change Safety
|
|
22
|
+
|
|
23
|
+
- Use backward-compatible migrations for forward and rollback paths.
|
|
24
|
+
- Avoid destructive schema operations in same release as code cutover.
|
|
25
|
+
- Validate rollback on staging with production-like data shape.
|
|
26
|
+
|
|
27
|
+
## Review Checklist
|
|
28
|
+
|
|
29
|
+
- [ ] Rollback plan documented and tested.
|
|
30
|
+
- [ ] Previous release artifact retained.
|
|
31
|
+
- [ ] Data migration rollback path verified.
|
|
32
|
+
- [ ] Health checks confirm rollback success.
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# Distribution Skill Pack
|
|
2
|
+
|
|
3
|
+
Default tier: `expert`
|
|
4
|
+
|
|
5
|
+
## Purpose
|
|
6
|
+
Protect package installation and release distribution with transactional safety.
|
|
7
|
+
|
|
8
|
+
## In Scope
|
|
9
|
+
- Package validation
|
|
10
|
+
- Backup and rollback
|
|
11
|
+
- Compatibility checks
|
|
12
|
+
- Forbidden-file detection
|
|
13
|
+
- Publish hygiene and provenance
|
|
14
|
+
|
|
15
|
+
## Must-Have Checks
|
|
16
|
+
- Preflight validation before installation or publish
|
|
17
|
+
- Backup point before mutating user state
|
|
18
|
+
- Automatic rollback on failure
|
|
19
|
+
- Compatibility manifest present
|
|
20
|
+
- Evidence bundle attached to release
|
|
21
|
+
|
|
22
|
+
## Evidence
|
|
23
|
+
- Install validation report
|
|
24
|
+
- Rollback verification log
|
|
25
|
+
- Publish dry-run output
|
|
26
|
+
- Integrity and provenance manifest
|
|
27
|
+
|
|
28
|
+
## Fallback
|
|
29
|
+
- If automated rollback cannot be guaranteed, the operation must stop before mutation.
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# Frontend Engineering Skills
|
|
2
|
+
|
|
3
|
+
The frontend domain covers component architecture, state management, performance optimization, accessibility, motion design, and visual polish. Content consolidated from **minimax-ai/skills** (design focus), **awesome-copilot** (architectural patterns), and **antigravity-awesome-skills** (React patterns), with production-grade automation and enforcement.
|
|
4
|
+
|
|
5
|
+
## Topics
|
|
6
|
+
- [UI Architecture](ui-architecture.md) - Smart/Dumb components, state management, composition patterns
|
|
7
|
+
- [Accessibility](accessibility.md) - WCAG compliance, keyboard navigation, semantic HTML, color contrast
|
|
8
|
+
- [Motion](motion.md) - Animation patterns, performance, CSS containment
|
|
9
|
+
- [Performance](performance.md) - Memoization, code splitting, bundle gates, profiling
|
|
10
|
+
|
|
11
|
+
## What Makes Ours Different
|
|
12
|
+
|
|
13
|
+
- Smart/Dumb Architecture (awesome-copilot) + animation system patterns (minimax) + React patterns (antigravity)
|
|
14
|
+
- Anti-Slop Enforcer (ABOVE LINE) - Detect forbidden visual patterns and style drift
|
|
15
|
+
- Accessibility Auditor (ABOVE LINE) - Detect contrast failures, ARIA issues, and keyboard navigation gaps
|
|
16
|
+
- Performance Budget Enforcer (ABOVE LINE) - Bundle size gates and LCP/FID/CLS thresholds
|
|
17
|
+
|
|
18
|
+
## Recommended Reading Order
|
|
19
|
+
|
|
20
|
+
1. `ui-architecture.md` - Mental models first (EXPERT)
|
|
21
|
+
2. `accessibility.md` - Compliance baseline (EXPERT)
|
|
22
|
+
3. `motion.md` - Design patterns and optimization (EXPERT)
|
|
23
|
+
4. `performance.md` - Profiling and gates (EXPERT)
|
|
24
|
+
|
|
25
|
+
## Coverage vs 3 Repos
|
|
26
|
+
|
|
27
|
+
| Aspect | antigravity | awesome-copilot | MiniMax | Ours |
|
|
28
|
+
|--------|-------------|-----------------|---------|------|
|
|
29
|
+
| Component Patterns | Medium | High | Medium | High + quality gates |
|
|
30
|
+
| Animation Patterns | Low | Low | High | High + performance rules |
|
|
31
|
+
| Accessibility | Medium | High | Medium | High + automated audits |
|
|
32
|
+
| Automation | None | None | None | Anti-slop, accessibility, and performance tooling |
|
|
33
|
+
|
|
34
|
+
## Default Tier Behavior
|
|
35
|
+
- Use `advance` for typical web apps (1500+ employees)
|
|
36
|
+
- Escalate to `expert` when component library, state complexity, or accessibility/performance tuning is critical
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# Accessibility and Inclusive Interaction
|
|
2
|
+
|
|
3
|
+
**Tier:** EXPERT | **Source:** awesome-copilot (WCAG) + minimax (motion and dark mode) + antigravity (UX patterns)
|
|
4
|
+
|
|
5
|
+
## Purpose
|
|
6
|
+
|
|
7
|
+
Accessibility is a production requirement. Inclusive interaction reduces support burden, improves usability, and prevents last-minute retrofit work.
|
|
8
|
+
|
|
9
|
+
## Part 1: Semantic Structure
|
|
10
|
+
|
|
11
|
+
Use native HTML elements first. They provide keyboard support, roles, and state semantics without extra work.
|
|
12
|
+
|
|
13
|
+
```javascript
|
|
14
|
+
<nav>
|
|
15
|
+
<button aria-expanded={isOpen} aria-controls="menu-panel">Menu</button>
|
|
16
|
+
<ul id="menu-panel" hidden={!isOpen}>
|
|
17
|
+
<li><a href="/">Home</a></li>
|
|
18
|
+
<li><a href="/about">About</a></li>
|
|
19
|
+
</ul>
|
|
20
|
+
</nav>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Avoid replacing native controls with generic containers unless there is a specific reason.
|
|
24
|
+
|
|
25
|
+
## Part 2: Keyboard Support
|
|
26
|
+
|
|
27
|
+
Every interactive control must be reachable and operable by keyboard.
|
|
28
|
+
|
|
29
|
+
- Tab order should follow the visual order.
|
|
30
|
+
- Enter and Space should activate buttons and custom controls.
|
|
31
|
+
- Focus should never get trapped unless a modal or dialog deliberately manages it.
|
|
32
|
+
- Skip links should exist on content-heavy pages.
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
<div
|
|
36
|
+
role="button"
|
|
37
|
+
tabIndex={0}
|
|
38
|
+
onClick={handleDelete}
|
|
39
|
+
onKeyDown={(event) => {
|
|
40
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
41
|
+
handleDelete();
|
|
42
|
+
}
|
|
43
|
+
}}
|
|
44
|
+
>
|
|
45
|
+
Delete
|
|
46
|
+
</div>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Part 3: Contrast and Text Scaling
|
|
50
|
+
|
|
51
|
+
- Normal text contrast should meet WCAG AA minimums.
|
|
52
|
+
- Large text may use the relaxed large-text ratio, but still needs clear contrast.
|
|
53
|
+
- Layouts should survive zoom and text scaling without truncation.
|
|
54
|
+
- Avoid fixed-height containers that clip longer translated content.
|
|
55
|
+
|
|
56
|
+
## Part 4: Screen Reader Support
|
|
57
|
+
|
|
58
|
+
Use accessible names and state descriptions.
|
|
59
|
+
|
|
60
|
+
```javascript
|
|
61
|
+
<button aria-label="Close menu" onClick={handleClose}>
|
|
62
|
+
X
|
|
63
|
+
</button>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
If content updates dynamically, use live regions only when needed and keep them concise.
|
|
67
|
+
|
|
68
|
+
## Part 5: Motion and Reduced Motion
|
|
69
|
+
|
|
70
|
+
Animations should respect reduced-motion settings. Motion must support understanding, not create distraction.
|
|
71
|
+
|
|
72
|
+
```javascript
|
|
73
|
+
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
74
|
+
|
|
75
|
+
const menuVariants = {
|
|
76
|
+
open: {
|
|
77
|
+
opacity: 1,
|
|
78
|
+
transition: prefersReducedMotion ? { duration: 0 } : { duration: 0.2 }
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Part 6: Forms and Error Messaging
|
|
84
|
+
|
|
85
|
+
- Every input needs a visible label.
|
|
86
|
+
- Error messages should describe the problem and how to fix it.
|
|
87
|
+
- Validation should be announced in a way screen readers can reach.
|
|
88
|
+
- Do not rely on color alone to communicate state.
|
|
89
|
+
|
|
90
|
+
## Part 7: Testing Approach
|
|
91
|
+
|
|
92
|
+
Test accessibility with a mix of manual and automated checks.
|
|
93
|
+
|
|
94
|
+
- Automated scans for contrast, labels, and roles.
|
|
95
|
+
- Keyboard-only navigation passes for critical flows.
|
|
96
|
+
- Screen-reader spot checks for key screens.
|
|
97
|
+
- Motion tests for reduced-motion behavior.
|
|
98
|
+
|
|
99
|
+
## Review Checklist
|
|
100
|
+
|
|
101
|
+
- [ ] Semantic elements are used first.
|
|
102
|
+
- [ ] Keyboard operation is complete.
|
|
103
|
+
- [ ] Contrast and zoom behavior are acceptable.
|
|
104
|
+
- [ ] Accessible names exist for icon-only controls.
|
|
105
|
+
- [ ] Reduced-motion behavior is implemented.
|
|
106
|
+
- [ ] Form labels and errors are clear.
|
|
107
|
+
- [ ] Critical flows are tested with keyboard and screen readers.
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# Motion Design and Implementation
|
|
2
|
+
|
|
3
|
+
Tier: EXPERT
|
|
4
|
+
|
|
5
|
+
Motion is part of product behavior. It should clarify state changes, guide focus, and provide feedback without reducing accessibility or performance.
|
|
6
|
+
|
|
7
|
+
## Motion Intent Model
|
|
8
|
+
|
|
9
|
+
Use motion only for one of these intents:
|
|
10
|
+
- Transition intent: communicate screen or state transition.
|
|
11
|
+
- Feedback intent: confirm user action success/failure.
|
|
12
|
+
- Focus intent: direct attention to newly relevant content.
|
|
13
|
+
|
|
14
|
+
If a transition has no intent, remove it.
|
|
15
|
+
|
|
16
|
+
## Timing and Consistency
|
|
17
|
+
|
|
18
|
+
Adopt a small timing scale and reuse it across the product:
|
|
19
|
+
- Fast: 120ms for micro-feedback.
|
|
20
|
+
- Standard: 200ms to 260ms for component transitions.
|
|
21
|
+
- Slow: 320ms to 420ms for route transitions.
|
|
22
|
+
|
|
23
|
+
Avoid mixing unrelated easing curves in one flow.
|
|
24
|
+
|
|
25
|
+
## Performance-Safe Animation Rules
|
|
26
|
+
|
|
27
|
+
Prefer animating properties that do not trigger expensive layout and paint work:
|
|
28
|
+
- Preferred: transform, opacity.
|
|
29
|
+
- Avoid for frequent animation: top, left, width, height, box-shadow blur radius.
|
|
30
|
+
|
|
31
|
+
Use CSS containment and selective `will-change` only for elements that actually animate.
|
|
32
|
+
|
|
33
|
+
## Reduced Motion Compliance
|
|
34
|
+
|
|
35
|
+
Always implement reduced-motion fallback:
|
|
36
|
+
|
|
37
|
+
```css
|
|
38
|
+
.panel {
|
|
39
|
+
transition: transform 220ms ease, opacity 220ms ease;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@media (prefers-reduced-motion: reduce) {
|
|
43
|
+
.panel {
|
|
44
|
+
transition: none;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Interaction Patterns
|
|
50
|
+
|
|
51
|
+
Recommended patterns:
|
|
52
|
+
- Enter/exit fade + translate for dialogs.
|
|
53
|
+
- Staggered list reveal for scannability on load.
|
|
54
|
+
- Subtle press/hover feedback for actionable controls.
|
|
55
|
+
|
|
56
|
+
Avoid these patterns:
|
|
57
|
+
- Continuous decorative motion on primary content.
|
|
58
|
+
- Multiple competing animations in one viewport.
|
|
59
|
+
- Looping movement that can distract reading flow.
|
|
60
|
+
|
|
61
|
+
## Review Checklist
|
|
62
|
+
|
|
63
|
+
- [ ] Every animation has explicit product intent.
|
|
64
|
+
- [ ] Timing scale is consistent across components.
|
|
65
|
+
- [ ] Heavy layout-triggering properties are avoided.
|
|
66
|
+
- [ ] Reduced-motion mode is implemented and tested.
|
|
67
|
+
- [ ] Motion does not block keyboard or screen-reader flow.
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# Frontend Performance Engineering
|
|
2
|
+
|
|
3
|
+
Tier: EXPERT
|
|
4
|
+
|
|
5
|
+
Performance work should be evidence-driven. Start with baseline metrics, optimize where bottlenecks are proven, then verify that user-facing indicators improved.
|
|
6
|
+
|
|
7
|
+
## Core Metrics
|
|
8
|
+
|
|
9
|
+
Track Core Web Vitals in CI and release checks:
|
|
10
|
+
- LCP target: less than 2.5s on reference environments.
|
|
11
|
+
- INP target: less than 200ms.
|
|
12
|
+
- CLS target: less than 0.1.
|
|
13
|
+
|
|
14
|
+
Also track bundle size and script execution time for key routes.
|
|
15
|
+
|
|
16
|
+
## Render Efficiency
|
|
17
|
+
|
|
18
|
+
Common controls:
|
|
19
|
+
- Keep expensive computation outside render path with memoization.
|
|
20
|
+
- Use stable callbacks for memoized child components.
|
|
21
|
+
- Split large component trees by feature boundary.
|
|
22
|
+
|
|
23
|
+
```javascript
|
|
24
|
+
const visibleRows = useMemo(() => {
|
|
25
|
+
return allRows.filter((row) => row.isVisible);
|
|
26
|
+
}, [allRows]);
|
|
27
|
+
|
|
28
|
+
const handleRowOpen = useCallback((rowId) => {
|
|
29
|
+
openRowDetails(rowId);
|
|
30
|
+
}, [openRowDetails]);
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Network and Caching Strategy
|
|
34
|
+
|
|
35
|
+
- Treat server state separately from UI state.
|
|
36
|
+
- Use query caching with explicit stale policies.
|
|
37
|
+
- Avoid duplicate API calls by keying requests consistently.
|
|
38
|
+
|
|
39
|
+
For route transitions, prefetch data for likely next navigation paths.
|
|
40
|
+
|
|
41
|
+
## Bundle Governance
|
|
42
|
+
|
|
43
|
+
Use route and component-level code splitting:
|
|
44
|
+
- Lazy-load non-critical routes.
|
|
45
|
+
- Defer optional heavy modules until needed.
|
|
46
|
+
- Audit bundle growth at each release.
|
|
47
|
+
|
|
48
|
+
Set a budget and fail CI on unapproved bundle-size regressions.
|
|
49
|
+
|
|
50
|
+
## Diagnostics Workflow
|
|
51
|
+
|
|
52
|
+
1. Capture baseline profile and web-vitals report.
|
|
53
|
+
2. Apply one optimization change.
|
|
54
|
+
3. Re-profile and compare deltas.
|
|
55
|
+
4. Keep only changes with measurable improvement.
|
|
56
|
+
|
|
57
|
+
## Review Checklist
|
|
58
|
+
|
|
59
|
+
- [ ] Core metrics targets are monitored and reported.
|
|
60
|
+
- [ ] Render-heavy paths are profiled with tooling evidence.
|
|
61
|
+
- [ ] Data fetching uses cache and deduplication strategy.
|
|
62
|
+
- [ ] Bundle-size budget is defined and enforced.
|
|
63
|
+
- [ ] Performance regressions are blocked until reviewed.
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# Component Architecture and State Management
|
|
2
|
+
|
|
3
|
+
**Tier:** EXPERT | **Source:** awesome-copilot (smart/dumb) + minimax (design systems) + antigravity (React patterns)
|
|
4
|
+
|
|
5
|
+
## Purpose
|
|
6
|
+
|
|
7
|
+
UI architecture decides how state, behavior, and presentation are split. Good structure reduces re-render churn, keeps component boundaries stable, and makes features easier to test.
|
|
8
|
+
|
|
9
|
+
## Part 1: Smart and Dumb Separation
|
|
10
|
+
|
|
11
|
+
A smart component owns data flow, side effects, and orchestration. A dumb component renders input and emits events.
|
|
12
|
+
|
|
13
|
+
```javascript
|
|
14
|
+
function PaymentFormContainer() {
|
|
15
|
+
const [amount, setAmount] = useState('');
|
|
16
|
+
const [status, setStatus] = useState('idle');
|
|
17
|
+
const [errorMessage, setErrorMessage] = useState(null);
|
|
18
|
+
|
|
19
|
+
const handleSubmit = async (submittedAmount) => {
|
|
20
|
+
setStatus('loading');
|
|
21
|
+
try {
|
|
22
|
+
const response = await fetch('/api/payments', {
|
|
23
|
+
method: 'POST',
|
|
24
|
+
body: JSON.stringify({ amount: submittedAmount })
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
if (!response.ok) {
|
|
28
|
+
throw new Error('Payment request failed');
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
setStatus('success');
|
|
32
|
+
} catch (caughtError) {
|
|
33
|
+
setErrorMessage(caughtError.message);
|
|
34
|
+
setStatus('error');
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<PaymentFormView
|
|
40
|
+
amount={amount}
|
|
41
|
+
isLoading={status === 'loading'}
|
|
42
|
+
errorMessage={errorMessage}
|
|
43
|
+
onAmountChange={setAmount}
|
|
44
|
+
onSubmit={handleSubmit}
|
|
45
|
+
/>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```javascript
|
|
51
|
+
function PaymentFormView({ amount, isLoading, errorMessage, onAmountChange, onSubmit }) {
|
|
52
|
+
return (
|
|
53
|
+
<form onSubmit={(event) => { event.preventDefault(); onSubmit(amount); }}>
|
|
54
|
+
<input
|
|
55
|
+
value={amount}
|
|
56
|
+
onChange={(event) => onAmountChange(event.target.value)}
|
|
57
|
+
disabled={isLoading}
|
|
58
|
+
/>
|
|
59
|
+
<button disabled={isLoading}>
|
|
60
|
+
{isLoading ? 'Processing' : 'Pay'}
|
|
61
|
+
</button>
|
|
62
|
+
{errorMessage ? <p>{errorMessage}</p> : null}
|
|
63
|
+
</form>
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Part 2: State Ownership Rules
|
|
69
|
+
|
|
70
|
+
Use the smallest useful state scope.
|
|
71
|
+
|
|
72
|
+
- Local component state: form fields, toggles, ephemeral UI state.
|
|
73
|
+
- Shared UI state: theme, sidebar state, modal visibility.
|
|
74
|
+
- Server state: remote data, caching, invalidation, refetching.
|
|
75
|
+
- Derived state: compute from existing data instead of duplicating it.
|
|
76
|
+
|
|
77
|
+
Recommended mapping:
|
|
78
|
+
- `useState` for local state.
|
|
79
|
+
- `Zustand` or context for global UI state.
|
|
80
|
+
- `TanStack Query` for server state.
|
|
81
|
+
- Avoid context for high-frequency server data when query caching is the better fit.
|
|
82
|
+
|
|
83
|
+
## Part 3: Composition and Contracts
|
|
84
|
+
|
|
85
|
+
A component contract should define what it accepts, what it renders, and what events it emits.
|
|
86
|
+
|
|
87
|
+
```javascript
|
|
88
|
+
interface ButtonProps {
|
|
89
|
+
variant?: 'primary' | 'secondary' | 'danger';
|
|
90
|
+
size?: 'small' | 'medium' | 'large';
|
|
91
|
+
disabled?: boolean;
|
|
92
|
+
loading?: boolean;
|
|
93
|
+
onClick: () => void;
|
|
94
|
+
children: React.ReactNode;
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Keep public component APIs stable. If the component grows many optional props, split it into smaller feature-specific components instead of adding more flags.
|
|
99
|
+
|
|
100
|
+
## Part 4: Anti-Patterns
|
|
101
|
+
|
|
102
|
+
- Prop drilling across many levels.
|
|
103
|
+
- Global context for everything.
|
|
104
|
+
- Mixing network calls into presentational views.
|
|
105
|
+
- Repeating derived values in both state and render.
|
|
106
|
+
- Reaching into another feature's internals instead of using the feature public API.
|
|
107
|
+
|
|
108
|
+
## Part 5: Design System Integration
|
|
109
|
+
|
|
110
|
+
Design tokens should drive spacing, color, and sizing. Avoid one-off values unless the design system explicitly allows them.
|
|
111
|
+
|
|
112
|
+
```javascript
|
|
113
|
+
const buttonStyles = {
|
|
114
|
+
primary: 'bg-primary text-on-primary',
|
|
115
|
+
secondary: 'bg-surface text-primary',
|
|
116
|
+
danger: 'bg-danger text-on-danger'
|
|
117
|
+
};
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Review Checklist
|
|
121
|
+
|
|
122
|
+
- [ ] Smart and dumb layers are separated.
|
|
123
|
+
- [ ] State ownership is minimal and deliberate.
|
|
124
|
+
- [ ] Server state uses a cache-aware tool.
|
|
125
|
+
- [ ] Component contracts are explicit and stable.
|
|
126
|
+
- [ ] Feature boundaries are respected.
|
|
127
|
+
- [ ] Design tokens are used consistently.
|
|
128
|
+
- [ ] Prop drilling does not replace composition or shared state.
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# Frontend Skill Pack
|
|
2
|
+
|
|
3
|
+
Default tier: `advance`
|
|
4
|
+
|
|
5
|
+
## Purpose
|
|
6
|
+
Deliver frontend experiences that are visually intentional, accessible, and efficient.
|
|
7
|
+
|
|
8
|
+
## In Scope
|
|
9
|
+
- UI architecture and component composition
|
|
10
|
+
- Responsive layouts and breakpoints
|
|
11
|
+
- Motion, animation, and interaction polish
|
|
12
|
+
- Accessibility and keyboard flows
|
|
13
|
+
- Conversion clarity and onboarding flow
|
|
14
|
+
|
|
15
|
+
## Must-Have Checks
|
|
16
|
+
- Feature-driven folder structure
|
|
17
|
+
- Smart and dumb component separation
|
|
18
|
+
- Server state and client state separation
|
|
19
|
+
- Reduced-motion fallback
|
|
20
|
+
- Accessibility baseline pass
|
|
21
|
+
- Responsive behavior verified on mobile and desktop
|
|
22
|
+
|
|
23
|
+
## Evidence
|
|
24
|
+
- Usability audit result
|
|
25
|
+
- Visual regression output
|
|
26
|
+
- Accessibility checklist result
|
|
27
|
+
- Release notes for motion and interaction changes
|
|
28
|
+
|
|
29
|
+
## Fallback
|
|
30
|
+
- If a feature cannot meet the advance tier, ship standard mode only as a temporary compatibility path.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# Fullstack Engineering Skills
|
|
2
|
+
|
|
3
|
+
Default tier: `advance`
|
|
4
|
+
|
|
5
|
+
This domain connects frontend and backend implementation into a single feature-delivery workflow. The guidance combines architecture patterns from awesome-copilot, operational checklists from MiniMax, and practical delivery patterns from antigravity.
|
|
6
|
+
|
|
7
|
+
## Topics
|
|
8
|
+
- [Feature Slicing](feature-slicing.md) - Organize UI, service, repository, and tests around one business capability
|
|
9
|
+
- [Contracts](contracts.md) - Keep API schemas, DTOs, and frontend types synchronized
|
|
10
|
+
- [End-to-End](end-to-end.md) - Release readiness by verified user journeys and operational gates
|
|
11
|
+
|
|
12
|
+
## Operating Model
|
|
13
|
+
- Use `advance` for normal feature development.
|
|
14
|
+
- Escalate to `expert` when a feature crosses multiple bounded contexts or service boundaries.
|
|
15
|
+
|
|
16
|
+
## Above-Line Additions
|
|
17
|
+
- Contract drift detection in CI before merge.
|
|
18
|
+
- Backward-compatibility checks for API changes.
|
|
19
|
+
- Release evidence bundle for end-to-end readiness.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Contracts
|
|
2
|
+
|
|
3
|
+
Tier: EXPERT
|
|
4
|
+
|
|
5
|
+
Contracts keep frontend expectations and backend behavior aligned through explicit schemas. A contract is not documentation only; it is an executable guardrail.
|
|
6
|
+
|
|
7
|
+
## Contract Sources
|
|
8
|
+
|
|
9
|
+
- API specification: OpenAPI 3.1 for HTTP boundaries.
|
|
10
|
+
- Runtime validation: Zod/Pydantic at service edges.
|
|
11
|
+
- Type generation: frontend types generated from server contract.
|
|
12
|
+
|
|
13
|
+
## Required Pipeline
|
|
14
|
+
|
|
15
|
+
1. Define or update schema in contract source.
|
|
16
|
+
2. Regenerate consumer types.
|
|
17
|
+
3. Run contract tests against provider and consumer.
|
|
18
|
+
4. Fail CI if drift is detected.
|
|
19
|
+
|
|
20
|
+
## Drift Prevention
|
|
21
|
+
|
|
22
|
+
Common drift scenarios:
|
|
23
|
+
- Backend renames field but frontend still expects old key.
|
|
24
|
+
- Enum expands or changes values without consumer handling.
|
|
25
|
+
- Response shape changes silently in minor release.
|
|
26
|
+
|
|
27
|
+
Control strategy:
|
|
28
|
+
- Pin contract artifact version.
|
|
29
|
+
- Require schema diff check in pull request.
|
|
30
|
+
- Block merge on unreviewed breaking changes.
|
|
31
|
+
|
|
32
|
+
## Breaking Change Policy
|
|
33
|
+
|
|
34
|
+
- Additive changes: allowed in minor version if backward-compatible.
|
|
35
|
+
- Behavioral changes: require release note and migration note.
|
|
36
|
+
- Breaking schema changes: major version bump with compatibility plan.
|
|
37
|
+
|
|
38
|
+
## Example Workflow
|
|
39
|
+
|
|
40
|
+
```text
|
|
41
|
+
contracts/openapi.yaml updated
|
|
42
|
+
-> generate frontend types
|
|
43
|
+
-> run provider contract tests
|
|
44
|
+
-> run consumer compatibility tests
|
|
45
|
+
-> publish artifact only if all checks pass
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Review Checklist
|
|
49
|
+
|
|
50
|
+
- [ ] Contract source is versioned and reviewed.
|
|
51
|
+
- [ ] Provider and consumer tests both pass.
|
|
52
|
+
- [ ] Breaking changes are tagged and documented.
|
|
53
|
+
- [ ] Migration path is included before release.
|