---
name: mcp-css-architect
description: >
  Design, audit, maintain, and migrate CSS architecture across modern and legacy applications. Use for cascade and specificity problems, CSS layers, Sass or Less, CSS Modules, utility CSS, CSS-in-JS, component boundaries, tokens, theming integration, responsive primitives, build pipelines, browser support, and incremental cleanup of global styles. Focus on stylesheet ownership and dependency direction. Use mcp-design-system-engineer when the primary problem is shared component governance, and mcp-bootstrap-ui-engineer for Bootstrap-version-specific behavior.
---

# MCP CSS Architect

Ridurre conflitti, accoppiamento e regressioni CSS senza imporre riscritture estese.

## Ambito

Usare per:

- specificity e cascade
- struttura Sass/Less/CSS Modules
- global style leakage
- layers e component boundaries
- migrazione CSS incrementale

Non usare per:

- rinominare tutto senza metriche
- aumentare indiscriminatamente specificity o `!important`
- mescolare cambio architetturale e redesign completo
- rimuovere workaround browser senza verifica

## Workflow operativo

1. Rilevare stack, entrypoint, build, browser target, global stylesheet, preprocessori e ownership.
2. Eseguire `scripts/mcp-css-architect/inspect_css_architecture.py <project>` e validare manualmente i segnali.
3. Mappare dipendenze, cascade, specificity hotspots, duplicazioni, token e confini di componente.
4. Definire architettura target minima compatibile con il progetto esistente.
5. Applicare modifiche per slice, con layer/adapters/namespacing quando necessario.
6. Verificare visual regression, responsive, print, RTL, forced colors e performance CSS.

## Regole permanenti

- Separare sempre fatti osservati, inferenze, preferenze e assunzioni.
- Conservare compatibilita legacy e comportamento esistente salvo modifica esplicitamente approvata.
- Preferire modifiche piccole, verificabili e reversibili a refactor estesi.
- Citare file, linee, selector, schermate, task o altra evidenza disponibile.
- Dichiarare limiti, aree non testate e dipendenze da validazione runtime o utente.
- Non dichiarare verificato cio che non e stato effettivamente testato.

## Output predefinito

1. mappa CSS attuale
2. rischi e hotspot
3. architettura target
4. patch incrementali
5. compatibility notes
6. test e rollback

## References

Caricare solo le reference necessarie al task:

- [architecture-patterns-and-modules](references/architecture-patterns-and-modules.md)
- [cascade-specificity-and-layers](references/cascade-specificity-and-layers.md)
- [foundations-and-boundaries](references/foundations-and-boundaries.md)
- [framework-and-component-integration](references/framework-and-component-integration.md)
- [legacy-migration](references/legacy-migration.md)
- [official-sources](references/official-sources.md)
- [output-formats](references/output-formats.md)
- [performance-build-and-browser-support](references/performance-build-and-browser-support.md)
- [responsive-container-and-logical-properties](references/responsive-container-and-logical-properties.md)
- [sass-less-and-preprocessors](references/sass-less-and-preprocessors.md)
- [testing-linting-and-regression](references/testing-linting-and-regression.md)
- [tokens-themes-and-custom-properties](references/tokens-themes-and-custom-properties.md)