responsive-styling

Purpose Generate mobile-first, responsive CSS/SCSS that works across all devices and follows accessibility best practices.

Mobile-First Approach Always write base styles for mobile, then enhance for larger screens:

❌ Desktop-first (using max-width) ❌ Magic numbers (random breakpoints) ❌ Forgetting touch targets ❌ Fixed pixel widths that don't scale ❌ Tiny text on mobile (<16px) ❌ Horizontal scrolling ❌ Ignoring landscape mobile ❌ Breaking at intermediate sizes

Genera automaticamente CSS/SCSS responsive mobile-first quando crei stili di componenti o menzioni il responsive design. Implementa punti di interruzione standard (768px, 1024px), garantisce il contrasto cromatico WCAG AA, crea interfacce touch-friendly (obiettivi minimi di 44px), aggiunge indicatori di messa a fuoco adeguati, supporta il movimento ridotto, ridimensiona la tipografia in modo reattivo e fornisce specifiche tecniche dettagliate con valori esatti. Fonte: kanopi/cms-cultivator.