web-design-guidelines

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

Updated Feb 17, 2026

Search Tags:#ui #accessibility #audit #review #guidelines #web

Ready to run

npx skills add https://github.com/heykaran77/launchify-ai --skill web-design-guidelines-heykaran77

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/heykaran77/launchify-ai/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/heykaran77/launchify-ai --skill web-design-guidelines-heykaran77

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers and designers validate UI code against a centralized set of web interface guidelines to ensure accessibility, consistency, and usability.

Core Features & Use Cases

Fetches the latest guidelines from the source URL and uses WebFetch to apply them to target files.
Compares HTML, CSS, and JavaScript artifacts against the guidelines and reports non-conformant patterns.
Use Case: Review a project’s public UI to identify accessibility gaps and styling inconsistencies before release.

Quick Start

Review the provided UI files 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 audit my UI code for accessibility and contrast violations?▼

To audit UI code for accessibility and contrast violations, provide your HTML, CSS, and JavaScript files to the evaluator. It fetches the latest Web Interface Guidelines and reports non-conformant patterns in a concise file:line style.

Can I review a single UI component for web design guideline compliance?▼

Yes, you can review a single UI component for web design guideline compliance. The evaluation applies checks for semantics, contrast, and responsiveness across project scopes ranging from individual components to full pages.

What is the best way to check web responsiveness and semantics before release?▼

The best way to check web responsiveness and semantics before release is to compare your project artifacts against a centralized set of web interface guidelines. This identifies accessibility gaps and styling inconsistencies across your HTML and CSS.

Does the web design guideline audit fetch current accessibility rules automatically?▼

Yes, the web design guideline audit fetches current accessibility rules automatically. It retrieves the latest guidelines from the source URL using WebFetch before applying the evaluation checks to your target files.

How do I get UI review results formatted by file and line number?▼

To get UI review results formatted by file and line number, run the audit against your project files. The evaluator outputs identified design violations in a concise file:line style for easy tracking and resolution.