skills.rest
briosoemilio
briosoemilioCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Evaluate UI components against the latest Web Interface Guidelines.

Updated Jan 16, 2026
Search Tags:#design#ui#accessibility#frontend#review#guidelines#web
One-click install
npx skills add https://github.com/briosoemilio/ambagan-fe --skill web-design-guidelines-briosoemilio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/briosoemilio/ambagan-fe/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/briosoemilio/ambagan-fe --skill web-design-guidelines-briosoemilio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web designers and developers need a reliable, up-to-date benchmark to ensure UI assets comply with established Web Interface Guidelines, reducing accessibility and usability gaps across products.

Core Features & Use Cases

  • Compare UI files and components against the latest guidelines sourced from the official repository, enabling quick detection of deviations.
  • Generate actionable reports highlighting accessibility, usability, and consistency issues for design and development teams.
  • Use Case: A designer reviews a new landing page draft to verify color contrast, semantic markup, and responsive behavior before handoff.

Quick Start

Use the web-design-guidelines skill to fetch the latest rules and run a review on your UI assets.

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 components against web interface guidelines?▼

Reviewing a landing page draft for web design guidelines verifies color contrast, semantic markup, and responsive behavior before handoff. This ensures UI assets comply with established accessibility and usability standards, reducing product gaps.

How do I check my frontend design for accessibility and usability gaps?▼

Web design guidelines reviews handle UI files provided by the user, fetching official rules to evaluate specific user interface components. This assesses conformance gaps and outputs actionable findings for design and development teams.

What is the best way to review a design draft for color contrast and semantic markup?▼

The best way to review a design draft for color contrast and semantic markup is to apply sourced web interface guidelines to the UI assets. This benchmarks the draft to quickly detect deviations and generate a report for design handoff.

Does a web design guidelines review work without external dependencies?▼

A web design guidelines review works without external dependencies, requiring only user-provided UI files to function. It satisfies functional requirements by fetching rules internally to evaluate components and report conformance findings.

Related Skills

Explore More Design & Creative Skills→
praveenpererapraveenperera
4

web-design-guidelines

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

Community
Intermediate
chuan-khunachuan-khuna
3

web-design-guidelines

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

Community
Intermediate
zero-rehqzero-rehq

web-design-guidelines

Audit frontend UI against 100+ Web Interface Guidelines rules for accessibility, UX, and performance gaps.

Community
Advanced
89jobrien89jobrien
4

web-accessibility

Audit web content for WCAG 2.1/2.2 conformance and accessibility issues.

Community
Advanced