touch-target-design
Design touch targets and pointer interactions that work for people with motor difficulties, tremors, limited dexterity, or who use assistive pointing devices. Use when designing buttons, links, form controls, mobile interfaces, or any clickable/tappable elements. Triggers on: touch target, tap target, button size, too small to tap, fat finger, motor disability, dexterity, tremor, pointer, click area, hit area, mobile buttons.
- Installs
- 80
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/owl-listener/inclusive-design-skills --skill touch-target-design- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads touch-target-design automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
- Are all interactive elements at least 44×44px on touch devices?
- Is there adequate spacing between adjacent targets?
- Are destructive actions separated from common actions?
- Can every interaction be completed without precision timing or precise pointing?
- Is there always an alternative to precision-dependent interactions like sliders or drag-and-drop?
FAQ
What does the touch-target-design skill do?
Design touch targets and pointer interactions that work for people with motor difficulties, tremors, limited dexterity, or who use assistive pointing devices. Use when designing buttons, links, form controls, mobile interfaces, or any clickable/tappable elements. Triggers on: touch target, tap target, button size, too small to tap, fat finger, motor disability, dexterity, tremor, pointer, click area, hit area, mobile buttons.
How do I install touch-target-design?
Run npx skills add https://github.com/owl-listener/inclusive-design-skills --skill touch-target-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/touch-target-design/ (personal) or .claude/skills/touch-target-design/ (project).
Which AI agents can use touch-target-design?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is touch-target-design safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains touch-target-design?
It is published by owl-listener in owl-listener/inclusive-design-skills. It has 80 recorded installs.
More from owl-listener/inclusive-design-skills
keyboard-navigation
owl-listener/inclusive-design-skills
Design keyboard navigation and focus management for users who cannot or prefer not to use a mouse or touch screen. Use when designing any interactive interface — forms, menus, modals, tabs, carousels, drag-and-drop, data tables, or custom components. Triggers on: keyboard, focus, tab order, focus trap, skip link, arrow keys, keyboard shortcut, can't use mouse, motor disability, switch access, focus indicator, focus ring.
plain-language-design
owl-listener/inclusive-design-skills
Write and review content for plain language accessibility. Use when writing interface copy, error messages, instructions, onboarding text, help content, legal or medical information, forms, or any user-facing text. Triggers on: plain language, reading level, simplify text, jargon, hard to understand, nobody reads this, unclear copy, rewrite, too complicated, ESL, literacy, readability.
cognitive-load-assessment
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
responsive-review
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
user-preference-respect
owl-listener/inclusive-design-skills
Design interfaces that detect and respond to system-level user preferences. Use when implementing dark mode, reduced motion, high contrast, text scaling, or any user preference that affects how the interface renders. Triggers on: user preference, system preference, prefers-reduced-motion, prefers-contrast, prefers-color-scheme, forced-colors, media query, user settings, system settings, accessibility settings, OS settings.
error-prevention-recovery
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
Popular mobile skills
design-mobile-apps
designed-by-ai/skills
Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
ios-design
uizze.sh
Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.
vercel-react-native-skills
vercel-labs/agent-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
animate-expo
emilkowalski/skills
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.
xcode-project-setup
firebase/agent-skills
Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).
firebase-remote-config-basics
firebase/agent-skills
Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.