skills.rest
kunai-consulting
kunai-consultingOFFICIAL
Explore all skills by this author →
WebsiteGitHub

component-research

Analyze headless UI libraries and accessibility specifications for component research.

Updated Aug 23, 2026
Search Tags:#research#accessibility#screen reader#ui components#headless ui#wai-aria
One-click install
npx skills add https://github.com/kunai-consulting/qwik-design-system --skill component-research
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-research
Source: https://github.com/kunai-consulting/qwik-design-system/tree/main/.ruler/skills/component-research
Command: npx skills add https://github.com/kunai-consulting/qwik-design-system --skill component-research

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of researching UI component accessibility patterns, API designs, and screen reader behavior, ensuring robust and inclusive component development.

Core Features & Use Cases

  • Headless Library Analysis: Compares accessibility features across popular headless UI libraries (React Aria, Ark UI, Melt UI, etc.).
  • Accessibility Specification Review: Consults WAI-ARIA, WCAG, and expert resources for best practices.
  • Screen Reader Behavior Documentation: Records expected announcements for VoiceOver and NVDA.
  • API Design Research: Documents component structure and props for consistent implementation.
  • Use Case: Before building a new Accordion component, use this Skill to research how React Aria and Ark UI handle its accessibility, keyboard navigation, and ARIA attributes, then document findings in a research.mdx file.

Quick Start

Research the accessibility patterns and API design for the 'modal' component.

Frequently Asked Questions about component-research

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

FAQPage Schema
How do I research UI component accessibility patterns for headless libraries?▼

Research UI component accessibility by analyzing headless UI libraries like React Aria and Ark UI to compare ARIA attributes, keyboard navigation, and API design. This Skill documents findings in Markdown or MDX files to guide implementation.

What screen reader behavior should I document for WAI-ARIA compliance?▼

Screen reader behavior for WAI-ARIA compliance includes expected VoiceOver and NVDA announcements for UI components. This Skill uses agent-browser and Guidepup to automate research and record keyboard interactions and ARIA attributes.

How do I compare accessibility features across React Aria, Ark UI, and Melt UI?▼

Compare accessibility features across React Aria, Ark UI, and Melt UI by analyzing their headless component implementations. This Skill reviews WAI-ARIA and WCAG specifications to document differences in keyboard navigation and ARIA patterns.

Do I need agent-browser and Guidepup to test keyboard interactions and ARIA attributes?▼

Agent-browser and Guidepup are required for automated research and analysis of keyboard interactions and ARIA attributes. These tools enable the Skill to capture screen reader behavior and verify accessibility patterns during component research.

What's the best way to document component API design and accessibility specifications?▼

Document component API design and accessibility specifications by compiling research into Markdown or MDX files. This Skill structures findings on component props, WAI-ARIA best practices, and screen reader expectations for implementation guidance.

Can I use this to research accessibility patterns before building a custom component?▼

You can research accessibility patterns before building custom components by analyzing how existing headless UI libraries handle them. The Skill outputs structured MDX documentation of ARIA attributes, keyboard navigation, and API design for implementation reference.

Related Skills

Explore More Software Engineering Skills→
samjhechtsamjhecht
4

frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

Community
Advanced
t-stringst-strings

Frontend Accessibility

Review frontend UI code for HTML semantics, ARIA, keyboard navigation, and contrast.

Official
Basic
AmidVoshakulAmidVoshakul

radix-ui-design-system

Build accessible design systems with Radix UI headless primitives.

Community
Advanced
duanbiao2000duanbiao2000
3

screen-reader-testing

Test web app screen-reader compatibility using VoiceOver, NVDA, and JAWS.

Community
Intermediate