skills.rest
wjyugutou
wjyugutouCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Automate UI code review against Web Interface Guidelines for accessibility and consistency.

Updated Apr 6, 2022
Search Tags:#accessibility#frontend#audit#design-guidelines#ui-review#web-standards
One-click install
npx skills add https://github.com/wjyugutou/study-test-demo --skill web-design-guidelines-wjyugutou
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/wjyugutou/study-test-demo/tree/main/.trae/skills/web-design-guidelines
Command: npx skills add https://github.com/wjyugutou/study-test-demo --skill web-design-guidelines-wjyugutou

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure web UI code complies with established interface guidelines, reducing design debt and accessibility gaps.

Core Features & Use Cases

  • Guideline-driven UI review: Compare code and markup against current Web Interface Guidelines.
  • Accessibility & design conformance: Identify issues related to contrast, focus order, semantic structure, and responsive behavior.
  • Use Case: Apply to design reviews for new components or pages to guarantee baseline quality before release.

Quick Start

Use the web-design-guidelines skill to review your UI files or codebase against the latest guidelines. Provide paths or patterns to scan (for example, index.html, src/components/**/*.jsx).

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 frontend UI code for accessibility and design conformance?▼

To audit frontend UI code for accessibility, you can review your markup against established Web Interface Guidelines to identify contrast, focus order, and semantic structure issues. This ensures your components meet baseline quality before release.

What is a UI review against web design guidelines?▼

A UI review against web design guidelines is an automated check that compares frontend code and markup against a formal rule set. It evaluates visual design consistency and accessibility conformance across pages or components.

How do I check my web components for accessibility issues like contrast and focus order?▼

You can check web components for accessibility issues by scanning your UI files to evaluate them against current web standards. This process identifies specific gaps in contrast, focus order, semantic structure, and responsive behavior.

Can I use an automated UI review for frontend projects?▼

Yes, you can use an automated UI review for frontend projects by providing file paths or patterns to scan. The tool fetches updated guidelines from a specified source and evaluates your code against a formal rule set.

What is the best way to ensure web UI code complies with web standards?▼

The best way to ensure web UI code complies with web standards is to apply a guideline-driven review process to your codebase. This reduces design debt and accessibility gaps by verifying conformance before deployment.

Related Skills

Explore More Design & Creative Skills→
claude4062024-afkclaude4062024-afk

web-design-guidelines

Audit UI code against the Web Interface Guidelines and report file:line findings.

Community
Intermediate
hdkz-devhdkz-dev

accessibility-ally

Audit web applications for semantic HTML, keyboard navigation, and color contrast issues.

Community
Intermediate
pradyumnasagarpradyumnasagar
6

agent-handoff

Automate inter-skill data transfer and provenance capture via JSON Material Passports.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced