AgentSkillsCN

Frontend Responsive

创建响应式、移动优先的用户界面，使用现代CSS技术与响应式设计模式，无缝适配所有设备尺寸。当实现布局、断点、流体排版、响应式图片，或任何需在手机、平板与桌面视口工作的UI时，使用此技能。在使用CSS媒体查询、容器查询、响应式实用类（Tailwind的sm:、md:、lg:）、灵活的grid/flexbox布局、相对单位（rem、em、vw、vh），或优化移动端触摸交互时，应用此技能。此技能确保移动优先开发方式，一致使用断点，正确配置视口，触摸友好的目标尺寸（最小44x44px），所有屏幕尺寸下可读排版，以及响应式图片与懒加载优化移动端网络性能。

SKILL.md
--- frontmatter
name: Frontend Responsive
description: Create responsive, mobile-first user interfaces that adapt seamlessly across all device sizes using modern CSS techniques and responsive design patterns. Use this skill when implementing layouts, breakpoints, fluid typography, responsive images, or any UI that needs to work across mobile, tablet, and desktop viewports. Apply this skill when using CSS media queries, container queries, responsive utility classes (Tailwind's sm:, md:, lg:), flexible grid/flexbox layouts, relative units (rem, em, vw, vh), or when optimizing touch interactions for mobile devices. This skill ensures mobile-first development approach, consistent breakpoint usage, proper viewport configuration, touch-friendly target sizes (44x44px minimum), readable typography across all screen sizes, and optimized performance on mobile networks with responsive images and lazy loading.

Frontend Responsive

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.

When to use this skill

  • •When implementing responsive layouts that adapt from mobile to tablet to desktop
  • •When using CSS media queries (@media) or container queries (@container) for breakpoint-specific styles
  • •When applying responsive utility classes in Tailwind (sm:, md:, lg:, xl:, 2xl:)
  • •When creating fluid layouts with flexbox, CSS Grid, or percentage-based widths
  • •When using relative units (rem, em, %, vw, vh) instead of fixed pixel values
  • •When implementing mobile-first CSS that progressively enhances for larger screens
  • •When configuring viewport meta tags for proper mobile rendering
  • •When ensuring touch targets meet minimum sizes (44x44px) for mobile usability
  • •When implementing responsive typography that scales across screen sizes
  • •When optimizing images for different screen densities (srcset, picture element)
  • •When testing UI across multiple device sizes and orientations
  • •When implementing responsive navigation (hamburger menus, collapsible sidebars)
  • •When handling responsive spacing, margins, and padding across breakpoints
  • •When prioritizing content for mobile layouts with appropriate show/hide patterns

Instructions

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