Files
magnus919_agent-skills/frontend-engineering
Magnus HedemarkGitHubfactory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
6f67a34ef1 feat(skill): cross-pollinate the new tool wave into catalog routing (#275)
* feat(skill): cross-pollinate the new tool wave into catalog routing

Wire the recent tool skill wave into the two-layer routing graph so the
new tool skills are reachable from the methodology skills that own their
domains, and vice versa:

- methodology -> tool down-routes: platform-engineering -> kubernetes,
  terraform, telemetry, postgres, grafana; site-reliability-engineering ->
  telemetry, grafana; data-engineering and backend-engineering -> postgres;
  frontend-engineering -> mobile-development; verification-methodology ->
  playwright, documents; technical-documentation -> documents
- neckbeard: add mobile-development and documents routing rows plus
  change-surface coverage entries, and cross-link the lightweight
  test-hardening path to qa-methodology's bounded mutation-review material
- collaboration layer: chief-of-staff-methodology -> slack/notion/email,
  go-to-market -> crm, conditional-customer-success -> crm; fix the dead
  seo-content-optimization reference in go-to-market (now seo-audit)
- references/skill-triggers.md: add trigger rows for the 14 new skills
- bring go-to-market's description up to the quality validator's
  imperative-verb + negative-boundary requirement and regenerate catalogs

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>

* fix(skill): add eval manifest for technical-documentation

The eval-coverage ratchet fails on modified skills without a schema-valid
manifest once coverage passes 50%. technical-documentation was modified by
the routing cross-pollination change and lacked one; add six output-quality
cases covering README authorship, API reference generation, CLI help design,
agent-facing docs, documentation-site IA, and troubleshooting sections.

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>

---------

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
2026-08-04 12:46:06 -04:00
..

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.