web-design-guidelines

Name: web-design-guidelines
Availability: InStock
Author: Tien

Check HTML, CSS, and JS files for design and accessibility compliance.

Updated Feb 25, 2025

Search Tags:#ui #accessibility #compliance #guidelines #web

Ready to run

npx skills add https://github.com/VuNguyenVietTien/task-scheduler --skill web-design-guidelines-vunguyenviettien

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/VuNguyenVietTien/task-scheduler/tree/main/.opencode/skills/web-design-guidelines
Command: npx skills add https://github.com/VuNguyenVietTien/task-scheduler --skill web-design-guidelines-vunguyenviettien

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires web-fetch, and includes references (resource) components.

What problem does it solve?

This Skill helps developers and designers verify that their web interfaces adhere to established design and accessibility best practices, reducing errors and improving user experience.

Core Features & Use Cases

Design Compliance Checks: Automatically review HTML, CSS, and JS files to ensure they follow industry standards.
Accessibility Auditing: Identify accessibility issues such as contrast, ARIA labels, and semantic HTML.
Use Case: A team preparing a website for launch can run this Skill to catch visual or usability issues that violate web standards before deployment.

Quick Start

Use the web-design-guidelines skill to review your project's webpage files and ensure they meet best practices.

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

You can audit web accessibility by running automated checks on your HTML, CSS, and JS files to identify issues like missing ARIA labels, poor contrast, and non-semantic HTML structures. This ensures your interfaces adhere to established design standards.

What is the best way to review UI code for design guidelines before a website launch?▼

The best way to review UI code for design guidelines is to automatically scan your project files against fetched industry standards. This catches visual and usability issues early, facilitating faster reviews and ensuring a higher quality site launch.

Can I use fetched external URLs to verify up-to-date web design standards?▼

Yes, you can verify up-to-date web design standards by fetching rules from an external URL. This ensures your compliance checks run against accurate, current rules rather than outdated static configurations.

Does this design compliance check work with JavaScript files or only HTML and CSS?▼

The design compliance check works with JavaScript files alongside HTML and CSS. It analyzes your project's webpage files comprehensively to identify real-time UI and accessibility issues across all three frontend technologies.

What specific web accessibility issues can an automated UI audit identify?▼

An automated UI audit can identify web accessibility issues such as insufficient color contrast, missing ARIA labels, and improper use of semantic HTML. It reviews your code against fetched guidelines to highlight these specific violations.