Skills
Instructions your agent can follow for layout, type, motion, forms and more.
24 skills
Results
Dashboard Information Densityby UI Skillbook
Fit more real information on screen without it reading as cluttered, by controlling hierarchy instead of shrinking everything uniformly.
Layout
Data Table Scannabilityby UI Skillbook
Structure table rows and columns so the eye can scan down and across without losing its place.
Layout
Responsive Breakpoint Strategyby UI Skillbook
Choose breakpoints based on where your content actually breaks, not a fixed device-width list.
Responsive
Siteplane Avatar Groupby UI Skillbook
A facepile: several avatars overlapped in a row with an optional count of the people not shown.
Siteplane UI
Siteplane Bubbleby UI Skillbook
The surface for a chat message's text, with variants for sender, assistant replies and errors.
Siteplane UI
Siteplane Cardby UI Skillbook
A surface that groups related content and actions, with header, panel, footer and framed-section parts.
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 Data Listby UI Skillbook
Label and value rows that describe one record, laid out side by side or stacked.
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 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 Frameby UI Skillbook
A muted surface that groups raised panels with an optional header, descriptions and footer.
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 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 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 Resource Listby UI Skillbook
A list of entities with a status indicator, title, description and meta slot. Rows can be links.
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 Separatorby UI Skillbook
A horizontal or vertical line that divides related sections or controls.
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 Timelineby UI Skillbook
A vertical list of events in time order with coloured or icon markers and an optional now line.
Siteplane UI
Siteplane Truncateby UI Skillbook
Cuts text after one line or a set number of lines with an ellipsis and shows the full text in a tooltip.
Siteplane UI
Spacing That Doesn't Look AI-Generatedby UI Skillbook
Use a consistent spacing scale and grouping logic instead of arbitrary padding values.
Layout