web-design-guidelines

Assess frontend HTML, CSS, and JavaScript against Web Interface Guidelines and accessibility rules.

1|Updated Apr 4, 2026
One-click install
npx skills add https://github.com/p-potvin/vaultwares-pipelines --skill web-design-guidelines-p-potvin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/p-potvin/vaultwares-pipelines/tree/main/.github/agents/agents/web-design-guidelines
Command: npx skills add https://github.com/p-potvin/vaultwares-pipelines --skill web-design-guidelines-p-potvin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the manual, error-prone work of checking user interfaces against published web interface guidelines and accessibility standards, letting teams quickly identify violations and actionable fixes.

Core Features & Use Cases

  • Fetches the latest Web Interface Guidelines from the canonical source before each review to ensure up-to-date rules.
  • Reads specified files or file patterns (HTML, CSS, JS, and component files) and applies guideline rules to each file.
  • Outputs findings in a terse file:line format suitable for quick triage, CI integration, or developer feedback loops.
  • Use Case: A frontend engineer asks for an accessibility and UX audit of a component library and receives a concise list of rule violations mapped to exact file locations.

Quick Start

Ask the skill to review the frontend directory for accessibility and UX issues 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 frontend code for accessibility and UI guideline violations?

You can audit frontend accessibility by pointing the skill to your frontend HTML, CSS, and JavaScript files. It fetches the latest Web Interface Guidelines from a raw GitHub URL and outputs concise file:line findings for each rule violation.

Can I check my component library for web accessibility and best practices automatically?

Yes, you can check a component library by applying the skill to component directories. It assesses UI code against published web interface guidelines and accessibility rules, returning a terse list of violations mapped to exact file locations.

What file formats are supported for UI design and accessibility code review?

UI design and accessibility code review supports frontend HTML, CSS, and JavaScript files. The skill reads specified files or file patterns and applies guideline rules to each file to identify compliance issues.

How are accessibility audit results formatted for CI integration and developer feedback?

Accessibility audit results are output in a terse file:line format suitable for quick triage and CI integration. This concise format maps rule violations directly to exact file locations for immediate developer feedback loops.

Does the web design audit fetch the latest usability and accessibility rules before reviewing?

Yes, the web design audit fetches the latest Web Interface Guidelines from the specified canonical GitHub source before each review. This ensures the accessibility and usability checks always apply the most up-to-date rules.