← Back to Skills Marketplace
89
Downloads
0
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install fix-visual-stability-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 complian...
README (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 explicitwidthandheight(prevents CLS)- Below-fold images:
loading="lazy" - Above-fold critical images:
priorityorfetchpriority="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">withfont-display: swap
Accessibility
- Icon-only buttons need
aria-label - Form controls need
\x3Clabel>oraria-label - Interactive elements need keyboard handlers (
onKeyDown/onKeyUp) \x3Cbutton>for actions,\x3Ca>/\x3CLink>for navigation (not\x3Cdiv onClick>)- Images need
alt(oralt=""if decorative)
Focus States
- Interactive elements need visible focus:
focus-visible:ring-*or equivalent - Never
outline-none/outline: nonewithout focus replacement - Use
:focus-visibleover:focus(avoid focus ring on click)
Animation
- Honor
prefers-reduced-motion(provide reduced variant or disable) - Animate
transform/opacityonly (compositor-friendly) - Never
transition: all—list properties explicitly
Forms
- Inputs need
autocompleteand meaningfulname - Use correct
type(email,tel,url,number) andinputmode - Never block paste (
onPaste+preventDefault) - Labels clickable (
htmlForor wrapping control)
Content Handling
- Text containers handle long content:
truncate,line-clamp-*, orbreak-words - Flex children need
min-w-0to allow text truncation - Handle empty states—don't render broken UI for empty strings/arrays
Anti-patterns (flag these)
user-scalable=noormaximum-scale=1disabling zoomtransition: alloutline-nonewithout focus-visible replacement- Images without dimensions
- Large arrays
.map()without virtualization - Form inputs without labels
- Icon buttons without
aria-label
Usage Guidance
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.
Capability Analysis
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.
Capability Tags
Capability Assessment
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.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install fix-visual-stability-web-interface-guidelines - After installation, invoke the skill by name or use
/fix-visual-stability-web-interface-guidelines - Provide required inputs per the skill's parameter spec and get structured output
Version History
v0.1.0
Bulk publish from all-task-skills-dedup
Metadata
Frequently Asked Questions
What is 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... It is an AI Agent Skill for Claude Code / OpenClaw, with 89 downloads so far.
How do I install web-interface-guidelines?
Run "/install fix-visual-stability-web-interface-guidelines" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is web-interface-guidelines free?
Yes, web-interface-guidelines is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does web-interface-guidelines support?
web-interface-guidelines is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created web-interface-guidelines?
It is built and maintained by wu-uk (@wu-uk); the current version is v0.1.0.
More Skills