testing-performance

Performance regressions can be prevented by running automated tests that measure bundle size and render time before deployment. This Skill detects increases in either metric, alerting you to optimize components proactively and catch degradations early in your workflow.

Monitor bundle size and render time by creating performance test files named element.performance.ts alongside your components, then execute them with pnpm run test:performance. This Skill uses testBundleSize and testRenderTime to verify constraints automatically.

Yes. This Skill integrates performance tests into your CI workflow to catch slow rendering and bundle bloat automatically. Tests run against HTML fixtures using the performance test template, flagging any regressions before deployment.

Set up performance tests by placing element.performance.ts files beside your component files and defining bundle size constraints with testBundleSize. Run pnpm run test:performance to verify components stay within acceptable limits.

Render time testing measures how quickly UI elements display and respond. This Skill tracks render time for web components using testRenderTime, alerting you when rendering speed degrades so you can optimize before users experience slowdowns.

Minimal setup is required. Place performance test files beside your components, use HTML fixtures as shown in the template, and run pnpm run test:performance. This Skill handles the rest, automatically comparing results against your defined bundle size and render time constraints.