Skills
Instructions your agent can follow for layout, type, motion, forms and more.
72 skills
Results
Accessible Focus Statesby UI Skillbook
Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.
Accessibility
Form Field Validation Timingby UI Skillbook
Validate at the right moment — not on every keystroke, not only on submit.
Forms
Navigation Active Statesby UI Skillbook
Make it unambiguous where the user is, at every level of nested navigation.
Navigation
Pressed Button Feedbackby UI Skillbook
Give every interactive control an immediate, physical-feeling response to a press.
Interaction
Siteplane Accordionby UI Skillbook
A stack of related sections that expand and collapse, one at a time or several together.
Siteplane UI
Siteplane Alert Dialogby UI Skillbook
A modal confirmation that asks for a deliberate decision before a consequential action.
Siteplane UI
Siteplane Animated Buttonsby UI Skillbook
Buttons that animate on hover with sweeping or pass-through fills, a moving arrow, actions that expand, and entrance effects.
Siteplane UI
Siteplane Attachmentby UI Skillbook
A card for a file or image attached to a message or draft, with upload states and actions.
Siteplane UI
Siteplane Autocompleteby UI Skillbook
A text input that suggests completions while still accepting whatever the person types.
Siteplane UI
Siteplane Breadcrumbby UI Skillbook
A row of links tracing the path from the site root to the current page, so people can climb back up.
Siteplane UI
Siteplane Buttonby UI Skillbook
Action control for text, icons or both. Variants set emphasis, and it handles sizes, a loading state and rendering as a link.
Siteplane UI
Siteplane Calendarby UI Skillbook
An inline month grid for picking a single date, several dates or a range, with unavailable-day rules.
Siteplane UI
Siteplane Checkboxby UI Skillbook
A box for one independent yes/no choice, with indeterminate state and form submission built in.
Siteplane UI
Siteplane Checkbox Groupby UI Skillbook
Holds a set of related checkboxes as one array value, with an optional parent box that selects all.
Siteplane UI
Siteplane Collapsibleby UI Skillbook
A single disclosure that shows or hides one block of content behind a trigger.
Siteplane UI
Siteplane Color Pickerby UI Skillbook
A trigger that opens a hex color editor with a saturation area, hue slider and RGB fields.
Siteplane UI
Siteplane Color Swatch Pickerby UI Skillbook
A row of color or image swatches for choosing one option from a palette your app defines.
Siteplane UI
Siteplane Comboboxby UI Skillbook
A searchable picker that filters known options as you type, single or multi-select with chips.
Siteplane UI
Siteplane Commandby UI Skillbook
A searchable, keyboard-driven list of actions, shown inline in a panel or as a command palette in a dialog.
Siteplane UI
Siteplane Context Menuby UI Skillbook
Secondary actions for an element that appear on right-click or a long press.
Siteplane UI
Siteplane Copy Buttonby UI Skillbook
Copies a value to the clipboard and confirms success or failure on screen and to screen readers.
Siteplane UI
Siteplane Dashboard Shellby UI Skillbook
A responsive app frame that combines the sidebar, a sticky top bar and a scrolling content area.
Siteplane UI
Siteplane Date Fieldby UI Skillbook
A typed date input built from day, month and year segments, with an optional calendar popover.
Siteplane UI
Siteplane Date Pickerby UI Skillbook
A button that opens a calendar to choose one date, showing the chosen date as formatted text.
Siteplane UI
Siteplane Date Range Pickerby UI Skillbook
A typed start-and-end date field with a calendar popover, submitting two ISO day strings.
Siteplane UI
Siteplane Date Time Pickerby UI Skillbook
One control for a local date and time, with typed segments, a calendar and a time selector.
Siteplane UI
Siteplane Detail Drawerby UI Skillbook
A right-side drawer for viewing one record's details beside its list, optionally with an edit form.
Siteplane UI
Siteplane Dialogby UI Skillbook
A modal overlay for a focused task or short form, with a title and a clear way to close.
Siteplane UI
Siteplane Drawerby UI Skillbook
A modal sheet that enters from any side of the screen and closes with a swipe.
Siteplane UI
Siteplane Dropdown Menuby UI Skillbook
Menu exported under DropdownMenu-prefixed part names for a list of actions opened from a button.
Siteplane UI
Siteplane Editableby UI Skillbook
Text that turns into its own field when clicked, for renaming a project, page or list item in place.
Siteplane UI
Siteplane Fieldby UI Skillbook
Ties a control to its label, help text and validation messages, with top or floating labels.
Siteplane UI
Siteplane Fieldsetby UI Skillbook
Groups related form fields under a shared legend and optional description, and can disable them together.
Siteplane UI
Siteplane Filter Barby UI Skillbook
A layout strip above a list or table for view tabs, search, filter menus, actions and applied-filter tags.
Siteplane UI
Siteplane Formby UI Skillbook
The submit boundary for Fields: form-wide validation timing, server error mapping and reset handling.
Siteplane UI
Siteplane Groupby UI Skillbook
Joins related buttons, or an input and its button, into one segmented frame. The controls share no state.
Siteplane UI
Siteplane Icon Morphsby UI Skillbook
A menu button whose bars morph into an X while its navigation panel is open.
Siteplane UI
Siteplane Inputby UI Skillbook
A single-line text control with surface variants and sizes; it also ships Field for labels, help and errors.
Siteplane UI
Siteplane Input Groupby UI Skillbook
One input surface with text, icons, buttons or a header and footer attached around an input or textarea.
Siteplane UI
Siteplane Labelby UI Skillbook
A plain visible label for a native control, plus a card variant for checkbox, radio and switch options.
Siteplane UI
Siteplane List Boxby UI Skillbook
An always-visible list where one row is selected, with rich multiline rows and typeahead.
Siteplane UI
Siteplane Menuby UI Skillbook
A compact list of actions or choices that opens from a button, with keyboard navigation.
Siteplane UI
Siteplane Messageby UI Skillbook
The layout of one chat turn: content, footer actions and, between people, an avatar and header.
Siteplane UI
Siteplane Message Scrollerby UI Skillbook
The scroll region of a chat thread: opens at the latest message, follows streaming replies and offers a jump back.
Siteplane UI
Siteplane Navigation Menuby UI Skillbook
A row of site links where some entries open dropdown panels of further destinations.
Siteplane UI
Siteplane Number Fieldby UI Skillbook
A numeric input with step buttons, bounds, locale formatting and optional drag-to-scrub.
Siteplane UI
Siteplane OTP Fieldby UI Skillbook
One-time-code entry with a slot per character, separate or joined. It handles paste and auto-advance.
Siteplane UI
Siteplane Paginationby UI Skillbook
Previous, Next and numbered page links for stepping through a long list or table.
Siteplane UI
Siteplane Popoverby UI Skillbook
A non-modal surface anchored to a trigger for contextual content people can interact with.
Siteplane UI
Siteplane Preview Cardby UI Skillbook
Hovering or focusing a link opens this card with a preview of where it goes, so people stay on the page.
Siteplane UI
Siteplane Prompt Inputby UI Skillbook
Chat input that submits on Enter, expands as the draft gets longer, and swaps Send for Stop during a response.
Siteplane UI
Siteplane Radio Groupby UI Skillbook
A set of visible options where exactly one is chosen, with arrow-key movement and form submission.
Siteplane UI
Siteplane Resource Listby UI Skillbook
A list of entities with a status indicator, title, description and meta slot. Rows can be links.
Siteplane UI
Siteplane Selectby UI Skillbook
A trigger that opens a fixed list of options for one or several choices, without typing to filter.
Siteplane UI
Siteplane Settings Listby UI Skillbook
A titled card of settings rows, each pairing a label and help text with a control you supply.
Siteplane UI
Siteplane Sheetby UI Skillbook
A dialog-backed panel that opens from a screen edge for forms and save-or-cancel tasks.
Siteplane UI
Siteplane Sidebarby UI Skillbook
Application navigation in a side column that collapses to an icon rail on desktop and becomes a sheet on mobile.
Siteplane UI
Siteplane Sliderby UI Skillbook
Pick a number or a range by dragging thumbs along a track, with optional scale labels.
Siteplane UI
Siteplane Stepperby UI Skillbook
An ordered list of steps showing which are done, current, open or blocked, with optional clickable steps.
Siteplane UI
Siteplane Switchby UI Skillbook
An on/off control for a setting, with an optional label and description row and form submission.
Siteplane UI