skills.rest
uzh-bf
uzh-bfOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Audit HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

41|14|Updated May 16, 2017
Search Tags:#accessibility#frontend#web-design#UI-review#web-guidelines#a11y-audit
One-click install
npx skills add https://github.com/uzh-bf/klicker-uzh --skill web-design-guidelines-uzh-bf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/uzh-bf/klicker-uzh/tree/main/.github/skills/web-design-guidelines
Command: npx skills add https://github.com/uzh-bf/klicker-uzh --skill web-design-guidelines-uzh-bf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review and enforce Web Interface Guidelines compliance in UI code, helping teams identify accessibility, usability, and consistency gaps before release.

Core Features & Use Cases

  • Guideline-driven UI review: Checks HTML, CSS, and JS artifacts against fetched guidelines.
  • Automated accessibility checks: Highlights common a11y issues and recommended fixes.
  • Use Case: Before deploying a web app, run this skill to identify violations and generate remediation steps.

Quick Start

Use the web-design-guidelines skill to scan your project files matching a pattern (e.g., src/**/*.html) and report any guideline violations.

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 frontend code for accessibility and web-design compliance?▼

To audit web-design compliance, scan your HTML, CSS, and JavaScript files against fetched Web Interface Guidelines to identify accessibility gaps. It evaluates input files at component, page, or project scope and reports violations in a concise file:line format.

Can I run an accessibility check on a specific UI component before deploying my web app?▼

Yes, you can perform an accessibility check on a specific UI component before deploying your web app. The tool evaluates frontend UI code at component, page, or project scope to highlight common a11y issues and generate remediation steps.

What's the best way to review HTML and CSS artifacts for usability and consistency gaps?▼

The best way to review HTML and CSS artifacts for usability and consistency gaps is fetching the latest Web Interface Guidelines and evaluating your code against those rules. This guideline-driven UI review identifies violations before release.

Does the web-design guidelines audit work with plain JavaScript and HTML projects?▼

Yes, the web-design guidelines audit works with plain JavaScript and HTML projects. It applies to frontend projects with HTML, CSS, and JavaScript across both websites and web apps, fetching remote rules to evaluate input files.

Why does my UI review report show accessibility violations in a file:line format?▼

Your UI review shows accessibility violations in a file:line format because the tool evaluates your input files against fetched rules and reports findings concisely. This format pinpoints exactly where to apply recommended fixes for guideline compliance.

Related Skills

Explore More Design & Creative Skills→
quanyquany

web-artifacts-builder

Bundle React and Tailwind frontend artifacts into a single HTML file.

Community
Advanced
dthuy62dthuy62

ck:web-design-guidelines

Review UI code against web interface guidelines and report violations in file:line format.

Community
Intermediate
chipoto69chipoto69
1

web-design-guidelines

Validate web UI code against Web Interface Guidelines and report violations.

Community
Intermediate
nickstradnickstrad

web-design-guidelines

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

Community
Basic