skills.rest
holblin
holblinCOMMUNITY
Explore all skills by this author →
GitHub

react-spectrum-s2

Create accessible React Spectrum 2 UI components with @react-spectrum/s2.

Updated Mar 11, 2026
Search Tags:#accessibility#a11y#react#design system#ui components#spectrum#react spectrum
One-click install
npx skills add https://github.com/holblin/webapp-template --skill react-spectrum-s2-holblin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-spectrum-s2
Source: https://github.com/holblin/webapp-template/tree/main/.agents/skills/react-spectrum-s2
Command: npx skills add https://github.com/holblin/webapp-template --skill react-spectrum-s2-holblin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-spectrum/s2, @react-spectrum/style, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables developers to create accessible and visually consistent UI components that adhere to Adobe's Spectrum 2 design system, simplifying the development of inclusive applications.

Core Features & Use Cases

  • Component Library: Provides documentation and code examples for buttons, forms, dialogs, tables, color pickers, and more.
  • Accessibility Focus: Ensures UI components are accessible to users with disabilities, supporting keyboard navigation and assistive technologies.
  • Use Case: Develop a user dashboard with accessible buttons, form elements, and data tables to enhance usability across diverse user groups.
  • Documentation & Resources: Organized guides and component references, including styling macros and testing utils, facilitate rapid implementation and customization.

Quick Start

Ask the AI to generate accessible React Spectrum UI components documentation and examples for your project.

Frequently Asked Questions about react-spectrum-s2

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

FAQPage Schema
How do I build accessible React UI components for enterprise applications?▼

Build accessible React UI components by using this Skill to generate Spectrum 2 elements like buttons, dialogs, and tables that adhere to accessibility standards and support keyboard navigation for assistive technologies.

What is React Spectrum 2 used for in UI development?▼

React Spectrum 2 is used for creating visually consistent and accessible user interfaces, providing component APIs, style macros, and testing utilities to streamline inclusive UI development workflows.

Does this React Spectrum design system support keyboard navigation and assistive technologies?▼

Yes, this React Spectrum design system supports keyboard navigation and assistive technologies, ensuring generated UI components like forms and data tables are fully accessible to users with disabilities.

How do I generate documentation and examples for Spectrum 2 components?▼

Generate documentation and examples for Spectrum 2 components by asking the AI to provide organized guides, styling macros, and code references for elements like color pickers and tables.

Do I need @react-spectrum/s2 to use these accessible UI components?▼

Yes, you need @react-spectrum/s2 and @react-spectrum/style dependencies to use these accessible UI components, as they provide the necessary component APIs and style macros for implementation.

Related Skills

Explore More Content & Communication Skills→
lightsoundlightsound

react-spectrum-s2

Build accessible React Spectrum S2 UI components with API references and usage examples.

Community
Intermediate
adobecomadobecom

react-spectrum-s2

Provide accessible React Spectrum S2 UI components for React projects.

Official
Basic
rblood79rblood79

react-spectrum-s2

Implement accessible Spectrum 2 UI components in React projects.

Community
Basic
wpgauravwpgaurav
14

ckm:ui-styling

Generate accessible React UIs with shadcn/ui, Radix UI, and Tailwind CSS.

Community
Intermediate