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

77%

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%

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

The body is a concise, well-organized overview with excellent progressive disclosure to a real references/rule.md, but its Check/Fix guidance is more descriptive than executable and the implied review workflow lacks any validation checkpoint.

Suggestions

Add a short, copy-paste-ready snippet (e.g., the critters/critical build snippet or the preload-stylesheet link pattern) inline in the body so guidance is executable without opening rule.md.

Insert an explicit verification step after Fix, such as re-measuring LCP/FCP or confirming no render-blocking <link rel='stylesheet'> remains in <head>, to close the workflow validation gap.

Tighten the Check/Fix/Explain sections, which restate the inline-then-async pattern, to reduce overlap and sharpen the distinct action each mode performs.

Dimension	Reasoning	Score
Conciseness	The body is lean (~30 lines) with a single brief framing sentence and short, distinct review-action sections that defer detail to references/rule.md; it does not pad with concepts Claude already knows beyond a one-line LCP/FCP note, so it earns the 'lean and efficient' anchor.	3 / 3
Actionability	The Quick Reference gives concrete guidance (specific tools 'critical, critters, or Lighthouse', a '~14KB' threshold, async loading), but the Check/Fix sections are directive ('Extract and inline critical CSS... then load remaining CSS asynchronously') rather than giving executable code, and the copy-paste examples live one level deep in rule.md, landing at 'some concrete guidance but incomplete'.	2 / 3
Workflow Clarity	Check → Fix → Explain → Code Review provides a loose sequence, but the implied check-then-fix flow includes no validation or verification checkpoint that the change actually improved render, so it sits at 'steps listed but validation gaps' rather than the explicit-feedback-loop level.	2 / 3
Progressive Disclosure	It is a clear overview with well-organized sections and a single, clearly signaled one-level-deep reference ('see references/rule.md') that exists as a real file, matching the 'clear overview with well-signaled one-level-deep references' anchor.	3 / 3
	Total	10 / 12 Passed

Description

82%

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-structured with an explicit 'Use when...' trigger and good natural keyword coverage, but its listed actions are variations of one review task and the reviewing framing is broad enough to risk overlap with sibling CSS skills.

Suggestions

Narrow the opening 'reviewing stylesheets, component styles, and responsive behavior' to the specific critical-CSS context so it is less likely to match unrelated CSS review skills.

Add one or two distinct concrete capabilities (e.g., 'extract above-the-fold styles', 'generate the async-loaded stylesheet link') beyond the single review workflow to lift specificity.

Include a common-user phrasing variation such as 'render-blocking CSS' or 'above-the-fold CSS' to broaden trigger coverage.

Dimension	Reasoning	Score
Specificity	It names concrete actions ('reviewing stylesheets, component styles, and responsive behavior', 'Check the rendered layout across breakpoints and interaction states', 'proposing a fix') but these are variations of a single review workflow rather than a comprehensive list of distinct capabilities, matching the 'names domain and some actions' anchor rather than the 'multiple specific concrete actions' level.	2 / 3
Completeness	It explicitly answers both what ('reviewing stylesheets... responsive behavior related to Inline critical CSS', 'Check the rendered layout across breakpoints') and when via the explicit 'Use when...' clause, satisfying the both-what-and-when anchor with an explicit trigger.	3 / 3
Trigger Term Quality	It covers natural developer terms users would actually say — 'stylesheets', 'component styles', 'responsive behavior', 'breakpoints', 'interaction states', and 'critical CSS' — giving good coverage of common phrasings.	3 / 3
Distinctiveness Conflict Risk	The 'Inline critical CSS for faster rendering' niche is fairly distinct, but the broad 'reviewing stylesheets, component styles, and responsive behavior' framing could overlap with other generic CSS-review skills, so it sits at 'somewhat specific but could still overlap' rather than a clear conflict-free niche.	2 / 3
	Total	10 / 12 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: 48405aa

Reviewed: about 8 hours 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.