mirror of
https://github.com/magnus919/agent-skills.git
synced 2026-09-16 05:56:30 +03:00
48c1a1e6f5
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>
38 lines
2.0 KiB
Markdown
38 lines
2.0 KiB
Markdown
# 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:
|
|
|
|
```bash
|
|
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.
|