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.