skills.rest
mkhsu2002
mkhsu2002COMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Apply modern web design principles to improve UI consistency across responsive layouts and accessibility.

1|Updated Jan 31, 2026
Search Tags:#design#accessibility#frontend#responsive#web-design#ui-patterns
One-click install
npx skills add https://github.com/mkhsu2002/elitefashiontw --skill web-design-guidelines-mkhsu2002
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mkhsu2002/elitefashiontw/tree/main/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/mkhsu2002/elitefashiontw --skill web-design-guidelines-mkhsu2002

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modern web design decisions can be time-consuming and error-prone without a clear framework for accessibility and responsiveness.

Core Features & Use Cases

  • Accessibility-focused layout rules for keyboard navigation and screen reader compatibility
  • Responsive design patterns that adapt to breakpoints and devices
  • Visual hierarchy guidance for typography, spacing, and color contrast

Quick Start

Assess a page's layout and propose responsive, accessible improvements.

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 interface responsive and accessible across different devices?▼

Improve web interface accessibility and responsiveness by applying layout rules for keyboard navigation, screen reader compatibility, and visual hierarchy. This framework adapts UI patterns seamlessly across multiple devices and user contexts.

What is the best way to structure visual hierarchy for typography and spacing in web design?▼

Establish visual hierarchy in web design using modern principles that standardize typography, spacing, and color contrast. This framework prevents layout inconsistencies and ensures accessible component composition across interfaces.

How do I implement keyboard navigation and screen reader compatibility for UI components?▼

Achieve keyboard navigation and screen reader compatibility by composing accessible components with semantic HTML. This approach ensures frontend layouts meet modern accessibility standards across various user contexts and devices.

Does this web design approach work for both marketing pages and product dashboards?▼

Yes, these web design guidelines apply to product interfaces, marketing pages, and dashboards. The responsive design patterns and accessibility-focused rules adapt effectively across various breakpoints, devices, and user contexts.

Why does my responsive layout break at different screen breakpoints?▼

Responsive layouts break without clear visual hierarchy and breakpoint rules. Applying modern web design principles ensures your UI adapts correctly across devices, resolving layout inconsistencies and maintaining accessibility standards.

Related Skills

Explore More Design & Creative Skills→
calcosmiccalcosmic
9

html-css

Enforce semantic HTML, ARIA, color contrast, and flat CSS architecture.

Community
Intermediate
RhettArkRhettArk

UI/UX Specialist

Design accessible, responsive UI components with semantic HTML and ARIA labeling.

Community
Basic
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
wojonswojons
4

testing-accessibility

Test web applications for WCAG compliance using automated tools.

Community
Intermediate