web-design-guidelines

Analyzes HTML, CSS, and JavaScript files against Web Interface Guidelines for accessibility, usability, and consistency.

1.7k|471|Updated Feb 1, 2025

Search Tags:#accessibility #frontend #usability #design-review #web-standards #UI-guidelines

Ready to run

npx skills add https://github.com/revokslab/ShipFree --skill web-design-guidelines-revokslab

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/revokslab/ShipFree/tree/main/.cursor/skills/web-design-guidelines
Command: npx skills add https://github.com/revokslab/ShipFree --skill web-design-guidelines-revokslab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure UI code adheres to established Web Interface Guidelines, catching accessibility, usability, and consistency issues early in the review process.

Core Features & Use Cases

Guideline-based reviews: Compare UI files against up-to-date web interface rules for accessibility, semantic structure, and visual consistency.
Automated checks: Identify common frontend pitfalls that affect usability and accessibility.
Use Case: When asked to review my UI or audit design, provide actionable findings and prioritized fixes.

Quick Start

Provide the path to the UI files or code patterns to review. Example: review all files matching index.html, components/, or pages/.

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 usability issues?▼

You can audit your UI by providing paths to HTML, CSS, and JavaScript files or code patterns. The skill fetches current Web Interface Guidelines and analyzes the code to produce concise per-file accessibility and usability findings.

What is a UI design review against web standards?▼

A UI design review against web standards compares frontend code to rules for accessibility, semantic structure, and visual consistency. This skill fetches the latest guidelines via WebFetch and applies them to your provided UI files.

Can I check my website's frontend code for accessibility compliance automatically?▼

Yes, you can check frontend accessibility automatically by providing paths to your UI files. The skill evaluates HTML, CSS, and JavaScript against the latest Web Interface Guidelines to identify common accessibility and usability pitfalls.

Does this UI review work with raw HTML and CSS files?▼

Yes, this UI review works with raw HTML, CSS, and JavaScript files. You provide the file paths or code patterns, and it applies web interface rules directly to the code to detect accessibility and usability gaps.

How do I check my site against best practices for UX consistency?▼

To check your site against best practices for UX consistency, provide your UI file paths for review. The skill fetches current web interface guidelines and produces actionable findings highlighting frontend pitfalls affecting visual consistency.