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.

Quality

68%

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

Quality

Content

61%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 well-structured and points cleanly to a real reference file, with actionable checking and fixing guidance. It is held back by redundancy between the intro/Quick Reference/Explain sections and by the absence of an explicit verification step in the body's workflow.

Suggestions

Remove the redundant 'Explain' section (or trim it to a single line), since WCAG thresholds and platform guidance already appear in Quick Reference and references/rule.md.

Add an explicit 'Verify' step to the body workflow (e.g., 'Re-measure the rendered bounding box; confirm >=24px AA or >=44px AAA') rather than relying solely on references/rule.md for verification.

Tighten the intro paragraph by dropping the enumeration of specific motor disabilities, which Claude already knows and which does not change the action.

Dimension	Reasoning	Score
Conciseness	The intro paragraph explains motor disabilities (essential tremor, Parkinson's, hemiplegia) and the 'Explain' section restates WCAG numbers, 44px/24px thresholds, and Apple/Google guidance already present in Quick Reference, creating noticeable redundancy.	3 / 5
Actionability	The 'Check' section gives concrete flagging thresholds (<24px, <44px, 24px spacing) and 'Fix' provides executable CSS techniques including a real pseudo-element snippet (`inset: -12px`), with fuller examples deferred to references.	4 / 5
Workflow Clarity	A Check -> Fix -> Code Review sequence is present, but the body lacks an explicit verification checkpoint confirming the fix meets the threshold; validation lives only in references/rule.md, leaving checkpoints implicit.	3 / 5
Progressive Disclosure	The body is well-sectioned (Quick Reference, Check, Fix, Explain, Code Review) and points clearly one level deep to references/rule.md (a real file), though the 'Explain' section duplicates content that already exists in the reference.	4 / 5
	Total	14 / 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.

The description is specific and trigger-rich, clearly scoping the skill to touch-target sizing on touchscreen interactive elements with an explicit 'Use when' clause. Its main weakness is that the core purpose is implied rather than stated directly, leaving the 'what' slightly weaker than the 'when'.

Suggestions

Lead with a clear statement of the skill's purpose (e.g., 'Ensures interactive elements meet minimum touch-target size requirements') before the 'Use when' trigger.

Make the 'when' clause more explicit by naming the concrete trigger phrases (e.g., 'Use when reviewing touchscreen accessibility, auditing tap-target sizes, or when users mention small icon buttons').

Add the WCAG thresholds (24px AA / 44px AAA) to the description so the 'what' is concrete rather than implied.

Dimension	Reasoning	Score
Specificity	Lists concrete checking actions across specific CSS properties ("min-width, min-height, width, height, and padding") and enumerates interactive element types, with only minor gaps in stating the underlying goal.	4 / 5
Completeness	Has both a 'what' (check CSS sizing properties on interactive elements) and an explicit 'Use when...' trigger clause; the 'when' is present but slightly generic and the core purpose (sufficient target size) is implicit rather than stated.	4 / 5
Trigger Term Quality	Covers natural terms a user would say ("touchscreen interfaces", "buttons, links, checkboxes... icon buttons", "icon-only buttons (close, delete, share)"); a few natural synonyms are absent but coverage is strong.	4 / 5
Distinctiveness Conflict Risk	The touch-target sizing niche with its element list and icon-only-button emphasis is mostly distinct, with only minor overlap risk against broader CSS/accessibility checking skills.	4 / 5
	Total	16 / 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/touch-targets/SKILL.md
Commit: 30756a7

Reviewed: 17 days 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.