skills.rest
cdub615
cdub615COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Validate UI code against current Web Interface Guidelines with file:line findings.

Updated Aug 22, 2025
Search Tags:#accessibility#frontend#compliance#ui-review#web-guidelines#design-audit
One-click install
npx skills add https://github.com/cdub615/dotfiles --skill web-design-guidelines-cdub615
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/cdub615/dotfiles/tree/main/opencode/.config/opencode/skill/web-design-guidelines
Command: npx skills add https://github.com/cdub615/dotfiles --skill web-design-guidelines-cdub615

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps auditors verify UI code aligns with the latest Web Interface Guidelines, catching accessibility gaps, semantic issues, and design inconsistencies early in development.

Core Features & Use Cases

  • Fetches the latest Web Interface Guidelines from the official source before each review to ensure up-to-date checks.
  • Reads specified UI files or patterns to scope the audit across codebases (e.g., index.html, src/**).
  • Applies the fetched guidelines to report non-compliant files using a terse file:line format for fast remediation.
  • Use Case: When reviewing a new landing page, run this skill to identify contrast, semantic, and keyboard navigation issues.

Quick Start

Provide the UI files or patterns to review (for example 'index.html' or 'src/**/*.jsx'), and the skill will fetch guidelines and perform 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 my UI code for accessibility and web design compliance?▼

To audit UI code for accessibility, you provide file paths or patterns like 'src/**/*.jsx' and the skill fetches the latest Web Interface Guidelines to validate semantics, contrast, and keyboard navigation. It outputs concise file:line findings for fast remediation.

What is a web design audit for frontend accessibility?▼

A web design audit for frontend accessibility is the process of validating UI code against up-to-date Web Interface Guidelines to catch accessibility gaps, semantic issues, and design inconsistencies early in development before they reach production.

Can I use this design audit on specific files and patterns in my web project?▼

Yes, you can scope the design audit to specific files or patterns in your web project. The skill reads specified UI files or patterns, such as 'index.html' or 'src/**', to validate accessibility and design conformance across your codebase.

Does the accessibility check fetch the latest web guidelines before reviewing?▼

Yes, the accessibility check fetches the latest Web Interface Guidelines from the official source before each review. This ensures your UI code is always validated against current accessibility, semantics, and design compliance standards.

What's the best way to check for semantic and keyboard navigation issues in HTML?▼

The best way to check for semantic and keyboard navigation issues is to run an automated UI review against fetched Web Interface Guidelines. It applies the rules to your HTML files and reports non-compliant code using a terse file:line format for quick fixes.

Related Skills

Explore More Design & Creative Skills→
JetBrainsJetBrains
302

web-design-guidelines

Fetch web interface guidelines and validate HTML, CSS, and JS files for noncompliant UI patterns.

Official
Intermediate
mhintz1980mhintz1980

web-design-guidelines

Identify accessibility and UX compliance gaps in web UI code against Web Interface Guidelines.

Community
Intermediate
ProfSynapseProfSynapse
71

pact-coding-standards

Automate lint checks and enforce coding standards across project configurations.

Community
Intermediate
belokonmbelokonm
8

accessibility-tester

Performs WCAG 2.x accessibility audits and remediation planning for digital products.

Community
Advanced