web-design-guidelines

Evaluate web UI code against interface guidelines and report accessibility issues.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/akinwol/design-life --skill web-design-guidelines-akinwol
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/akinwol/design-life/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/akinwol/design-life --skill web-design-guidelines-akinwol

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI reviews and accessibility checks to ensure compliance with web interface guidelines during design and development workflows.

Core Features & Use Cases

  • Automated UI guideline checks and visual consistency verification across components
  • Accessibility auditing including color contrast and semantic markup checks
  • Design-review workflow support for frontend teams in pull requests and QA cycles
  • Use Case: When reviewing a new web page or component library, run this skill to verify alignment with guidelines and accessibility standards

Quick Start

Provide the UI files to review, or specify a path, and I will generate an accessibility- and guidelines-compliance report.

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 web UI code for accessibility and UX best practices?

To audit web UI code for accessibility, you can provide your frontend UI files or specify a file path. The skill evaluates the code against established interface guidelines, fetching the latest standards to check semantic markup and color contrast.

What is the best way to automate accessibility checks in a pull request workflow?

Automating accessibility checks in a pull request workflow involves evaluating target frontend components against UI guidelines. The skill applies rules to the provided files and outputs a concise file:line format report for quick QA resolution.

Can I use this for visual consistency verification across a component library?

Yes, you can verify visual consistency across a component library. The skill applies established interface guidelines to your provided UI files to detect visual and structural inconsistencies during design reviews or release cycles.

Does this skill check color contrast and semantic markup automatically?

Color contrast and semantic markup are checked during the accessibility audit. The skill fetches the latest guidelines, reads your target web UI files, applies the rules, and presents findings in a concise file:line format.

What limitations are there when reviewing web interface guidelines manually?

Manual web interface guideline reviews are prone to overlooking accessibility or visual consistency issues. This skill automates the evaluation by fetching the latest standards and presenting findings in a concise file:line format to reduce human error.

Do I need to install dependencies to run UI guideline checks?

No dependencies are required to run UI guideline checks. The skill fetches the latest guidelines directly from the source URL and reads your target frontend files to generate the compliance report.