skills.rest
magoz
magozCOMMUNITY
Explore all skills by this author →
Website𝕏@magoz_GitHub

web-design-guidelines

Fetches latest Web Interface Guidelines and audits UI files for accessibility and UX compliance, outputting findings as file:line pairs.

2|Updated Jun 23, 2022
Search Tags:#design#ui#accessibility#audit#compliance#guidelines#web
One-click install
npx skills add https://github.com/magoz/.dotfiles --skill web-design-guidelines-magoz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/magoz/.dotfiles/tree/main/opencode/.config/opencode/skill/web-design-guidelines
Command: npx skills add https://github.com/magoz/.dotfiles --skill web-design-guidelines-magoz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures UI code aligns with Web Interface Guidelines, reducing accessibility, consistency, and UX gaps across web projects.

Core Features & Use Cases

  • Fetch and apply the latest guidelines to verify UI components against defined rules.
  • Read target files or patterns to scan for accessibility, layout, and UX consistency.
  • Use cases include auditing a design system, reviewing a site, or validating UI changes during development.

Quick Start

Run the web-design-guidelines skill on your UI project to audit files against the latest guidelines.

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 UI code for web accessibility compliance?▼

To audit UI code for web accessibility compliance, run the skill on your project files to fetch the latest Web Interface Guidelines and evaluate your code against defined rules. It outputs findings in a terse file:line format.

What is the best way to check my web project against design guidelines?▼

The best way to check a web project against design guidelines is to use a skill that fetches the latest rules and scans target files or patterns for accessibility, layout, and UX consistency issues automatically.

Can I review a design system for UX consistency during development?▼

Yes, you can review a design system for UX consistency during development by applying the skill to read UI files and validate changes against the latest standards.

How does a web accessibility audit work when scanning UI files?▼

A web accessibility audit works by using WebFetch to retrieve the latest guidelines, inspecting specified UI files across the project, and outputting findings in a terse file:line format for review.

Do I need any dependencies installed to run a UI compliance check?▼

No dependencies are required to run a UI compliance check. The skill operates independently but requires WebFetch to retrieve the latest rules and inspect target files.

What limitations exist when auditing UI files for web interface guidelines?▼

A limitation when auditing UI files is that the skill outputs findings in a terse file:line format and requires WebFetch to retrieve rules, meaning it focuses on code-level compliance rather than visual rendering.

Related Skills

Explore More Design & Creative Skills→
AbianSAbianS
92

web-design-guidelines

Audit UI code against the Web Interface Guidelines for accessibility and UX compliance.

Community
Basic
mhintz1980mhintz1980

web-design-guidelines

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

Community
Intermediate
mvillmowmvillmow
18

quality-run-linters

Run configured linters including mojo-format, markdownlint, and pre-commit checks in check or fix mode.

Community
Intermediate
Andrejr82Andrejr82

webapp-testing

Automate web application testing with Playwright end-to-end, accessibility, and visual checks.

Community
Intermediate