Web Interface GuidelinesSkill

by Vercel

Added to Onei Aug 6, 2026

6 views

v1.0.0

MIT

Repository Docs

markdown Development Design & Creative

Summary

Audit UI code against Vercel's Web Interface Guidelines — accessibility, interaction, performance and layout rules — reported as terse file:line findings.

Features

Audits UI code against the published Web Interface Guidelines
Fetches the current ruleset on every run, so reviews never go stale
Terse file:line findings that feed straight back as a fix list
Accepts a file path or glob pattern to scope the review
Covers accessibility, interaction, motion, layout and performance

Install This Skill

Add this skill to your favorite AI agent in a few steps.

Any AI agent

This skill is plain instructions — it works with any assistant that accepts custom instructions or system prompts.

Copy the skill content with the button below.
Paste it into your agent's instruction file or system prompt (for example AGENTS.md, .cursorrules, or a custom instructions field).
Ask the agent to apply the skill whenever the task matches.

Claude Code & Claude apps

Claude loads skills automatically from its skills directory.

Claude Code

Create a skill folder — personal: ~/.claude/skills/web-interface-guidelines/, or per-project: .claude/skills/web-interface-guidelines/
Save the skill content as SKILL.md inside that folder.
Claude Code picks it up automatically and invokes it when relevant.

mkdir -p ~/.claude/skills/web-interface-guidelines

Claude.ai / Claude Desktop

Enable Skills under Settings → Capabilities, then upload the skill (a folder or zip containing SKILL.md).

One-prompt install

Paste this prompt into any agent with web access and it will install the skill for you.

Install the "Web Interface Guidelines" skill from Onei AI. Fetch https://onei.ai/skills/web-interface-guidelines, extract the full skill content from the page, and save it where you load skills from (for Claude Code: .claude/skills/web-interface-guidelines/SKILL.md). From now on, apply this skill whenever it is relevant to my request.

Skill Content

Markdown Content

Copy this content and use it with your preferred AI agent

---
name: web-design-guidelines
description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
metadata:
  author: vercel
  version: "1.0.0"
  argument-hint: <file-or-pattern>
---

# Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

## How It Works

1. Fetch the latest guidelines from the source URL below
2. Read the specified files (or prompt user for files/pattern)
3. Check against all rules in the fetched guidelines
4. Output findings in the terse `file:line` format

## Guidelines Source

Fetch fresh guidelines before each review:

```
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
```

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

## Usage

When a user provides a file or pattern argument:
1. Fetch guidelines from the source URL above
2. Read the specified files
3. Apply all rules from the fetched guidelines
4. Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

Usage Instructions

Learn how to use this skill with different AI agents.

Claude Desktop

claude plugin marketplace add vercel-labs/agent-skills

Restart Claude Code and run e.g. Review app/**/*.tsx against the web design guidelines.

Generic Instructions

npx skills add vercel-labs/agent-skills

Then ask your agent to "review my UI" or "check accessibility", optionally passing a file or glob. The skill fetches the current guidelines before each review, so it needs network access.

Example Usage

Review components/*/.tsx against the Web Interface Guidelines.

Description

"Review my UI" is a request most agents answer with vibes. This skill turns it into a checklist run against a published, versioned rulebook: Vercel's Web Interface Guidelines, covering accessibility, keyboard and pointer interaction, form behaviour, motion, layout and front-end performance.

The design choice worth noting is that the skill does not embed the rules. It fetches them fresh from the vercel-labs/web-interface-guidelines repository at the start of every review, so an audit run today uses today's guidelines rather than whatever was current when the skill was installed. That keeps a fast-moving standard from silently going stale inside your project.

Output is deliberately terse — findings in file:line form, no essay around each one — which makes the result easy to work through and easy to feed straight back into the agent as a fix list. You pass a file or a glob; if you do not, the skill asks which files to review rather than guessing at the whole repository.

Typical triggers are "review my UI", "check accessibility", "audit design" and "check my site against best practices". It is the review counterpart to Vercel's React Best Practices skill: that one shapes how the code is written, this one checks what the interface actually does. MIT-licensed, maintained by Vercel.

Related Skills

Skill: Playwright CLI

by Microsoft

New

Microsoft's official Playwright skill — drives a real browser from the command line using accessibility snapshots and element refs, and plans, generates and heals Playwright tests.

Development

Skill: Google Maps Platform

by Google Maps Platform

New

Google's official agent skill for writing production Maps Platform code — grounded in freshly fetched docs, with a demo key path that needs no billing account.

Development

Skill: Use Railway

by Railway

New

Railway's official agent skill: create projects, provision databases and buckets, deploy, manage variables and domains, and read build failures back — from the CLI, API or MCP server.

Development

Skill: NVIDIA Warp Gradient Debugging

by NVIDIA

New

Diagnoses wrong gradients in differentiable NVIDIA Warp programs by measuring first — comparing autodiff against finite differences on a shrunk reproduction before proposing any fix.

Development

Browse all skills →