skills.rest
MeltedMindz
MeltedMindzCOMMUNITY
Explore all skills by this author →
𝕏@MeltedMindzGitHub

Web Design Guidelines

Apply UI/UX quality guidelines to audit website components for accessibility.

Updated Aug 27, 2026
Search Tags:#design#accessibility#semantic HTML#web design#UI guidelines#UX audit
One-click install
npx skills add https://github.com/MeltedMindz/AppFactory --skill web-design-guidelines-meltedmindz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Web Design Guidelines
Source: https://github.com/MeltedMindz/AppFactory/tree/main/website-pipeline/skills/web-design-guidelines
Command: npx skills add https://github.com/MeltedMindz/AppFactory --skill web-design-guidelines-meltedmindz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured set of UI/UX quality guidelines to ensure accessible, polished websites, reducing design review time and improving user experience.

Core Features & Use Cases

  • Accessibility-first checks: semantic HTML, keyboard navigation, focus management, color contrast, and responsive design.
  • Form & interaction quality: accessible forms, clear error states, and consistent typography.
  • Usage example: during design review, apply guidelines to audit a new signup flow and surface accessibility issues.

Quick Start

Review the Web Design Guidelines and apply the recommended rules to your next web component during the build and audit phases.

Frequently Asked Questions about Web Design Guidelines

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

FAQPage Schema
What UI/UX guidelines should I check for accessible web design?▼

Accessible web design guidelines include semantic HTML structure, keyboard navigation, focus management, color contrast, and responsive design checks. These rules ensure components are usable across different interaction modes and devices.

How do I audit a website for accessibility and form interaction quality?▼

Conduct a UX audit by applying structured checks to forms, error states, and keyboard navigation. Review components for consistent typography and accessible interaction patterns during the build and review phases.

Do I need external tools to check semantic HTML and color contrast?▼

No external tools are required to check semantic HTML and color contrast. The guidelines can be referenced directly during a design review to surface accessibility issues without running additional software.

What is the best way to review a signup flow for accessibility issues?▼

The best way to review a signup flow is applying accessibility-first checks to form fields, error states, and focus management. This surfaces interaction barriers and ensures clear, usable form validation.

How do I ensure consistent website polish and typography during component development?▼

Ensure website polish by applying structured UI guidelines for consistent typography, animation, and error states during component development. This reduces design review time and improves overall user experience.

Related Skills

Explore More Design & Creative Skills→
Avi977Avi977

web-design-guidelines

Audit web UI for accessibility and design consistency across HTML/CSS/JS projects.

Community
Intermediate
kmshihab7878kmshihab7878
6

fixing-accessibility

Fix accessibility issues in web UI components with WCAG-compliant code suggestions.

Community
Intermediate
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
aroidoaroido

accessibility-audit

Audit web components for WCAG 2.1 AA accessibility issues.

Official
Intermediate