CtrlK
BlogDocsLog inGet started
Tessl Logo

css-order

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

63

Quality

75%

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

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 well-organized and token-efficient with a clean progressive-disclosure structure pointing to a real reference file. Its main weakness is actionability — it describes what to do without executable code or HTML examples — and its validation flow is implicit rather than an explicit checkpoint.

Suggestions

Add a small concrete HTML head example (e.g. showing CSS link tags before defer/async script tags) so the Fix step is copy-paste ready and lifts actionability.

Make the verify-then-fix loop explicit, e.g. 'Check the rendered layout across breakpoints and interaction states; only propose a fix once an ordering issue is confirmed.'

Optionally include a one-line snippet showing how to inspect load order (e.g. browser DevTools Network/Waterfall) to strengthen the Check step.

DimensionReasoningScore

Conciseness

The body is lean — terse Quick Reference bullets and one-line section descriptions with no padding or explanation of concepts Claude already knows — matching the lean-and-efficient 3 anchor rather than the mostly-efficient-but-tightenable 2 anchor.

3 / 3

Actionability

It gives concrete directives such as 'Reorganize head section to load all CSS files before JavaScript files, except for asynchronous scripts', but provides no executable HTML/code examples or copy-paste commands, fitting the some-guidance-but-incomplete 2 anchor rather than the fully-executable 3 anchor.

2 / 3

Workflow Clarity

The Check→Fix→Explain→Code Review sections imply a light sequence, but the 'Check the rendered layout across breakpoints and interaction states before proposing a fix' verification is implicit rather than an explicit validate-then-fix checkpoint, fitting the steps-listed-but-validation-gaps 2 anchor.

2 / 3

Progressive Disclosure

It is a concise overview with a clearly signaled, verified one-level-deep reference ('see references/rule.md'), matching the clear-overview-with-well-signaled-one-level-reference 3 anchor rather than the loosely-organized 2 anchor.

3 / 3

Total

10

/

12

Passed

Description

77%

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 several concrete actions, giving it solid specificity and completeness. It is held back by slightly technical/awkward trigger phrasing and broad wording that could overlap with other CSS skills.

Suggestions

Soften the trigger phrasing to natural user terms, e.g. 'Use when reviewing CSS file loading order, render-blocking, or FOUC issues in stylesheets' to improve trigger-term quality.

Narrow the scope wording so it reads as a distinct niche (CSS load ordering) rather than general stylesheet/component-style review, reducing conflict risk with sibling CSS skills.

Consider adding plain synonyms like 'load order' or 'unstyled content / FOUC' to broaden the natural keyword coverage.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'reviewing stylesheets, component styles, and responsive behavior', 'Check the rendered layout across breakpoints and interaction states', and 'before proposing a fix' — matching the multiple-specific-actions anchor rather than the partial-actions anchor at 2.

3 / 3

Completeness

It opens with an explicit 'Use when reviewing...' trigger and states the 'what' (review/check rendered layout/propose a fix), clearly answering both what and when as required for the 3 anchor rather than the what-only 2 anchor.

3 / 3

Trigger Term Quality

Relevant terms like 'stylesheets', 'responsive behavior', and 'breakpoints' appear, but the awkward 'related to Order CSS files correctly' phrasing and jargon such as 'interaction states' lean technical rather than covering the natural variations a user would say, fitting the some-relevant-keywords anchor at 2.

2 / 3

Distinctiveness Conflict Risk

The 'Order CSS files correctly' niche is fairly distinct, but 'reviewing stylesheets, component styles, and responsive behavior' is broad enough to overlap with general CSS-review skills, fitting the somewhat-specific-but-overlapping 2 anchor rather than a clear-distinct-trigger 3.

2 / 3

Total

10

/

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.