web-interface-guidelines

Vercel's comprehensive UI guidelines for building accessible, performant web interfaces. Use this skill when reviewing or building UI components for complian...

Security Scan

This is a static, instruction-only guidance skill whose requirements and instructions match its stated purpose; it provides UI/accessibility/performance rules and does not request credentials or perform actions.

Purpose & Capability

Name/description promise UI guidelines and the SKILL.md contains only web UI best-practice rules (accessibility, performance, animations, visual stability). There are no unrelated requirements (no credentials, binaries, or config paths).

Instruction Scope

SKILL.md is purely prescriptive guidance (lists rules and anti-patterns). It does not instruct the agent to read files, run commands, call external endpoints, or access environment/configuration outside the skill's domain.

Install Mechanism

No install spec and no code files — instruction-only skills are lowest-risk because nothing is written to disk or executed.

Credentials

The skill declares no environment variables, secrets, or config paths; the guidance content does not reference any hidden credentials.

Persistence & Privilege

Skill is not always-enabled and is user-invocable; autonomous invocation is allowed (platform default) but is not combined with any broad privileges or sensitive access here.

Assessment

This skill is essentially a static checklist for building stable, accessible web UI and appears internally consistent and low risk. However, the package metadata has no homepage or clear source attribution — if you need authoritative/legal compliance, verify these rules against Vercel's official documentation or your organization's standards before relying on them. Because it's instruction-only, installing it won't add binaries or request credentials, but always review guidance for applicability to your codebase and testing tools.

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