Submit Log in

Web Interface Guidelines

by Vercel

v1.0.0

MIT

Repository Docs

markdown Development Design & Creative

accessibilityui-reviewdesign-reviewvercelfrontend

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: Redis Search

by Redis, Inc.

New

Redis' own guidance for FT.CREATE schema design, FT.SEARCH / FT.AGGREGATE / FT.HYBRID, HNSW vector similarity and RAG retrieval pipelines.

Development

Skill: Supabase

by Supabase

New

Supabase's official skill covering Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron and Queues — with a hard rule to verify against the live changelog before writing code.

Development

Skill: GSAP ScrollTrigger

by GreenSock

New

GreenSock's official ScrollTrigger skill — scroll-linked animation, pinning, scrub and trigger positioning, with the exact start/end syntax agents get wrong.

DevelopmentDesign & Creative

Skill: Cloud Solution Architect

by Microsoft

New

Microsoft's official skill that turns an agent into an Azure solution architect — 10 design principles, 6 architecture styles, 44 design patterns and a Well-Architected review workflow.

Development

Browse all skills →