web-interface-guidelines

Enforce accessibility, usability, and performance guidelines for web interfaces.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/dereknex/skills --skill web-interface-guidelines-dereknex
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-interface-guidelines
Source: https://github.com/dereknex/skills/tree/main/web-interface-guidelines
Command: npx skills add https://github.com/dereknex/skills --skill web-interface-guidelines-dereknex

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide concrete MUST/SHOULD/NEVER rules to guide the design, review, and implementation of web interfaces, ensuring accessibility, usability, performance, and cohesive visual design across products.

Core Features & Use Cases

  • Comprehensive rules for keyboard navigation, focus management, forms, navigation, motion, layout, content, and performance.
  • Useful for product designers, frontend engineers, and product managers to review and implement UI decisions in real-world projects.
  • Use Case: Conduct a design critique of a new dashboard to verify compliance with ARIA patterns and responsive behavior.

Quick Start

Apply the MUST/SHOULD/NEVER guidelines to your current web UI design review or implementation task.

Frequently Asked Questions about web-interface-guidelines

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

FAQPage Schema
How do I enforce accessibility guidelines during a web interface design review?

Enforce web interface accessibility guidelines by applying concrete MUST, SHOULD, and NEVER rules across keyboard, forms, layout, and motion domains. This validates ARIA best practices, responsiveness, and safe-area awareness during UI implementation and component audits.

What are the MUST, SHOULD, and NEVER rules for web interface usability?

Web interface usability rules define strict requirements for keyboard navigation, focus management, and content layout. They specify actions you must take for ARIA compliance, should take for optimal interaction design, and never take to avoid breaking accessibility constraints.

Can I use these design guidelines to audit frontend component responsiveness?

Yes, you can use these design guidelines to audit frontend component responsiveness. They support explicit interaction constraints and safe-area awareness, verifying that components adapt correctly across screen sizes during a UI component audit.

How do I check ARIA best practices in a dashboard design critique?

Check ARIA best practices in a dashboard design critique by validating focus management, navigation, and form interactions against established MUST and NEVER rules. This ensures your dashboard satisfies accessibility, usability, and performance guidelines.

What is the best way to manage focus and keyboard navigation in web UI?

The best way to manage focus and keyboard navigation is to apply explicit interaction constraints that enforce proper tab order and focus visibility. Following these MUST and SHOULD rules prevents usability failures and aligns with comprehensive accessibility standards.

Are there limitations to using standard design guidelines for safe-area awareness?

Standard design guidelines often lack explicit constraints for safe-area awareness, but these rules include safe-area handling. Limitations arise only if your UI implementation bypasses the recommended MUST and SHOULD responsive behavior and layout checks.