skills.rest
adobe
adobeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

spectrum-web-components

Build UIs with Adobe Spectrum 1 web components using sp-* custom elements.

1.5k|261|Updated Nov 19, 2018
Search Tags:#web components#Frontend#spectrum#custom elements#adobe#themING#UI Components
One-click install
npx skills add https://github.com/adobe/spectrum-web-components --skill spectrum-web-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spectrum-web-components
Source: https://github.com/adobe/spectrum-web-components/tree/main/2nd-gen/packages/ai/skills/swc-skill
Command: npx skills add https://github.com/adobe/spectrum-web-components --skill spectrum-web-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Developers building interfaces with Adobe's Spectrum design system need accurate component APIs, theming setup, and accessibility guidance for Spectrum Web Components without digging through scattered documentation.

Core Features & Use Cases

  • Component API References: Per-component Markdown files covering props, slots, events, CSS custom properties, and usage examples for every sp-* element.
  • Theming Guidance: Explains the required <sp-theme> wrapper, design tokens, and the Spectrum 2 theme bridge for gradual migration.
  • Framework Integration: Covers React usage via @swc-react/* wrapper packages and per-package installation patterns.
  • Use Case: A developer adding an accessible button to an app installs @spectrum-web-components/button, wraps it in <sp-theme>, and consults the component reference for variants and events.

Quick Start

Ask the assistant to show how to install and render an sp-button inside an sp-theme wrapper using Spectrum Web Components.

Frequently Asked Questions about spectrum-web-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install and use Spectrum Web Components?▼

Install each component as its own npm package, such as @spectrum-web-components/button, then import its .js entry to register the custom element. All sp-* elements must be wrapped in an <sp-theme> element to receive Spectrum design tokens.

Why do Spectrum Web Components require the sp-theme wrapper?▼

The <sp-theme> element supplies all Spectrum design tokens—color, scale, spacing, and typography—to descendant sp-* elements via CSS custom properties. Without it, components render without correct Spectrum styling.

Can I use Spectrum Web Components with React?▼

Yes, use the @swc-react/* wrapper packages, which provide first-class React event handling for sp-* elements. The skill's React guide covers setup and usage patterns.

Does Spectrum Web Components support Spectrum 2 theming?▼

Yes, setting system="spectrum-two" on <sp-theme> applies Spectrum 2 visual tokens to Gen 1 components. This supports running Gen 1 and Gen 2 side-by-side during a gradual migration.

How do I migrate from Spectrum Web Components Gen 1 to Gen 2?▼

Use the migrate-swc-gen1-to-gen2 skill, which includes per-component migration guides and a full coexistence walkthrough. The Spectrum 2 theme bridge on <sp-theme> also helps during incremental migration.

Related Skills

Explore More Software Engineering Skills→
efiadmefiadm

dependency-installer

Detect package managers from lock files and install project dependencies.

Community
Advanced
adobeadobe
1.5k

consumer-migration-guide

Generate per-component consumer migration guides in MDX for Spectrum 1-to-2 upgrades.

Official
Advanced
kunai-consultingkunai-consulting

write-tests

Create Vitest browser tests for Qwik components with axe-core accessibility checks.

Official
Intermediate
rblood79rblood79

react-spectrum-s2

Implement accessible Spectrum 2 UI components in React projects.

Community
Basic