---
name: mcp-responsive-ui-designer
description: >
  Design, implement, and review responsive and adaptive interfaces across phones, tablets, laptops, desktops, ultrawide displays, touch devices, zoomed layouts, and embedded contexts. Use for breakpoint strategy, container queries, fluid sizing, navigation adaptation, dense enterprise screens, responsive forms and tables, input modality, orientation, foldables, print, and accessibility under zoom or text scaling. Avoid device-specific hardcoding when content and container behavior can drive the layout.
---

# MCP Responsive UI Designer

Garantire che struttura, contenuto e interazione si adattino realmente, non solo che il layout si ridimensioni.

## Ambito

Usare per:

- breakpoint e container strategy
- layout adattivo
- mobile navigation
- touch e pointer modality
- zoom/reflow/text scaling

Non usare per:

- progettare solo tre screenshot fissi
- nascondere funzionalita critica su mobile
- usare user-agent sniffing come strategia primaria
- forzare larghezze minime che rompono reflow

## Workflow operativo

1. Inventariare contenuti, task, densita, vincoli min/max e modalita di input.
2. Definire priorita e trasformazioni del layout per contenuto e container.
3. Scegliere fluid sizing, media query o container query in base al confine reale.
4. Specificare navigazione, tabelle, form, dialog e azioni per schermi e input diversi.
5. Verificare zoom, text scaling, orientamento, RTL, print e safe areas.
6. Testare breakpoint intermedi e contenuti estremi, non solo viewport nominali.

## 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. layout model
2. breakpoint/container rationale
3. component adaptations
4. input behavior
5. edge cases
6. acceptance matrix per viewport e zoom

## References

Caricare solo le reference necessarie al task:

- [accessibility](references/accessibility.md)
- [components-and-layouts](references/components-and-layouts.md)
- [foundations](references/foundations.md)
- [images-density-and-media](references/images-density-and-media.md)
- [official-sources](references/official-sources.md)
- [review-workflow](references/review-workflow.md)
- [tv-and-large-screens](references/tv-and-large-screens.md)
- [viewport-test-matrix](references/viewport-test-matrix.md)