optimize

Overview of optimize skill

What the optimize skill does

The optimize skill helps an agent diagnose and improve UI performance issues instead of guessing at “speed fixes.” It is built for cases where a site or app feels slow, laggy, janky, heavy, or unresponsive, and it focuses on the concrete areas that usually matter most: loading, rendering, animations, images, bundle size, and runtime behavior.

Who should use optimize

This optimize skill is best for developers, product engineers, frontend specialists, and AI-assisted coding workflows that need a practical performance pass on an existing interface. It is most useful when you already have a page, component, or app behavior to inspect, not when you just want generic performance tips.

The real job-to-be-done

Users typically want more than “make it faster.” They need to:

• find the actual bottleneck,
• avoid premature optimization,
• choose changes with the best user impact,
• and verify that the change improved performance.

That is where optimize for Performance Optimization is stronger than a broad prompt: it steers the work toward measurement, bottleneck identification, and targeted fixes.

What makes this optimize skill different

The main differentiator is scope discipline. The skill does not present performance as one vague problem. It breaks the work into measurable categories such as Core Web Vitals, load time, bundle weight, animation smoothness, CPU cost, memory use, and network overhead. That makes the optimize usage path much easier to operationalize in a real repo.

How to Use optimize skill

How to install optimize

Use the skill through your skills workflow:

npx skills add pbakaus/impeccable --skill optimize

After install, open:

• SKILL.md

This repository evidence is lightweight, so SKILL.md is the primary source of truth for the optimize guide and workflow.

When to invoke optimize in practice

Call optimize when a user says things like:

• “The page loads slowly”
• “Scrolling feels janky”
• “Animations stutter”
• “The bundle is too large”
• “Mobile performance is poor”
• “Can you improve Core Web Vitals?”

It is a good fit when the task involves an existing UI and some observable slowness. It is a weaker fit for backend-only latency, database tuning, or infrastructure cost optimization.

What input the optimize skill needs

The optimize skill works best when you provide:

• the target page, route, or component,
• what feels slow,
• where the issue happens,
• device or browser context,
• any measurements you already have,
• and your constraints.

Good inputs:

• “Optimize the product listing page on mobile Safari; LCP is high and scroll stutters.”
• “Optimize our React dashboard initial load; bundle grew after adding charts.”
• “Optimize modal open/close animation; it drops frames on mid-range Android devices.”

Weak input:

• “Make the app faster.”

Turn a rough request into a strong optimize prompt

A stronger optimize usage pattern is:

1. Name the target.
2. Describe the symptom.
3. Provide evidence.
4. State constraints.
5. Ask for prioritized fixes.

Example prompt:
“Use the optimize skill on our /pricing page. Problem: slow first load on 4G and layout shifts after hero image loads. Current signals: LCP 4.1s, CLS 0.19, JS bundle increased after adding testimonials carousel. Constraints: keep design unchanged, no framework migration. Please identify likely bottlenecks, rank fixes by impact, and propose code-level changes.”

That prompt gives the agent enough context to do real performance triage instead of producing generic advice.

Start with measurement, not fixes

The most important instruction in the skill is effectively: measure before and after. In practice, that means your optimize workflow should begin with current state assessment:

• Core Web Vitals: LCP, INP/FID, CLS
• paint and interactivity timing,
• bundle and asset sizes,
• frame rate and runtime cost,
• request counts and waterfall patterns.

If you skip this step, the output quality drops quickly because the agent has to infer the bottleneck.

What the skill is likely to inspect

Based on the source, the optimize skill is oriented around these performance buckets:

• loading performance,
• rendering performance,
• image optimization,
• animation smoothness,
• JavaScript and CSS weight,
• network and payload efficiency.

That makes it especially useful for frontend performance audits and targeted remediation plans.

Suggested workflow for optimize usage

A practical workflow is:

1. Identify the slow screen or interaction.
2. Gather measurements or reproduction details.
3. Invoke optimize with the target and symptoms.
4. Review the proposed bottlenecks and fixes.
5. Apply the highest-impact low-risk changes first.
6. Re-measure.
7. Iterate on the remaining bottlenecks.

This sequence matches what users actually care about: faster output with less wasted refactoring.

Repository-reading path for faster adoption

For this skill, there is not much supporting structure beyond SKILL.md, so the best reading path is simple:

1. SKILL.md for scope and workflow
2. the “Assess Performance Issues” section first
3. then the optimization categories such as loading and rendering

This is a compact skill, so adoption friction is low, but it also means you need to bring your own tooling and repo-specific evidence.

What strong optimize outputs should look like

A useful optimize result should include:

• the likely bottleneck,
• why it affects users,
• how to verify it,
• the fix options,
• and priority order.

For example, “convert oversized hero images to AVIF/WebP” is better when paired with “current image is 3000px wide but renders at 360px on mobile, delaying LCP.”

Common constraints to mention up front

To get better optimize install and usage outcomes, tell the agent if you must preserve:

• framework choice,
• visual design,
• SEO behavior,
• animation feel,
• browser support,
• analytics scripts,
• or third-party widgets.

Performance advice changes materially depending on whether you can remove code, defer scripts, alter image delivery, or simplify UI behavior.

optimize skill FAQ

Is optimize better than a normal prompt for performance work?

Usually yes, if you have a real UI performance issue. A generic prompt often jumps straight to random fixes. The optimize skill is more useful because it frames the task around diagnosis first, then targeted intervention.

Is optimize only for frontend web apps?

Mostly, yes. The optimize skill is clearly centered on UI performance: load speed, rendering, animations, images, bundle size, and user-perceived smoothness. It is not the right primary tool for database, queue, or server tuning.

Do I need Lighthouse or Web Vitals data first?

No, but it helps a lot. You can still use optimize with symptom-based input, but the best results come when you provide actual measurements or at least a reliable reproduction path.

Can beginners use the optimize skill?

Yes, if they can describe the page and symptoms clearly. The skill gives structure, but beginners may still need help collecting evidence and applying framework-specific fixes.

When should I not use optimize?

Skip this optimize guide when:

• the problem is backend latency only,
• the issue is not performance but usability,
• you need architecture-level scaling advice,
• or you have no target screen, flow, or symptom to inspect.

Does the optimize skill make code changes automatically?

The skill itself is guidance-oriented. In an AI coding workflow, it can drive code edits, but the quality of those edits depends on how much repository context, measurement data, and constraints you provide.

How to Improve optimize skill

Give optimize a specific target, not a whole app

The fastest way to improve optimize results is to narrow scope. “Optimize checkout page submit flow on low-end Android” is far better than “optimize my app.” A clear target reduces guesswork and produces more actionable fixes.

Include user-visible symptoms and technical signals

Pair qualitative and quantitative inputs:

• “scroll stutters after opening filters”
• “INP regressed to 280ms”
• “hero image loads late”
• “bundle grew by 400 KB after adding editor”

This combination helps the optimize skill connect metrics to root causes.

Ask for ranked recommendations

A good prompt asks the agent to separate:

• high-impact quick wins,
• medium-effort improvements,
• and invasive changes.

That makes optimize for Performance Optimization more decision-friendly, especially when teams cannot afford broad rewrites.

Provide constraints that change the fix

Performance recommendations differ if:

• SSR is required,
• design cannot change,
• third-party scripts are mandatory,
• image quality must stay high,
• or animation richness is part of the product.

If you do not state constraints, the optimize skill may suggest changes that are technically valid but unusable in your environment.

Request before-and-after validation steps

Do not stop at “apply fixes.” Ask the skill to define what to re-measure after changes:

• which metric should improve,
• where to inspect it,
• and what success threshold matters.

This is one of the biggest practical upgrades to optimize usage quality.

Watch for common failure modes

The optimize skill is most likely to underperform when:

• the prompt lacks a target,
• no measurements are provided,
• symptoms are mixed across several pages,
• or the agent is asked to optimize everything at once.

Another common failure mode is over-focusing on bundle size when the real issue is layout thrashing, oversized media, or script execution cost.

Ask for root cause, not a list of tips

If your first result is generic, refine with:
“Use the optimize skill again, but identify the top two likely root causes for this page and explain why they are more probable than the others.”

That pushes the output from checklist mode into diagnosis mode.

Iterate after the first optimization pass

The best optimize guide in practice is iterative:

1. fix the biggest bottleneck,
2. re-measure,
3. surface the next constraint,
4. optimize again.

Performance work is rarely solved in one pass, and the skill is more valuable when used as a loop instead of a one-shot command.