frontend-responsive

实现移动优先的响应式设计，使用流式布局、断点、相对单位和适用于所有设备尺寸的触摸友好界面。在编写或修改React组件（.tsx, .jsx文件）时、实现CSS或Tailwind响应式工具（sm:、md:、lg:、xl: 断点）时、处理布局组件、导航菜单、网格系统时、针对移动设备、平板电脑或桌面屏幕进行优化时、实现媒体查询时、确保触摸友好的UI元素时，或者测试跨设备兼容性时，使用此技能。

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 creating or editing React components in .tsx or .jsx files
When implementing responsive layouts using CSS Grid or Flexbox
When writing Tailwind CSS responsive utility classes (sm:, md:, lg:, xl:, 2xl:)
When implementing mobile-first design patterns
When creating navigation menus that adapt to different screen sizes
When working on responsive typography that scales across breakpoints
When implementing touch-friendly UI elements (buttons, tap targets, gestures)
When optimizing images and assets for different screen sizes and resolutions
When testing UI components across mobile, tablet, and desktop breakpoints
When using relative units (rem, em, %, vh, vw) instead of fixed pixels
When implementing responsive spacing, padding, or margins
When creating fluid container layouts that adapt to viewport size

Instructions

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