Skills
Practical instructions for better interface work.
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.