# Component Migration Analysis

> Create rendering-and-styling migration analysis docs for 2nd-gen component migration. Use when on the "analyze rendering and styling" step for one or more components.

- Skill: `adobe/component-migration-analysis` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add adobe/component-migration-analysis`
- Raw SKILL.md: https://api.skillmd.com/api/skills/adobe/component-migration-analysis/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Adobe (https://skillmd.com/u/adobe)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/adobe/component-migration-analysis

---


# Component migration: analyze rendering and styling

Create comprehensive migration documentation for the **analyze rendering and styling** step of 2nd-gen component migration. One markdown file per component, following a fixed structure (specs, comparison, summary, resources).

## Mindset

You are a code archaeologist. Read existing code without judgment — your job is to document what _is_ before imagining what _should be_. Curiosity about past decisions leads to better future ones.

## When to use this skill

- You are on the "analyze rendering and styling" step of the 2nd-gen component migration workstream
- The user asks to create rendering-and-styling migration analysis for one or more components
- The user asks to analyze rendering and styling for a component (e.g. "analyze rendering and styling for button", "create migration analysis for dialog")

## How to invoke

- Say "create migration analysis for [component]", "analyze rendering and styling for [component]", or "rendering and styling migration for [component]"
- Or refer to the step "analyze rendering and styling" in the 2nd-gen component migration workstream — the agent should use this skill and read the full prompt

## Quick reference

### Output

- **One markdown file per component** at:
  `CONTRIBUTOR-DOCS/03_project-planning/03_components/[component-name]/rendering-and-styling-migration-analysis.md`
- **Structure**: Component specifications (CSS from spectrum-css `spectrum-two` metadata.json; SWC from spectrum-web-components `main` render/slots) → Comparison (DOM structure changes: SWC + CSS main + CSS spectrum-two; CSS⇒SWC mapping table) → Summary of changes → Resources

### Sources and branches

- **CSS specs**: spectrum-css repo, `spectrum-two` branch → `components/[component-name]/metadata.json` (selectors, passthroughs, modifiers)
- **SWC specs**: spectrum-web-components repo, `main` branch → `packages/[component-name]/src/[component-name].ts` (render(), @property, slots)
- **DOM comparison**: SWC render() (main); spectrum-css `main` and `spectrum-two` → `components/[component-name]/stories/template.js` (line-by-line; verify branch after each checkout)

### Important

- Create all files on the **original spectrum-web-components branch** where the session started
- Verify git branch before analyzing any file; perform line-by-line comparisons (don’t assume templates are identical)
- Ask clarifying questions for uncertain mappings instead of guessing

## Full instructions

For the exact document structure, heading levels, collapsible sections, CSS⇒SWC mapping table format (columns, status values, ordering), DOM comparison format, and output format notes, read:

**.ai/skills/component-migration-analysis/references/migration-analysis-prompt.md**

That document is the single source of truth for file organization, component documentation structure, comparison format, summary sections, and resources placeholder.