skills.rest
artivilla
artivillaCOMMUNITY
Explore all skills by this author →
Website𝕏@artivillaGitHub

web-interface-guidelines

Review UI code against Vercel's Web Interface Guidelines for accessibility and performance.

Updated Feb 2, 2026
Search Tags:#performance#accessibility#a11y#web-development#design-review#ui-guidelines
One-click install
npx skills add https://github.com/artivilla/agents-config --skill web-interface-guidelines-artivilla
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-interface-guidelines
Source: https://github.com/artivilla/agents-config/tree/main/skills/web-interface-guidelines
Command: npx skills add https://github.com/artivilla/agents-config --skill web-interface-guidelines-artivilla

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code against Vercel's Web Interface Guidelines to ensure accessibility, performance, and delightful user experiences.

Core Features & Use Cases

  • Audit interactions and keyboard accessibility across components, ensuring MUST/SHOULD/NEVER rules are followed.
  • Validate focus management, layout, and responsive behavior, including visible focus rings and safe hit targets.
  • Assess overall performance and accessibility consistency across the UI, including motion preferences and ARIA labeling.

Quick Start

Run the guideline checker on your project to identify accessibility, performance, and design guideline violations.

Frequently Asked Questions about web-interface-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my web UI code for accessibility and performance issues?▼

You can review web UI code for accessibility and performance by auditing it against Vercel's Web Interface Guidelines, which validate keyboard accessibility, focus management, ARIA labeling, and responsive design.

What do Vercel's Web Interface Guidelines cover for UI design review?▼

Vercel's Web Interface Guidelines for UI design review cover keyboard accessibility, visible focus rings, safe hit targets, ARIA labeling, motion preferences, responsive layouts, and performance best practices across modern web frameworks.

Can I use this design review tool with any modern web framework?▼

Yes, you can use this design review tool with modern web frameworks, as it assesses UI components, interactions, layouts, content, and patterns for accessibility consistency and performance best practices.

How do I validate keyboard accessibility and focus management in my UI?▼

To validate keyboard accessibility and focus management in your UI, audit your code against established MUST, SHOULD, and NEVER rules to ensure visible focus rings, safe hit targets, and proper ARIA labeling.

What is the best way to ensure responsive design and motion preference compliance?▼

The best way to ensure responsive design and motion preference compliance is to audit your UI code against Vercel's Web Interface Guidelines to verify layout behavior and accessibility consistency across components.

Related Skills

Explore More Design & Creative Skills→
remiconnessonremiconnesson

ui-design

Identify accessibility, layout, typography, color, form, and motion issues in HTML and CSS.

Community
Advanced
baekenoughbaekenough
34

web-design-guidelines

Audit UI code against accessibility, performance, and UX guidelines.

Community
Intermediate
7a336e6e7a336e6e
1

ensuring-accessibility

Ensure WCAG 2.2 AA compliance for UI components and web pages.

Community
Intermediate
airoweairowe
14

Accessibility Audit Skill

Audit web projects for WCAG 2.1 violations using axe-core and eslint-plugin-jsx-a11y.

Community
Advanced