skills.rest
SeemSeam
SeemSeamCOMMUNITY
Explore all skills by this author →
GitHub

responsive-accessibility

Evaluate UI design files for responsiveness and accessibility compliance.

17|2|Updated Jun 2, 2026
Search Tags:#keyboard navigation#ARIA#responsive design#focus management#semantic labeling#UI accessibility
One-click install
npx skills add https://github.com/SeemSeam/agent-roles-spec --skill responsive-accessibility-seemseam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-accessibility
Source: https://github.com/SeemSeam/agent-roles-spec/tree/main/roles/frontend-engineer/skills/responsive-accessibility
Command: npx skills add https://github.com/SeemSeam/agent-roles-spec --skill responsive-accessibility-seemseam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers ensure their user interfaces are responsive and accessible, providing guidelines and checks for various UI components and interaction behaviors.

Core Features & Use Cases

  • Review responsive design: Analyze UI elements for compatibility across different viewport sizes.
  • Check accessibility: Evaluate UI elements for proper semantic labels, focus states, and ARIA usage.
  • Use Case: Utilize this skill to ensure a form can be navigated and filled out using a keyboard and assistive technologies.

Quick Start

Analyze accessibility issues in the design system 'ui-design-system.md'.

Frequently Asked Questions about responsive-accessibility

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

FAQPage Schema
How do I check UI accessibility and responsive design in my design files?▼

To check UI accessibility and responsive design, you can evaluate UI elements for proper semantic labels, focus states, and ARIA usage across different viewport sizes. This ensures compliance with modern web accessibility guidelines and usability for diverse user demographics.

What is focus management and semantic labeling for UI accessibility?▼

Focus management and semantic labeling are UI accessibility practices that ensure interactive elements are navigable and understandable. They involve evaluating UI components to guarantee forms can be navigated and filled out using keyboard navigation and assistive technologies.

How do I ensure keyboard navigation and ARIA usage work in responsive UI components?▼

Keyboard navigation and ARIA usage in responsive UI components are ensured by reviewing interaction behaviors and checking UI elements. This process analyzes compatibility across different viewport sizes while verifying that accessibility standards are met for assistive technologies.

Can I use this to review a design system for compliance with web accessibility guidelines?▼

Yes, you can review a design system for compliance with web accessibility guidelines by analyzing its UI elements. The skill evaluates the system for semantic labels, focus states, and ARIA usage to ensure usability across diverse user demographics.

What's the best way to evaluate forms for assistive technologies and keyboard navigation?▼

The best way to evaluate forms for assistive technologies is to analyze UI elements for proper focus management and semantic labels. This ensures the form can be fully navigated and filled out using only keyboard navigation and screen readers.

Related Skills

Explore More Design & Creative Skills→
GeargrindadminGeargrindadmin

eval-ui-ux

Evaluate UI/UX for design system adherence, visual consistency, and accessibility.

Community
Advanced
TehminanazTehminanaz
1

frontend-component-architect

Design and implement pixel-perfect UI components for Next.js 16 with Tailwind CSS and Shadcn UI.

Community
Advanced
somachaksomachak

building-accessible-ui

Audit React/TypeScript UI components for accessibility, semantics, and keyboard navigation.

Community
Advanced
lilbom32lilbom32

accessibility-review

Identify WCAG 2.1 AA compliance gaps in designs and frontend code.

Community
Advanced