agentsclimarketplace

Hig components controls

Skill raintree-technology/hig-doctor/skills/hig-components-controls

Apple HIG reference and cross-framework UI audit tooling for agents.

Install
npx -y skills add raintree-technology/hig-doctor --skill hig-components-controls

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Apple HIG guidance for selection and input controls including pickers, toggles, sliders, steppers, segmented controls, combo boxes, text fields, text views, labels, token fields, virtual keyboards, rating indicators, and gauges. Use this skill when the user says "picker or segmented control," "how should my form look," "what keyboard type should I use," "toggle vs checkbox," or asks about picker design, toggle, switch, slider, stepper, text field, text input, segmented control, combo box, label, token field, virtual keyboard, rating indicator, gauge, form design, input validation, or control state management. Cross-references: hig-components-menus, hig-components-dialogs, hig-components-search.

SKILL.md

5.0 KB, as published. Nobody here has run it

Apple HIG: Selection and Input Controls

Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.

Key Principles

  1. Clear current state. Users must always see what is selected. Toggles show on/off, segmented controls highlight the active segment, pickers display the current selection.

  2. Prefer standard system controls. Built-in controls provide consistency and accessibility. Custom controls introduce a learning curve and may break assistive features.

  3. Toggles for binary states. On or off. In Settings-style screens, changes take effect immediately. In modal forms, changes commit on confirmation.

  4. Segmented controls for mutually exclusive options. 2-5 items, roughly equal importance, short labels.

  5. Sliders for continuous values. When precise numeric input is not critical. Provide min/max labels or icons for range endpoints.

  6. Pickers for long option lists. Too many options for a segmented control. Works well for dates, times, structured data.

  7. Steppers for small, precise adjustments. Increment/decrement in fixed steps. Display current value next to the stepper with reasonable min/max bounds.

  8. Text fields for short, single-line input. Text views for multi-line. Configure keyboard type to match expected input (email, URL, number).

  9. Combo boxes: text input + selection list. macOS. Type a value or choose from a predefined list when custom values are valid.

  10. Token fields: discrete values as visual tokens. macOS. For email recipients, tags, or collections of discrete items.

  11. Gauges and rating indicators display values. Gauges show a value within a range. Rating indicators show ratings (often stars). Display-only; use interactive variants for input.

Reference Index

ReferenceTopicKey content
controls.mdGeneral controlsStates, affordance, system controls
toggles.mdTogglesOn/off, immediate effect
segmented-controls.mdSegmented controls2-5 options, equal weight
sliders.mdSlidersContinuous range, min/max labels
steppers.mdSteppersFixed steps, bounded values
pickers.mdPickersDates, times, long option sets
combo-boxes.mdCombo boxesmacOS, type or select, custom values
text-fields.mdText fieldsShort input, keyboard types, validation
text-views.mdText viewsMulti-line, comments, descriptions
labels.mdLabelsPlacement, VoiceOver support
token-fields.mdToken fieldsmacOS, chips, tags, recipients
virtual-keyboards.mdVirtual keyboardsEmail, URL, number keyboard types
rating-indicators.mdRating indicatorsStar ratings, display-only
gauges.mdGaugesLevel indicators, range display

Output Format

  1. Control recommendation with rationale and why alternatives are less suitable.
  2. State management -- how the control communicates current state and whether changes apply immediately or on confirmation.
  3. Validation approach -- when to show errors and how to communicate rules.
  4. Accessibility -- labels, traits, hints for VoiceOver.

Questions to Ask

  1. What type of data? (Boolean, choice from fixed set, numeric, free-form text?)
  2. How many options?
  3. Which platforms? (Combo boxes and token fields are macOS-only)
  4. Settings screen or inline form?

Related Skills

  • hig-components-menus -- Buttons and pop-up buttons complementing selection controls
  • hig-components-dialogs -- Sheets and popovers containing forms
  • hig-components-search -- Search fields sharing text input patterns
  • hig-inputs -- Keyboard, pointer, gesture interactions with controls
  • hig-foundations -- Typography, color, layout for control styling

Built by Raintree Technology · More developer tools

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.