メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| 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. |
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).
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.
CONTRIBUTOR-DOCS/03_project-planning/03_components/[component-name]/rendering-and-styling-migration-analysis.mdspectrum-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 → Resourcesspectrum-two branch → components/[component-name]/metadata.json (selectors, passthroughs, modifiers)main branch → packages/[component-name]/src/[component-name].ts (render(), @property, slots)main and spectrum-two → components/[component-name]/stories/template.js (line-by-line; verify branch after each checkout)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.
Phase 6 of 1st-gen to 2nd-gen component migration. Use to write unit tests, accessibility tests, and Storybook play functions for a migrated component.
Author dedicated Storybook visual regression stories for 2nd-gen components. Use when adding or reviewing `.vrt.ts` files, Chromatic VRT coverage, forced-colors coverage, pseudo-state snapshots, global stylesheet coverage, or custom-property VRT coverage.
Phase 3 of 1st-gen to 2nd-gen component migration. Use to move properties, methods, and types from 1st-gen to 2nd-gen while maintaining a clear public API.
Create accessibility migration analysis docs for 2nd-gen component migration. Use when on the "analyze accessibility" step for one or more components.
Phase 5 of 1st-gen to 2nd-gen component migration. Use to migrate CSS to the 2nd-gen structure, apply Spectrum 2 tokens, and ensure stylelint passes.
Upgrade Spectrum 1 (sp-* elements, @spectrum-web-components/*) to Spectrum 2 (swc-* elements, @adobe/spectrum-wc). Use when developers need to migrate from Spectrum 1 to Spectrum 2 web components, or when they mention @spectrum-web-components, sp-* elements, or Spectrum 1.