Explore all skills by this author →

Verified:GitHub

web-design-guidelines

Review UI files against web design and accessibility guidelines.

Updated Nov 18, 2025

Search Tags:#html #accessibility #guidelines #ux #web-design #code-audit #ui-review

Ready to run

npx skills add https://github.com/deangilmoreremix/videoremix.vip2 --skill web-design-guidelines-deangilmoreremix

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/deangilmoreremix/videoremix.vip2/tree/main/.kilo/skills/web-design-guidelines
Command: npx skills add https://github.com/deangilmoreremix/videoremix.vip2 --skill web-design-guidelines-deangilmoreremix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides automated reviews of UI code to ensure compliance with web interface guidelines and accessibility best practices, reducing manual checklist work and catching common design and accessibility issues early.

Core Features & Use Cases

Automated guideline checks: Fetches the canonical rules and applies them to target files to identify guideline violations.
HTML/CSS and component audits: Scans markup, styles, and component code for accessibility, layout, and UX issues.
Terse actionable output: Reports issues in a concise file:line format that can be used in code reviews or CI pipelines.
Use Case: Run a pre-merge audit to surface accessibility regressions or to generate a prioritized list of design fixes for a legacy frontend.

Quick Start

Provide a file path or glob pattern such as design/*.html to run a guideline audit on the specified UI files.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema

How do I run an automated accessibility audit on my HTML and CSS files?▼

Yes, you can scan component code for UX and accessibility issues by providing the relevant file paths or glob patterns. The review applies guideline rules directly to your markup and styles to identify violations.

What is the best way to check my web design project for UI compliance before merging?▼

The best way to check UI compliance is to run a pre-merge audit using glob patterns on your target files. This surfaces accessibility regressions and generates a prioritized list of design fixes in a concise file:line format.

How does the tool format UI review findings for code reviews?▼

The tool formats UI review findings in a concise file:line format. This terse actionable output highlights specific accessibility, layout, and UX guideline violations, making it easy to integrate into code reviews or CI pipelines.

Can I use this to review legacy frontend code for web interface guidelines?▼

Yes, you can review legacy frontend code by targeting the project's HTML and CSS files. The automated guideline checks scan markup and styles to generate a prioritized list of design fixes for common accessibility issues.

Do I need to install dependencies to perform a UI review?▼

No dependencies are required to perform a UI review. The tool fetches the canonical rules from a specified source URL, parses the definitions, and applies them directly to your provided files.

Related Skills

Explore More Design & Creative Skills→

hayatosc

web-design-guidelines

Review HTML, CSS, and JavaScript files against Web Interface Guidelines and accessibility rules.

Community

Intermediate

krzemienski

web-design-guidelines

Validate UI code against Web Interface Guidelines for accessibility and consistency.

Community

Intermediate

ydnikolaev

ux-designer

Build cohesive design systems and token libraries for web and mobile projects.

Community

Intermediate

zeronx798

dogfood

Navigate web pages and interact with DOM elements to detect functional, visual, accessibility issues via browser snapshots and console error monitoring, producing structured bug reports.

Community

Advanced