Frontend Responsive

Responsive design uses media queries, flexible grids, and fluid images to adapt layouts automatically to different screen sizes. This Skill enforces responsive standards by reviewing CSS, HTML structure, and breakpoint usage to ensure your UI scales correctly across all devices without manual redesign for each screen size.

Breakpoints are CSS media query thresholds that trigger layout changes at specific screen widths. Proper breakpoint usage ensures consistent behavior across devices. This Skill validates that breakpoints follow established standards and that your layouts adapt smoothly between mobile, tablet, and desktop viewports.

Responsive assets use relative sizing (percentages, em units) and CSS techniques like max-width and viewport units instead of fixed pixel values. This Skill reviews your CSS and HTML to confirm images remain accessible, typography remains readable, and both scale fluidly across all screen sizes.

Yes. This Skill analyzes CSS and HTML files to enforce responsive design standards, identifying gaps in media queries, fluid grids, accessible controls, and cross-device consistency. It provides feedback aligned with established responsive.md standards to improve multi-device compatibility.

Prepare your CSS, HTML structure, and component layout files. This Skill works best when you have existing code to review or a new page ready for responsive evaluation. No special dependencies or setup is required—just your frontend code files.

Yes. This Skill enforces accessible controls and ensures responsive behavior maintains usability across devices. It validates that interactive elements, form inputs, and navigation remain accessible as layouts adapt to different screen sizes and orientations.