ux-performance
Audit and optimize real web UX performance. Use for slow SPA pages, routes, interactions, huge tables, loading, caching, memory, Web Vitals, Lighthouse, budgets, or CI regressions.
- License 许可
- MIT
- 最近更新
- 2026-11-14
- Stars
- ★ 4
- Forks
- 1
01 前言 Front Matter
- name
- ux-performance
- description
- Audit and optimize real web UX performance. Use for slow SPA pages, routes, interactions, huge tables, loading, caching, memory, Web Vitals, Lighthouse, budgets, or CI regressions.
02 资源文件 4
- 参考文档CI.md7.6 KB
- 参考文档MEASUREMENT.md10.1 KB
- 参考文档OPTIMIZATION.md11.4 KB
- 参考文档STRESS.md8.6 KB
03 SKILL.md 正文
Optimize measured intent-to-useful-state, not suspicious code. Default to client web; follow delayed journeys to backend/delivery.
Contract
Name before edits:
- Journey: route/action, start state, data volume, device/network, cache state, and worst credible load.
- Milestone: visible outcome; preserve intended animation, branding, interaction and data semantics via fidelity assertions.
- Primary metric: elapsed time or resource bound for that milestone.
- Worthwhile delta: set before edits; honor requested scale (1% is not 10x). Repeatable 100 ms can matter.
- Endpoint: read-only audit, optimize through requested delivery, or calibrated CI guard.
For optimization, read the experiment loop before edits.
Loop
- Inventory versions, production build, telemetry, profilers, tests and budgets. Read first-party docs before framework/API changes.
- Measure baseline before edits on one production-like scenario/fixture. Keep original build/traces ignored or temporary; MEASUREMENT.md owns field/lab evidence.
- Build intent-to-paint waterfall: queue, network/TTFB, transfer, parse/evaluate, app/render/commit, layout, paint. Mark serial/off-path work and cache state.
- Rank bottlenecks; form falsifiable hypotheses. Delete work, shrink input, or remove serialization before tuning; change one causal variable at a time.
- Choose a measured optimization. For CPU/allocation/locality, apply data-oriented redesign before caching or offloading.
- Pair base/candidate on the same scenario, fixture, machine, browser, build, and cache. Report median/spread; verify fidelity, accessibility, memory, bundle, and errors.
- Keep worthwhile, guardrail-safe gains; revert losing/inconclusive owned edits. Report
Value not proven - inconclusivefor noise, regression for losses. Refresh leads/fidelity before cumulative results; never metric-shop. - CI only when requested: CI.md, stable cheap PR checks, noisy/deep nightly checks, real-user monitoring after deploy. Hooks are advisory until calibrated.
For scale/burst/contention/soak claims, use STRESS.md: capacity knee and correctness under pressure.
For bundles, load bundle analysis.
Output
Outcome and slowest segment:
Verdict: <measured state or value verdict>
| Rank | Bottleneck | Critical-path cost | Evidence | Next change | Confidence |
|---:|---|---:|---|---|---|
Method: <command, build, fixture, cache, device/network, runs, base/candidate>
Guardrails: <correctness, accessibility, errors, memory, bundle>
Artifacts: <paths or links>
Separate measured facts, inferences, and untested opportunities. Lighthouse scores, static warnings, smaller-looking code, or an upgrade alone never prove speed.
React render probes are not production UX proof.
04 同仓库更多 Skills
hill-climb
Optimize a defined outcome through bounded evaluation loops. Use for hill-climb requests or repeated improvement against an executable eval, benchmark, or visual comparison; not a one-pass review.
gestures
Build or fix web drag, swipe, sheet, reorder, and hold interactions: direct tracking, rubber banding, release velocity, momentum, snap points, and interruption. Not native React Native or Swift.
hill-climb
Optimize a defined outcome through bounded evaluation loops. Use for hill-climb requests or repeated improvement against an executable eval, benchmark, or visual comparison; not a one-pass review.
gestures
Build or fix web drag, swipe, sheet, reorder, and hold interactions: direct tracking, rubber banding, release velocity, momentum, snap points, and interruption. Not native React Native or Swift.
improve-animations
Audit existing web UI motion and prioritize concrete improvements or self-contained implementation plans. Use for a motion roadmap; animate owns implementation and diff review.
effect-ts
Use when setting up a repository that uses the Effect TypeScript library.