mobile-responsive

Mobile-responsive conversion automates the transformation of desktop pages for mobile devices using Tailwind CSS breakpoints and reusable patterns. This Skill audits your Next.js/React application across multiple pages, applies responsive layout patterns for containers, grids, forms, and navigation, and validates touch targets—all in batch mode without manual rewrites.

Yes. This Skill processes multiple pages across your Next.js application in a single operation, auditing each for mobile readiness and applying standardized conversion patterns from a pattern library. It handles component-based adjustments efficiently, making batch migration feasible for larger applications.

The pattern library covers Container, Grid, Form, Header/Navigation, and Modal components. Each pattern is designed for fluid, touch-friendly layouts and integrates directly with Tailwind CSS breakpoints, enabling rapid component adaptation without custom styling for each page.

Yes. The Skill is built to integrate with Tailwind CSS and existing Next.js/React frontend workflows. It applies Tailwind breakpoints and responsive utilities to your components, making it compatible with projects already using Tailwind as their styling framework.

Beyond responsive layout, the Skill audits and validates accessibility requirements including appropriate touch target sizes and readable typography. This ensures converted pages meet both responsive design and mobile usability standards, not just breakpoint adjustments.

Have your Next.js/React application ready with Tailwind CSS configured. The Skill will audit your pages and identify areas needing mobile conversion; you'll apply patterns from the included conversion-patterns reference to implement changes across your component structure.