← 返回 Skills 市场

web-interface-guidelines

Name: web-interface-guidelines
Author: wu-uk

作者 wu-uk · GitHub ↗ · v0.1.0 · MIT-0

cross-platform ✓ 安全检测通过

总下载

当前安装

版本数

在 OpenClaw 中安装

/install fix-visual-stability-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...

使用说明 (SKILL.md)

Web Interface Guidelines

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

Quick Reference - Visual Stability

Issue	Rule
Images without dimensions	`\x3Cimg>` needs explicit `width` and `height` (prevents CLS)
Font loading flash	Critical fonts: `\x3Clink 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

\x3Cimg> 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 \x3Clink rel="preconnect"> for CDN/asset domains
Critical fonts: \x3Clink rel="preload" as="font"> with font-display: swap

Accessibility

Icon-only buttons need aria-label
Form controls need \x3Clabel> or aria-label
Interactive elements need keyboard handlers (onKeyDown/onKeyUp)
\x3Cbutton> for actions, \x3Ca>/\x3CLink> for navigation (not \x3Cdiv 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

安全使用建议

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.

功能分析

Type: OpenClaw Skill Name: fix-visual-stability-web-interface-guidelines Version: 0.1.0 The skill bundle consists of metadata and a markdown file (SKILL.md) containing standard UI development guidelines for accessibility, performance, and visual stability. It contains no executable code, no network requests, and no instructions that attempt to manipulate the agent into performing unauthorized or harmful actions.

能力标签

crypto

能力评估

✓ 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.

如何使用

确保已安装 OpenClaw（本地或 Docker 部署）
在对话框中输入安装命令：/install fix-visual-stability-web-interface-guidelines
安装完成后，直接呼叫该 Skill 的名称或使用 /fix-visual-stability-web-interface-guidelines 触发
根据 Skill 的参数说明提供必要输入，即可获得结构化输出

版本历史

v0.1.0

Bulk publish from all-task-skills-dedup

元数据

Slug fix-visual-stability-web-interface-guidelines

版本 0.1.0

许可证 MIT-0

累计安装 0

当前安装数 0

历史版本数 1

常见问题