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.

Quality

64%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/horizontal-scroll/SKILL.md

Quality

Content

65%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 body is a well-structured, actionable overview: a concrete inspection checklist, specific CSS fixes with property values, and a clean one-level pointer to references/rule.md for code examples. Its weaknesses are redundant repetition of the WCAG 1.4.10 / 320px explanation across three sections and the absence of a verify-after-fix checkpoint.

Suggestions

Consolidate the WCAG 1.4.10 / 320px / 400% explanation — currently stated in the intro, Quick Reference, and Explain sections — into one place (e.g. keep it in Explain and trim the intro to one sentence).

Add a post-fix verification step to close the workflow loop, e.g. "After applying fixes, re-test at 320px and confirm no horizontal scrollbar appears" (this also surfaces the Verification section already present in references/rule.md).

Drop or compress the Code Review section, which mostly restates the Check section's intent in generic terms.

Dimension	Reasoning	Score
Conciseness	The 320px = 400% zoom / WCAG 1.4.10 fact is stated three times (intro paragraph, Quick Reference bullets, and the Explain section), and Explain largely re-tells the intro. Otherwise lean, so it fits "mostly efficient but includes some unnecessary explanation or could be tightened" rather than the minor-trim level 4.	3 / 5
Actionability	Check gives a concrete six-item inspection list and Fix specifies exact declarations ("max-width: Npx plus width: 100%", "overflow-wrap: break-word (with fallback word-wrap: break-word)", "overflow-x: auto on the table wrapper"), with full code examples appropriately deferred to references/rule.md (verified to exist and contain them). Not 5 because the body itself has no copy-paste-ready snippet; clearly above 3 since fixes name real properties and fallbacks, not pseudocode.	4 / 5
Workflow Clarity	The Check → Fix → Explain → Code Review sequence is sensible and ordered, but there is no post-fix validation checkpoint in the body (no "re-test at 320px to confirm the scrollbar is gone"; verification exists only in references/rule.md). Fits "steps listed but validation gaps; sequence present but checkpoints missing or implicit".	3 / 5
Progressive Disclosure	A ~45-line body with clean sections (Quick Reference / Check / Fix / Explain / Code Review) and a single clearly signaled, one-level-deep pointer — "For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`" — to a verified existing file holding the code examples and detail. Appropriate split, no nesting, easy navigation: matches the top anchor.	5 / 5
	Total	15 / 20 Passed

Description

63%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 is action-oriented and testable, with explicit trigger conditions and named CSS properties. Its main weaknesses are a garbled, over-broad opening clause ("Use when applies to all CSS layout rules"), the absence of the skill's actual purpose (preventing horizontal scrolling), and missing natural trigger synonyms like "overflow", "reflow", and "horizontal scroll".

Suggestions

Rewrite the opening clause: replace "Use when applies to all CSS layout rules" with a statement of what the skill does, e.g. "Prevents horizontal scrolling (WCAG 2.1 SC 1.4.10 Reflow) by auditing CSS layout rules..."

Add natural trigger terms users would actually say — "horizontal scroll/scrolling", "overflow", "reflow" — to the trigger phrases.

Narrow the trigger scope so the description doesn't claim to apply to all CSS layout rules, which conflicts with sibling CSS layout and responsive-design skills.

Dimension	Reasoning	Score
Specificity	Lists several concrete actions — "Check `width`, `min-width`, fixed pixel values on containers, `overflow`, `white-space`, and `word-break` properties" and "Test at 320px viewport width and at 400% browser zoom" — with named properties and test parameters. Not 5 because it never states the skill's actual goal (preventing horizontal scrolling), and the garbled opening clause "Use when applies to all CSS layout rules" adds no concrete action.	4 / 5
Completeness	Both parts are present: an explicit when ("Use when auditing responsive design or WCAG 2.1 Level AA compliance") and an action-level what ("Check `width`... `word-break` properties... Test at 320px viewport width"). Not 5 because the what describes actions without ever naming the outcome the skill produces, so it could be more explicit.	4 / 5
Trigger Term Quality	Includes some natural keywords ("auditing responsive design", "WCAG 2.1 Level AA compliance", "320px viewport width", "400% browser zoom") but omits the most likely user phrasings: "horizontal scroll/scrolling", "overflow", "reflow", "mobile". Fits anchor 3 (relevant keywords but missing common variations) rather than 4 (good coverage with only a few missing).	3 / 5
Distinctiveness Conflict Risk	The property list, 320px/400% test, and WCAG AA framing are distinctive, but "applies to all CSS layout rules" claims universality over the entire CSS layout domain, creating real overlap risk with any sibling CSS layout or responsive-design skill. Not 2 (the bulk of the text is niche, not broadly generic) and not 4 (the universality clause is a genuine conflict risk, not a minor one).	3 / 5
	Total	14 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: thedaviddias/Front-End-Checklist
Path: skills/horizontal-scroll/SKILL.md
Commit: 7bfd868

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

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.