web-design-guidelines

Review web interface designs for responsive layout, accessibility, and visual hierarchy.

Updated Feb 15, 2026
One-click install
npx skills add https://github.com/ricable/mcai --skill web-design-guidelines-ricable
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ricable/mcai/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/ricable/mcai --skill web-design-guidelines-ricable

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams make web interfaces easier to use by improving responsive layout, accessibility, and visual hierarchy.

Core Features & Use Cases

  • Responsive Layout Guidance: Choose spacing, structure, and breakpoints that adapt cleanly across screen sizes.
  • Accessibility Improvements: Apply practical UI patterns that support readable content, keyboard use, and inclusive interaction.
  • Visual Hierarchy Decisions: Organize content, emphasis, and flow so users can quickly understand what matters most.
  • Use Case: A product team can use this Skill to review a landing page, tighten the layout, and make key calls to action more discoverable on mobile and desktop.

Quick Start

Ask for a review of your web page design with recommendations for responsive layout, accessibility fixes, and clearer visual hierarchy.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I improve visual hierarchy in web design?

To improve visual hierarchy in web design, organize content emphasis and flow so users can quickly understand what matters most. This involves structuring spacing, contrast, and content order to guide user attention effectively across application screens and marketing sites.

What is the best way to make a responsive layout adapt cleanly across screen sizes?

The best way to achieve a responsive layout is to choose spacing, structure, and breakpoints that adapt cleanly across screen sizes. This ensures your web interface maintains strong usability and structure on both mobile and desktop devices.

How do I apply accessibility improvements to a web interface?

Apply accessibility improvements to a web interface by using practical UI patterns that support readable content, keyboard use, and inclusive interaction. This ensures your product pages and dashboards are usable by people with diverse needs.

Can I review a landing page for better usability on mobile and desktop?

Yes, you can review a landing page for better usability by tightening the responsive layout and making key calls to action more discoverable on mobile and desktop. This process clarifies visual hierarchy and improves accessibility for modern front-end implementation.

When do I need specific breakpoints for responsive web design?

You need specific breakpoints for responsive web design when your layout must adapt cleanly across varying screen sizes to maintain structure and content emphasis. Selecting proper breakpoints ensures the interface remains readable and usable on different devices.