skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Reviews UI code against Vercel Web Interface Guidelines and reports findings by file and line.

1|Updated Aug 18, 2026
Search Tags:#accessibility#react#ui review#vercel#code audit#ux#web design guidelines
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill web-design-guidelines-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/web-design-guidelines
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill web-design-guidelines-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? UI code often ships with accessibility gaps, performance anti-patterns, and inconsistent interaction details that are hard to catch manually. This Skill audits your frontend files against 100+ Vercel Web Interface Guidelines rules and reports every violation with a precise file:line location. ## Core Features & Use Cases - Guideline Compliance Review: Checks UI code against bundled rules covering accessibility, focus states, forms, animation, typography, images, performance, navigation, dark mode, i18n, and hydration safety. - Anti-Pattern Detection: Flags common mistakes such as transition: all, outline-none without focus replacement, icon buttons missing aria-label, and images without dimensions. - Actionable Output Format: Returns terse, VS Code-clickable file:line findings grouped by file so issues can be fixed immediately. - Use Case: Before merging a pull request, ask the agent to review src/components/*.tsx; it reads the bundled rules and outputs findings like src/Button.tsx:42 - icon button missing aria-label. ## Quick Start Review my UI files in src/components for compliance with the Web Interface Guidelines and list all violations.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I review my UI code against web design best practices?▼

Provide the files or glob pattern you want reviewed, and the Skill reads the bundled Web Interface Guidelines rules, checks your code against all of them, and outputs findings in a terse file:line format grouped by file.

What accessibility issues does a UI guidelines audit catch?▼

It catches missing aria-labels on icon buttons, form controls without labels, non-semantic click handlers on divs, missing alt text, absent focus-visible styles, and async updates without aria-live regions, among other WCAG-related rules.

Does this work with React and Next.js projects?▼

Yes. The rules cover React-specific concerns such as hydration mismatches, controlled versus uncontrolled inputs, and Next.js Link usage, alongside framework-agnostic HTML, CSS, and accessibility guidance.

Can the guidelines rules be updated to the latest version?▼

Yes. The rules are a local snapshot vendored at install time in references/command.md. Re-download that file from the vercel-labs/web-interface-guidelines repository to refresh it, since the agent cannot fetch arbitrary URLs at review time.

What are the limitations of automated UI guideline review?▼

It performs static rule matching on source code, so it cannot judge visual design quality, runtime behavior, or actual screen reader output. Combine it with browser-based accessibility testing and manual design review for full coverage.

Related Skills

Explore More Software Engineering Skills→
Ramadan-ElgamalRamadan-Elgamal

web-design-guidelines

Reviews UI code files against Vercel Web Interface Guidelines and reports findings by line.

Community
Basic
prthikprthik
1

code-review

Review code changes for quality, security, and maintainability issues.

Community
Advanced
iulspopiulspop

frontend-accessibility-best-practices

Review React components for accessibility best practices and WCAG standards.

Community
Intermediate
Arete-ConsortiumArete-Consortium
4

accessibility-checker

Audits web UI code for WCAG 2.2 conformance and provides standards-referenced remediation guidance.

Official
Intermediate