What problem does it solve? Legacy frontend redesigns often fail because new UI gets contaminated by global CSS, generic class names, !important wars, and deep descendant selectors. This Skill treats large visual rewrites as a migration problem, helping you isolate new UI, reuse business logic without reusing polluted styles, and cut over safely without breaking the old system. ## Core Features & Use Cases - Structure-First Inventory: Builds a style-agnostic inventory of page regions, functional components, and states before any migration code is written, so nothing required is lost or invented. - Isolation Strategy Selection: Recommends the lightest sufficient isolation approach—CSS Modules, a namespace wrapper like .v2-page, or Shadow DOM—based on your stack. - Safe Cutover Workflow: Enforces feature flags, route splits, visual regression checks, and staged deletion of legacy CSS only after verification. - Use Case: You need to redesign a legacy dashboard whose styles leak through global .card and .title selectors. The Skill guides you to inventory the existing structure, build a scoped components-v2/ surface with design tokens, and switch traffic via a feature flag before deleting old styles. ## Quick Start Ask the agent to analyze your legacy page, produce a style-agnostic structure inventory and contamination map, then propose an isolation strategy and v2 migration plan.
