css-critical

Use when reviewing stylesheets, component styles, and responsive behavior related to Inline critical CSS for faster rendering. Check the rendered layout across breakpoints and interaction states before proposing a fix.

Quality

80%

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-critical/SKILL.md

Quality

Content

72%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, concise review skill that appropriately delegates detail to a verified one-level reference. Its main weakness is workflow clarity: the Check/Fix/Review sequence lacks explicit validation or verification checkpoints to confirm the performance improvement landed.

Suggestions

Add an explicit verification step after Fix, e.g. 'Verify: re-run Lighthouse and confirm LCP/FCP improved and no render-blocking <link> remains before declaring done.'

Reduce overlap between the Check, Fix, and Code Review sections by merging redundant phrasing into a single ordered review workflow.

Include one short copy-paste-ready extraction command (e.g. a `critical` or `critters` CLI invocation) to lift actionability from concrete guidance to fully executable.

Dimension	Reasoning	Score
Conciseness	Lean and largely efficient with terse bullets and no padding of basic CSS/web-vitals concepts, but the Check/Fix/Explain/Code Review sections partially restate one another and could be trimmed, matching the 4 anchor rather than the perfectly lean 5.	4 / 5
Actionability	Gives concrete, executable guidance ('Inline ~14KB...', 'Use tools: critical, critters, or Lighthouse', 'Load remaining CSS asynchronously', 'Automate in build process') with specific tools and a byte budget; falls short of 5 because it stops short of copy-paste-ready commands/examples and leaves minor gaps.	4 / 5
Workflow Clarity	Check/Fix/Explain/Code Review provide a recognizable sequence but validation checkpoints are only implicit (no 'verify LCP/FCP improved' step); this is a non-destructive review task so the batch/destructive cap does not apply, placing it at the 3 anchor rather than 4.	3 / 5
Progressive Disclosure	The body is a clean overview that signals a single one-level-deep reference ('see references/rule.md' for full details, code examples, and framework guidance) which exists on disk, with well-organized sections; matches the 5 anchor and satisfies the under-50-lines simple-skill exception.	5 / 5
	Total	16 / 20 Passed

Description

87%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, well-targeted description that explicitly states both its capability and trigger conditions for the narrow critical-CSS niche. Minor room for improvement in adding the full action vocabulary (extract/inline/measure) and a few natural performance-oriented trigger phrases.

Dimension	Reasoning	Score
Specificity	Names several concrete actions ('reviewing stylesheets, component styles, and responsive behavior', 'Check the rendered layout across breakpoints and interaction states', 'before proposing a fix'); falls short of 5 because it omits extract/inline/measure actions, and is clearly above 3's '1-2 concrete actions'.	4 / 5
Completeness	Explicitly answers both what ('reviewing... Check the rendered layout... before proposing a fix') and when ('Use when reviewing stylesheets, component styles, and responsive behavior related to Inline critical CSS') with concrete trigger phrases, matching the 5 anchor; not a 4 since the 'when' is already explicit rather than improvable.	5 / 5
Trigger Term Quality	Good domain keyword coverage ('stylesheets', 'component styles', 'responsive behavior', 'critical CSS', 'breakpoints', 'interaction states'); a few natural user phrasings like 'Core Web Vitals', 'page speed', or 'render-blocking' are missing, matching the 4 anchor better than 5.	4 / 5
Distinctiveness Conflict Risk	Targets a narrow, well-defined niche ('Inline critical CSS for faster rendering') with specific triggers that are unlikely to fire for unrelated CSS skills, matching the 5 anchor for a clear niche with minimal conflict risk.	5 / 5
	Total	18 / 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-critical/SKILL.md
Commit: 30756a7

Reviewed: 28 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.