mcpField
T
touch-target-design

touch-target-design

github.com/owl-listenerDesign & UI10880 installsUpdated 20w ago
Repository

About touch-target-design

A design skill for teams creating interactive interfaces, with guidance on target size, spacing, and forgiving interactions to reduce precision demands and accidental actions.

Key features

  1. 01Touch and pointer target sizing
  2. 02Spacing guidance for adjacent targets
  3. 03Forgiving interaction patterns
  4. 04Alternatives to precision input
  5. 05Design assessment questions

Use cases

  1. 01Check button and link sizes on mobile
  2. 02Reduce accidental destructive actions
  3. 03Offer alternatives to sliders and similar controls

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/owl-listener/inclusive-design-skills --skill touch-target-design

After installing, type/touch-target-designin Claude Code to confirm it loaded.

Details

From the project README

Touch Target Design

Design interactive elements that are large enough, spaced enough, and forgiving enough for people with limited precision — whether from disability, age, environment, or device.

Minimum Sizes

Touch (mobile, tablet)
  • Minimum: 44×44 CSS pixels (WCAG 2.2 Level AA)
  • Recommended: 48×48 CSS pixels (Google Material guidelines)
  • For high-stakes or frequent-use targets: 56×56 or larger
Pointer (desktop)
  • Minimum: 24×24 CSS pixels (WCAG 2.2 Level AA)
  • Recommended: 32×32 for common actions
  • For destructive or irreversible actions: larger targets reduce errors
Spacing Between Targets
  • Minimum: 8px gap between adjacent interactive elements
  • Recommended: 12–16px for frequently used elements side by side
  • Never place destructive actions (delete) adjacent to common actions (save) without spacing or visual separation

Design Patterns

Generous Hit Areas
  • The tappable area can be larger than the visible element
  • Use padding, not just the visual size of the icon or text
  • Entire row should be tappable in list items, not just the text
  • Link text should be descriptive enough to form a reasonable tap target ("Read the full report" not "here")
Forgiving Interactions
  • Don't trigger actions on touch-down — trigger on touch-up (this lets users slide away to cancel)
  • For destructive actions: require a deliberate second tap or confirmation, not a single tap
  • Avoid double-tap requirements — they're unreliable for users with tremors
  • Avoid long-press as the only way to access functionality
Spacing for Safety
  • Separate "confirm" and "cancel" actions with distance or visual weight
  • Place destructive actions away from common actions
  • Group related actions together, separate unrelated actions
  • On mobile: keep primary actions in the thumb zone (bottom half of screen)
Alternatives to Precision
  • Provide zoom capability for complex interfaces
  • Allow pinch-to-zoom on mobile (never disable it)
  • For precise tasks (colour pickers, sliders): provide a text input alternative
  • Dropdown menus with many items: add search/filter

Assessment Questions

  1. Are all interactive elements at least 44×44px on touch devices?
  2. Is there adequate spacing between adjacent targets?
  3. Are destructive actions separated from common actions?
  4. Can every interaction be completed without precision timing or precise pointing?
  5. Is there always an alternative to precision-dependent interactions like sliders or drag-and-drop?

Comments

Markdown supported