s2-docs

# Spectrum 2 Docs 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. ## Lookup commands **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> ``` ### When working in Cursor 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 ``` ## Workflow 1. **Identify the component(s)** the user needs — use `use-case` or `search` if unsure. 2. **Fetch the docs** with `get <name>` for each relevant component. 3. **Read the "Component options" table** — note variants, sizes, required props. 4. **Apply the anti-drift checklist** before writing code. ## Anti-drift checklist After fetching docs, verify every suggestion against: * [ ] **Correct component** — ComboBox (freeform + autocomplete) vs Picker (selection only), ActionButton vs Button, etc. * [ ] **Correct variant** — don't default to `accent`; match the use case (primary, secondary, negative) * [ ] **No hard-coded sizes** — use Spectrum size tokens, not px values * [ ] **Spacing-first grouping** — S2 uses spacing to separate content, not dividers * [ ] **Required props present** — e.g. `label` on all inputs, `necessityIndicator` when required * [ ] **Static color used correctly** — only when placed on a custom background ## Key S2 design decisions (quick reference) * **Button variants**: `accent` = primary CTA (max 3 per view); `primary` = medium emphasis; `secondary` = low emphasis; `negative` = destructive * **ActionButton vs Button**: ActionButton is compact and icon-focused for toolbars; Button is for primary flows * **ComboBox vs Picker**: ComboBox allows freeform text + autocomplete; Picker is select-only * **Spacing over dividers**: S2 replaced dividers with spacing as the primary grouping mechanism * **Size tokens**: always use `size="S|M|L|XL"` prop, never hard-coded px