skills.rest
noodelskun
noodelskunCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Provide web design and accessibility guidelines based on WCAG 2.2 standards.

Updated Mar 4, 2026
Search Tags:#performance#html#accessibility#responsive design#css#wcag#web design
One-click install
npx skills add https://github.com/noodelskun/test-skill --skill web-design-guidelines-noodelskun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/noodelskun/test-skill/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/noodelskun/test-skill --skill web-design-guidelines-noodelskun

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive set of guidelines and best practices to ensure web interfaces are accessible, responsive, performant, and adhere to modern web standards.

Core Features & Use Cases

  • Accessibility Auditing: Ensure compliance with WCAG 2.2 standards for users with disabilities.
  • Responsive Design: Implement mobile-first, fluid layouts that adapt to any screen size.
  • Performance Optimization: Apply techniques to improve load times and reduce layout shifts.
  • Use Case: When developing a new e-commerce product page, use this Skill to ensure all interactive elements are keyboard accessible, images have alt text, and the layout adapts seamlessly from mobile to desktop.

Quick Start

Review the accessibility rules for semantic HTML elements.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
What are the WCAG 2.2 accessibility requirements for web forms?▼

WCAG 2.2 accessibility guidelines require semantic HTML elements, proper label associations, and keyboard navigation for web forms to ensure interfaces are usable for individuals with disabilities.

How do I implement responsive design that adapts to any screen size?▼

Responsive design implementation uses mobile-first, fluid CSS layouts that adapt seamlessly to any screen size, ensuring web interfaces scale correctly from mobile devices to desktop viewports.

How do I optimize web performance and reduce layout shifts?▼

Web performance optimization techniques reduce layout shifts and improve load times by applying modern web platform standards for HTML, CSS, and JavaScript delivery.

Does this web design guidance work without specific frontend frameworks?▼

These web design guidelines are framework-agnostic, providing standards based on MDN Web Docs and WCAG 2.2 that apply directly to HTML, CSS, and JavaScript without requiring specific dependencies.

What is the best way to audit a web interface for accessibility compliance?▼

The best way to audit web accessibility compliance is using an evaluation checklist against WCAG 2.2 standards, covering semantic HTML, keyboard access, and alternative text for interactive elements.

When do I need to consider dark mode and touch interaction in web design?▼

Dark mode and touch interaction guidelines are needed when developing modern web interfaces, ensuring CSS adapts to user preferences and HTML targets appropriate touch sizes for mobile devices.

Related Skills

Explore More Design & Creative Skills→
adryanevadryanev
2

web-design-guidelines

Audit HTML, CSS, and JavaScript files for Web Interface Guidelines violations.

Community
Intermediate
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced
JaivishChauhanJaivishChauhan

frontend-development

Build responsive web interfaces with semantic HTML, CSS, and TypeScript.

Community
Advanced
Dev-Dennis-040Dev-Dennis-040
10

testing-accessibility-auditor

Audit web interfaces for WCAG 2.2 AA conformance and ARIA compliance.

Community
Advanced