skills.rest
oiagorodrigues
oiagorodriguesCOMMUNITY
Explore all skills by this author →
Website𝕏@iagokvGitHub

web-design-guidelines

Identify UI code violating Web Interface Guidelines and accessibility best practices.

Updated Mar 29, 2026
Search Tags:#accessibility#a11y#guidelines#web-design#ui-review#ux-audit
One-click install
npx skills add https://github.com/oiagorodrigues/qcontabil --skill web-design-guidelines-oiagorodrigues
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/oiagorodrigues/qcontabil/tree/main/.cursor/skills/web-design-guidelines
Command: npx skills add https://github.com/oiagorodrigues/qcontabil --skill web-design-guidelines-oiagorodrigues

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams ensure their UI code conforms to Web Interface Guidelines and accessibility best practices, reducing design debt and usability issues.

Core Features & Use Cases

  • Guideline-driven review: Checks ARIA, semantic HTML, keyboard navigation, focus states, typography, images, forms, and interactions against a published guideline.
  • Context-aware analysis: Targets reviews when asked to audit UI, check accessibility, review UX, or compare to best practices.
  • Guidelines reference: Reads rules from references/guideline.md to drive the evaluation.

Quick Start

Review the provided UI files with the guidelines and return concise findings.

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 accessibility best practices?▼

This Skill audits UI code for accessibility by checking ARIA, semantic HTML, keyboard navigation, and focus states against a published guideline. It returns concise file:line findings citing the specific rules violated from its references.

What web design guidelines are checked during a UX audit?▼

A UX audit checks UI code against web interface guidelines covering typography, images, forms, interactions, and accessibility best practices. It evaluates focus states and navigation to identify violations and reduce usability issues.

How do I find ARIA and semantic HTML violations in my files?▼

You can find ARIA and semantic HTML violations by running a guideline-driven review on your UI files. The analysis targets accessibility issues and outputs findings in a terse file:line format citing the rules from its guidelines reference.

Can I check keyboard navigation and focus states using a guideline reference?▼

Yes, you can check keyboard navigation and focus states using a guideline reference. The Skill reads rules from a guideline file to drive the evaluation and identify UI code that violates web interface standards.

What is the best way to review UI code for design debt and usability issues?▼

The best way to review UI code for design debt is applying a context-aware analysis that checks forms, interactions, and visual design against a published guideline. It outputs concise findings to help teams ensure UI code conforms to best practices.

Related Skills

Explore More Design & Creative Skills→
rp4rirp4ri

accessibility-auditor

Audit design files against WCAG 2.1 AA criteria for accessibility issues.

Community
Advanced
TheGoat395TheGoat395
117

react-accessible-components

Construct accessible React components with semantic HTML and ARIA attributes.

Community
Intermediate
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate
opencodosopencodos
14

web-design

Audit HTML, CSS, and JS for web interface guideline compliance.

Official
Intermediate