skills.rest
VuNguyenVietTien
VuNguyenVietTienCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

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

Updated Feb 25, 2025
Search Tags:#ui#accessibility#compliance#guidelines#web
One-click install
npx skills add https://github.com/VuNguyenVietTien/task-scheduler --skill web-design-guidelines-vunguyenviettien
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
alissonmds00alissonmds00

web-design-guidelines

Audit web interface code for design and accessibility guideline compliance.

Community
Basic
OneWave-AIOneWave-AI
245

screenshot-to-code

Convert UI screenshots into responsive HTML, CSS, React, or Vue code.

Official
Advanced
nanorepublicananorepublica
61

Frontend Accessibility

Enforce frontend accessibility compliance in HTML, CSS, and JavaScript components.

Community
Basic
c15tc15t
1.8k

web-design-guidelines

Review HTML and CSS files for web interface guideline compliance.

Official
Intermediate