css-file-size

Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize CSS file size. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

Quality

65%

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-file-size/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 body is a compact, well-structured overview with excellent progressive disclosure into a real reference file, but its own guidance stays at the advisory level: no executable commands in the body and no post-fix verification step, leaving the workflow's checkpoints implicit.

Suggestions

Add one concrete measurement command to the Check section (e.g. how to view gzipped size or the DevTools Coverage tab) so the >50KB threshold is actionable without opening the reference.

Surface the post-fix verification loop from references/rule.md (re-run Lighthouse/PageSpeed and confirm the metric improves) as an explicit final step in the body.

Trim the opening sentence about CSSOM construction and render-blocking, which restates knowledge Claude already has.

Dimension	Reasoning	Score
Conciseness	The ~30-line body is lean and directive, with only minor trimmable content: the opening sentence "Large CSS files block rendering and increase the time it takes for the browser to construct the CSSOM" explains a rendering-path concept Claude already knows.	4 / 5
Actionability	The body offers some concrete anchors ("> 50KB gzipped" threshold, "PurgeCSS", "DevTools, Lighthouse, or field data", page-specific splitting) but no executable commands or code in the body itself — e.g. how to measure gzipped size or invoke a minifier — which are deferred to references/rule.md without signposting which tool to run.	3 / 5
Workflow Clarity	The Check → Fix → Explain → Code Review sequence is present and the Check step ("Audit the size of CSS files and identify those exceeding recommended limits") acts as an implicit measurement checkpoint, but there is no post-fix validation step in the body; the Verification guidance exists only in references/rule.md and is not surfaced.	3 / 5
Progressive Disclosure	The short body is cleanly sectioned and ends with a clearly signaled, one-level-deep reference ("For full implementation details, code examples, and framework-specific guidance, see references/rule.md") that exists and does contain those implementation details, so navigation is easy and content is appropriately split.	5 / 5
	Total	15 / 20 Passed

Description

66%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 has an explicit and natural trigger clause plus a concrete verify-first discipline, but it functions mostly as a trigger statement: it never states what the skill actually does to fix CSS file size, and its broad performance phrases risk overlapping with sibling performance rules.

Suggestions

State the skill's core actions in the description, e.g. "Measures CSS payload size, removes unused styles (PurgeCSS), minifies, and splits stylesheets per route."

Add natural synonyms such as "page speed", "unused CSS", or "CSS bloat" to the trigger clause to catch more user phrasings.

Tighten distinctiveness by leading with CSS-specific triggers (e.g. "oversized or render-blocking stylesheets") instead of generic phrases like "heavy assets".

Dimension	Reasoning	Score
Specificity	The description names the domain ("Optimize CSS file size") and one to two concrete actions ("auditing slow page loads, heavy assets, or rendering delays" and "Verify the actual bottleneck in DevTools, Lighthouse, or field data"), but omits the remediation actions the skill actually covers (minify, remove unused CSS, split stylesheets), so it is not comprehensive.	3 / 5
Completeness	An explicit "Use when auditing..." trigger clause answers the when clearly, and the verify-before-recommend action conveys a partial what; however the what is thin since the skill's actual fix actions (minification, purging, splitting) are never stated. It is above a 3 (the when is explicit, not weakly implied) but below a 5 (the what is not concretely and comprehensively stated).	4 / 5
Trigger Term Quality	Natural phrases like "slow page loads", "heavy assets", "rendering delays", and "DevTools, Lighthouse, or field data" are terms users would realistically say, but common variations such as "page speed", "unused CSS", or "CSS bloat" are missing.	4 / 5
Distinctiveness Conflict Risk	The qualifier "related to Optimize CSS file size" narrows the niche, but the leading trigger phrases "slow page loads, heavy assets, or rendering delays" are generic web-performance terms that would equally fire for sibling skills like JS bundle size or image optimization, so overlap risk with similar skills remains.	3 / 5
	Total	14 / 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-file-size/SKILL.md
Commit: 7bfd868

Reviewed: 1 day 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.