frontend-responsive
Implement mobile-first responsive designs with fluid layouts, breakpoints, relative units, and touch-friendly interfaces that work across all device sizes. Use this skill when writing or modifying React components (.tsx, .jsx files), when implementing CSS or Tailwind responsive utilities (sm:, md:, lg:, xl: breakpoints), when working on layout components, navigation menus, grid systems, when optimizing for mobile devices, tablets, or desktop screens, when implementing media queries, when ensuring touch-friendly UI elements, or when testing cross-device compatibility.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/frontend-responsive/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-responsive Compares
| Feature / Agent | frontend-responsive | Standard Approach |
|---|---|---|
| Platform Support | multi | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Implement mobile-first responsive designs with fluid layouts, breakpoints, relative units, and touch-friendly interfaces that work across all device sizes. Use this skill when writing or modifying React components (.tsx, .jsx files), when implementing CSS or Tailwind responsive utilities (sm:, md:, lg:, xl: breakpoints), when working on layout components, navigation menus, grid systems, when optimizing for mobile devices, tablets, or desktop screens, when implementing media queries, when ensuring touch-friendly UI elements, or when testing cross-device compatibility.
Which AI agents support this skill?
This skill is compatible with multi.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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](../../../agent-os/standards/frontend/responsive.md)