skills.rest
Asylcreek
AsylcreekCOMMUNITY
Explore all skills by this author →
𝕏@acrysleekGitHub

web-interface-guidelines

Apply ARIA/APG-aligned accessibility and performance guidelines to web interface design.

Updated Sep 7, 2024
Search Tags:#design#ui#performance#accessibility#a11y#ux#keyboard
One-click install
npx skills add https://github.com/Asylcreek/home-manager --skill web-interface-guidelines-asylcreek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-interface-guidelines
Source: https://github.com/Asylcreek/home-manager/tree/main/dots/agents/skills/web-interface-guidelines
Command: npx skills add https://github.com/Asylcreek/home-manager --skill web-interface-guidelines-asylcreek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides comprehensive guidelines to help teams design accessible, fast, and delightful web interfaces.

Core Features & Use Cases

  • Accessible keyboard navigation and focus management guidelines for all components
  • Performance-minded design recommendations and responsive layout patterns
  • Practical use cases showing how to apply guidelines in real UI scenarios

Quick Start

Review the guidelines early in project planning to ensure accessible, performant, and consistent web interfaces across components.

Frequently Asked Questions about web-interface-guidelines

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

FAQPage Schema
What are the guidelines for accessible keyboard navigation and focus management?▼

Accessible keyboard navigation guidelines ensure all interactive components are operable via keyboard with proper focus management. This includes rules for focus order, visible focus indicators, and handling focus traps within dialogs or menus aligned with ARIA/APG standards.

How do I design web interfaces that are both accessible and high-performance?▼

Design accessible and performant web interfaces by applying comprehensive rules for keyboard, forms, layout, and animation. The guidelines integrate ARIA/APG accessibility standards with performance best practices to create fast, delightful user experiences.

What's the best way to plan responsive layouts for high-performance UIs?▼

Plan responsive layouts using performance-minded design recommendations and layout patterns provided by the guidelines. These patterns ensure interfaces remain accessible and responsive across various devices while maintaining optimal loading performance.

Does this cover ARIA and APG standards for UI component accessibility?▼

Yes, the guidelines are explicitly aligned with ARIA/APG standards. They provide comprehensive rules covering keyboard interaction, focus management, forms, and theming to ensure components meet accessibility patterns defined by the W3C.

When should I apply accessibility and performance guidelines in my workflow?▼

Review the guidelines early in project planning to ensure accessible, performant, and consistent web interfaces across components. Applying them during the design phase prevents costly accessibility and performance regressions during development.

Related Skills

Explore More Design & Creative Skills→
trycompaitrycompai
1.8k

ui

Enforce design-system tokens, theming, and accessible component patterns in React/TS frontend development.

Official
Intermediate
89jobrien89jobrien
4

web-accessibility

Audit web content for WCAG 2.1/2.2 conformance and accessibility issues.

Community
Advanced
Arnutt-NArnutt-N

accessibility-helper

Provide WCAG-compliant accessibility utilities, components, and hooks for HR-IMS frontends.

Community
Advanced
jlawsjlaws
2

agent-frontend-engineer

Design accessible, responsive UI components for frontend frameworks like React, Next.js, and Vue.

Community
Advanced