| name | component-migration-analysis |
| description | 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. |
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.
