web-design-guidelines

Review HTML, CSS, and component files against Web Interface Guidelines.

46.2k|5.7k|Updated Mar 29, 2026
One-click install
npx skills add https://github.com/calesthio/OpenMontage --skill web-design-guidelines-calesthio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/calesthio/OpenMontage/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/calesthio/OpenMontage --skill web-design-guidelines-calesthio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates manual UI reviews by checking code against the Web Interface Guidelines and surfacing accessibility, UX, and design consistency issues in a concise, actionable format.

Core Features & Use Cases

  • Fetches authoritative rules from the specified remote guidelines URL before each run to ensure checks use the latest guidance.
  • Applies rule-based checks to HTML, CSS, and component files and reports violations in terse file:line format ready for developer triage or CI integration.
  • Use Case: Audit a web repository to find contrast, semantic HTML, ARIA, spacing, and design-token inconsistencies across pages and components.

Quick Start

Review src/components and pages for guideline and accessibility violations and return results in file:line format.

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 design consistency issues?

To audit UI code for accessibility and design consistency, review HTML, CSS, and component files against Web Interface Guidelines. This process checks for semantic HTML, ARIA, contrast, spacing, and design-token violations, outputting findings in a file:line format.

Can I check React components for design system and accessibility compliance?

Yes, you can check React components for design system and accessibility compliance. The review applies rule-based checks to component files, scanning for semantic HTML, ARIA usage, and design-token inconsistencies, returning actionable violations in a file:line format.

How do I automate web interface guideline checks across a repository?

Automate web interface guideline checks by fetching authoritative rules from a remote URL before each run, then applying rule checks against specified files or patterns. This surfaces accessibility and UX consistency issues across pages and components for developer triage.

What issues are found when auditing HTML and CSS for web interface guidelines?

Auditing HTML and CSS for web interface guidelines finds contrast problems, semantic HTML errors, ARIA misuse, spacing inconsistencies, and design-token violations. Results are reported in a terse file:line format ready for developer triage or CI integration.

Does the UI code review fetch the latest accessibility rules before running?

Yes, the UI code review fetches authoritative rules from a specified remote guidelines URL before each run. This ensures all accessibility, UX consistency, and design-token checks use the latest available guidance during the audit.

What format do accessibility audit results use for CI integration?

Accessibility audit results use a terse file:line format for CI integration. This format directly maps rule violations from HTML, CSS, and component files to their exact locations, making them ready for automated developer triage.