skills.rest
alunadev
alunadevCOMMUNITY
Explore all skills by this author →
Website𝕏@adrianlunadiazGitHub

applying-web-design-guidelines

Audit UI code against web interface guidelines for accessibility, performance, UX, and code quality.

3|Updated Jan 20, 2026
Search Tags:#ui#code review#performance#accessibility#web design#ux
One-click install
npx skills add https://github.com/alunadev/ald-skills --skill applying-web-design-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: applying-web-design-guidelines
Source: https://github.com/alunadev/ald-skills/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/alunadev/ald-skills --skill applying-web-design-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enforces high standards for web interfaces by auditing code against comprehensive guidelines, preventing common bugs and improving user experience.

Core Features & Use Cases

  • Code Auditing: Scans UI code for violations in accessibility, performance, UX, and code quality.
  • Guideline Enforcement: Provides specific rules and fixes derived from Vercel Engineering's Web Interface Guidelines.
  • Use Case: Before merging a new UI component, run this Skill to ensure it meets accessibility standards, has proper focus states, and avoids performance pitfalls.

Quick Start

Run the web-design-guidelines skill to audit the code in the file 'src/components/Button.tsx'.

Frequently Asked Questions about applying-web-design-guidelines

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

FAQPage Schema
How do I audit UI code for accessibility and performance issues?▼

To audit UI code for accessibility and performance, run this Skill to scan your frontend components against established web interface guidelines, detecting violations and preventing common bugs before they reach production.

What is the best way to enforce web design guidelines before a merge?▼

The best way to enforce web design guidelines before a merge is to run a pre-merge frontend check that audits UI code for accessibility compliance, proper focus states, and performance pitfalls to ensure high interface quality.

Can I check accessibility compliance for a specific UI component like a button?▼

Yes, you can check accessibility compliance for a specific UI component by running the Skill and targeting the component's file path, such as 'src/components/Button.tsx', to audit its code quality and UX standards.

Does this code review process apply to general frontend UX and code quality?▼

Yes, this code review process applies to general frontend UX and code quality by auditing design implementations against comprehensive guidelines covering accessibility, performance, and overall user experience.

What specific web interface guidelines are used to audit the code?▼

The code is audited against specific rules and fixes derived from Vercel Engineering's Web Interface Guidelines, ensuring your UI development meets high standards for accessibility, performance, UX, and code quality.

Related Skills

Explore More Software Engineering Skills→
VoTruongDanhVoTruongDanh

web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Community
Intermediate
petbrainspetbrains
13

frontend-design-review

Review frontend UI/UX designs for accessibility and responsive behavior.

Official
Basic
cdalsoniiicdalsoniii

UI Testing Strategy

Design layered UI testing plans for frontend applications with tool recommendations.

Community
Intermediate
NabilThangeNabilThange
1

lint-and-validate

Automate linting and static analysis for Node.js, Python, and TypeScript code.

Community
Intermediate