CtrlK
BlogDocsLog inGet started
Tessl Logo

interaction-to-next-paint

Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize interaction to next paint. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

58

Quality

67%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/interaction-to-next-paint/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

65%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a well-structured, token-efficient overview that uses progressive disclosure effectively by deferring detailed code to a one-level-deep reference. It is weakest on in-body actionability and workflow feedback, since the executable steps and a re-measure loop live only in the reference.

Suggestions

Add one concrete measurement snippet in the Check section (e.g., the web-vitals onINP call or the exact DevTools panel/path) so the body is executable without opening the reference.

Add an explicit re-measure feedback loop (measure → apply fix → re-measure to confirm INP < 200ms) to close the optimization workflow.

De-duplicate the intro and the Explain section, which restate the same INP definition, to recover tokens.

DimensionReasoningScore

Conciseness

The body is lean, assumes Claude's competence, and defers all code to the reference; the only redundancy is that the intro and the "Explain" section restate the same INP definition, which keeps it just below anchor 5.

4 / 5

Actionability

Provides some concrete pointers (named tools DevTools/PageSpeed Insights and a 200ms threshold) but no executable code or specific steps in the body itself; the "Fix" section lists techniques (break up long tasks, web workers) without implementation, leaving guidance incomplete.

3 / 5

Workflow Clarity

A clear Check → Fix → Explain → Code Review sequence exists with an initial 200ms validation checkpoint, but there is no re-measure/verify feedback loop after applying fixes, so checkpoints are incomplete.

3 / 5

Progressive Disclosure

A concise, well-sectioned overview points to a single clearly signaled one-level-deep reference (references/rule.md, verified to exist) that holds the code examples and tables, splitting content appropriately with easy navigation.

5 / 5

Total

15

/

20

Passed

Description

70%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is well-formed with an explicit Use-when trigger and concrete tool references, scoring strongly on completeness and distinctiveness. Its main weakness is a narrow "what" that frames the skill as purely diagnostic rather than covering its optimization capabilities.

Suggestions

Broaden the "what" to name concrete optimization capabilities (e.g., "breaks up long tasks, offloads heavy work to web workers, and optimizes event handlers") instead of stating only the verification step.

Add the natural abbreviation "INP" and "Core Web Vitals" as trigger terms so users searching those terms match this skill.

Lead with INP-specific triggers ("interaction latency", "input delay", "unresponsive clicks") rather than generic symptoms ("slow page loads", "heavy assets") that overlap with LCP/CLS skills.

DimensionReasoningScore

Specificity

Names two concrete actions ("auditing slow page loads, heavy assets, or rendering delays" and "Verify the actual bottleneck in DevTools, Lighthouse, or field data") with specific tools, but does not enumerate the optimization capabilities the skill actually performs, so coverage is not comprehensive.

3 / 5

Completeness

Explicitly answers both "what" (verify the bottleneck before recommending changes) and "when" (a concrete "Use when…" trigger clause); falls below anchor 5 because the "what" is narrowly diagnostic and omits the skill's fix/optimization capabilities.

4 / 5

Trigger Term Quality

Includes natural symptom phrases users say ("slow page loads", "heavy assets", "rendering delays") and tool names, but omits the common abbreviation "INP" and "Core Web Vitals" that practitioners actually search for.

4 / 5

Distinctiveness Conflict Risk

Scoped to a specific Core Web Vital ("Optimize interaction to next paint"), but the leading trigger symptoms (slow page loads, heavy assets) overlap with sibling performance skills like LCP and CLS, creating minor conflict risk.

4 / 5

Total

15

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
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.