skills.rest
shirogin
shiroginCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Fetch Web Interface Guidelines and report UI compliance issues in file:line format.

1|Updated Mar 31, 2026
Search Tags:#ui#accessibility#audit#guidelines#web-design#design-review
One-click install
npx skills add https://github.com/shirogin/jesuph-skills --skill web-design-guidelines-shirogin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/shirogin/jesuph-skills/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/shirogin/jesuph-skills --skill web-design-guidelines-shirogin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams review UI code for compliance with Web Interface Guidelines, focusing on accessibility, semantics, and visual consistency.

Core Features & Use Cases

  • Automated compliance checks: fetch latest guidelines from the source URL and compare files for accessibility, color contrast, and semantic correctness.
  • Guideline-driven review: apply rules to a set of UI assets and provide concise pass/fail results.
  • Use Case: A designer audits a component library for accessibility conformance and naming conventions across projects.

Quick Start

Provide the UI files or patterns you want reviewed and I will fetch the latest guidelines to begin the audit.

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 visual compliance?▼

To audit UI code for accessibility and visual compliance, provide your UI files or patterns for review. The Skill fetches the latest Web Interface Guidelines, applies checks across markup and accessibility rules, and reports findings in a file:line format.

What is the best way to check a component library for design guideline conformance?▼

Checking a component library for design guideline conformance involves fetching current Web Interface Guidelines and comparing them against your assets. This Skill automates that process, evaluating semantics, color contrast, and naming conventions to deliver pass/fail results.

Does this design review tool work with dashboard and landing page markup?▼

Yes, this design review tool works with dashboard and landing page markup. It applies visual guidelines and accessibility checks directly to your provided UI files, evaluating semantic correctness and color contrast across various web interfaces.

How do I get started with an automated accessibility audit for my web files?▼

To get started with an automated accessibility audit, simply provide the UI files or patterns you want reviewed. The Skill will fetch the latest guidelines from the source URL and immediately begin the compliance check on your markup.

Are there limitations to using fetched guidelines for a design review?▼

A limitation of using fetched guidelines for a design review is the dependency on the external source URL for the latest rules. The audit focuses on UI markup, accessibility, and visual consistency, reporting issues strictly in a file:line format.

Related Skills

Explore More Design & Creative Skills→
DeltaFoundry850DeltaFoundry850

web-design-guidelines

Detects accessibility and UI violations in web front-ends.

Community
Intermediate
yutanpo1227yutanpo1227

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and design compliance.

Community
Intermediate
murphytruemanmurphytrueman
155

cicd-integration

Generate CI/CD pipeline configurations for design system quality checks.

Community
Advanced
kuroRykuroRy

web-design-guidelines

Compare project files against Web Interface Guidelines and report UI issues.

Community
Intermediate