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.

55

Quality

62%

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

57%

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

The content is well-structured with a clean one-level-deep reference to the real rule.md bundle, but the body itself explains a basic concept, offloads all executable code to the reference, and lacks an explicit validation checkpoint in its workflow.

Suggestions

Drop or condense the opening 'Render-blocking CSS delays First Contentful Paint' sentence, which restates a concept Claude already knows, to improve conciseness.

Include at least one inline executable snippet (e.g., the preload-with-onload link tag) in the body rather than delegating all code to references/rule.md, so the skill is actionable on its own.

Add an explicit verification step after 'Fix' (e.g., 'Verify with Lighthouse / DevTools Network tab that no render-blocking CSS remains') to give the workflow a concrete checkpoint.

DimensionReasoningScore

Conciseness

The body is mostly lean, but the opening sentence ('Render-blocking CSS delays First Contentful Paint—users see a blank screen while waiting for stylesheets to download and parse') explains a concept Claude already knows, and the 'Fix' section restates techniques already in 'Quick Reference', so it is efficient with some unnecessary explanation rather than fully lean.

2 / 3

Actionability

Concrete guidance is limited to the 'Quick Reference' preload snippet; the Check/Fix/Explain sections describe what to do rather than provide executable code, and all real code is offloaded to references/rule.md, matching 'some concrete guidance but incomplete'.

2 / 3

Workflow Clarity

A loose sequence exists (Check → Fix → Explain → Code Review), but there is no explicit validation checkpoint confirming the fix worked before moving on, matching 'sequence present but checkpoints missing or implicit'.

2 / 3

Progressive Disclosure

The body is a concise overview that delegates full implementation to a single one-level-deep reference ('see references/rule.md'), which exists as a real bundle file and is clearly signaled at the end, matching the 'clear overview with well-signaled one-level-deep references' anchor.

3 / 3

Total

9

/

12

Passed

Description

67%

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 a clear 'what', giving strong completeness, but its action verbs are generic and the keyword phrasing leans on the rule title rather than natural user language.

Suggestions

Lead with concrete capability verbs (e.g., 'Audit, refactor, and inject non-blocking CSS loading') instead of generic 'reviewing'/'Check' to raise specificity.

Add natural user phrasings such as 'render-blocking CSS', 'critical CSS', or 'CSS blocking first paint' alongside the rule title to improve trigger-term coverage.

Sharpen distinctiveness by foregrounding the core action (non-blocking CSS loading) first so it is less likely to trigger for general stylesheet/performance review.

DimensionReasoningScore

Specificity

The description names the domain and several actions ('reviewing stylesheets, component styles, and responsive behavior', 'Check the rendered layout across breakpoints and interaction states'), but these are generic review/check verbs rather than a comprehensive set of distinct capabilities, matching the 'names domain and some actions' anchor rather than the multiple-specific-concrete-actions anchor.

2 / 3

Completeness

It explicitly answers both 'what' ('Check the rendered layout across breakpoints and interaction states before proposing a fix') and 'when' with an explicit 'Use when...' trigger, matching the 'clearly answers both what AND when' anchor and not the score-2 'when only implied' level.

3 / 3

Trigger Term Quality

Relevant terms appear (stylesheets, responsive behavior, breakpoints, interaction states, rendered layout), but the phrasing is anchored to the rule title 'Load CSS without blocking render' rather than the natural variations a user would say (e.g., 'render-blocking CSS', 'critical CSS'), so common variations are missing.

2 / 3

Distinctiveness Conflict Risk

The 'Load CSS without blocking render' framing gives it a niche, but 'reviewing stylesheets, component styles, and responsive behavior' overlaps with general CSS review/performance skills and could trigger for adjacent skills, matching 'somewhat specific but could still overlap'.

2 / 3

Total

9

/

12

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.