skills.rest
brunoamaral
brunoamaralCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Enforce WCAG accessibility and responsive design guidelines for HTML/CSS/JS web UI.

Updated Feb 2, 2026
Search Tags:#accessibility#WCAG#i18n#responsive-design#dark-mode#web-design#semantic-html
One-click install
npx skills add https://github.com/brunoamaral/playlister --skill web-design-guidelines-brunoamaral
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/brunoamaral/playlister/tree/main/.copilot/skills/web
Command: npx skills add https://github.com/brunoamaral/playlister --skill web-design-guidelines-brunoamaral

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web teams struggle to align on consistent accessibility, responsive design, and performance guidelines across projects. This Skill consolidates WCAG-based rules, semantic HTML patterns, and theming practices into a single reference.

Core Features & Use Cases

  • Accessibility & WCAG guidance: Semantic HTML, ARIA best practices, keyboard navigation, visible focus, alt text, skipping navigation.
  • Responsive design & theming: Mobile-first approach, fluid typography, container queries, dark mode, and CSS custom properties for theming.
  • Performance & internationalization: Lazy loading, image dimensions, resource hints, code-splitting, RTL support, and Intl-based formatting.
  • Use Case: A front-end team audits a new landing page for accessibility, then implements dark mode and responsive typography to support mobile users.

Quick Start

Review an HTML/CSS snippet and apply the guidelines to improve accessibility and responsiveness.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I make my web UI accessible and meet WCAG criteria?▼

Make your web UI accessible by applying semantic HTML, ARIA best practices, and keyboard navigation guidelines to meet WCAG criteria for visible focus, alt text, and skipping navigation.

How do I implement responsive design and dark mode using CSS custom properties?▼

Implement responsive design and dark mode by using a mobile-first approach, fluid typography, container queries, and CSS custom properties for theming to support mobile users.

What is the best way to add RTL support and internationalization to an HTML/CSS project?▼

Add RTL support and internationalization by applying guidelines for RTL layout and Intl-based formatting to ensure text displays correctly across different languages.

Does this web design guideline work with framework-agnostic HTML/CSS/JS tasks?▼

Yes, these web design guidelines apply to framework-agnostic HTML/CSS/JS tasks, covering semantic HTML, ARIA patterns, responsive design, and theming without framework dependencies.

How do I audit a landing page for accessibility and responsive typography?▼

Audit a landing page for accessibility by reviewing HTML/CSS snippets against WCAG rules, then implementing dark mode and responsive typography to support mobile users.

Related Skills

Explore More Design & Creative Skills→
wanghaishengwanghaisheng
10

web-design-guidelines

Codify accessible, responsive web design guidelines for HTML/CSS/JS projects.

Community
Advanced
ancolemanancoleman
503

theming-components

Manage design tokens and switch themes with CSS custom properties.

Community
Advanced
sigmadigitalzasigmadigitalza
1

frontend-accessibility-review

Audit web frontends for WCAG 2.2 AA conformance with static and live checks.

Official
Advanced
lemulemu

web-component-design

Design portable component APIs across React, Vue, and Svelte.

Community
Advanced