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.

64

Quality

78%

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%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 well-structured, actionable audit skill body that cleanly separates overview/process from detailed code examples via a one-level reference. The main gap is the missing in-body validation loop telling Claude to re-test at 320px after applying fixes.

Suggestions

Add an explicit verification step in the body (e.g., 'After applying fixes, re-test at 320px to confirm no horizontal scrollbar remains') so the feedback loop does not require opening the reference.

De-duplicate the WCAG 2.1 SC 1.4.10 reflow explanation that appears in the intro, Quick Reference, and Explain sections.

Inline one or two of the most common fix code blocks (e.g., the max-width and overflow-wrap fixes) so the body is actionable without the reference.

DimensionReasoningScore

Conciseness

Mostly efficient and actionable with concrete property guidance, but the WCAG reflow explanation is restated across the intro, Quick Reference, and Explain sections and could be tightened.

4 / 5

Actionability

Provides concrete, specific remediation (e.g., 'max-width: Npx plus width: 100%', 'overflow-wrap: break-word', 'overflow-x: auto' on the table wrapper), but copy-paste code blocks are deferred to references/rule.md rather than inlined.

4 / 5

Workflow Clarity

A clear Check (six-point list) to Fix (six-step) sequence is present, but there is no explicit post-fix re-verification feedback loop in the body — the verification procedure lives only in the reference file.

3 / 5

Progressive Disclosure

Clear overview with well-labeled sections and a single well-signaled one-level-deep reference to references/rule.md, which is self-contained (verified) and holds the code examples; content is appropriately split.

5 / 5

Total

16

/

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 specific, well-triggered description that clearly answers both what and when with concrete CSS properties and testing parameters. Its main weakness is the slightly broad 'all CSS layout rules' framing and the omission of the natural term 'horizontal scroll'.

Suggestions

Lead with the user-facing problem (e.g., 'Prevent horizontal scrolling on web pages') before the CSS-layout framing so the most natural trigger term appears in the description.

Tighten 'Use when applies to all CSS layout rules' (which reads as missing a subject) into a grammatical trigger clause.

Consider adding 'horizontal scroll' or 'horizontal scrollbar' as explicit trigger keywords users would actually say.

DimensionReasoningScore

Specificity

Names the CSS-layout domain and several concrete actions (checking six specific properties, auditing WCAG compliance, testing at 320px/400% zoom), but the action verbs are limited to check/audit/test rather than a comprehensive set of distinct operations.

4 / 5

Completeness

Explicitly states both what (check named properties, test at 320px viewport and 400% zoom) and when via two concrete 'Use when...' trigger clauses, exceeding the clarity of the 4-anchor example.

5 / 5

Trigger Term Quality

Good keyword coverage with natural terms like 'responsive design', 'WCAG 2.1 Level AA compliance', 'viewport width', and 'browser zoom', but it omits the most natural user phrase 'horizontal scroll/scrolling'.

4 / 5

Distinctiveness Conflict Risk

The WCAG reflow / 320px testing niche is mostly distinct, but the opening 'applies to all CSS layout rules' broadens scope and creates minor overlap risk with general CSS or responsive-design skills.

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.

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.