Skills
Instructions your agent can follow for layout, type, motion, forms and more.
31 skills
Results
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
Data Table Scannabilityby UI Skillbook
Structure table rows and columns so the eye can scan down and across without losing its place.
Layout
Empty States That Do Somethingby UI Skillbook
Treat empty states as an onboarding opportunity, not a placeholder to fill later.
Visual
Navigation Active Statesby UI Skillbook
Make it unambiguous where the user is, at every level of nested navigation.
Navigation
Optical Alignmentby UI Skillbook
Align interface elements by perceived visual weight, not just mathematical geometry.
Visual
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 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 Avatar Groupby UI Skillbook
A facepile: several avatars overlapped in a row with an optional count of the people not shown.
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 Bar Listby UI Skillbook
A ranked list of labels with a bar behind each, sized against the largest value.
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 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 Empty Stateby UI Skillbook
A centred block, with optional media and actions, telling people why there is nothing here yet and how to proceed.
Siteplane UI
Siteplane File Type Iconby UI Skillbook
A document-sheet icon that shows a file's type and extension, picked from its name.
Siteplane UI
Siteplane Frameby UI Skillbook
A muted surface that groups raised panels with an optional header, descriptions and footer.
Siteplane UI
Siteplane Glassby UI Skillbook
Frosted, see-through takes on Card, Button, Menu, Context Menu, Popover and Tooltip, meant to sit on top of photos.
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 Meterby UI Skillbook
A bar for a value inside fixed bounds, like storage used, that can carry a status tone.
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 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 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 Separatorby UI Skillbook
A horizontal or vertical line that divides related sections or controls.
Siteplane UI
Siteplane Skeletonby UI Skillbook
Decorative shapes that stand in for content while it loads, keeping the layout steady.
Siteplane UI
Siteplane Sparklineby UI Skillbook
A tiny axis-free chart that shows the shape of a trend next to the number it belongs to.
Siteplane UI
Siteplane Spinnerby UI Skillbook
A looping animation that shows work is under way when its duration is unknown.
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
Spacing That Doesn't Look AI-Generatedby UI Skillbook
Use a consistent spacing scale and grouping logic instead of arbitrary padding values.
Layout