web-interface-guidelines
$
npx mdskill add elizaOS/eliza/web-interface-guidelinesReview UI code for compliance with Vercel's web interface standards.
SKILL.md
.github/skills/web-interface-guidelinesView on GitHub ↗
--- name: web-interface-guidelines description: 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. --- # 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`
More from elizaOS/eliza
- ac-branch-pi-modelAC branch pi-model power flow equations (P/Q and |S|) with transformer tap ratio and phase shift, matching `acopf-math-model.md` and MATPOWER branch fields. Use when computing branch flows in either direction, aggregating bus injections for nodal balance, checking MVA (rateA) limits, computing branch loading %, or debugging sign/units issues in AC power flow.
- academic-pdf-redactionRedact text from PDF documents for blind review anonymization
- ada-plan-view-accessibilityUse when checking simplified ADA-derived plan-view bathroom accessibility constraints such as turning space, door clear width, toilet centerline, grab bars, and lavatory knee/toe clearance.
- analyze-ciAnalyze failed GitHub Action jobs for a pull request.
- architectural-dxf-extractionUse when extracting plan-view architectural geometry from DXF files with semantic CAD layers, especially when outputs must normalize rooms, doors, fixtures, clearances, and grab bars into machine-checkable JSON.
- attitude-controller-plannerUse this skill when implementing the inner control loop for a quadrotor — attitude (roll/pitch/yaw) PID control and attitude planning (converting desired acceleration to desired Euler angles). Covers gain layout, integral reset pattern, and the attitude planner inverse kinematics.
- azure-bgpAnalyze and resolve BGP oscillation and BGP route leaks in Azure Virtual WAN–style hub-and-spoke topologies (and similar cloud-managed BGP environments). Detect preference cycles, identify valley-free violations, and propose allowed policy-level mitigations while rejecting prohibited fixes.
- box-least-squaresBox Least Squares (BLS) periodogram for detecting transiting exoplanets and eclipsing binaries. Use when searching for periodic box-shaped dips in light curves. Alternative to Transit Least Squares, available in astropy.timeseries. Based on Kovács et al. (2002).
- browser-testingVERIFY your changes work. Measure CLS, detect theme flicker, test visual stability, check performance. Use BEFORE and AFTER making changes to confirm fixes. Includes ready-to-run scripts: measure-cls.ts, detect-flicker.ts
- cache-policy-comparisonCompare and implement eviction policies (LRU, LFU, FIFO, S3FIFO, ARC) for bounded-capacity caches. Use when choosing or implementing an eviction policy for a buffer pool, page cache, CDN edge, or LLM KV cache, or when writing a replay simulator that supports multiple policies. Clarifies recency vs frequency semantics, queue topology, saturating counters, ghost buffers, and the second-chance rule that distinguishes modern FIFO-family policies from classic LRU.