s2-docs

s2-docs is a skill for Claude Code from adobe/spectrum-design-data. It costs 91 tokens per session (858 once invoked), scanned A, original, Apache-2.0.

A reference for Spectrum 2, Adobe’s component system for building user interfaces with React or web components. It explains how to choose and use interface elements such as buttons, pickers, and text fields.

In plain words
What is it for?
It helps developers look up components, find components for a use case, and follow Spectrum 2 design and usage guidance.
Why use it?
It reduces mistakes caused by using the wrong component options, sizes, or layout patterns.

Skill for Claude Code ✓ vendor

Written for Claude Code: allowed-tools in frontmatter.

Part of the s2-docs plugin — 1 skill shipped together

Good fit It helps developers look up components, find components for a use case, and follow Spectrum 2 design and usage guidance.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/adobe/spectrum-design-data/s2-docs
About the project

adobe/spectrum-design-data is a monorepo containing the design tokens, component schemas, specifications, and related datasets that define Adobe's Spectrum design system; a monorepo keeps these related packages in one repository. It is for Adobe Spectrum SDK and tooling developers who need canonical design-system data and validation artifacts. The catalogue add-ons provide workflows and integrations for working with this design data.

adobe/spectrum-design-data · 156 stars · on GitHub · opensource.adobe.com

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add adobe/spectrum-design-data --skill s2-docs
Clone the repo
git clone --depth 1 https://github.com/adobe/spectrum-design-data

Made for: Claude Code.

Or install s2-docs, the plugin that ships this one along with the rest of its 1 skill.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for s2-docs

README.md
[![agentmods](https://agentmods.dev/badge/skills/adobe/spectrum-design-data/s2-docs/github.svg)](https://agentmods.dev/skills/adobe/spectrum-design-data/s2-docs)
Your own site
<a href="https://agentmods.dev/skills/adobe/spectrum-design-data/s2-docs"><img src="https://agentmods.dev/badge/skills/adobe/spectrum-design-data/s2-docs/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for s2-docs

Your own site · 80×15
<a href="https://agentmods.dev/skills/adobe/spectrum-design-data/s2-docs"><img src="https://agentmods.dev/badge/skills/adobe/spectrum-design-data/s2-docs.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 91 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 858 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00091 $0.00858
Opus 5.5 $0.00036 $0.00343
Sonnet 5.5 $0.00018 $0.00172
Haiku 4.5 $0.00009 $0.00086

Measured 6d ago against content hash ef38bfc633bd, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

s2-docs scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (scripts/lookup.js), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

tools/s2-docs-mcp/skills/s2-docs/SKILL.md · 87 lines

How it starts

The opening of the file, as written. The whole thing — 87 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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

Read the full file on GitHub · 87 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 6d ago Changed ef38bfc633bd
  2. 1mo ago First seen · 87 lines · 91 tokens per session scan A 495c96de642b

Subscribe to this mod's changes

s2-docs is a skill published in the GitHub repository adobe/spectrum-design-data (156 stars, last pushed today), licensed Apache-2.0. It adds 91 tokens to every session and 858 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

designlang-tokens

Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.

Manavarya09/design-extract · 30 tokens

ss-learn

Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or brand data. Use when a person asks StyleSeed to remember, learn from, generalize, review, or prepare a reusable rule…

bitjaru/styleseed · 73 tokens

ui-components

UI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, customizing shadcn components, using Radix unstyled primitives, or creating design system foundations.

yonatangross/orchestkit · 44 tokens

use-design-md

Apply a Korean brand's published DESIGN.md from the ko-design-md catalog (getdesign.kr) — colors, typography, spacing, radius, components, do's & don'ts — to the UI you are building in the CURRENT project. Use this skill whenever the user wants UI built or restyled in the style of a catalogued Korean service — "토스…

CaesiumY/ko-design-md · 193 tokens

design-to-code-check

Compares a component or screen's design spec with its code and logs each gap as a build error or spec gap. Use it for design QA, handover review or sign-off: whenever someone asks if a build matches its design or spec, even one component with the spec pasted in. System-wide drift: drift-detection.

murphytrueman/design-system-ops · 71 tokens

sigil-playbook

The Sigil Playbook codifies the small vocabulary of structural patterns that make any new page "just work." Originating from the Reticle design language (Dedalus monorepo), these 10 rules — 6 compositional moves + 4 supporting patterns — replace dozens of ad-hoc layout decisions.

Kevin-Liu-01/Sigil-UI · 4 tokens