skills.rest
kleon6436
kleon6436COMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-ui-guidelines

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
One-click install
npx skills add https://github.com/kleon6436/GitHubCopilotSettings --skill web-ui-guidelines
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
JaivishChauhanJaivishChauhan

frontend-development

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

Community
Advanced
guia-matthieuguia-matthieu
145

lighthouse-audit

Automate Google Lighthouse audits for Core Web Vitals, SEO, and accessibility metrics.

Community
Intermediate
qazz92qazz92

visual-design

Create reusable UI components with ARIA attributes and keyboard navigation.

Community
Intermediate
thiagoooo34252thiagoooo34252
1

engineer-accessibility

Scan web applications for WCAG 2.2 violations using axe-core.

Community
Advanced