CtrlK
BlogDocsLog inGet started
Tessl Logo

code-splitting

Use when reviewing large SPA bundles, new dependency additions, or routes that feel slow to hydrate. Focus on code that is not required for the initial view and can move behind route transitions, user interaction, or viewport-based loading.

60

Quality

70%

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/code-splitting/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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.

A well-structured, actionable overview that practices clean progressive disclosure by pushing code and framework details to references/rule.md. Its main weakness is a mildly padded motivational intro that re-explains concepts Claude already knows and a body that does not surface the verification step the reference contains.

Suggestions

Trim the intro's parse/compile explanation to a single concrete data point or drop it; the value is already implied by the skill's purpose.

Surface a one-line verification checkpoint in the body (e.g. 'Confirm the initial chunk shrank via your bundle visualizer') rather than leaving validation only in the reference.

Add one inline dynamic import() snippet in the Quick Reference so the core action is executable without opening the reference.

DimensionReasoningScore

Conciseness

The intro paragraph restates web-performance basics Claude already knows ('JS must be parsed and compiled before execution', the 500 KB / 3–5 s framing), which is mild padding; the Quick Reference and Check/Fix/Explain sections themselves are lean.

3 / 5

Actionability

Concrete, specific instructions appear throughout ('Convert the identified static imports to dynamic imports using import() and add appropriate loading states', 'Inspect route modules, heavy feature imports, and third-party libraries loaded on initial render'); inline code is delegated to the reference, which the rubric does not penalize for instruction skills, leaving only minor gaps.

4 / 5

Workflow Clarity

The Check → Fix flow plus the 'Code Review' inspection targets give a clear, unambiguous sequence for a single-purpose review skill, but the body surfaces no explicit verification checkpoint (the reference's Verification section is not signposted here).

4 / 5

Progressive Disclosure

The body is a well-organized overview (Quick Reference, Check, Fix, Explain, Code Review) with a single clearly signaled one-level-deep pointer — 'see references/rule.md' — to the verified bundle file holding code examples and framework guidance.

5 / 5

Total

16

/

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.

A solid trigger-rich description with an explicit 'Use when...' clause and a clear frontend niche. It is held back from the top band by a 'what' framed as focus rather than a list of concrete actions and by missing common synonyms like 'code splitting' or 'lazy loading'.

Suggestions

Lead with concrete action verbs for the 'what' (e.g. 'Split large bundles using dynamic import() and route-based lazy loading') before the 'Use when' clause.

Add natural synonyms users say — 'code splitting', 'lazy loading', 'bundle size' — to the trigger list.

Tighten 'new dependency additions' to a more bundle-specific trigger to reduce overlap with general dependency-review skills.

DimensionReasoningScore

Specificity

It names the domain (SPA bundles, hydration) and one core action — 'code that... can move behind route transitions, user interaction, or viewport-based loading' — but does not enumerate several distinct concrete actions like extract/fill/merge, so it stops at 'domain + 1-2 actions'.

3 / 5

Completeness

An explicit 'Use when...' clause names three concrete scenarios (the 'when') and 'Focus on code that is not required for the initial view' states the 'what', but the 'what' is phrased as a targeting directive rather than a crisp action verb, leaving it just shy of the fully explicit anchor 5.

4 / 5

Trigger Term Quality

Natural trigger phrases like 'large SPA bundles', 'new dependency additions', and 'routes that feel slow to hydrate' read as things users would actually say, but common synonyms such as 'code splitting', 'lazy loading', or 'bundle size' are missing.

4 / 5

Distinctiveness Conflict Risk

The bundle/hydration framing carves a clear frontend-performance niche, but 'new dependency additions' is broad enough to overlap slightly with general dependency-review or performance-audit skills.

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.