Web Interface Guidelines

Review web UI source files for Vercel Web Interface Guidelines compliance.

1|Updated May 13, 2026
One-click install
npx skills add https://github.com/impact-initiatives/ana_app --skill web-interface-guidelines-impact-initiatives
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Web Interface Guidelines
Source: https://github.com/impact-initiatives/ana_app/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/impact-initiatives/ana_app --skill web-interface-guidelines-impact-initiatives

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you catch accessibility, focus, form, animation, typography, navigation, and performance issues in UI code before they reach users.

Core Features & Use Cases

  • Accessibility & semantics checks: Finds missing aria-labels, missing labels, non-semantic clickable elements, missing alt text, and missing aria-live for async feedback.
  • Focus & interaction quality: Verifies visible focus states, keyboard interaction handlers, and correct interactive element choices.
  • UI robustness & performance hygiene: Flags unsafe patterns like transition: all, hydration risks, image dimension/CLS issues, and common content/copy pitfalls.

Quick Start

Have the AI review the specified UI files and return concise, grouped findings with exact file:line locations for each issue.

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 SvelteKit UI code for accessibility issues?

To check SvelteKit UI code for accessibility issues, this Skill reviews your source files against Vercel Web Interface Guidelines, detecting missing aria-labels, non-semantic HTML, and missing alt text while returning concise file:line locations for each issue.

What are common web focus state and keyboard interaction pitfalls in front-end code?

Common web focus state and keyboard interaction pitfalls include missing visible focus states and lacking keyboard interaction handlers on interactive elements, which this Skill identifies by verifying correct semantic HTML usage and interaction patterns in your TypeScript codebase.

Does this UI code review tool work with React and TypeScript?

Yes, this UI code review tool works with React and TypeScript, applying Vercel Web Interface Guidelines compliance checks across React, Svelte, SvelteKit, and TypeScript-style front-end codebases to catch accessibility, form, and animation issues.

How do I find transition: all and other performance hygiene issues in my web components?

To find transition: all and other performance hygiene issues in web components, the Skill flags unsafe rendering practices like transition: all, hydration risks, and image dimension/CLS issues, verifying performance-safe rendering practices.

Can I automatically verify aria-live regions for async feedback in my web app?

Yes, you can automatically verify aria-live regions for async feedback in your web app, as the Skill specifically checks for missing aria-live attributes and reports them grouped with exact file:line locations alongside other accessibility compliance failures.