web-design-guidelines

Analyze UI code against Web Interface Guidelines and output file:line findings.

38|3|Updated Mar 22, 2024
One-click install
npx skills add https://github.com/anthonyshew/dotfiles --skill web-design-guidelines-anthonyshew
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/anthonyshew/dotfiles/tree/main/opencode/.config/opencode/skills/web-design-guidelines
Command: npx skills add https://github.com/anthonyshew/dotfiles --skill web-design-guidelines-anthonyshew

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure UI code adheres to Web Interface Guidelines, reducing accessibility gaps and UX inconsistencies across projects.

Core Features & Use Cases

  • Guideline Compliance Checks: Automatically assess UI code against the Web Interface Guidelines, including accessible color contrast, semantic structure, keyboard navigation, and responsive layout.
  • Audit & Recommendations: Provide actionable remediation steps and prioritized recommendations for improvements.
  • Use Case: When reviewing a new web project or a complex UI component, run the skill to surface violations and suggested fixes.

Quick Start

To begin, provide the URLs or repository files to review and run the guideline check across the specified assets.

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 web accessibility and UX compliance?

To audit frontend code for web accessibility and UX compliance, provide your repository files or URLs. The skill reads target files by pattern, applies the full Web Interface Guidelines rule set, and outputs findings in a terse file:line format.

What is a UI review for Web Interface Guidelines?

A UI review for Web Interface Guidelines is an automated assessment that analyzes UI code to identify accessibility and UX gaps. It checks components, pages, or entire web projects against standards like color contrast, semantic structure, and keyboard navigation.

Can I check semantic structure and keyboard navigation across an entire web project?

Yes, you can check semantic structure and keyboard navigation across an entire web project. The skill operates on frontend codebases and markup, allowing you to audit components, pages, or whole sites by specifying file patterns.

How do I get actionable remediation steps for accessibility gaps in my UI code?

To get actionable remediation steps for accessibility gaps, run the skill against your target files. It fetches guidelines from a provided URL, applies the rule set, and provides prioritized recommendations for improvements alongside the violations found.

Does this UI audit tool require any specific dependencies or components to run?

No, this UI audit tool does not require any specific dependencies or components to run. It operates independently to fetch guidelines from a provided URL and read target files by pattern to output accessibility and UX findings.

What format does the web design guidelines audit output use for reporting violations?

The web design guidelines audit outputs violations using a terse file:line format. This precise output structure allows developers to quickly locate and fix accessibility and UX gaps within their frontend codebases.