optimize

Overview

The optimize skill is designed to help developers systematically diagnose and fix UI performance problems across web applications. It focuses on improving loading speed, rendering efficiency, animation smoothness, image optimization, and reducing bundle size. Use optimize when you encounter slow, laggy, or janky interfaces, or when users report performance issues such as long load times or unresponsive interactions.

Who Should Use optimize?

• Frontend developers aiming to enhance site speed and responsiveness.
• Teams experiencing user complaints about slow or unresponsive UIs.
• Projects with large JavaScript bundles, unoptimized images, or animation issues.

Problems optimize Solves

• Slow initial page loads and high time-to-interactive.
• Large or uncompressed images impacting performance.
• Inefficient rendering or layout thrashing.
• Animation stutter and jank.
• Oversized JavaScript or CSS bundles.

How to Use

Installation Steps

1. Install the optimize skill using the following command:

   npx skills add https://github.com/pbakaus/impeccable --skill optimize

2. Begin by reading the SKILL.md file for a structured overview of the workflow and recommendations.

3. Review supporting files such as README.md, AGENTS.md, metadata.json, and relevant folders like rules/, resources/, references/, or scripts/ for additional context and helper tools.

Applying optimize in Your Project

• Assess Performance: Measure current metrics such as Core Web Vitals (LCP, FID/INP, CLS), load time, bundle size, and runtime performance. Identify specific bottlenecks—whether they are due to large images, heavy JavaScript, or inefficient rendering.
• Develop an Optimization Plan: Prioritize fixes based on impact. Focus on optimizing images (modern formats, compression, lazy loading), reducing bundle size, and improving rendering and animation performance.
• Iterate and Measure: Always benchmark before and after changes to ensure optimizations have the desired effect.

Suggested Files to Preview

• SKILL.md (primary workflow and recommendations)

FAQ

What does the optimize skill do?

The optimize skill provides a structured approach to diagnosing and fixing frontend performance issues, including slow loading, rendering delays, animation problems, and large asset sizes.

When should I use optimize?

Use optimize when your application feels slow, users report lag or jank, or you want to improve metrics like load time and responsiveness.

How do I get started?

Install the skill with the provided npx command, then follow the guidance in SKILL.md to assess and address performance bottlenecks.

Where can I find more details or scripts?

Check the Files tab in the repository for additional resources, references, and helper scripts to support your optimization workflow.