Selection Controls: AI Skill for UX Design
Selection Controls is an AI skill that picks the right control for the structure of each choice: checkbox, radio, toggle, dropdown, or slider. No more dropdowns hiding three options.
npx skills add Uxcel-Lab/product-skills --skill ux-selection-controls
What this skill does
Helps an AI assistant pick the control that fits the structure of the choice: checkbox, radio, toggle, dropdown, or slider.
- Establishes how many options exist, how many are selectable, and when the effect applies.
- Keeps conventional shapes: square checkboxes, round radios, rounded-rectangle switches.
- Makes the whole label clickable, phrased keyword-first.
- Aligns controls in vertical, left-aligned, single-column lists.
- Sets defaults for required radio groups and immediate effect for toggles.
- Specs sliders with visible min and max labels, snapping, and dual thumbs for ranges.
- Flags pre-checked consent boxes and steering defaults as dark patterns.
When to use it
Use it when you need an AI assistant to:
- choose between a checkbox, radio, toggle, or dropdown;
- design filters with sliders or preset ranges;
- review a settings screen;
- fix a form where users pick the wrong options;
- pick a date picker for mobile;
- align controls and labels for scanning;
- audit defaults for consent choices.
Decisions this skill helps you make
| Decision | Options |
|---|---|
| Dropdown vs. visible options | Radios or checkboxes up to about 5 options; searchable dropdown beyond |
| Toggle vs. checkbox | Toggle for immediate effect; checkbox for choices submitted together |
| Slider vs. preset ranges | Slider for custom values on desktop; tap-friendly presets on mobile |
| Slider vs. radio | Sliders for genuine ranges; radios when options fit on one hand |
| Histogram slider | When the data distribution informs the choice, like price filters |
| Mobile date pickers | Input picker for distant dates; calendar picker within about a year |
| Default selection | The genuinely most common option; never a steering default |
How the skill works
1
Map the choice
The skill counts the options, how many are selectable, and whether the effect is immediate.
2
Apply the core
It keeps conventional shapes, clickable labels, left-aligned lists, and sensible defaults.
3
Surface control trade-offs
It weighs dropdowns, toggles, sliders, presets, and pickers, and explains where each fits.
Try it with
Related skills
1.0.0
MIT
UX Design
Components
