CtrlK
BlogDocsLog inGet started
Tessl Logo

styles-lint

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

57

Quality

66%

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

Quality

Content

57%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.

Well-structured overview with excellent progressive disclosure to a real, one-level-deep reference file, but the body itself is thin on executable guidance and padded with redundant restatements. The Check/Fix/Explain trio repeats the same vague idea, no command or config snippet appears inline, and the setup sequence lacks a verification step.

Suggestions

Delete the Check/Fix/Explain sections (and the opening sentence explaining what CSS linting does — knowledge Claude already has); keep the Quick Reference as the body's core.

Add one minimal executable snippet inline, e.g. `npm install --save-dev stylelint stylelint-config-standard` plus a minimal .stylelintrc.json, so the body is actionable without opening the reference.

Append a verification step to the Quick Reference sequence, such as "Verify: `npx stylelint \"**/*.{css,scss}\"` reports no errors", to close the workflow's validation gap.

DimensionReasoningScore

Conciseness

The body is short, but the opening sentence ("CSS linting catches syntax errors, enforces consistent coding standards...") explains a concept Claude already knows, and the Check/Fix/Explain sections restate essentially the same vague idea three times ("Set up CSS/SCSS linting tools like Stylelint to automatically detect syntax errors..." / "Configure Stylelint with appropriate rules..."). Mostly efficient, but the redundant trio and the known-concept intro could be cut. Not a 2 because the Quick Reference bullets and the closing pointer are tight and earn their tokens.

3 / 5

Actionability

The Quick Reference names concrete, specific packages ("stylelint-config-standard", "stylelint-config-standard-scss"), but the Check/Fix/Explain sections are pure high-level direction with no commands, config, or code anywhere in the body — not even an install command or minimal .stylelintrc snippet. Some concrete guidance exists, but executable detail is entirely deferred to references/rule.md. Not a 2 because the exact package names and integration targets (IDE auto-fix, pre-commit hooks, CI/CD) are genuinely actionable pointers.

3 / 5

Workflow Clarity

The Quick Reference bullets imply a sensible sequence (install → add SCSS support → enable auto-fix in IDE/hooks → include in CI/CD), but the steps carry no commands and there is no verification checkpoint (e.g. run `npx stylelint` to confirm the setup works). The four vague Check/Fix/Explain/Code Review sections also leave it unclear which path Claude should take when the skill fires. Sequence present, checkpoints missing — the anchor-3 pattern. The destructive/batch cap does not apply since linting setup is non-destructive, but the simple-skill exception to 5 does not apply either because the single action is not unambiguous.

3 / 5

Progressive Disclosure

The body is a short, well-sectioned overview and the single bundle file (references/rule.md, which exists and contains the full installation commands and config examples) is referenced by exact path with a clear signal of what it holds ("For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`"). One level deep, appropriately split, easy to navigate — matches the top anchor.

5 / 5

Total

14

/

20

Passed

Description

75%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.

A solid description with an explicit "Use when..." trigger and several concrete review actions, but the core capability is never stated directly — "Lint CSS and SCSS files" is awkwardly folded into the when-clause, making the what/when split muddy. Adding the tool name (Stylelint) and file extensions would sharpen both triggers and completeness.

Suggestions

State the core capability as a direct third-person action up front, e.g. "Lints CSS and SCSS files with Stylelint to catch syntax errors and enforce coding standards", instead of embedding "Lint CSS and SCSS files" inside the when-clause.

Add the natural trigger terms users actually type: "Stylelint", "stylelint config", ".css", and ".scss" files.

Tighten the trigger clause so the skill fires on linting requests specifically, reducing overlap with general style-review or layout-debugging skills.

DimensionReasoningScore

Specificity

The description lists several concrete actions — "reviewing stylesheets, component styles, and responsive behavior", "Check the rendered layout across breakpoints and interaction states before proposing a fix" — naming the domain and multiple specific review behaviors. It is not a 5 because the core capability (linting with a tool like Stylelint) is only awkwardly embedded as "related to Lint CSS and SCSS files" rather than stated as a direct action, leaving minor coverage gaps.

4 / 5

Completeness

Both halves are present: an explicit trigger clause ("Use when reviewing stylesheets, component styles, and responsive behavior related to Lint CSS and SCSS files") and a concrete what ("Check the rendered layout across breakpoints and interaction states before proposing a fix"). It is not a 5 because the primary capability statement is garbled — "Lint CSS and SCSS files" appears as a topic inside the when-clause rather than a clear statement of what the skill does (set up/run linting).

4 / 5

Trigger Term Quality

Natural terms a user would say are present: "stylesheets", "component styles", "responsive behavior", "CSS", "SCSS", "lint", "breakpoints", "interaction states". It falls short of a 5 because common variations users would actually type — "Stylelint", "stylelint config", ".css", ".scss", "css linting" — are missing.

4 / 5

Distinctiveness Conflict Risk

The CSS/SCSS linting niche with triggers like "stylesheets", "component styles", and "breakpoints" is mostly distinct from other skills. It is not a 5 because "reviewing stylesheets... and responsive behavior" could also fire for general style-review or layout-debugging skills that are not about linting, creating minor overlap risk.

4 / 5

Total

16

/

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.