skills.rest
0xkynz
0xkynzCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

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

Updated Dec 22, 2025
Search Tags:#accessibility#a11y#guidelines#web-design#ui-review#design-audit
One-click install
npx skills add https://github.com/0xkynz/codekit --skill web-design-guidelines-0xkynz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/0xkynz/codekit/tree/main/templates/skills/web-design-guidelines
Command: npx skills add https://github.com/0xkynz/codekit --skill web-design-guidelines-0xkynz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for compliance with Web Interface Guidelines and surface accessibility and usability gaps.

Core Features & Use Cases

  • Fetch the latest guidelines from the source URL and apply them to your codebase.
  • Read the specified files (or prompt user for files/pattern) and evaluate against guidelines.
  • Check against all rules in the fetched guidelines and surface non-conformant areas.
  • Output findings in the terse file:line format to facilitate quick remediation.

Quick Start

Run a UI review on your project by asking it to check the main interface against the latest Web Interface 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 my UI code for accessibility and usability gaps?▼

To audit UI code for accessibility gaps, you can run a review against the latest Web Interface Guidelines. The tool reads your project files and outputs non-conformant findings in a terse file:line format for quick remediation.

How do I check if my web interface meets current design guidelines?▼

Checking web interface conformance involves fetching the latest remote guidelines and applying all rules to your codebase. It evaluates specified files or patterns and surfaces non-conformant areas across modern frameworks.

Can I use this UI review tool with any modern framework codebase?▼

Yes, UI code conformance checks apply across modern frameworks and codebases. You can execute project-wide UI audits, component reviews, and page-level checks by specifying the target files or prompting for a file pattern.

What is the best way to format UI audit findings for quick remediation?▼

The best way to format UI audit findings for quick remediation is a terse file:line format. This output style pinpoints exact locations of accessibility and usability gaps discovered during the web interface evaluation.

Do I need to manually update the web design guidelines for a design audit?▼

No, you do not need to manually update web design guidelines for a design audit. The tool automatically fetches the latest guidelines from a remote source URL and applies all rules to your codebase.

Why does my UI code review only check specific page-level components?▼

A UI code review checks specific page-level components because it evaluates only the files you specify or patterns you prompt. To run a project-wide UI audit, ensure you provide the tool with the full scope of your codebase.

Related Skills

Explore More Design & Creative Skills→
UmmItKinUmmItKin

web-design-guidelines

Compare UI code against Web Interface Guidelines and report issues in file:line format.

Community
Basic
xrplevmxrplevm
1

web-design-guidelines

Validate UI code against Web Interface Guidelines and report findings in file:line format.

Official
Intermediate
giljaegiljae
1

gstack-canary

Monitor live web apps for console errors, performance, and visual regressions post-deploy.

Community
Intermediate
rajyeole6rajyeole6

agency-accessibility-auditor

Audits digital interfaces against WCAG 2.2 standards for accessibility and generates remediation reports.

Community
Advanced