skills.rest
oteroweb
oterowebCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Audit frontend UI files against Web Interface Guidelines and report file:line findings.

Updated Apr 2, 2026
Search Tags:#design#ui#accessibility#frontend#review#guidelines#lint
One-click install
npx skills add https://github.com/oteroweb/OWFINANCE2026 --skill web-design-guidelines-oteroweb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/oteroweb/OWFINANCE2026/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/oteroweb/OWFINANCE2026 --skill web-design-guidelines-oteroweb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This tool helps teams ensure frontend UI code complies with Web Interface Guidelines, reducing accessibility issues, visual inconsistencies, and non-conformant UX patterns.

Core Features & Use Cases

  • Fetch the latest guidelines from the specified source and apply them to your UI codebase.
  • Read the provided UI files or patterns, analyze markup, styles, and components for compliance, and produce precise findings.
  • Use Cases: audit a React/Vue component library for accessibility and contrast, or validate a landing page against layout and color guidelines.

Quick Start

Provide the UI files you want reviewed and run the web-design-guidelines skill to start the audit.

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

To audit frontend code for UI conformance, you provide your UI files to the skill, which reads the markup, styles, and components to compare them against fetched Web Interface Guidelines and reports findings in a concise file:line format.

Can I use this to check my React or Vue component library for visual consistency?▼

Yes, you can use this to check React or Vue component libraries for visual consistency by analyzing the provided component patterns and validating them against layout, color, and accessibility guidelines.

What is the best way to check HTML and CSS files against Web Interface Guidelines?▼

The best way to check HTML and CSS files against Web Interface Guidelines is to apply an automated linting audit that reads target files, compares them against established rules, and outputs precise conformance findings.

Does this UI review process work for landing page layouts and color contrast?▼

Yes, this UI review process works for landing page layouts and color contrast by validating the provided UI files against layout and color guidelines to identify accessibility issues and non-conformant UX patterns.

How do I get started with reviewing my UI codebase for accessibility issues?▼

To get started reviewing your UI codebase for accessibility issues, simply provide the UI files you want reviewed and run the audit to receive a detailed report of conformance findings.

Related Skills

Explore More Design & Creative Skills→
dthompsonfldthompsonfl

web-design-guidelines

Audit HTML, CSS, and ARIA against Web Interface Guidelines and report violations.

Community
Intermediate
mahou-labsmahou-labs
1

web-design-guidelines

Identify UI code compliance gaps against Web Interface Guidelines.

Official
Intermediate
alissonmds00alissonmds00

web-design-guidelines

Audit web interface code for design and accessibility guideline compliance.

Community
Basic
kindfi-orgkindfi-org
19

web-design-guidelines

Assess UI code against Web Interface Guidelines for accessibility and design issues.

Official
Intermediate