Skill LibraryPrompt Skill1 DesignsTop Views

Mobile Action Density

Create action priority, touch target, safe-area, keyboard, and non-overflow rules for mobile toolbars, filters, bottom action bars, and long-label buttons.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines10

Reusable instruction lines for generation.

Author@Interface Lab

Interaction

Skill Directive

Description

Create action priority, touch target, safe-area, keyboard, and non-overflow rules for mobile toolbars, filters, bottom action bars, and long-label buttons.

TagsInteraction

Skill Prompt

- Use for mobile top toolbars, bottom action bars, filter strips, bulk actions, detail-page action clusters, and long-label CTAs; inputs must include action list, frequency, destructive risk, text need, target viewports, and keyboard scenarios.
- Prioritize actions first: primary, common secondary, low-frequency more menu, destructive action, and mode toggle; do not copy every desktop button into mobile top or bottom bars.
- Touch targets should be comfortably tappable: core actions are at least 40-44px tall and satisfy WCAG 2.2 target-size/spacing; adjacent destructive controls need extra spacing or confirmation.
- A bottom action bar carries one primary action and at most two secondary actions; overflow extra actions into a menu or sheet; global navigation tab bars must not carry current-object destructive actions.
- Toolbars may wrap, scroll horizontally, or use a more menu, but current mode, search/filter summary, and primary action remain visible; button labels must not spill off-screen or truncate into ambiguity.
- Long button labels are shortened, wrapped, or represented with icon plus visible/aria label; critical actions should not become icon-only unless the symbol is universally understood.
- Choose chips, segmented controls, selects, sheets, or drawers based on filter count; beyond five conditions, use a filter panel and show active-filter summary plus clear entry in the toolbar.
- Frontend implementation handles safe-area inset, virtual keyboard, landscape, narrow widths, sticky/fixed stacking, focus-visible, `min-width:0`, `overflow-wrap:anywhere`, and disabled/loading states.
- Output: action priority table, mobile toolbar layout, bottom bar contract, filter fallback, target-size QA, safe-area/keyboard QA, and desktop-to-mobile diff.
- Common mistakes: copying desktop buttons, bottom bars covering inputs, long labels overflowing, tab bars containing delete actions, and icons explained only by hover/tooltip. Sources: Apple HIG Toolbars/Accessibility, Material navigation bar, WCAG Target Size.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Mobile Action Density

More pages using Mobile Action Density