skills.rest
pascalandy
pascalandyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Audit UI code against current Web Interface Guidelines and emit findings in file:line format.

Updated Aug 27, 2026
Search Tags:#accessibility#frontend#validation#UI#audit#compliance#web-guidelines
One-click install
npx skills add https://github.com/pascalandy/dotfiles --skill web-design-guidelines-pascalandy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/pascalandy/dotfiles/tree/main/dot_config/opencode/skill/web-design-guidelines
Command: npx skills add https://github.com/pascalandy/dotfiles --skill web-design-guidelines-pascalandy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web projects often ship UI that fails accessibility and usability standards, causing costly rework and poor user experience. This Skill automates checking UI files against the latest Web Interface Guidelines to surface violations quickly.

Core Features & Use Cases

  • Automated UI guideline compliance checks across HTML, CSS, and JS assets.
  • Fetches the most recent guidelines from the official source and applies them to your files.
  • Outputs findings in a compact file:line format to streamline review and remediation.

Quick Start

Use the web-design-guidelines skill to audit your UI files. Provide the target files or patterns (e.g., index.html, src/components/**/*.html) and let the skill fetch current rules and report any issues.

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 HTML and CSS against web interface guidelines?▼

To audit UI code against web interface guidelines, provide your HTML, CSS, or JS files and the skill fetches current rules to identify accessibility and design deviations, outputting findings in a file:line format.

What is automated accessibility compliance checking for frontend code?▼

Automated accessibility compliance checking analyzes your frontend files against official web interface guidelines to surface violations quickly, preventing costly rework and poor user experience before shipping.

Can I audit specific UI component patterns instead of entire files?▼

Yes, you can audit specific UI component patterns by providing target file patterns like src/components/**/*.html, and the skill applies fetched rules to produce findings for each matching file.

Does the web design guidelines audit work with JavaScript components?▼

Yes, the UI guideline compliance check works with JavaScript components alongside HTML and CSS assets, applying fetched rules to identify deviations across all specified file types.

How are accessibility violations reported in a UI code audit?▼

Accessibility violations are reported in a compact file:line format, streamlining review and remediation by pinpointing exactly where deviations from web interface guidelines occur in your code.

What's the best way to check web design compliance without installing dependencies?▼

To check web design compliance without dependencies, use this skill to fetch fresh rules directly from the guidelines source via WebFetch and apply them to your target files for immediate findings.

Related Skills

Explore More Design & Creative Skills→
deangilmoreremixdeangilmoreremix

web-design-guidelines

Review UI files against web design and accessibility guidelines.

Community
Intermediate
arvidfcjarfalla-progarvidfcjarfalla-prog

web-design-guidelines

Audit UI files against the latest Web Interface Guidelines and report deviations.

Community
Intermediate
VoDaiLoczVoDaiLocz
24

lint-and-validate

Automate linting and static analysis of code in CI pipelines.

Community
Intermediate
wredziowredzio

accessibility

Identify and remediate WCAG 2.1 AA accessibility issues in web pages.

Community
Advanced