skills.rest
tnunamak
tnunamakCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review web UI code against Web Interface Guidelines and report violations in file:line format.

Updated Mar 22, 2018
Search Tags:#accessibility#ui review#ux audit#design compliance#web best practices#file:line reporting#guideline checks
One-click install
npx skills add https://github.com/tnunamak/dotfiles --skill web-design-guidelines-tnunamak
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/tnunamak/dotfiles/tree/main/ai/skills/local/web-design-guidelines
Command: npx skills add https://github.com/tnunamak/dotfiles --skill web-design-guidelines-tnunamak

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you quickly identify when your web UI does not follow established Web Interface Guidelines, including accessibility and best-practice UX concerns.

Core Features & Use Cases

  • Guideline-based audits: Reviews your UI code against a freshly fetched set of Web Interface Guidelines rules.
  • Targeted file/pattern checks: Lets you specify files or patterns to review, and can prompt for what to audit when nothing is provided.
  • Terse, actionable reporting: Produces findings in the required file:line format so you can fix issues efficiently.

Quick Start

Ask the skill to review your UI code by providing the specific file path or glob pattern you want checked, such as "Review src/components/Button.tsx and all files matching **/accessibility.tsx".

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my web UI code for accessibility and UX issues?▼

To check web UI code for accessibility and UX issues, you can run a guideline-based audit that scans specified front-end files against Web Interface Guidelines and reports violations in a file:line format.

What is a UI review for design compliance?▼

A UI review for design compliance is an automated scan of front-end code that identifies accessibility barriers and UX regressions by matching your files against fetched web best practices.

Can I audit specific files or glob patterns for web best practices?▼

Yes, you can audit specific files or glob patterns for web best practices by providing the exact file paths or pattern matches you want reviewed, enabling targeted accessibility checks.

How are UX audit violations reported in the code?▼

UX audit violations are reported in a terse file:line format, pointing directly to the exact location in your front-end files where accessibility or design best-practice regressions occur.

Do I need to provide files manually for an accessibility check?▼

You do not always need to provide files manually for an accessibility check; if no files or patterns are specified, the audit can prompt you to input what needs to be reviewed.

When should I run a design compliance scan on front-end files?▼

You should run a design compliance scan on front-end files whenever you update UI components to prevent accessibility, UX, and web best-practice regressions before deployment.

Related Skills

Explore More Design & Creative Skills→
harsh-m-patilharsh-m-patil

web-design-guidelines

Analyze UI code for compliance with Web Interface Guidelines.

Community
Intermediate
Citrus-bitCitrus-bit
135

web-design-guidelines

Review UI code against the Web Interface Guidelines and output file:line violation reports.

Community
Intermediate
AdigunQAdigunQ

existing-repo

Analyze existing repositories and audit guardrails for JavaScript/TypeScript and Python projects.

Community
Advanced
HouseofmvpsHouseofmvps
115

a11y

Detect and fix deterministic WCAG 2.2 A/AA accessibility violations in HTML files.

Community
Advanced