UI Skillbook for OpenCode
Give OpenCode access to UI Skillbook's design knowledge. Open any skill below and use “Copy for agent” to paste it directly into your session.
CLI
Browse and fetch skills from a terminal or an agent's shell tool.
npx uiskillbook start
npx uiskillbook list --category motion
npx uiskillbook get pressed-button-feedbackMCP
Connect OpenCode to the catalog over Model Context Protocol — list_skills and get_skill tools. Setup varies by agent; point it at the endpoint below.
https://uiskillbook.com/mcpOr skip both — every skill page has a “Copy for agent” button you can paste directly into a session.
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.
uiskillbook-start
Routing skill for agents. Explains how to search, filter, and fetch skills from UI Skillbook instead of loading the whole catalog.