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.

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/touch-targets/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 actionable with executable CSS and concrete thresholds, and it uses clean one-level progressive disclosure to a real reference file. It loses points for redundant background explanation and for lacking an explicit in-body verification checkpoint to confirm the enlarged hit area.

Suggestions

Trim the opening paragraph and merge the Explain section into Quick Reference to remove duplicated WCAG threshold and fingertip rationale Claude already knows.

Add a short in-body verification step (e.g. 'Verify with browser DevTools computed box or an axe/Lighthouse run that the rendered target is >=24px/44px') rather than deferring all verification to the reference.

Keep the executable CSS examples but drop the conceptual motor-impairment list from the body, moving any retained rationale to references/rule.md.

DimensionReasoningScore

Conciseness

The Quick Reference, Check, and Fix sections are tight and useful, but the opening paragraph and the Explain section restate WCAG fingertip/dexterity rationale Claude largely knows, and 2.5.5/2.5.8 thresholds are duplicated across Quick Reference and Explain.

2 / 3

Actionability

The Fix section gives copy-paste-ready, executable CSS (padding: 12px, min-width/min-height: 44px, ::before with inset: -12px) and Check specifies exact 24px/44px thresholds and element types, matching the fully-executable anchor.

3 / 3

Workflow Clarity

Check → Fix → Explain → Code Review is a present sequence, but there is no explicit validation/verification checkpoint in the body (confirming the rendered target actually grew) — that step is only delegated to the reference file, so checkpoints are implicit rather than explicit.

2 / 3

Progressive Disclosure

The body is a well-organized overview with a clearly signaled, single-level reference to references/rule.md (a real file), and detailed implementation is appropriately split out rather than inlined.

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 specific and answers both 'what' and 'when' with explicit triggers, but its trigger phrasing is grammatically off ('Use when applies to...') and omits the most natural user terms like 'touch target' or 'tap target'. Tightening the trigger clause and adding canonical vocabulary would lift it from good to excellent.

Suggestions

Rewrite the trigger to a natural clause, e.g. 'Use when reviewing touchscreen interfaces for accessible touch/tap target sizes on buttons, links, inputs, and icon-only controls.'

Add the canonical terms users actually say — 'touch target', 'tap target', 'too small to tap' — so the skill surfaces for those phrasings.

Lead with the action ('Check interactive elements meet WCAG touch-target sizes') before listing the element types, to sharpen distinctiveness from generic CSS/a11y skills.

DimensionReasoningScore

Specificity

Names many concrete element types (buttons, links, checkboxes, icon buttons, menu items) and specific CSS properties (min-width, min-height, width, height, padding), matching the 'lists multiple specific concrete actions' anchor.

3 / 3

Completeness

Explicitly answers both what (check CSS sizing/padding properties on interactive elements) and when ('Use when applies to all interactive elements on touchscreen interfaces'), matching the full what-and-when anchor.

3 / 3

Trigger Term Quality

It has a 'Use when' clause and relevant terms like 'touchscreen interfaces' and 'icon-only buttons', but the canonical natural phrasing ('touch targets', 'tap targets', 'too small to tap') is missing and the trigger is grammatically awkward ('Use when applies to all...').

2 / 3

Distinctiveness Conflict Risk

The touchscreen touch-target niche is somewhat distinct, but the focus on generic interactive-element CSS sizing could overlap with broader CSS/accessibility skills, and the awkward opening weakens the distinct trigger.

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.