skills.rest
docaohieu2808
docaohieu2808COMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Reviews HTML, CSS, and JavaScript UI code for Web Interface Guidelines compliance.

1|Updated Mar 9, 2026
Search Tags:#accessibility#compliance#web design#frontend development#guidelines#ui code review
One-click install
npx skills add https://github.com/docaohieu2808/claude-skills --skill web-design-guidelines-docaohieu2808
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/docaohieu2808/claude-skills/tree/main/web-design-guidelines
Command: npx skills add https://github.com/docaohieu2808/claude-skills --skill web-design-guidelines-docaohieu2808

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python3, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps ensure that your web interface code adheres to established design and accessibility guidelines, preventing common mistakes before deployment.

Core Features & Use Cases

  • Accessibility Auditing: Checks for missing alt attributes, poor color contrast, and lack of keyboard navigation support.
  • Best Practice Compliance: Verifies against semantic HTML, responsive design, and performance best practices.
  • Use Case: Before launching a new feature, run this Skill on the component's code to catch potential accessibility issues and ensure it aligns with your team's design system.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.tsx'.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I review UI code for accessibility and responsiveness compliance?▼

To review UI code for accessibility and responsiveness compliance, you can scan HTML, CSS, and JavaScript files against predefined web design guidelines to identify violations like missing alt attributes or poor color contrast.

What web design guidelines are checked during a UI code audit?▼

A UI code audit checks web design guidelines focusing on accessibility, semantic HTML structure, responsive design, performance best practices, and keyboard navigation support to prevent common frontend development mistakes.

Can I scan specific component files for web interface compliance?▼

Yes, you can perform file or pattern-based scanning to audit specific UI components like a Button.tsx file, ensuring the targeted frontend code meets established web interface guidelines before deployment.

Do I need Python to check frontend code against web design guidelines?▼

Yes, you need Python3 installed in your environment to run the scripts that review your frontend code and verify its compliance with web interface design and accessibility standards.

What is the best way to catch accessibility issues in HTML and CSS before launch?▼

The best way to catch accessibility issues in HTML and CSS before launch is to run an automated UI code review that detects missing semantic HTML, poor color contrast, and lack of keyboard navigation support.

Related Skills

Explore More Design & Creative Skills→
memorysavermemorysaver

web-design-guidelines

Audit frontend HTML/CSS/JS files against Web Interface Guidelines and output file:line remediation findings.

Community
Basic
petbrainspetbrains
13

frontend-design-review

Review frontend UI/UX designs for accessibility and responsive behavior.

Official
Basic
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
HouseofmvpsHouseofmvps
115

a11y

Detect and fix deterministic WCAG 2.2 A/AA accessibility violations in HTML files.

Community
Advanced