CtrlK
BlogDocsLog inGet started
Tessl Logo

css-minification

Use when reviewing stylesheets, component styles, and responsive behavior related to Minify all CSS files. Check the rendered layout across breakpoints and interaction states before proposing a fix.

56

Quality

64%

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-minification/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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 lean, well-organized overview that correctly pushes code examples and framework-specific detail into references/rule.md, with a clearly signaled one-level-deep pointer. Its main weaknesses are mild redundancy across the Check/Fix/Explain sections and the absence of any executable snippet or post-minification verification step in the body itself.

Suggestions

Add one small executable example to the Fix section (e.g. a two-line cssnano PostCSS config or `vite build` minify setting) so the body is actionable without opening the reference.

Include a verification step such as 'Confirm the minified build renders identically (spot-check layout and media queries) before shipping' to close the workflow's validation gap.

Merge the Check/Fix/Explain sections or trim their repeated rationale ('reduce file size... improve page load performance' appears in nearly every section) to cut redundant tokens.

DimensionReasoningScore

Conciseness

The body is ~200 words with no padding about concepts Claude already knows (no explanation of what CSS or minification is beyond a one-line rationale in the intro). It falls short of anchor 5 because the Check/Fix/Explain/Code Review sections restate the same minification rationale in slightly different words (e.g. 'to reduce file size, eliminate whitespace, and improve page load performance' repeats the intro), which could be tightened into one section.

4 / 5

Actionability

Concrete tool names are given ('Enable minification in build tool (Vite, webpack, etc.)', 'Use cssnano or lightningcss for PostCSS pipelines', 'cssnano, CleanCSS, or built-in framework minification'), but the body itself contains no executable commands, config snippets, or specific setup steps — those are deferred to references/rule.md. This matches anchor 3 (some concrete guidance but incomplete, key details missing from the body) rather than anchor 4, which expects mostly executable guidance.

3 / 5

Workflow Clarity

The Check → Fix → Code Review structure gives an unambiguous sequence for this simple, single-purpose skill (verify production CSS is minified, then configure minification). It does not reach anchor 5 because there is no verification step that the minified output still renders identically after enabling minification — a minor validation gap, though the operation is non-destructive so the batch/destructive cap does not apply.

4 / 5

Progressive Disclosure

The body is a lean overview that appropriately delegates implementation details to a single, clearly signaled, one-level-deep reference ('For full implementation details, code examples, and framework-specific guidance, see references/rule.md'), and references/rule.md exists in the bundle and does contain those code examples. This matches anchor 5: clear overview, well-signaled reference, easy navigation.

5 / 5

Total

16

/

20

Passed

Description

57%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 'Use when...' clause and reasonable domain keywords, but it reads like a generic code-review trigger for the rule rather than a statement of the skill's capability. The actual task — enabling CSS minification — is never named as an action, and the broad review-oriented framing creates overlap risk with other CSS review skills.

Suggestions

State the skill's core capability as a concrete third-person action, e.g. 'Enables CSS minification in build pipelines (cssnano, lightningcss, Vite/webpack) and verifies minified output preserves styles.'

Align the 'when' clause with the skill's actual purpose — e.g. 'Use when CSS files ship unminified to production or when the user mentions minifying stylesheets, CSS file size, or page-load performance' — instead of the broader 'reviewing stylesheets and responsive behavior'.

Add natural trigger variations and synonyms such as 'minification', 'compress stylesheets', and '.css files' to reduce false matches with general layout/CSS review skills.

DimensionReasoningScore

Specificity

The description names the domain ('reviewing stylesheets, component styles, and responsive behavior') and one or two concrete actions ('Check the rendered layout across breakpoints and interaction states before proposing a fix'), but never states the skill's actual capability — setting up or performing CSS minification — as an action. It matches anchor 3 (domain plus 1-2 concrete actions, not comprehensive) rather than anchor 4, which requires several specific actions.

3 / 5

Completeness

The 'when' is explicit ('Use when reviewing stylesheets, component styles, and responsive behavior related to Minify all CSS files'), but the 'what' is vague: the only stated actions are review-flavored ('Check the rendered layout... before proposing a fix'), and the core capability — minifying CSS or configuring minification in a build — is never expressed as something the skill does. This sits between anchor 2 (vague what) and anchor 4 (both present, when could be sharper), landing at 3.

3 / 5

Trigger Term Quality

Natural terms users would say are present: 'stylesheets', 'component styles', 'responsive behavior', 'breakpoints', 'Minify all CSS files'. It falls short of anchor 5 because common variations like 'minification', 'CSS performance', or the '.css' extension are missing, and the embedded rule title 'Minify all CSS files' reads as template phrasing rather than a natural user phrase.

4 / 5

Distinctiveness Conflict Risk

'Reviewing stylesheets, component styles, and responsive behavior' is broad and would also match general CSS/layout review or frontend-audit skills, so it could trigger for the wrong skill. It is more specific than anchor 2's 'very broad' but does not reach anchor 4's 'mostly distinct', because nothing demarcates it as a minification-specific skill.

3 / 5

Total

13

/

20

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.

Validation — 15 / 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.