optimize
by pbakausThe optimize skill diagnoses and fixes UI performance issues across loading speed, rendering, animations, images, and bundle size. Use it when you need a structured optimize guide for performance optimization, with measurement-first troubleshooting for slow, laggy, or janky web experiences.
This skill scores 68/100, which means it clears the bar for listing as a useful but somewhat generic optimization guide. Directory users get a clear trigger, a broad performance checklist, and practical optimization areas, but should expect to supply their own tooling, diagnostics workflow, and implementation specifics.
- Strong triggerability: the description clearly maps to common user requests like slow, laggy, janky UI, bundle size, and load-time issues.
- Operationally useful structure: it directs agents to measure first, identify bottlenecks, and then work through loading, rendering, animation, image, and bundle optimizations.
- Includes concrete tactics and examples, such as Core Web Vitals targets and image optimization patterns like `srcset`, lazy loading, and modern formats.
- No support files, scripts, or referenced tools are provided, so execution still depends on the agent inventing the exact measurement and remediation workflow.
- The guidance is broad and checklist-like rather than repository-specific, which limits leverage versus a well-crafted generic performance prompt.
Overview of optimize skill
What optimize does
The optimize skill helps diagnose and fix UI performance problems: slow first load, heavy bundles, janky interactions, poor image delivery, layout shifts, and animation stutter. It is a good fit when you need the optimize skill for Performance Optimization, not just generic “make it faster” advice.
Who should use it
Use optimize if you have a real performance complaint, a measurable slowdown, or a UX issue that users can feel. It is especially useful for frontend engineers, full-stack developers, and AI-assisted coders working on web apps, design systems, or marketing sites.
What makes it useful
The main value of the optimize guide is that it pushes you to measure first, then prioritize the right bottleneck. That helps avoid random bundle trimming or image tweaking when the real issue is render blocking, expensive JS, or a bad loading strategy.
How to Use optimize skill
Install optimize skill
Use the project’s skill install flow first, then point the skill at the target app, page, route, or component you want improved. For an optimize install, include the part of the product that feels slow, plus the environment where it is slow.
Give the skill a performance target
The best optimize usage starts with a concrete goal, not a vague request. Good inputs include:
- “Optimize the homepage hero for faster LCP on mobile”
- “Find the biggest cause of jank in this dashboard table”
- “Reduce bundle size without changing visible behavior”
- “Improve animation smoothness during panel transitions”
Read the right parts first
Start with SKILL.md, then inspect the app code that controls the slow path: page entry points, data fetching, image usage, heavy components, route loaders, and build output. If the repo has perf scripts, Lighthouse notes, or bundle reports, read those before editing code.
Work in a measurement-first loop
A strong optimize guide follows this sequence: identify the bottleneck, choose the smallest fix that addresses it, verify the change, then compare before and after. Ask for metrics or traces when available, because a “faster-feeling” change that does not improve the measured bottleneck is usually the wrong win.
optimize skill FAQ
Is optimize better than a normal prompt?
Yes, when the task is specifically about Performance Optimization. A normal prompt may suggest generic best practices; the optimize skill is better when you want a structured diagnosis, a targeted fix, and a decision process that distinguishes load issues from render issues.
What input does optimize need?
It works best with a target surface and a symptom. For example: the route, device class, browser, or interaction that is slow; what users notice; and any known constraints such as no dependency upgrades, no visual changes, or no API contract changes.
Is optimize beginner-friendly?
Yes, if you can describe the problem clearly. You do not need deep profiling expertise to start, but the more specific your report, the more useful the output. If you only say “make it faster,” the skill has to guess where the real bottleneck is.
When should I not use optimize?
Do not use it for feature design, copywriting, or general refactoring unless performance is the actual goal. If the issue is business logic correctness, accessibility only, or visual redesign without slowdown, a different skill or prompt is a better match.
How to Improve optimize skill
Provide the symptom, scope, and constraint
The best optimize results come from inputs that name three things: what is slow, where it happens, and what cannot change. Example: “The product grid on mobile has poor INP; keep the current layout and avoid new dependencies.” That gives the skill a real boundary for Performance Optimization.
Share evidence when you have it
If you have Lighthouse scores, Web Vitals, bundle analyzer output, long-task traces, or a screenshot of the slow interaction, include them. Evidence helps the skill separate perception from impact and choose fixes that move the metric instead of just the code style.
Ask for the next bottleneck after the first fix
Optimization is iterative. After the first pass, ask optimize to reassess the remaining bottleneck rather than stacking unrelated changes. That keeps the optimize skill focused on high-leverage work and reduces the chance of trading one slowdown for another.