CtrlK
BlogDocsLog inGet started
Tessl Logo

css-non-blocking

Use when reviewing stylesheets, component styles, and responsive behavior related to Load CSS without blocking render. Check the rendered layout across breakpoints and interaction states before proposing a fix.

62

Quality

74%

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/css-non-blocking/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.

A well-structured, token-efficient overview with exemplary progressive disclosure to a real, one-level-deep reference file. It falls short on actionability and workflow clarity: the body's own Check/Fix directives are vague one-liners with no executable snippet, and the review-to-fix sequence has no explicit validation checkpoint in the body.

Suggestions

Add one minimal executable pattern to the Fix section (e.g., <link rel="preload" href="..." as="style" onload="this.rel='stylesheet'">) so the core action is copy-paste ready without opening the reference file.

Turn the Check/Fix/Code Review one-liners into an explicit numbered sequence with a validation step (verify layout at each breakpoint and interaction state after applying the fix), rather than parallel mode descriptions.

Make the Check section concrete by naming what to look for (e.g., stylesheets without preload/async loading in <head>, unsplit media queries, missing critical CSS) instead of restating the rule's goal.

DimensionReasoningScore

Conciseness

The body is lean (~30 lines) with a high-value Quick Reference and a well-signaled pointer to references/rule.md. Minor trimming is possible: the one-sentence FCP explainer states a concept Claude already knows, and the Explain/Check sections partially restate the intro. It is not anchor 5 because not every token earns its place, but far from the padding of anchors 1-2.

4 / 5

Actionability

The Quick Reference bullets name concrete techniques ("<link rel=\"preload\" as=\"style\">" with onload handler, media queries, loadCSS polyfill), but the Check and Fix sections are high-level directives — "Analyze this CSS loading implementation to ensure stylesheets are loaded without blocking the DOM parsing" and "Implement non-blocking CSS loading using the preload technique" — with no executable snippet or concrete steps in the body; all executable detail is deferred to the reference file. This matches anchor 3: concrete guidance present but incomplete with key details missing.

3 / 5

Workflow Clarity

The sections imply a sequence (Check → Fix → Code Review) but are presented as parallel one-line modes rather than a sequenced workflow, and no validation checkpoint appears in the body — verification lives only in references/rule.md's Verification section. This is anchor 3: steps present but checkpoints missing or implicit. It is above anchor 2 because the directives themselves are clearly written, and the skill is non-destructive so the cap of 3 is not the binding constraint.

3 / 5

Progressive Disclosure

The body is a concise overview and the bulk of the material (282 lines of code examples, framework guidance, verification steps) is appropriately split into references/rule.md, which exists, is exactly one level deep (its links are external, not further reference hops), and is clearly signaled: "For full implementation details, code examples, and framework-specific guidance, see references/rule.md". This matches the anchor-5 clear-overview pattern.

5 / 5

Total

15

/

20

Passed

Description

83%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 strong description: it explicitly states both what it does and when to use it, with concrete trigger phrases and specific actions. Its main weaknesses are a slightly circular 'when' clause (referencing the rule name) and missing natural performance-oriented trigger terms like "render-blocking" or "slow first paint".

DimensionReasoningScore

Specificity

The description names the domain and several concrete actions: "reviewing stylesheets, component styles, and responsive behavior", "Check the rendered layout across breakpoints and interaction states before proposing a fix". It sits above anchor 3 (only 1-2 actions) because it lists reviewing, layout checking across breakpoints/interaction states, and gating fixes on that check, but below anchor 5 since coverage of the skill's actual capability (non-blocking loading techniques) is indirect.

4 / 5

Completeness

Both what ("Check the rendered layout across breakpoints and interaction states before proposing a fix") and when ("Use when reviewing stylesheets, component styles, and responsive behavior related to Load CSS without blocking render") are explicitly stated with concrete trigger phrases, matching the anchor-5 example structure. The 'Use when' clause is present, so the completeness cap of 3 does not apply.

5 / 5

Trigger Term Quality

Good natural keyword coverage: "stylesheets", "component styles", "responsive behavior", "rendered layout", "breakpoints", "interaction states". It misses common user phrasings like "render-blocking", "slow first paint", "page performance", or ".css", so it does not reach the comprehensive synonym coverage of anchor 5, but it is well above the generic keyword level of anchor 3.

4 / 5

Distinctiveness Conflict Risk

The qualifier "related to Load CSS without blocking render" carves out a clear niche, but the broad opening "reviewing stylesheets, component styles, and responsive behavior" overlaps with generic CSS-review and responsive-design skills, which is minor overlap risk with closely related skills (anchor 4) rather than the minimal-conflict profile of anchor 5.

4 / 5

Total

17

/

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.

Validation — 15 / 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.