CtrlK
BlogDocsLog inGet started
Tessl Logo

content-without-css

Use when reviewing rendered HTML, layout components, or design-system patterns that may depend on presentation for meaning. Check the DOM order, semantic structure, form relationships, and whether CSS generated content carries essential information.

62

Quality

73%

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/content-without-css/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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

A lean, well-organized overview with proper progressive disclosure to a real reference file. Its weaknesses are redundancy across the four guidance sections and the absence of a concrete, executable method for the core "test with styles disabled" verification step.

Suggestions

Merge the overlapping Quick Reference, Fix, and Code Review guidance into one section, keeping a single canonical list of what to check and what to change.

Add one concrete verification technique for the "styles disabled" step, e.g. a browser DevTools method or a snippet that neutralizes the stylesheet, instead of just telling Claude to test with styles disabled.

Since deep guidance lives in references/rule.md, consider moving the detailed remediation wording there and keeping only the checklist in SKILL.md.

DimensionReasoningScore

Conciseness

The body is short and free of basic-concept padding, but the Quick Reference, Check, Fix, and Code Review sections largely restate the same four points — e.g. "Use semantic HTML so headings, lists, and form relationships survive without CSS" vs. "Use semantic HTML and DOM order to preserve headings, lists, labels, field groups, helper text, and error messaging" — so it could be tightened into a single pass.

3 / 5

Actionability

Guidance on what to inspect is concrete (DOM order, pseudo-elements, form relationships), but the key verification step — "Test key journeys with author styles disabled or overridden by user styles" — gives no method: no DevTools technique, user-stylesheet example, or command, so Claude must improvise how to actually disable or override styles.

3 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sequence is coherent, and verification is embedded ("Verify the page still has a logical reading order… when author styles are disabled", "note how to verify the fix with styles disabled"). Checkpoints are present but mostly stated once in prose rather than as explicit steps, so it falls just short of the anchor-5 explicit validation pattern.

4 / 5

Progressive Disclosure

The body is a concise overview with well-organized sections and a clearly signaled, one-level-deep pointer to the existing references/rule.md ("For full implementation details, code examples, and framework-specific guidance, see references/rule.md"), which matches the clear-overview-plus-clean-reference structure.

5 / 5

Total

15

/

20

Passed

Description

83%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 strong description with an explicit "Use when" trigger and concrete, third-person checking actions targeted at a recognizable niche. Coverage is slightly one-sided (review-only, no fix guidance) and a few natural trigger synonyms are missing.

DimensionReasoningScore

Specificity

The description lists several concrete checking actions — "Check the DOM order, semantic structure, form relationships, and whether CSS generated content carries essential information" — but only covers the review side of the skill, with minor gaps (no mention of fixing or remediating markup).

4 / 5

Completeness

It explicitly answers both questions: the "what" is the set of concrete checks on DOM order, semantic structure, form relationships, and CSS generated content, and the "when" is the explicit trigger clause "Use when reviewing rendered HTML, layout components, or design-system patterns that may depend on presentation for meaning". This matches the anchor-5 pattern of a clear what paired with an explicit when containing concrete trigger phrases.

5 / 5

Trigger Term Quality

Natural phrases like "rendered HTML", "layout components", and "design-system patterns" are terms users would plausibly say, but common variations such as "accessibility", "screen readers", "high contrast", or file extensions like .css/.html are missing.

4 / 5

Distinctiveness Conflict Risk

The niche is fairly distinct — content robustness without CSS — but "reviewing rendered HTML, layout components, or design-system patterns" overlaps with general HTML-review and accessibility-audit skills, so it could trigger for a related skill in some phrasings.

4 / 5

Total

17

/

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.