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
.tsxor.jsxfiles - 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