CtrlK
BlogDocsLog inGet started
Tessl Logo

horizontal-scroll

Use when applies to all CSS layout rules. Check `width`, `min-width`, fixed pixel values on containers, `overflow`, `white-space`, and `word-break` properties. Use when auditing responsive design or WCAG 2.1 Level AA compliance. Test at 320px viewport width and at 400% browser zoom.

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/horizontal-scroll/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-structured with actionable CSS guidance and clean one-level progressive disclosure, but it repeats the core WCAG/viewport rationale across sections and lacks an explicit post-fix verification loop.

Suggestions

Deduplicate the WCAG 1.4.10/320px/400% rationale — state it once (Explain) and reference it elsewhere instead of repeating it in the intro, Quick Reference, and Check sections.

Add an explicit "Verify" step after Fix (e.g., re-render at 320px / 400% zoom and confirm no horizontal scrollbar) to close the check-fix loop.

Collapse the two near-duplicate Quick Reference bullets about SC 1.4.10 Reflow into a single bullet.

DimensionReasoningScore

Conciseness

Per-section content is lean, but the WCAG 1.4.10/320px/400%-zoom fact is restated ~4 times (intro, two near-duplicate Quick Reference bullets, Check, Explain), adding redundant tokens.

2 / 3

Actionability

The Fix section gives concrete, copy-paste-ready CSS declarations ("max-width: 100%", "overflow-wrap: break-word", "width: 100%" instead of 100vw, "overflow-x: auto" on the table wrapper) and the Check section gives a specific test method.

3 / 3

Workflow Clarity

Check and Fix are sequenced with numbered steps, but there is no explicit post-fix verification checkpoint (e.g., re-test at 320px to confirm the overflow is gone) in the body.

2 / 3

Progressive Disclosure

The body is a concise overview (Quick Reference, Check, Fix, Explain, Code Review) with one clearly-signaled, one-level-deep reference to references/rule.md (verified to exist) for code examples and framework guidance.

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 concrete and has explicit Use-when triggers, but its trigger vocabulary misses the natural term "horizontal scrolling" and its "applies to all CSS layout rules" framing is too broad, raising conflict risk.

Suggestions

Add the natural user-facing terms "horizontal scrolling" and "horizontal scroll" to the trigger clause so the skill surfaces when users name the actual symptom.

Replace the broad "applies to all CSS layout rules" framing with the specific niche (overflow/horizontal-scroll at 320px) to reduce overlap with general CSS skills.

Fix the grammatically broken opening "Use when applies to all CSS layout rules" so the trigger reads as a coherent clause.

DimensionReasoningScore

Specificity

Lists multiple concrete actions and targets: "Check `width`, `min-width`, fixed pixel values on containers, `overflow`, `white-space`, and `word-break`" and "Test at 320px viewport width and at 400% browser zoom".

3 / 3

Completeness

Explicitly answers both what (check named CSS properties, test at 320px/400% zoom) and when via two "Use when..." triggers, satisfying the explicit-trigger requirement.

3 / 3

Trigger Term Quality

Includes relevant terms like "responsive design" and "WCAG 2.1 Level AA compliance" but omits the most natural user phrasing ("horizontal scrolling"/"horizontal scroll"), which is the skill's core problem.

2 / 3

Distinctiveness Conflict Risk

The phrase "applies to all CSS layout rules" is overly broad and could overlap with other CSS skills, though the 320px/400%-zoom/WCAG triggers narrow it somewhat.

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.