optimize

Diagnose and fix web performance bottlenecks across Core Web Vitals and rendering.

14|5|Updated Mar 16, 2026
One-click install
npx skills add https://github.com/TheCardGoat/lorcana-simulator --skill optimize-thecardgoat
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/TheCardGoat/lorcana-simulator/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/TheCardGoat/lorcana-simulator --skill optimize-thecardgoat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you systematically identify and fix performance issues so your application loads faster, feels more responsive, and delivers smoother interactions.

Core Features & Use Cases

  • Performance measurement: Collect Core Web Vitals, bundle size, runtime, and network metrics before making changes to avoid premature optimization.
  • Targeted optimization plans: Improve loading performance, rendering efficiency, animation behavior, and framework-level re-render patterns.
  • Validation and monitoring: Verify improvements with before/after metrics, real-device testing, and regression checks across slow connections.

Quick Start

Use the optimize skill to audit your application performance, identify the biggest bottleneck, and produce a prioritized set of changes with measurable before-and-after targets.

Frequently Asked Questions about optimize

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix web vitals and improve my application's loading performance?

To improve loading performance and web vitals, systematically measure Core Web Vitals and bundle size first, then identify the biggest bottleneck to produce a prioritized set of changes with measurable before-and-after targets.

What's the best way to diagnose slow rendering and animation bottlenecks in a web app?

Diagnosing slow rendering and animation bottlenecks requires collecting runtime metrics and profiling framework-level re-render patterns to target DOM render efficiency, ensuring smoother interactions through systematic mitigation steps.

How do I optimize bundle size and reduce network bottlenecks for slow connections?

Optimize bundle size and network bottlenecks by auditing network metrics, applying bundle reduction strategies, and verifying improvements through real-device testing and regression checks across slow connection scenarios.

Can I use this approach to measure performance improvements without causing regressions?

Yes, you can measure performance improvements without regressions by validating changes with before-and-after metrics, running post-change verification, and performing real-device testing to ensure load and rendering gains hold.

Why does my web app feel unresponsive and when do I need performance profiling?

Your web app feels unresponsive due to load, rendering, animation, or network bottlenecks; you need performance profiling to collect baseline metrics, identify the root cause, and apply targeted optimization plans.

What are the limitations of premature optimization without baseline metrics?

The limitation of premature optimization without baseline metrics is that changes lack measurable before-and-after targets, risking framework-level re-render regressions and unverified load improvements across slow-connection UX scenarios.