Field guide 001
The field guide for building better interfaces with AI.
Curated UI skills, rules, and patterns for humans and coding agents. Search what you need, not what's trending.
What are you building?
Recommended
Browse all skills →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.
Latest additions
write-swiftExternal
How to write modern Swift well — modeling with value types, Swift 6 data-race safety and approachable concurrency (@concurrent, main-actor-by-default, actors, task groups), protocols and generics (some vs any), API design, performance and ARC, Swift Testing, macros, and the modern language features agents don't know about yet. Use when writing, reviewing, or migrating Swift, or when a concurrency error, a hang, a data race, a retain cycle, or a performance problem needs fixing.
webgl-landing-steeringExternal
Use when steering a landing page around a WebGL centerpiece or hero experience.
webgl-componentsExternal
Build small, always-on WebGL visuals (identity avatars, ambient orbs, glass and iridescent surfaces, animated textures) that ship inside a normal web app UI without wrecking performance, accessibility, SSR, or layout. Use whenever a shader-, GLSL-, or canvas-driven decorative element is added to a product UI, especially one rendered many times per page or per list; when reviewing or optimizing one; or when debugging one that renders blurry, aliased, all-black, or paints over the surrounding UI on machines without hardware acceleration.
web-quality-auditExternal
Web quality auditing skill for Lighthouse-style analysis across performance, accessibility, best practices, and SEO signals.
antfu-web-design-guidelinesExternal
Review UI code for web interface guideline compliance, including accessibility and UX best practices.
vercel-labs-web-design-guidelinesExternal
Review UI code for Web Interface Guidelines compliance. Audit design, accessibility, and UX against Vercel's best practices.