Frontend Responsive Design Standards

Malicious tool definition detected

Tool: SKILL.md [1/2] Description: --- name: Frontend Responsive Design Standards description: Build responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes.

Tool: SKILL.md [2/2] Description: sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px" alt="Hero" > ``` Or with modern formats: ```html <picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="Hero"> </picture> ``` **Framework-specific:** ```jsx // Next.js <Image src="/hero.jpg" width={800} height={600} sizes="(max-width: 768px) 100vw, 50vw" alt="Hero" /> ``` ## Testing Across Devices **Verify layouts at key break