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.
70
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 ./.claude/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 specific areas) and 'when' (explicit 'Use when...' clause with multiple trigger terms and user intent descriptions). | 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 LCP is, how GPU acceleration works, what requestAnimationFrame does) and packs everything into a single monolithic file. The code examples are a strength, but the overall verbosity and lack of progressive disclosure significantly reduce its effectiveness as a skill file.
Suggestions
Cut the content by 60-70% by removing explanations of concepts Claude already knows (Core Web Vitals definitions, what tree shaking is, how IntersectionObserver works) and focus only on the diagnostic workflow and decision-making heuristics.
Split into multiple files: keep SKILL.md as a concise diagnostic flowchart (assess → identify bottleneck type → apply fix → verify), with separate reference files like IMAGES.md, BUNDLE.md, RENDERING.md for detailed techniques.
Add explicit validation checkpoints within the optimization workflow, e.g., 'After each optimization: re-run Lighthouse, compare scores, if regression detected then revert and investigate.'
Remove generic advice lines like 'Performance is a feature' and 'Remember: ...' — these waste tokens without adding actionable guidance.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~200+ lines, covering broad web performance topics that Claude already knows well (what Core Web Vitals are, how lazy loading works, basic CSS animations, React memo). Much of this is textbook knowledge that doesn't need to be spelled out. Lines like 'Performance is a feature. Fast experiences feel more responsive, more polished, more professional' add no value. | 1 / 3 |
Actionability | Contains some executable code snippets (HTML srcset, CSS font-face, JS layout batching, IntersectionObserver) which are useful, but much of the content is checklist-style bullet points that describe rather than instruct ('Use modern formats', 'Remove unused dependencies', 'Minimize re-renders'). Many items lack concrete implementation details. | 2 / 3 |
Workflow Clarity | The overall structure follows a logical sequence (assess → optimize → verify), and the 'Verify Improvements' section mentions before/after comparison. However, there are no explicit validation checkpoints within the optimization steps themselves, no feedback loops for when optimizations don't work or cause regressions, and the workflow is more of a reference catalog than a guided process. | 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, network, Core Web Vitals, and monitoring — all inline. This would benefit enormously from splitting into separate reference 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
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
- Repository
- pbakaus/impeccable
- Commit
3a4fc70
- 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.