Skills
Instructions your agent can follow for layout, type, motion, forms and more.
50 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
Color Contrast for Taste, Not Just Complianceby UI Skillbook
Use accessible contrast ratios as a floor, then build restrained hierarchy on top of them rather than treating them as the whole job.
Visual
Siteplane Accordionby UI Skillbook
A stack of related sections that expand and collapse, one at a time or several together.
Siteplane UI
Siteplane Alertby UI Skillbook
An inline message that stays in the layout, styled by tone, with actions and a dismiss button if needed.
Siteplane UI
Siteplane Alert Dialogby UI Skillbook
A modal confirmation that asks for a deliberate decision before a consequential action.
Siteplane UI
Siteplane Area Chartby UI Skillbook
Filled areas over time, overlaid or stacked, that show how big a measure is and how its parts add up.
Siteplane UI
Siteplane Avatarby UI Skillbook
A round image for a user or account, showing initials or an icon instead when no picture is available.
Siteplane UI
Siteplane Badgeby UI Skillbook
A compact label for a status, category, plan or count, with semantic colour variants and fixed sizes.
Siteplane UI
Siteplane Bar Chartby UI Skillbook
Columns or horizontal bars that compare values across categories, grouped or stacked, with keyboard tooltips.
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 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 Codeby UI Skillbook
Inline code and code blocks with optional highlighting, titles, line numbers, marked lines, masking and copy.
Siteplane UI
Siteplane Collapsibleby UI Skillbook
A single disclosure that shows or hides one block of content behind a trigger.
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 Data Listby UI Skillbook
Label and value rows that describe one record, laid out side by side or stacked.
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 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 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 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 Kbdby UI Skillbook
Styled notation for a keyboard key or a key combination inside text, buttons or menus.
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 Line Chartby UI Skillbook
Lines on a shared axis that show how one or more measures rise and fall over time or ordered steps.
Siteplane UI
Siteplane Markerby UI Skillbook
A low-key line between chat messages for things like status updates, system notes or date dividers.
Siteplane UI
Siteplane Menuby UI Skillbook
A compact list of actions or choices that opens from a button, with keyboard navigation.
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 Meterby UI Skillbook
A bar for a value inside fixed bounds, like storage used, that can carry a status tone.
Siteplane UI
Siteplane Native Tableby UI Skillbook
A plain HTML table in the same look as Table, for reports and cells whose controls keep their own tab stops.
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 Pie Chartby UI Skillbook
A donut or pie that shows how one total splits into a few shares, with an optional figure in the hole.
Siteplane UI
Siteplane Popoverby UI Skillbook
A non-modal surface anchored to a trigger for contextual content people can interact with.
Siteplane UI
Siteplane Progressby UI Skillbook
A bar or circle that reports how far a task has got, or that it is still under way.
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 Scroll Areaby UI Skillbook
A fixed-size region that scrolls with custom overlay scrollbars, plus optional fades at the edges and control over the gutter.
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 Skeletonby UI Skillbook
Decorative shapes that stand in for content while it loads, keeping the layout steady.
Siteplane UI
Siteplane Spinnerby UI Skillbook
A looping animation that shows work is under way when its duration is unknown.
Siteplane UI
Siteplane Tableby UI Skillbook
An interactive data grid with keyboard navigation, sortable columns, row selection and row actions.
Siteplane UI
Siteplane Tabsby UI Skillbook
Keyboard-navigable tabs that switch between related panels of content on the same page.
Siteplane UI
Siteplane Tag Groupby UI Skillbook
A keyboard-navigable set of tags that can be selected or removed, with animated adds and removals.
Siteplane UI
Siteplane Toastby UI Skillbook
Brief notifications that appear after an action and dismiss themselves, managed through one provider.
Siteplane UI
Siteplane Toolbarby UI Skillbook
A labelled row of related controls that takes one tab stop and moves between items with arrow keys.
Siteplane UI
Siteplane Tooltipby UI Skillbook
Brief text shown on hover or focus that names or explains a control, for example an icon button.
Siteplane UI
Siteplane Traceby UI Skillbook
One-line rows for an AI agent's reasoning, tool calls and sources that expand into their details.
Siteplane UI