web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Updated May 7, 2025
One-click install
npx skills add https://github.com/IsaacAVazquez/Website --skill web-design-guidelines-isaacavazquez
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/IsaacAVazquez/Website/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/IsaacAVazquez/Website --skill web-design-guidelines-isaacavazquez

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, promoting consistency, accessibility, and best practices across web applications.

Core Features & Use Cases

  • Automated Code Review: Scans specified files for compliance with a predefined set of web interface rules.
  • Guideline Fetching: Automatically retrieves the latest guidelines from a remote source before performing a review.
  • Use Case: A developer can use this skill to audit a new component's UI code for accessibility issues and adherence to design system standards before merging it into the main branch.

Quick Start

Use the web-design-guidelines skill to review the accessibility of the file 'src/components/Button.tsx'.

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 UI code for accessibility and web standards compliance?

To audit UI code for accessibility and web standards compliance, provide your component files for review. The skill fetches the latest web interface guidelines from a specified URL and scans your code against those rules.

What is a UI code review for design consistency?

A UI code review for design consistency is an automated scan that checks user interface files against predefined web interface guidelines. It ensures components adhere to accessibility rules and design system standards before merging.

Can I review specific component files like a React button for accessibility issues?

Yes, you can review specific component files like a React button for accessibility issues. You provide the file path, and the skill applies fetched web standards and design guidelines to identify compliance gaps in the code.

How do I ensure web applications meet design system standards before merging?

To ensure web applications meet design system standards before merging, run an automated code review on the new components. The skill scans the provided files against remote web interface guidelines to detect accessibility and consistency issues.

Do I need to provide a URL to fetch web interface guidelines for the code audit?

Yes, you need to provide a URL to fetch web interface guidelines for the code audit. The skill automatically retrieves the latest rules from that remote source before applying them to your user-provided files or patterns.

What are the limitations of automated web standards compliance checks?

The limitations of automated web standards compliance checks include relying entirely on the guidelines fetched from the specified remote URL. The review focuses on code-level adherence to accessibility and design consistency rules rather than visual rendering.