From s2-docs
Looks up Spectrum 2 (S2) docs for React Spectrum and Spectrum Web Components including components, design guidelines, usage patterns, and anti-drift checklists. Activates on Spectrum/S2 mentions or component names.
How this skill is triggered — by the user, by Claude, or both
Slash command
/s2-docs:s2-docsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Fetch canonical S2 docs before suggesting any Spectrum component or pattern.
Fetch canonical S2 docs before suggesting any Spectrum component or pattern. This prevents common vibe-coding mistakes: wrong variant, hard-coded sizes, divider-first layouts, missing required props.
Get a specific component (use before writing any RSP/SWC code):
node ${CLAUDE_SKILL_DIR}/scripts/lookup.js get <component-name>
Find components by use case:
node ${CLAUDE_SKILL_DIR}/scripts/lookup.js use-case "<phrase>"
Search by name:
node ${CLAUDE_SKILL_DIR}/scripts/lookup.js search <query>
List all components in a category (actions, containers, feedback, inputs, navigation, status):
node ${CLAUDE_SKILL_DIR}/scripts/lookup.js list --category <category>
Cursor does not support inline shell injection. Use Bash explicitly with --cursor for trimmed, delimited output:
node ${CLAUDE_SKILL_DIR}/scripts/lookup.js get <component-name> --cursor
node ${CLAUDE_SKILL_DIR}/scripts/lookup.js use-case "<phrase>" --cursor
use-case or search if unsure.get <name> for each relevant component.After fetching docs, verify every suggestion against:
accent; match the use case (primary, secondary, negative)label on all inputs, necessityIndicator when requiredaccent = primary CTA (max 3 per view); primary = medium emphasis; secondary = low emphasis; negative = destructivesize="S|M|L|XL" prop, never hard-coded pxnpx claudepluginhub adobe/spectrum-design-data --plugin s2-docsProvides component reference for @wix/design-system: search components, inspect props, view examples, and access testkit driver APIs via a bundled CLI script.
Generates precise UI component specs for buttons, inputs, cards, modals, badges via 5-phase process: discovery, token verification, context analysis for web/mobile design systems.
Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, SaaS, AI tools) from scratch 2. Generate comprehensive design systems (tokens, palettes, typography) 3. Audit existing UI for quality, accessibility, and "craft" 4. Search for proven real-world design patterns and implementation details Trigger: "design a...", "audit this...", "create a design system", "find icons", "fintech dashboard", "landing page"