skills.rest
omerakben
omerakbenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Analyze UI code against Web Interface Guidelines for accessibility and usability issues.

1|Updated Oct 9, 2025
Search Tags:#accessibility#a11y#frontend#UI#review#guidelines#web-design
One-click install
npx skills add https://github.com/omerakben/omer-akben --skill web-design-guidelines-omerakben
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/omerakben/omer-akben/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/omerakben/omer-akben --skill web-design-guidelines-omerakben

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers often struggle to ensure UI code complies with Web Interface Guidelines. This Skill automates checks against accessibility, usability, and consistency standards, helping teams ship compliant interfaces faster.

Core Features & Use Cases

  • Fetch the latest guidelines from the official source and apply them to specified UI files or patterns.
  • Analyze HTML, CSS, and framework components (e.g., React/Vue) to identify violations and provide concrete remediation steps.
  • Use Case: A frontend engineer reviews a PR to catch accessibility gaps before merge, or a designer audits a landing page for color contrast and keyboard navigation.

Quick Start

Provide the UI files or a file pattern to review, for example "src/components/Button.jsx" or "public/index.html". The skill will fetch the latest guidelines from the official source and output findings in a concise file:line format.

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

Accessibility audits apply official Web Interface Guidelines to your HTML, CSS, and framework components. The skill fetches the latest standards and outputs concrete violations in a terse file:line format for quick remediation.

Can I review React or Vue components for UI compliance and best practices?▼

Yes, you can review React and Vue components for UI compliance. The skill analyzes framework components against fetched Web Interface Guidelines to identify accessibility and usability violations in a concise file:line format.

What is the best way to check color contrast and keyboard navigation in a landing page?▼

The best way to check color contrast and keyboard navigation is an automated design audit. The skill applies fetched Web Interface Guidelines to your landing page files and outputs specific accessibility findings in a file:line format.

Does this accessibility review tool work with HTML and CSS files?▼

Yes, this accessibility review tool works directly with HTML and CSS files. It reads specified file patterns, applies fetched Web Interface Guidelines, and identifies usability issues in a terse file:line format.

How do I catch accessibility gaps in a pull request before merge?▼

To catch accessibility gaps in a pull request before merge, run a UI code review on the changed files. The skill checks frontend code against fetched guidelines and outputs concrete remediation steps in a file:line format.

Do I need to manually update web design guidelines for my code audits?▼

No, you do not need to manually update web design guidelines for code audits. The skill automatically fetches the latest guidelines from the official source before analyzing your specified UI files or patterns.

Related Skills

Explore More Design & Creative Skills→
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate
brainbrewlabsbrainbrewlabs
7

web-design-guidelines

Audit HTML, CSS, and JavaScript files against Web Interface Guidelines.

Official
Intermediate
alexzhang1030alexzhang1030

web-design-guidelines

Review UI code for web interface guideline compliance and accessibility issues.

Community
Intermediate
warpdotdevwarpdotdev
820

web-accessibility-audit

Audit web pages against WCAG standards using automated tools and manual review.

Official
Intermediate