skills.rest
chris-gs4
chris-gs4COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code against Web Interface Guidelines and report findings.

Updated Dec 22, 2025
Search Tags:#ui#accessibility#audit#review#guidelines#ux#web-design
One-click install
npx skills add https://github.com/chris-gs4/my-family-story-archive --skill web-design-guidelines-chris-gs4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/chris-gs4/my-family-story-archive/tree/main/archive/old-editor-configs/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/chris-gs4/my-family-story-archive --skill web-design-guidelines-chris-gs4

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure UI code complies with Web Interface Guidelines, reducing accessibility issues and visual drift across projects.

Core Features & Use Cases

  • Fetch latest guidelines from the remote source and apply them to your files.
  • Read specified UI files or patterns to review.
  • Apply all rules from the fetched guidelines and report findings in the required format.
  • Use Case: Audit a React component to verify contrast, keyboard navigation, and semantic HTML.

Quick Start

Provide the UI files or patterns you want reviewed and instruct the skill to fetch the latest guidelines before evaluating them.

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 web design guidelines compliance?▼

To audit UI code for web design guidelines compliance, provide your UI files or patterns to the skill. It fetches the latest remote guidelines using WebFetch, evaluates your code against all rules, and returns a concise findings report.

What does a web accessibility and UX review cover for React components?▼

A web accessibility and UX review for React components covers verifying contrast ratios, keyboard navigation, and semantic HTML structure. The evaluation applies fetched web interface guidelines to identify accessibility issues and visual drift.

Can I review specific UI files and patterns for accessibility issues?▼

Yes, you can review specific UI files and patterns for accessibility issues. The skill reads the specified UI files you provide, applies all rules from the fetched web interface guidelines, and reports findings in a structured format.

What's the best way to reduce visual drift across multiple web projects?▼

The best way to reduce visual drift across multiple web projects is applying standardized web interface guidelines. Fetching the latest remote guidelines ensures consistent evaluation rules across all components, producing structured findings reports for each file.

Do I need to provide my own web design guidelines for the audit?▼

No, you do not need to provide your own web design guidelines for the audit. The skill automatically fetches the latest guidelines from a remote source using the WebFetch tool before evaluating your provided UI code against all rules.

Related Skills

Explore More Design & Creative Skills→
mengxi-reammengxi-ream
9.0k

web-design-guidelines

Fetch Web Interface Guidelines and review UI code for compliance.

Community
Intermediate
alexisg24alexisg24

web-design-guidelines

Review UI files against Web Interface Guidelines for compliance issues.

Community
Intermediate
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
remcostoetenremcostoeten
14

web-design-guidelines

Audit web interface code against design and accessibility standards.

Community
Intermediate