skills.rest
yono92
yono92COMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Fetch latest Web Interface Guidelines and review UI code for compliance.

Updated Oct 7, 2024
Search Tags:#ui#code review#accessibility#web design#guidelines#ux
One-click install
npx skills add https://github.com/yono92/KeyWork --skill web-design-guidelines-yono92
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/yono92/KeyWork/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/yono92/KeyWork --skill web-design-guidelines-yono92

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

  • Compliance Review: Automatically checks provided files against a set of predefined web interface rules.
  • Guideline Fetching: Retrieves the latest guidelines from a specified source URL before each review.
  • Use Case: A developer can use this skill to audit a new component's code for accessibility issues and adherence to design best practices before merging it into the main branch.

Quick Start

Review the file 'src/components/Button.tsx' for compliance with web interface guidelines.

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

Web design compliance review checks UI code against established web interface guidelines. It fetches the latest rules from a specified source URL, identifies accessibility violations, and evaluates design patterns and best practices within provided files.

How do I audit a React component for web interface guideline violations?▼

To audit a React component for web interface violations, specify the file path like 'src/components/Button.tsx' for review. The process fetches external guidelines and analyzes the code structure to identify accessibility issues and design pattern deviations.

Does code review for UX require fetching external guidelines?▼

Yes, UX code review requires fetching external guidelines from a specified source URL before analyzing files. This ensures the review applies the latest web standards to identify accessibility and design pattern violations in the UI code.

What is the best way to ensure UI code meets web standards before merging?▼

The best way to ensure UI code meets web standards is auditing new components for accessibility issues and design best practices. Automated compliance review fetches current rules and analyzes code structure to catch violations before merging.

What limitations exist when reviewing UI code for web design compliance?▼

Limitations of UI code review include dependency on fetching external guidelines from a valid source URL. The review focuses strictly on code structure to identify accessibility and design pattern violations, meaning it cannot evaluate runtime visual rendering.

Related Skills

Explore More Software Engineering Skills→
Extremez-SuryaExtremez-Surya

web-design-guidelines

Checks UI code compliance with Web Interface Guidelines using fetched rules.

Community
Intermediate
WD-CHINAWD-CHINA

web-design-guidelines

Audit HTML and CSS files for design and accessibility compliance.

Community
Intermediate
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced
h4vzzh4vzz
33

Accessibility Testing

Audit web pages and components for WCAG 2.1 AA/AAA compliance.

Community
Advanced