skills.rest
xinge-ji
xinge-jiCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Compare frontend HTML, CSS, and JavaScript files against Web Interface Guidelines.

Updated Feb 8, 2026
Search Tags:#accessibility#a11y#ui-review#web-design-guidelines#frontend-quality#ux-consistency
One-click install
npx skills add https://github.com/xinge-ji/skyroc --skill web-design-guidelines-xinge-ji
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/xinge-ji/skyroc/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/xinge-ji/skyroc --skill web-design-guidelines-xinge-ji

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the process of checking web UI code against up-to-date Web Interface Guidelines to ensure accessibility, usability, and visual consistency.

Core Features & Use Cases

  • Guideline-based reviews: fetch and apply the latest guidelines to codebases.
  • Automated checks: identify common accessibility and UX issues across HTML/CSS/JS.
  • Use Case: When auditing a product's web UI for accessibility and design consistency.

Quick Start

Provide your UI files to review and let the Skill compare them against the latest Web Interface Guidelines.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my HTML and CSS code for web accessibility and UI issues?▼

To check web accessibility and UI issues, this Skill compares your frontend HTML, CSS, and JavaScript against the latest Web Interface Guidelines, detecting inconsistencies in layout, color contrast, keyboard navigation, and semantic structure. It provides concise findings for quick remediation.

What is the best way to audit a product's web UI for UX consistency?▼

Auditing a product's web UI for UX consistency involves applying a guideline rule set to your frontend code. This Skill identifies common accessibility and visual inconsistencies, reporting each issue with a reference to the guidelines source URL.

Can I use this tool to detect color contrast and keyboard navigation problems in frontend code?▼

Yes, you can detect color contrast and keyboard navigation problems by providing your UI files for review. This Skill applies automated checks to your HTML, CSS, and JS to find these specific accessibility issues.

Do I need to provide separate UI files to review for design guideline compliance?▼

You need to provide your frontend UI files directly for review. The Skill then fetches and applies the latest Web Interface Guidelines to your codebase to ensure usability, accessibility, and visual consistency.

Why does my web UI layout show inconsistencies after applying design guidelines?▼

Layout inconsistencies occur when frontend code deviates from rule sets. This Skill compares your HTML, CSS, and JS against current Web Interface Guidelines to identify these structural mismatches and provides concise findings for quick remediation.

How do I get a reference for each accessibility rule violation in my code?▼

To get a reference for each accessibility rule violation, this Skill outputs findings in a concise format and includes the guidelines source URL for every broken rule, ensuring you can verify the exact UI design standard.

Related Skills

Explore More Design & Creative Skills→
ShenQingchuanShenQingchuan
5

web-design-guidelines

Audit HTML and CSS UI files against Web Interface Guidelines.

Community
Intermediate
dz07dz07

Colors

Generate WCAG-compliant color palettes with semantic tokens and contrast calculations.

Community
Intermediate
t-stringst-strings

Global Validation

Enforce centralized validation standards across repository code and CI pipelines.

Official
Basic
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced