recognition-pickers-and-palettes

Design recognition-based selection interfaces with filtering, recents, and predictions.

6|3|Updated May 3, 2026
One-click install
npx skills add https://github.com/HDeibler/universal-design-principles --skill recognition-pickers-and-palettes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: recognition-pickers-and-palettes
Source: https://github.com/HDeibler/universal-design-principles/tree/main/plugins/cognition-and-learnability-principles/skills/recognition-pickers-and-palettes
Command: npx skills add https://github.com/HDeibler/universal-design-principles --skill recognition-pickers-and-palettes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps designers replace error-prone free-text entry with recognition-based selection, reducing user recall and preventing repeated wrong inputs.

Core Features & Use Cases

  • Design pickers by option set size: Choose toggle/radio/select/combobox/search-first patterns based on how many valid choices exist.
  • Accelerate selection with recents, suggestions, and predictions: Surface frequently used or likely values at the top to make repeat tasks faster.
  • Improve usability and accessibility for comboboxes and palettes: Support keyboard navigation, filtering, clear labels, and accessible interaction patterns.
  • Identify anti-patterns: Catch when the UI requires recall (free-text where a picker fits), hides available options, or omits recents for frequently used inputs.

Quick Start

Use recognition-pickers-and-palettes to redesign a form control so users can recognize and choose from valid options instead of typing from memory, tailored to your option count and interaction context.

Frequently Asked Questions about recognition-pickers-and-palettes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a combobox UI that reduces user typing errors?▼

Replace free-text entry with a recognition-based combobox that provides filtering, keyboard navigation, and vocabulary-aligned labels. This minimizes user recall and prevents repeated wrong inputs by letting users select valid options instead of typing from memory.

What is the best UI pattern for selecting from a known set of options?▼

The best UI pattern depends on option set size: use toggles or radios for small sets, standard selects for medium sets, and comboboxes or search-first palettes for large sets. This set-size-appropriate approach ensures users can recognize options quickly without overwhelming them.

When should I use a command palette instead of a standard dropdown?▼

Use a command palette instead of a standard dropdown when users need rapid access to a large set of commands or options. Command palettes support filtering, predictions, and keyboard navigation, accelerating repeat tasks better than simple dropdowns.

How do I make typeahead and autocomplete accessible for keyboard users?▼

Make typeahead and autocomplete accessible by implementing keyboard navigation, clear labels, and accessible interaction patterns. Ensure users can navigate filtered results and select valid options without relying solely on mouse interactions or recalling exact values.

Why do users keep entering wrong values in free-text form fields?▼

Users keep entering wrong values in free-text fields because the UI requires recall instead of recognition. Replacing free-text entry with pickers, dropdowns, or comboboxes surfaces valid options, preventing typos and minimizing the memory load required to input exact values.

Does recognition-over-recall design work for frequently repeated selection tasks?▼

Yes, recognition-over-recall design works for repeated tasks by surfacing frequently used or likely values at the top of pickers and palettes. This accelerates repeat selections by letting users instantly recognize and choose their standard options instead of searching.