UI Skillbook for Claude Code
Give Claude Code access to UI Skillbook's design knowledge. Open any skill below and use “Copy for agent” to paste it directly into your session.
Coming soon
A CLI and MCP server for one-command installs are on the roadmap. For now, skills are copy-paste — every skill page has a “Copy for agent” button formatted for direct use.
accessible-focus-states
Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.
color-contrast-for-taste
Use accessible contrast ratios as a floor, then build restrained hierarchy on top of them rather than treating them as the whole job.
dashboard-information-density
Fit more real information on screen without it reading as cluttered, by controlling hierarchy instead of shrinking everything uniformly.
data-table-scannability
Structure table rows and columns so the eye can scan down and across without losing its place.
empty-state-design
Treat empty states as an onboarding opportunity, not a placeholder to fill later.
form-field-validation-timing
Validate at the right moment — not on every keystroke, not only on submit.
motion-easing-basics
Use short, purposeful easing curves that clarify state changes instead of decorating them.
navigation-active-states
Make it unambiguous where the user is, at every level of nested navigation.
optical-alignment
Align interface elements by perceived visual weight, not just mathematical geometry.
pressed-button-feedback
Give every interactive control an immediate, physical-feeling response to a press.
responsive-breakpoint-strategy
Choose breakpoints based on where your content actually breaks, not a fixed device-width list.
spacing-rhythm
Use a consistent spacing scale and grouping logic instead of arbitrary padding values.