CtrlK
BlogDocsLog inGet started
Tessl Logo

touch-targets

Use when applies to all interactive elements on touchscreen interfaces: buttons, links, checkboxes, radio buttons, form inputs, icon buttons, and menu items. Check CSS for min-width, min-height, width, height, and padding on interactive elements. Particularly important for icon-only buttons (close, delete, share) which are often made too small.

61

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/touch-targets/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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 overview with a clean Check/Fix flow, concrete CSS snippets, and exemplary progressive disclosure to a single verified one-level-deep reference. The drag on quality is redundancy and padding: the disability-background intro, the Explain section's repetition of Quick Reference, and a boilerplate Code Review section that mixes in irrelevant focus/keyboard concerns.

Suggestions

Trim the opening motor-disabilities paragraph to one sentence and drop or merge the 'Explain' section, since its WCAG 24px/44px thresholds duplicate the Quick Reference verbatim.

Replace the generic Code Review boilerplate with a concrete verification step (e.g., a specific browser devtools or accessibility-tree check) so the fix-verification loop is actionable rather than implied.

Add one complete before/after CSS example block for the common case (an undersized icon-only button) to make the Fix guidance fully copy-paste ready.

DimensionReasoningScore

Conciseness

The body is mostly tight, but the opening paragraph on motor disabilities ("essential tremor, Parkinson's disease, hemiplegia, and spasticity") is background Claude already knows, and the "Explain" section re-states the 24px/44px thresholds and fingertip rationale already given in Quick Reference ("SC 2.5.8... at least 24×24 CSS pixels" appears twice nearly verbatim). The boilerplate "Code Review" section ("Flag exact elements, roles, labels, focus behavior, or keyboard interactions") adds padding with items largely irrelevant to target size.

3 / 5

Actionability

The Fix section gives concrete, usable CSS — `padding: 12px`, `min-width: 44px; min-height: 44px`, and the copy-pasteable pseudo-element hit-area pattern `.icon-btn::before { content: ''; position: absolute; inset: -12px; }` — and Check names specific element selectors and thresholds (24px/44px). It falls short of a 5 because no complete before/after example block is shown and the Code Review section offers only vague direction ("note how to verify the fix with browser accessibility tooling") without naming a tool.

4 / 5

Workflow Clarity

The Check → Fix sequence is clearly laid out with explicit thresholds and an ordered list of four fix strategies, and for a simple single-purpose skill that structure is unambiguous. Verification is mentioned ("note how to verify the fix with browser accessibility tooling") but never made concrete — no tool, command, or checkpoint — which keeps it below a 5.

4 / 5

Progressive Disclosure

The body is a lean overview and the single bundle file `references/rule.md` exists, is exactly one level deep (verified: it contains no further skill-bundle references, only external spec links), and is clearly signaled at the bottom: "For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`". This matches the clear-overview, well-signaled one-level-deep reference anchor.

5 / 5

Total

16

/

20

Passed

Description

75%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 solid description with an explicit 'Use when' clause, a concrete check action with enumerated CSS properties and element types, and a well-chosen emphasis on icon-only buttons. Its main weaknesses are the absence of the domain's most natural trigger phrases (touch/tap target, hit area) and a slightly awkward, scope-style 'when' clause.

DimensionReasoningScore

Specificity

The description names a concrete action — "Check CSS for min-width, min-height, width, height, and padding on interactive elements" — with enumerated element types ("buttons, links, checkboxes, radio buttons, form inputs, icon buttons, and menu items") and a specific high-risk case ("icon-only buttons (close, delete, share)"). It stays at one primary action verb, so it is not the comprehensive multi-action coverage of a 5, but its enumerations make it noticeably above the anchor-3 midpoint.

4 / 5

Completeness

Both parts are present: what ("Check CSS for min-width, min-height, width, height, and padding on interactive elements") and when ("Use when applies to all interactive elements on touchscreen interfaces"). The 'when' clause is explicit but reads as a rule-scope statement rather than concrete user-situation triggers (e.g., 'when the user mentions touch targets'), and the phrasing 'Use when applies to' is slightly garbled, so it falls short of anchor 5.

4 / 5

Trigger Term Quality

Natural element keywords are well covered ("buttons, links, checkboxes, radio buttons, form inputs, icon buttons, menu items", "touchscreen", "icon-only") and would match user phrasing. However the core natural phrases for this domain — "touch targets", "tap targets", "hit area", "44px" — never appear, so coverage is good but a few key synonyms are missing.

4 / 5

Distinctiveness Conflict Risk

The touchscreen/touch-target-size niche with its specific CSS properties is distinct from related skills, and the emphasis on icon-only buttons sharpens the trigger. Minor overlap risk remains with general accessibility-audit or CSS-review skills since the element list (buttons, links, form inputs) is broad.

4 / 5

Total

16

/

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.