React Spectrum (S2) agent skills for Claude Code, Cursor and RevampKey

3 ready-made playbooks that teach an AI agent how to do real React Spectrum (S2) work: which tools to call, what to check first, and when to stop and ask you.

Download RevampKey, free I have it: connect React Spectrum (S2)

Connect React Spectrum (S2) once and all 3 skills install themselves and stay up to date. Mac, Windows and Linux.

All 3 React Spectrum (S2) skills

Each skill is one job. You ask in plain words and the agent loads the skill that matches, then follows its steps.

Start hereRead-only6 React Spectrum (S2) tools

React Spectrum S2 essentials

Uses the React Spectrum S2 connector to look up components, icons and illustrations, reading only what the question needs. It is read-only and never edits your project.

Use it when

A developer asks which S2 component fits a layout and wants the right props
A designer needs a matching icon for a button or menu action
A team wants to check a style property value before writing code

Tools it uses

list_s2_pages
get_s2_page_info
get_s2_page
search_s2_icons
search_s2_illustrations
get_style_macro_property_values

Example

Which React Spectrum S2 icon should I use for a 'share' button, and is there a matching illustration for an empty projects screen?

I searched the S2 icon library for 'share' and found a share icon that matches the action. For the empty projects screen I searched illustrations for 'empty folder' and found one suitable option. I did not change any project files, so you can apply these names in your code.

Use in RevampKeyRead the full skill →

Read-only3 React Spectrum (S2) tools

Build React Spectrum S2 components with AI

Finds the right React Spectrum S2 component page, reads its anatomy and usage, and composes the component correctly, checking against the documented patterns before writing code.

Use it when

You need to pick a component for a form, dialog, menu or table and want to know which one fits.
You are adapting existing React Spectrum S2 code and want it checked against the documented structure.
You want working composition code that includes every required part and accessible label.

Tools it uses

list_s2_pages
get_s2_page_info
get_s2_page

Example

Build a confirmation dialog for deleting a project in React Spectrum S2, with the right required parts and a labelled cancel and delete action.

The best fit is the dialog pattern rather than a popover, because the action is destructive and needs a blocking confirmation. I composed the trigger, the dialog container with its title and content, and both actions, and kept the destructive action clearly separated from cancel. I checked the anatomy and the when-not-to-use section, and I did not confirm the exact prop for the destructive variant, so please verify that against the full page.

Use in RevampKeyRead the full skill →

Read-only2 React Spectrum (S2) tools

Pick icons and illustrations for React Spectrum S2

Finds the right icon or illustration from the React Spectrum S2 libraries for a given UI purpose, comparing candidates on meaning, fit and consistency before recommending one. It only reads and recommends and never changes your project.

Use it when

You need an icon for an action in a toolbar or row menu and want the clearest metaphor.
You want an illustration for an empty inbox or a no-results state that matches the tone of the page.
You are not sure whether a status symbol fits or whether it will read as a button.

Tools it uses

search_s2_icons
search_s2_illustrations

Example

Which S2 icon should I use for an 'archive' button in a table row toolbar?

For a row toolbar, the archive box glyph reads more clearly than a generic folder, which people often take to mean 'move to folder'. I compared two candidates: the archive box fits the action and matches the outlined style of the other row icons, while the folder was rejected as ambiguous. Since the button is icon-only, I'd also recommend a tooltip so the meaning is stated.

Use in RevampKeyRead the full skill →

Get all 3 without copying a file

RevampKey adds the skills when you connect React Spectrum (S2), updates them for you and removes them when you disconnect.

Download RevampKey

How React Spectrum (S2) skills work

Connect React Spectrum (S2)
The React Spectrum (S2) MCP server gives the agent its tools.
Ask in plain words
“Build a confirmation dialog for deleting a project in React Spectrum S2, with the right required parts and a labelled cancel and delete action.” Each SKILL.md says when it applies, so only the one that fits is loaded.
Approve any change
The agent calls the tools in order, checks its work, and shows you any change before it makes it.

How to install React Spectrum (S2) skills

In RevampKey the skills install themselves when you connect React Spectrum (S2). In other tools each skill is one folder with a SKILL.md file, and you also need the React Spectrum (S2) MCP server connected there.

About 1 minute · nothing to copy

Download RevampKey for Mac, Windows or Linux and sign in.
Open Connectors and connect React Spectrum (S2). All 3 skills come with it and stay up to date; they go away when you remove the connector.
Ask in plain language, for example “Build a confirmation dialog for deleting a project in React Spectrum S2, with the right required parts and a labelled cancel and delete action.”
Download RevampKeyConnect React Spectrum (S2) · 1 click
Get RevampKey to connect React Spectrum (S2)
RevampKey is a free desktop app for Mac, Windows and Linux. Install it, sign in, and React Spectrum (S2) is one click away with its skills already attached.
Download RevampKey
Not now? Use the skills in your current tool
for s in essentials component-implementation-guidance icon-and-illustration-selection; do curl -fsSL --create-dirs -o .claude/skills/react-spectrum-s2-$s/SKILL.md https://revampkey.com/marketplace/react-spectrum-s2/skills/$s/SKILL.md done
Other tools

Into this project’s .claude/skills folder

Connect the React Spectrum (S2) MCP server in Claude Code.

Run this in your project folder to add all 3 skills:

for s in essentials component-implementation-guidance icon-and-illustration-selection; do
  curl -fsSL --create-dirs -o .claude/skills/react-spectrum-s2-$s/SKILL.md https://revampkey.com/marketplace/react-spectrum-s2/skills/$s/SKILL.md
done

Ask in plain language, for example “Build a confirmation dialog for deleting a project in React Spectrum S2, with the right required parts and a labelled cancel and delete action.”

Into the shared .agents/skills folder

Connect the React Spectrum (S2) MCP server in Cursor.

Run this in your project folder to add all 3 skills:

for s in essentials component-implementation-guidance icon-and-illustration-selection; do
  curl -fsSL --create-dirs -o .agents/skills/react-spectrum-s2-$s/SKILL.md https://revampkey.com/marketplace/react-spectrum-s2/skills/$s/SKILL.md
done

Ask in plain language, for example “Build a confirmation dialog for deleting a project in React Spectrum S2, with the right required parts and a labelled cancel and delete action.”

Into the shared .agents/skills folder

Connect the React Spectrum (S2) MCP server in Codex.

Run this in your project folder to add all 3 skills:

for s in essentials component-implementation-guidance icon-and-illustration-selection; do
  curl -fsSL --create-dirs -o .agents/skills/react-spectrum-s2-$s/SKILL.md https://revampkey.com/marketplace/react-spectrum-s2/skills/$s/SKILL.md
done

Ask in plain language, for example “Build a confirmation dialog for deleting a project in React Spectrum S2, with the right required parts and a labelled cancel and delete action.”

Into the shared .agents/skills folder

Connect the React Spectrum (S2) MCP server in VS Code.

Run this in your project folder to add all 3 skills:

for s in essentials component-implementation-guidance icon-and-illustration-selection; do
  curl -fsSL --create-dirs -o .agents/skills/react-spectrum-s2-$s/SKILL.md https://revampkey.com/marketplace/react-spectrum-s2/skills/$s/SKILL.md
done

Ask in plain language, for example “Build a confirmation dialog for deleting a project in React Spectrum S2, with the right required parts and a labelled cancel and delete action.”

RevampKey or copy the files?

In RevampKey

One click when you connect React Spectrum (S2)
Updated for you when a skill improves
Removed when you disconnect
The MCP server is set up for you
800+ other connectors, same way

Download free

Copy into your project

One command per project
Run it again to get updates
You connect the React Spectrum (S2) MCP server yourself
Works in Claude Code, Cursor, Codex and VS Code

See the command

React Spectrum (S2) skills FAQ

What is a React Spectrum (S2) agent skill?

A SKILL.md file: a short playbook an AI agent loads when your request matches it. Each React Spectrum (S2) skill describes one job, which React Spectrum (S2) tools to use in which order, what to check first and when to stop and ask you.

Do the React Spectrum (S2) skills change anything on their own?

3 of the 3 only read. The others tell the agent to show you the change and wait for a yes before it creates, edits or deletes anything in React Spectrum (S2).

Which tools can use these skills?

Any agent that reads the open Agent Skills format: Claude Code, Cursor, Codex, VS Code with Copilot and RevampKey. In RevampKey they are attached when you connect React Spectrum (S2); elsewhere you copy the folders into your project or skills directory.

Do I need the React Spectrum (S2) MCP server too?

Yes. The skills tell the agent how to do the work; the React Spectrum (S2) MCP server gives it the tools to do it. The React Spectrum (S2) MCP setup guide covers every client.

React Spectrum (S2) MCP server setup · This page as Markdown

Put React Spectrum (S2)’s best workflows in your agent

Download RevampKey, connect React Spectrum (S2) and ask your first question in about a minute.

Download RevampKey Connect React Spectrum (S2) · 1 click

All 3 React Spectrum (S2) skills

React Spectrum S2 essentials

Use it when

Tools it uses

Build React Spectrum S2 components with AI

Use it when

Tools it uses

Pick icons and illustrations for React Spectrum S2

Use it when

Tools it uses

Get all 3 without copying a file

How React Spectrum (S2) skills work

How to install React Spectrum (S2) skills

RevampKey or copy the files?

In RevampKey

Copy into your project

React Spectrum (S2) skills FAQ

Put React Spectrum (S2)’s best workflows in your agent

Skills for related tools