360 Secure SkillHub
360 安全技能中心

web-interface-guidelines

该 Skill 提供一份针对 Web 界面的检查清单，用于审查或编写 UI 组件：涵盖图片尺寸与懒加载、列表虚拟化、字体预加载、无障碍标签与键盘操作、焦点样式、动画与减少动效偏好、表单属性以及长文本与空状态处理，并列出需要标记的反模式。

wu-uk
wu-uk
热度 40.00
最近更新 2026-05-11 17:43:19
分类：开发依赖：纯提示词应用场景：代码审查 / 代码生成

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add fix-visual-stability-web-interface-guidelines
Metadata
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