frontend-responsive
Implement responsive designs using Tailwind CSS v3 breakpoints and mobile-first development patterns for Next.js applications. Use this skill when creating responsive layouts with Tailwind breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:), implementing mobile-first CSS, building responsive navigation (mobile sidebar, desktop header), creating fluid grid layouts, handling touch-friendly interactions, optimizing images with next/image for different screen sizes, implementing responsive typography, or testing across viewport sizes with Playwright. This includes files in apps/blog/src/components/, packages/ui/src/components/layout/, any component using responsive Tailwind classes, and mobile/desktop navigation components. Apply when building layouts that must adapt across mobile, tablet, and desktop screen sizes.
Installation and usage
Implement responsive designs using Tailwind CSS v3 breakpoints and mobile-first development patterns for Next.js applications. Use this skill when creating responsive layouts with Tailwind breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:), implementing mobile-first CSS, building responsive navigation (mobile sidebar, desktop header), creating fluid grid layouts, handling touch-friendly interactions, optimizing images with next/image for different screen sizes, implementing responsive typography, or testing across viewport sizes with Playwright. This includes files in apps/blog/src/components/, packages/ui/src/components/layout/, any component using responsive Tailwind classes, and mobile/desktop navigation components. Apply when building layouts that must adapt across mobile, tablet, and desktop screen sizes.
Once installed, you can use this skill by running the following command in your terminal:
skills use frontend-responsive