skills.rest
Patrickjoshanedez
PatrickjoshanedezOFFICIAL
Explore all skills by this author →
GitHub

web-design-guidelines

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

1|Updated Feb 28, 2026
Search Tags:#ui#code review#accessibility#web design#guidelines#ux
One-click install
npx skills add https://github.com/Patrickjoshanedez/CMS-V2 --skill web-design-guidelines-patrickjoshanedez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Patrickjoshanedez/CMS-V2/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Patrickjoshanedez/CMS-V2 --skill web-design-guidelines-patrickjoshanedez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that user interface code adheres to established web interface guidelines, improving consistency, accessibility, and overall user experience.

Core Features & Use Cases

  • Automated Code Review: Scans UI code against a predefined set of best practices and design principles.
  • Compliance Checking: Verifies adherence to accessibility standards and design system rules.
  • Use Case: A developer can use this skill to automatically check a new component's code against the company's design system before it's merged, catching potential issues early.

Quick Start

Use the web-design-guidelines skill to review the accessibility of the UI code in the components directory.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I check my UI code for accessibility and design compliance?▼

To check UI code for accessibility and design compliance, this skill reviews your front-end files against established web interface guidelines. It audits user interfaces to ensure adherence to design best practices and accessibility standards.

Can I automate code review for web design guidelines before merging a component?▼

Yes, you can automate code review for web design guidelines. By scanning UI code against predefined best practices, a developer can check a new component's code before it's merged, catching potential design and accessibility issues early.

Do I need to provide a specific URL to review UI code for design best practices?▼

Yes, reviewing UI code for design best practices requires fetching the latest guidelines from a specified URL. The skill then applies these fetched web interface guidelines to user-provided files or patterns for compliance checking.

What is the best way to verify front-end adherence to a company design system?▼

The best way to verify front-end adherence to a company design system is to scan the UI code against predefined design principles and rules. This verifies compliance with accessibility standards and design system guidelines automatically.

Does this UI code review process work with specific front-end frameworks?▼

This UI code review process applies to general front-end development workflows for auditing user interfaces. It evaluates user-provided files or patterns against web interface guidelines rather than depending on specific front-end frameworks.

Related Skills

Explore More Software Engineering Skills→
kjayleekjaylee

web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Community
Intermediate
k97k97
4

rams

Audit UI source code for WCAG 2.1 compliance and design consistency.

Community
Intermediate
klu-devklu-dev
2

browser-qa

Automate visual and interactive web testing with browser automation frameworks.

Community
Advanced
RektooooooRektoooooo
2

swift-architecture

Automate Swift code reviews and architecture analysis with static analysis tools.

Community
Intermediate