react-spectrum-s2

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

Updated Apr 1, 2026

Search Tags:#ui #documentation #accessibility #react #components #design-system #spectrum

Ready to run

npx skills add https://github.com/lightsound/tanstack-style-spectrum --skill react-spectrum-s2-lightsound

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-spectrum-s2
Source: https://github.com/lightsound/tanstack-style-spectrum/tree/main/.agents/skills/react-spectrum-s2
Command: npx skills add https://github.com/lightsound/tanstack-style-spectrum --skill react-spectrum-s2-lightsound

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Builds and documents accessible React Spectrum S2 (Spectrum 2) UI components, providing standardized guidance, APIs, and real-world usage patterns to accelerate UI development.

Core Features & Use Cases

Comprehensive component references and API docs for common UI building blocks (Button, Checkbox, Dialog, DatePicker, Card, etc.).
Accessibility-focused guidance covering ARIA roles, keyboard navigation, and best practices for inclusive design.
Getting started and integration guidance for quickly adopting React Spectrum S2 in React projects, with real-world usage scenarios and code examples.

Quick Start

Install React Spectrum S2 in your project and start consulting the docs to begin building accessible UI components.

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 UI components with React Spectrum S2?▼

To build accessible React Spectrum S2 components, follow the provided API references and real-world usage examples covering ARIA roles and keyboard navigation. It requires a React project with @react-spectrum/s2 installed.

What is React Spectrum S2 and when do I need it for my project?▼

React Spectrum S2 is a design system for building standardized, accessible UI components in React. You need it when your project requires inclusive design implementations like dialogs, form controls, and pickers with built-in ARIA support.

Do I need to understand Spectrum 2 design tokens to use React Spectrum S2 components?▼

Yes, understanding Spectrum 2 design tokens and styling macros is required to use React Spectrum S2 components effectively. The Skill provides integration notes to help you apply these tokens across components like Button, Card, and TableView.

How do I implement accessible forms and dialogs using React Spectrum S2?▼

To implement accessible forms and dialogs using React Spectrum S2, use the Skill's API references and usage examples for Form and Dialog components. These include specific guidance on ARIA roles, keyboard navigation, and inclusive design best practices.

Does React Spectrum S2 provide accessibility guidance for complex components like TableView and DatePickers?▼

Yes, React Spectrum S2 provides accessibility-focused guidance for complex components like TableView and DatePickers. This includes standardized ARIA roles, keyboard navigation patterns, and best practices for inclusive design across its component library.

What are the limitations of using React Spectrum S2 for UI development?▼

The primary limitation of React Spectrum S2 is its strict environment requirement: you must have a React project with @react-spectrum/s2 installed and a working knowledge of Spectrum 2 design tokens and styling macros to implement the components correctly.