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.

Quality

67%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/css-non-blocking/SKILL.md

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 skill body is a concise overview that offloads implementation detail to a well-signaled reference file, giving strong progressive disclosure. Its weakness is actionability and workflow clarity in the body itself, which leans on abstract directives rather than executable code or explicit validation checkpoints.

Suggestions

Move at least one complete, copy-paste-ready preload+onload code block into the Fix section so the body is actionable without opening the reference.

Add an explicit validation step (e.g. 'Verify with Lighthouse render-blocking audit and DevTools Network tab') to the Check or Fix workflow with a feedback loop.

Collapse the Check/Fix/Explain directive paragraphs or convert them into a short numbered sequence to tighten the workflow.

Dimension	Reasoning	Score
Conciseness	The body is lean and assumes Claude's competence; the only mild over-explanation is the opening First Contentful Paint sentence and the Check/Fix/Explain sections restating intent in abstract directive language that could be trimmed.	4 / 5
Actionability	The Quick Reference gives a concrete snippet fragment ('<link rel="preload" as="style">' with onload handler) and names specific techniques (preload, media attributes, loadCSS polyfill), but the body itself contains no executable code or complete steps — those are deferred to references, leaving guidance incomplete.	3 / 5
Workflow Clarity	Check/Fix/Explain/Code Review sections provide a rough task structure but no explicit sequencing or validation checkpoints; the description's 'before proposing a fix' implies an order, yet verification steps (e.g. Lighthouse/DevTools from the reference) are not surfaced in the body.	3 / 5
Progressive Disclosure	The body is a well-organized overview with labeled sections and a single, clearly signaled one-level-deep pointer to 'references/rule.md' (verified to exist), keeping navigation easy and content appropriately split.	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 provides a clear trigger clause and identifies the domain with two concrete actions, but stays at a moderate specificity level without enumerating the actual techniques involved. It is distinct and well-targeted with only minor overlap risk.

Suggestions

Add the concrete techniques the skill applies (e.g. 'inline critical CSS, preload non-critical styles, split by media query') to lift specificity.

Include natural synonyms users say such as 'render-blocking' or 'First Contentful Paint' to improve trigger term coverage.

Tighten the 'when' clause to specify review contexts (e.g. 'Use when auditing page render performance or reviewing render-blocking CSS').

Dimension	Reasoning	Score
Specificity	Names the domain ('stylesheets, component styles, and responsive behavior') plus two concrete actions ('Check the rendered layout across breakpoints and interaction states', 'before proposing a fix'), but coverage is not comprehensive — no mention of inlining critical CSS, preload pattern, or media-splitting as actions.	3 / 5
Completeness	Explicitly answers both 'what' (reviewing stylesheets/responsive behavior for non-blocking CSS) and 'when' ('Use when reviewing...'), with a clear 'Use when...' trigger; the 'when' could be more specific about which review contexts apply.	4 / 5
Trigger Term Quality	Includes natural user phrases like 'reviewing stylesheets', 'responsive behavior', 'breakpoints', and 'interaction states', but misses common synonyms users might say such as 'render-blocking', 'First Contentful Paint', or 'CSS performance'.	4 / 5
Distinctiveness Conflict Risk	Tied to a clear niche ('Load CSS without blocking render') with distinct triggers, though the opening 'reviewing stylesheets, component styles, and responsive behavior' is broad enough to risk minor overlap with general CSS-review skills.	4 / 5
	Total	15 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: thedaviddias/Front-End-Checklist
Path: skills/css-non-blocking/SKILL.md
Commit: 30756a7

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

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.