skills.rest
DuveSalo
DuveSaloCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and design compliance.

Updated Aug 23, 2026
Search Tags:#code quality#accessibility#ui review#design audit#web guidelines
One-click install
npx skills add https://github.com/DuveSalo/app --skill web-design-guidelines-duvesalo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/DuveSalo/app/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/DuveSalo/app --skill web-design-guidelines-duvesalo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that web interfaces adhere to established design and accessibility best practices, improving user experience and consistency.

Core Features & Use Cases

  • UI Code Review: Analyzes provided code files against a set of predefined web interface guidelines.
  • Accessibility Checks: Identifies potential accessibility issues based on the guidelines.
  • Design Auditing: Verifies adherence to UX and design best practices.
  • Use Case: Use this skill to automatically check a new component's code against Vercel's Web Interface Guidelines before merging it into the main branch.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.jsx' for compliance.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I audit my UI code for web interface guideline compliance?▼

To audit UI code for web interface guideline compliance, provide specific component files or patterns for review. The skill analyzes the code against established design and accessibility best practices to identify potential issues.

What is a design audit for accessibility in web components?▼

A design audit for accessibility checks UI codebases against established standards to identify potential issues. It helps ensure web interfaces adhere to best practices, improving user experience and consistency.

How do I check a React component file for accessibility issues before merging?▼

To check a React component file for accessibility issues before merging, specify the file path like 'src/components/Button.jsx' for review. The skill will fetch external guidelines and apply them to verify adherence to UX standards.

Does this UI review require specific accessibility guidelines or dependencies?▼

This UI review does not require specific dependencies. It fetches external web interface guidelines automatically and applies them to specified files or patterns to verify code quality and design compliance.

When do I need to run a web interface design audit?▼

You need to run a web interface design audit when checking a new component's code against established guidelines before merging it into the main branch. This verifies adherence to UX and design best practices.

Related Skills

Explore More Software Engineering Skills→
ControlNetControlNet
9

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and design issues.

Community
Intermediate
luisgustavooliveiraluisgustavooliveira

web-design-guidelines

Automate UI code compliance review against the Web Interface Guidelines.

Community
Advanced
Kushal9889Kushal9889

husky

Sets up Husky git hooks to automate code quality checks and testing before commits.

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