web-ui-guidelines

Name: web-ui-guidelines
Availability: InStock
Author: KLeon

Define web UI guidelines for accessible, semantic, performant HTML, CSS, React, and Vue components.

Updated Apr 13, 2026

Search Tags:#accessibility #responsive-design #semantic-html #web-ui #aria #core-web-vitals #css-architecture

Ready to run

npx skills add https://github.com/kleon6436/GitHubCopilotSettings --skill web-ui-guidelines

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-ui-guidelines
Source: https://github.com/kleon6436/GitHubCopilotSettings/tree/main/skills/web-ui-guidelines
Command: npx skills add https://github.com/kleon6436/GitHubCopilotSettings --skill web-ui-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill defines practical Web UI guidelines to ensure accessibility, semantic HTML, responsive design, and performance best practices for modern web apps.

Core Features & Use Cases

Semantic HTML-first approach with recommended elements like <nav>, <main>, <article>, <section>, <header>, and <footer>.
Accessibility, WCAG 2.2 AA compliance, ARIA usage, focus management, and keyboard navigation.
Performance and CSS architecture guidance including container queries, logical properties, responsive design, and Core Web Vitals optimization.

Quick Start

Apply these guidelines when designing or auditing web UI components to ensure accessibility, semantics, and performance.

Frequently Asked Questions about web-ui-guidelines

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

FAQPage Schema

What are the web UI guidelines for ensuring accessibility and WCAG 2.2 AA compliance?▼

Web UI guidelines for accessibility require semantic HTML elements like <main> and <nav>, proper ARIA usage, focus management, and keyboard navigation to meet WCAG 2.2 AA compliance across modern web interfaces.

How do I optimize Core Web Vitals using CSS architecture and responsive design?▼

Optimize Core Web Vitals by applying CSS architecture best practices, utilizing container queries and logical properties for responsive design, and prioritizing semantic structure to reduce layout shifts and improve loading performance.

Can I apply these web UI guidelines to audit React and Vue components?▼

Yes, you can apply these web UI guidelines to audit React and Vue components. They cover semantic HTML, ARIA implementation, and responsive design specifically for modern component-based web applications.

When should I use semantic HTML elements over generic divs for web accessibility?▼

Use semantic HTML elements like <header>, <footer>, <article>, and <section> instead of generic divs to provide inherent accessibility roles, improve screen reader navigation, and ensure logical document structure.

What is the best way to manage keyboard navigation and focus in accessible web applications?▼

Manage keyboard navigation and focus by ensuring logical tab order, visible focus indicators, and proper ARIA roles. These web UI guidelines ensure interfaces are fully operable without a mouse.

Does responsive design with container queries improve Core Web Vitals metrics?▼

Yes, responsive design using container queries improves Core Web Vitals by enabling component-level responsiveness, reducing layout shifts, and optimizing rendering performance across different viewport sizes.