AgentSkillsCN

Frontend Responsive

采用移动优先的开发方式，结合标准Tailwind断点（sm: 640px，md: 768px，lg: 1024px，xl: 1280px，2xl: 1536px）、流畅的布局，以及跨设备尺寸的充分测试，实现响应式设计。在创建布局、实现响应式导航、调整图片与媒体的尺寸、定义可在不同设备间自适应的排版、处理CSS断点，或在不同屏幕尺寸上测试UI组件时，可使用此技能。适用于处理任何渲染视觉UI的组件（*.tsx、*.jsx）、布局组件、网格系统，或响应式样式相关的代码。此技能确保采用移动优先的CSS开发方式（先为移动端定义默认样式，再针对sm:、md:、lg:、xl:等大屏设备进行适配），在整个应用中统一使用断点，以百分比宽度与灵活容器打造流畅布局，优先使用相对单位（rem/em）而非固定像素，以提升可扩展性；为触控设备设计友好且易于点击的目标区域（最小44×44px），针对移动网络优化图片与资产的加载速度，使所有断点下的文字排版都清晰易读，无需放大查看；在小屏幕上优先呈现最重要内容，同时采用响应式网格模式（grid-cols-1，md:grid-cols-2，lg:grid-cols-3）。

SKILL.md
--- frontmatter
name: Frontend Responsive
description: Implement responsive design using mobile-first development approach with standard Tailwind breakpoints (sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px), fluid layouts, and proper testing across device sizes. Use this skill when creating layouts, implementing responsive navigation, sizing images and media, defining typography that scales across devices, working with CSS breakpoints, or testing UI components on different screen sizes. Apply when working on any component that renders visual UI (*.tsx, *.jsx), layout components, grid systems, or responsive styling code. This skill ensures mobile-first CSS development (default styles for mobile, then sm:, md:, lg:, xl: for larger screens), consistent breakpoint usage across the application, fluid layouts with percentage-based widths and flexible containers, relative units (rem/em) over fixed pixels for better scalability, touch-friendly tap targets (minimum 44x44px), optimized images and assets for mobile networks, readable typography across all breakpoints without requiring zoom, content prioritization showing most important content first on smaller screens, and responsive grid patterns (grid-cols-1 md:grid-cols-2 lg:grid-cols-3).

Frontend Responsive

When to use this skill:

  • •When creating new UI layouts or page structures
  • •When implementing navigation menus that adapt to screen size
  • •When working with images, videos, or media that need to scale
  • •When defining typography sizes across breakpoints (text-base md:text-lg lg:text-xl)
  • •When implementing grid or flexbox layouts with responsive variants
  • •When adding Tailwind responsive classes (sm:, md:, lg:, xl:, 2xl:)
  • •When testing components on mobile (375px), tablet (768px), and desktop (1440px) viewports
  • •When ensuring touch targets are appropriately sized (minimum 44x44px) for mobile
  • •When optimizing page performance for mobile networks
  • •When implementing collapsible sections or accordions for mobile
  • •When working on any visual component files (*.tsx, *.jsx, *.module.css)
  • •When reviewing designs across multiple device sizes
  • •When using auto-fit grid patterns for flexible card layouts
  • •When prioritizing content visibility on smaller screens

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive.

Instructions

For details, refer to the information provided in this file: frontend responsive