Skills picker
The operator surface for choosing which skill the agent should reach for next. Searchable, grouped by domain, with a recently-used shelf.
Included in the single kansho full pack. Components are not offered as separate installs.
Default — single-select
Multi-select
Empty state — query with no match
Anchored to a compose box trigger
Component documentation
Skills Picker
components/agent/skills-picker.tsxPurpose
Provides a searchable grouped skill picker with recent items and optional multi-selection.
Appropriate use
Use in a compose or configuration flow where available skills are already loaded by the host.
Example
components/agent/skills-picker.tsx has a representative live example in the "Default — single-select" section on /components/skills-picker.
States
Supports single or multi mode, recent and grouped items, disabled skills, empty filtering, selected ids, shortcuts, and custom labels.
API and props
SkillsPicker accepts skills, selectedIds, multi, placeholder, emptyLabel, recentLabel, onSelect, and className.
Dependencies
Direct imports are React, Lucide icons, and cn.
Accessibility
Search is labelled, buttons expose pressed state in multi mode, disabled entries use native disabled state, and reduced motion removes menu entrance animation.
Limitations
It is an always-rendered picker surface, not a focus-trapped popover; the host owns selected state and closing behavior.
Source
Source: components/agent/skills-picker.tsx.
Full pack
components/agent/skills-picker.tsx is documented at /components/skills-picker and installs only through the single Kansho full pack; no individual component install is offered.