skills.rest
Rykuno
RykunoCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

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

24|1|Updated Jul 10, 2025
Search Tags:#ui#accessibility#audit#guidelines#web-design#design-guidelines
One-click install
npx skills add https://github.com/Rykuno/SojuStack --skill web-design-guidelines-rykuno
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Rykuno/SojuStack/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Rykuno/SojuStack --skill web-design-guidelines-rykuno

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI code often diverges from established Web Interface Guidelines, leading to inconsistent UX, accessibility gaps, and visual drift across products.

Core Features & Use Cases

  • Automated checks against the latest Web Interface Guidelines for UI components, layouts, and interactions.
  • Accessibility and contrast verification, color usage, and responsive behavior validations.
  • Use Case: You want a fast pre-release audit of a new feature to ensure it meets guidelines before design review.

Quick Start

Provide the target UI files or repository path for auditing.

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 design conformance issues?▼

Audit UI code by fetching the latest Web Interface Guidelines and reading your specified frontend files to report accessibility and design conformance issues in a concise file:line format.

Can I check frontend repository components against responsive behavior and color contrast guidelines?▼

Yes, checking frontend repositories validates color usage, contrast verification, and responsive behavior against established Web Interface Guidelines to prevent visual drift and accessibility gaps.

What is the best way to ensure a new feature meets UI design guidelines before a design review?▼

Run an automated pre-release audit against Web Interface Guidelines to check UI components, layouts, and interactions, ensuring alignment before the formal design review.

Does the UI audit support frontend repositories with no external dependencies?▼

Yes, the UI audit operates with no external dependencies, fetching remote Web Interface Guidelines directly to read and analyze your specified target project files.

How are accessibility audit findings reported for the target project files?▼

Accessibility and design conformance findings are reported in a concise file:line format, pinpointing exact locations in the target UI code where guidelines are violated.

Related Skills

Explore More Design & Creative Skills→
rahlplxrahlplx

web-design-guidelines

Audit UI files against Web Interface Guidelines and report file:line findings.

Community
Intermediate
PlaneInABottlePlaneInABottle

web-design-guidelines

Audits UI code in HTML/CSS/JS projects for guideline non-compliance and outputs file:line findings.

Community
Advanced
Chai-UnChai-Un

webapp-testing

Automate end-to-end testing of local web applications using Playwright.

Community
Advanced
cr330326cr330326

react-a11y-audit

Identify accessibility violations in React components across ARIA, keyboard, contrast, and screen reader checks.

Community
Advanced