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.
安装后，您可以通过在终端运行以下命令来使用此技能：
skills use frontend-responsive