skills.rest
rafifos
rafifosCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Identify UI compliance issues against Web Interface Guidelines in file:line format.

6|Updated Mar 24, 2019
Search Tags:#ui#accessibility#compliance#review#guidelines#web-design
One-click install
npx skills add https://github.com/rafifos/dotfiles --skill web-design-guidelines-rafifos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/rafifos/dotfiles/tree/main/dot_agents/skills/web-design-guidelines
Command: npx skills add https://github.com/rafifos/dotfiles --skill web-design-guidelines-rafifos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams enforce Web Interface Guidelines by validating UI code against accessibility, usability, and consistency standards across web interfaces.

Core Features & Use Cases

  • Guideline-driven reviews: Fetch the latest guidelines from the source URL and compare against local UI code for conformance.
  • Accessibility checks: Evaluate color contrast, semantic HTML, keyboard navigation, and screen-reader friendliness.
  • Use Case: A designer audits a landing page to ensure it matches the latest guidelines and generates a concise compliance report.

Quick Start

Run a UI review against the latest guidelines for a given web page or component to verify accessibility and design conformance.

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 my web page for accessibility compliance?▼

To audit web page accessibility compliance, the Skill evaluates HTML pages and components against Web Interface Guidelines, checking color contrast, semantic HTML, keyboard navigation, and screen-reader friendliness to output findings in a file:line format.

Can I review a code repository for UI consistency and usability?▼

Yes, you can review a code repository for UI consistency by loading target files and evaluating all rules against the latest fetched guidelines, generating a concise report of usability and visual conformance findings.

What checks are included in an accessibility review for HTML components?▼

An accessibility review for HTML components includes checks for color contrast, semantic HTML structure, keyboard navigation support, and screen-reader friendliness to ensure full web interface compliance.

Does this UI compliance review work with design files?▼

Yes, this UI compliance review applies checks directly to design files, HTML pages, components, and code repositories to cover accessibility, usability, and visual consistency across web interfaces.

How are UI accessibility violations reported during a guideline review?▼

UI accessibility violations are reported in a file:line format, pinpointing exact locations of compliance issues against Web Interface Guidelines for quick resolution.

What is the best way to ensure my landing page matches the latest web design guidelines?▼

The best way to ensure a landing page matches the latest web design guidelines is to fetch the current rules from the specified source URL and run a guideline-driven review to generate a concise compliance report.

Related Skills

Explore More Design & Creative Skills→
TwuanMinnTwuanMinn

web-design-guidelines

Evaluate HTML, CSS, and component code against Web Interface Guidelines.

Community
Intermediate
flitzrrrflitzrrr
4

accessibility

Audit web interfaces for HTML semantics, ARIA, keyboard navigation, and color contrast.

Community
Advanced
pavegpaveg
2

ui-design-standards

Enforce UI design standards across frontend projects with theme tokens and component architecture.

Community
Advanced
LuisSambranoLuisSambrano
7

web-design

Review web interface code for compliance with Web Interface Guidelines.

Community
Basic