web-interface-guidelines

•

9392423 months ago

Vercel's comprehensive UI guidelines for building accessible, performant web interfaces. Use this skill when reviewing or building UI components for compliance with best practices around accessibility, performance, animations, and visual stability.

Quick Install

npxskills add benchflow-ai/skillsbench--skill web-interface-guidelines

Instructions

Web Interface Guidelines

Review UI code for compliance with Vercel's web interface standards.

Quick Reference - Visual Stability

Issue	Rule
Images without dimensions	`<img>` needs explicit `width` and `height` (prevents CLS)
Font loading flash	Critical fonts: `<link rel="preload" as="font">` with `font-display: swap`
Large lists	Virtualize lists >50 items (`content-visibility: auto`)
Layout reads in render	No `getBoundingClientRect`, `offsetHeight` in render path

Full Rules

Images

<img> needs explicit width and height (prevents CLS)
Below-fold images: loading="lazy"
Above-fold critical images: priority or fetchpriority="high"

Performance

Large lists (>50 items): virtualize (virtua, content-visibility: auto)
No layout reads in render (getBoundingClientRect, offsetHeight, offsetWidth, scrollTop)
Batch DOM reads/writes; avoid interleaving
Add <link rel="preconnect"> for CDN/asset domains
Critical fonts: <link rel="preload" as="font"> with font-display: swap

Accessibility

Icon-only buttons need aria-label
Form controls need <label> or aria-label
Interactive elements need keyboard handlers (onKeyDown/onKeyUp)
<button> for actions, <a>/<Link> for navigation (not <div onClick>)
Images need alt (or alt="" if decorative)

Focus States

Interactive elements need visible focus: focus-visible:ring-* or equivalent
Never outline-none / outline: none without focus replacement
Use :focus-visible over :focus (avoid focus ring on click)

Animation

Honor prefers-reduced-motion (provide reduced variant or disable)
Animate transform/opacity only (compositor-friendly)
Never transition: all—list properties explicitly

Forms

Inputs need autocomplete and meaningful name
Use correct type (email, tel, url, number) and inputmode
Never block paste (onPaste + preventDefault)
Labels clickable (htmlFor or wrapping control)

Content Handling

Text containers handle long content: truncate, line-clamp-*, or break-words
Flex children need min-w-0 to allow text truncation
Handle empty states—don't render broken UI for empty strings/arrays

Anti-patterns (flag these)

user-scalable=no or maximum-scale=1 disabling zoom
transition: all
outline-none without focus-visible replacement
Images without dimensions
Large arrays .map() without virtualization
Form inputs without labels
Icon buttons without aria-label

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885