Thicken the two flagship engineering methodology skills with the artifact set promised by issue #239: schema-v1 eval manifests (6 cases each), fillable templates, and one small stdlib-only script per skill with tests. backend-engineering: - evals/evals.json: API implementation review, endpoint modeling, service structure, error handling, N+1 detection, integration retry/idempotency - templates/service-design-record.md, templates/error-handling-taxonomy.md - scripts/n1-query-spotter.py (+ test_n1_query_spotter.py): flags query-like calls inside loops with loop-variable confidence, --json output frontend-engineering: - evals/evals.json: component/state design, state management selection, API integration, data-fetching states, performance review, performance budgets - templates/component-state-design-record.md, templates/performance-budget.md - scripts/bundle-budget-checker.py (+ test_bundle_budget_checker.py): enforces total and per-chunk byte budgets on bundle reports, exit 1 on violation Both SKILL.md files gain Templates and Scripts sections; both READMEs document the scripts in Quick Start. All local validators pass (validate-skills.rb, validate-evals.py, eval-coverage ratchet, make validate). Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2.0 KiB
Frontend Engineering
Frontend engineering methodology — component architecture, state management, API integration, responsive layout, client-side performance, and frontend testing patterns. Framework agnostic, focused on web frontend implementation.
Why Install This Skill
Your agent applies proven component architecture, state management, and performance patterns instead of reinventing frontend structure each time. Fillable templates capture component/state design and performance budgets as reviewable records, and the bundled bundle-budget checker enforces performance budgets in CI.
What You Get
| Directory | Purpose |
|---|---|
SKILL.md |
Core methodology, trigger conditions, reference index |
references/ |
Deep-dive reference files loaded on demand |
templates/ |
Fillable records: component/state design record, performance budget |
scripts/ |
bundle-budget-checker.py — checks bundle size reports against total and per-chunk budgets |
evals/ |
Output-quality eval manifest for the skill's methodology cases |
Triggers
Building UI components, choosing state management approaches, integrating APIs, optimizing Core Web Vitals, or setting up responsive layouts.
Requirements
Platform-agnostic. Framework-agnostic patterns applicable to React, Vue, Svelte, or vanilla JS. The bundled script needs only Python 3 (standard library).
Quick Start
Check a bundle size report against total and per-chunk budgets before merging a change:
python3 frontend-engineering/scripts/bundle-budget-checker.py dist/bundle-report.json --total 500KB --chunk 120KB
The report maps chunk names to sizes (or a {"chunks": [...]} list from your bundler's analyzer). The script prints each chunk, the budget, and OK/OVER status, and exits 1 when any budget is exceeded — so it can gate CI. Add --json for machine-readable output.
Load SKILL.md for the methodology overview and reference table, then load specific references as needed for the task at hand.