CtrlK
BlogDocsLog inGet started
Tessl Logo

css-print

Use when reviewing stylesheets, component styles, and responsive behavior related to Include a print stylesheet. Check the rendered layout across breakpoints and interaction states before proposing a fix.

52

Quality

58%

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-print/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.

The skill demonstrates excellent progressive disclosure — a lean overview correctly deferring to a substantial, well-signaled reference file. Its weakness is the template-heavy Check/Fix/Explain sections, which trade specificity for boilerplate: the body names techniques in the Quick Reference but gives no concrete method for verifying or fixing a missing print stylesheet.

Suggestions

Replace the vague Check section with a concrete verification step, e.g. "Search stylesheets for '@media print' or a media='print' link tag; in devtools, emulate print media (Rendering > Emulate CSS media type: print) and confirm navigation and ads are hidden".

Merge the redundant Fix/Explain/Code Review boilerplate into the Quick Reference and inline one minimal executable snippet (an @media print block with .no-print and page-break rules) so the body is self-sufficient for the common case.

State an explicit validation checkpoint after the Fix step (re-run the print-media emulation and confirm readable output) to lift workflow clarity.

DimensionReasoningScore

Conciseness

The body is short and avoids explaining concepts Claude already knows, and the Quick Reference bullets are dense and useful. However, the Check/Fix/Explain/Code Review sections largely restate one another in template language ("Verify that a print stylesheet is provided and properly optimized..." / "Create a print stylesheet that removes unnecessary elements...") that could be tightened into a single concrete section. Not a 4 because roughly half the body is low-information boilerplate.

3 / 5

Actionability

The Quick Reference gives some concrete guidance ("Use @media print for print-specific styles", "Hide navigation, ads, and interactive elements with .no-print", "Use serif fonts at 12pt and optimize page breaks", "Show full URLs for external links"), but the Check and Fix sections are abstract directives with no selectors, commands, or verifiable criteria, and the body contains no executable example (all code lives in references/rule.md). Not a 4 because a reviewer reading the body alone lacks the specific steps to check or fix anything.

3 / 5

Workflow Clarity

A rough sequence exists (Check → Fix → Explain → Code Review), which suits this simple single-purpose review skill, but the checkpoints are vague: "Verify that a print stylesheet is provided and properly optimized" gives no method (e.g., emulating print media, inspecting for @media print). Not a 4 because the verification step has no concrete checkpoint a reviewer could actually execute; better than a 2 since the four labeled stages do order the work.

3 / 5

Progressive Disclosure

The body is a lean overview with a Quick Reference, and all implementation details (996 lines of code examples, framework guidance, complete print stylesheet) are appropriately split into the single references/rule.md file, which is explicitly and accurately signaled: "For full implementation details, code examples, and framework-specific guidance, see references/rule.md". The reference is real, one level deep, and matches what the body promises, so it clearly matches the top anchor.

5 / 5

Total

14

/

20

Passed

Description

58%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' trigger and names its domain, but it describes a generic CSS review workflow rather than the skill's actual purpose (adding and optimizing a print stylesheet). The embedded rule-title phrase "related to Include a print stylesheet" is ungrammatical and weakens both trigger quality and distinctiveness.

Suggestions

Lead with the actual capability in third person, e.g. "Adds and optimizes a print stylesheet: hides non-print elements, sets print typography, and controls page breaks" — then keep the review guidance as a secondary clause.

Add natural trigger synonyms such as "print CSS", "@media print", "print styles", or "when the user mentions printing the page" to improve trigger term coverage.

Remove the awkwardly embedded rule title ("related to Include a print stylesheet") and replace it with fluent phrasing like "related to print stylesheets" to reduce confusion and conflict with sibling CSS rule skills.

DimensionReasoningScore

Specificity

The description names the domain ("stylesheets, component styles, and responsive behavior") and offers 1-2 concrete actions ("Check the rendered layout across breakpoints and interaction states", "proposing a fix"), but never states the skill's actual capability of adding/creating a print stylesheet, and the phrase "related to Include a print stylesheet" reads as an awkwardly embedded rule title rather than a described action. Not a 4 because the actions listed are generic review verbs shared by any CSS rule, leaving coverage incomplete.

3 / 5

Completeness

Both parts are present: the 'when' is explicit ("Use when reviewing stylesheets, component styles, and responsive behavior related to Include a print stylesheet") and the 'what' is stated ("Check the rendered layout across breakpoints and interaction states before proposing a fix"). Not a 5 because the 'what' is generic check-and-fix language not tied to the print-stylesheet task, and the 'when' clause's "related to Include a print stylesheet" phrasing is unclear as a trigger condition; better than a 3 since an explicit 'Use when' clause exists.

4 / 5

Trigger Term Quality

Relevant keywords are present ("print stylesheet", "stylesheets", "component styles", "breakpoints") but common variations users would naturally say are missing: "print CSS", "@media print", "print styles", "printing the page". Not a 4 because the coverage stops at a couple of domain nouns plus the embedded rule title, without synonyms or natural phrasings beyond "print stylesheet".

3 / 5

Distinctiveness Conflict Risk

The "print stylesheet" mention carves out a niche, but the dominant framing ("reviewing stylesheets, component styles, and responsive behavior... Check the rendered layout across breakpoints and interaction states") is boilerplate that would identically match many sibling CSS checklist skills, creating real overlap risk. Not a 4 because the differentiating trigger only appears via the awkward embedded title rather than distinctive capability language.

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.