CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

71

Quality

87%

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

SKILL.md
Quality
Evals
Security

Quality

Content

85%

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

A clean, well-organized body that keeps SKILL.md as an overview and defers detail to a real, clearly signaled reference file. Its main weakness is actionability: the body itself contains no executable code or commands, relying entirely on the reference for concrete implementation.

Suggestions

Add at least one copy-paste-ready snippet to the body (e.g., a PurgeCSS config block or a Lighthouse/Coverage-panel command) so the skill is actionable without opening the reference.

Replace the opening explanatory sentence about CSS being render-blocking with a tighter purpose statement, since Claude already knows the critical-rendering-path concept.

Make the Check→Fix sequence explicit with numbered steps and a verify-after-fix checkpoint to strengthen workflow clarity for the audit/fix flow.

DimensionReasoningScore

Conciseness

The body is lean and well-sectioned with no padding; the only borderline line is a single opening sentence on CSS being render-blocking, but every section earns its place and assumes Claude's competence, matching the 'lean and efficient' anchor rather than the verbose level-1 example.

3 / 3

Actionability

It offers some concrete guidance — a '>50KB gzipped' threshold and named tools (PurgeCSS, Tailwind) — but provides no executable code or commands in the body itself (those live only in references/rule.md), so it falls in the 'some concrete guidance but incomplete' anchor rather than copy-paste-ready level 3.

2 / 3

Workflow Clarity

For a simple audit/fix skill the Check → Fix → Explain → Code Review flow is clear and unambiguous, and the Code Review section even asks to 'describe the measurement method used to confirm the issue', providing an implicit verification checkpoint; the simple-skill allowance permits a 3 here.

3 / 3

Progressive Disclosure

The body is a concise overview that clearly signals a single one-level-deep reference ('see references/rule.md' for full implementation details, code examples, and framework-specific guidance), and that file exists, matching the 'clear overview with well-signaled one-level-deep references' anchor.

3 / 3

Total

11

/

12

Passed

Description

90%

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 with an explicit 'Use when' trigger, natural keywords, and concrete measurement tools. The only soft spot is capability specificity, where the named actions are somewhat abstract rather than granular.

DimensionReasoningScore

Specificity

Names the domain (CSS file size / page loads) and several actions ('auditing slow page loads', 'Verify the actual bottleneck', 'recommending changes'), but the actions are moderately abstract rather than a comprehensive list of concrete operations, matching the 'Names domain and some actions' anchor rather than the multi-action level-3 example.

2 / 3

Completeness

It explicitly answers both what (audit/verify/recommend around CSS file size) and when via an explicit 'Use when auditing slow page loads...' trigger clause, matching the level-3 anchor that requires both an explicit 'what' and explicit trigger guidance.

3 / 3

Trigger Term Quality

Natural user-facing terms are well covered: 'slow page loads', 'heavy assets', 'rendering delays', plus concrete tools 'DevTools', 'Lighthouse', and 'field data' — phrases a user would plausibly say, matching the good-coverage anchor.

3 / 3

Distinctiveness Conflict Risk

It carves a clear niche ('Optimize CSS file size') with distinct, tool-anchored triggers unlikely to fire for unrelated skills, matching the 'clear niche with distinct triggers' anchor; overlap with sibling performance rules is low because the scope is narrowed to CSS file size.

3 / 3

Total

11

/

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.