optimize
Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.
71
63%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./.cursor/skills/optimize/SKILL.mdQuality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong skill description that concisely covers specific capabilities, includes a comprehensive set of natural trigger terms, and clearly delineates both what the skill does and when it should be used. It uses proper third-person voice and is well-scoped to a distinct niche of UI performance diagnosis and optimization.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete areas of action: loading speed, rendering, animations, images, and bundle size. The verbs 'diagnoses and fixes' clearly describe what the skill does. | 3 / 3 |
Completeness | Clearly answers both 'what' (diagnoses and fixes UI performance across multiple dimensions) and 'when' (explicit 'Use when...' clause with specific trigger terms and user intent scenarios). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural user terms: 'slow', 'laggy', 'janky', 'performance', 'bundle size', 'load time', 'faster', 'smoother experience' — these are exactly the words users would naturally use when describing UI performance issues. | 3 / 3 |
Distinctiveness Conflict Risk | Clearly scoped to UI performance optimization with distinct triggers like 'janky', 'laggy', 'bundle size', and 'load time' that are unlikely to conflict with general coding or design skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
27%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill reads like a comprehensive web performance handbook rather than a targeted skill for Claude. It explains many concepts Claude already knows (what Core Web Vitals are, how lazy loading works, what GPU acceleration means) and packs too much breadth into a single file without progressive disclosure. The strongest aspects are the concrete code examples for layout thrashing and responsive images, but these are buried in extensive lists of general advice.
Suggestions
Cut the content by 60-70% by removing explanations of concepts Claude already knows (e.g., what LCP/FID/CLS are, what tree shaking is, what React.memo does) and focus only on decision-making heuristics and non-obvious patterns.
Split into separate reference files (e.g., IMAGES.md, BUNDLE-SIZE.md, RENDERING.md, CORE-WEB-VITALS.md) and keep SKILL.md as a concise diagnostic flowchart that points to the right sub-file based on the identified bottleneck.
Add explicit validation checkpoints after each optimization category, such as specific Lighthouse audit names to check or concrete commands to run (e.g., 'npx bundlesize' or 'lighthouse --only-categories=performance').
Replace generic bullet-point advice with more concrete decision trees, e.g., 'If LCP > 2.5s AND hero image > 200KB → convert to WebP, add srcset [code example]' rather than listing all possible optimizations.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~200+ lines, covering broad web performance topics that Claude already knows well (what LCP is, how lazy loading works, basic CSS animations, React.memo). Much of this is textbook web performance knowledge that doesn't need to be spelled out. Lists like 'Tools to use' naming Chrome DevTools and Lighthouse add no value. | 1 / 3 |
Actionability | There are some concrete code examples (responsive images, layout thrashing fix, CSS font-face, IntersectionObserver), but much of the content is bullet-point advice rather than executable guidance. Many sections are checklists of things to consider rather than specific steps to take. The code examples that exist are good but represent a small fraction of the content. | 2 / 3 |
Workflow Clarity | The skill follows a logical sequence (assess → optimize → verify) and the 'Assess Performance Issues' section establishes a measure-first approach. However, there are no explicit validation checkpoints between optimization steps, no feedback loops for verifying individual optimizations work before moving on, and the verification section is generic rather than providing concrete validation commands. | 2 / 3 |
Progressive Disclosure | This is a monolithic wall of text with no references to external files. The content covers images, JS bundles, CSS, fonts, rendering, animations, React optimization, network, Core Web Vitals, and monitoring all inline. This would benefit enormously from splitting into separate files (e.g., IMAGES.md, BUNDLE.md, CORE-WEB-VITALS.md) with a concise overview in the main skill. | 1 / 3 |
Total | 6 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- pbakaus/impeccable
- Commit
db1add7
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.