# Frontend Responsive > Implement responsive, mobile-first designs with fluid layouts, standard breakpoints, touch-friendly interactions, and cross-device compatibility. Use this skill when creating layouts that adapt to mobile, tablet, and desktop screen sizes; when implementing mobile-first progressive enhancement; when using standard breakpoints consistently across the application; when working with flexible containers and percentage-based widths; when using relative units (rem/em) instead of fixed pixels; when sizing tap targets for mobile (minimum 44x44px); when optimizing images and assets for mobile networks; when testing UI across multiple device sizes; when ensuring readable typography across all breakpoints; when prioritizing content for smaller screens; when implementing responsive grid systems or layout frameworks; or when designing touch-friendly interfaces with appropriate spacing and interaction areas. Use when this capability is needed. - Skill: `tomevault-io/frontend-responsive` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/frontend-responsive` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-responsive/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/frontend-responsive --- # 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 mobile-first, progressive enhancement layouts - When using standard breakpoints consistently (mobile, tablet, desktop) - When creating fluid layouts with percentage-based widths and flexible containers - When using relative units (rem/em) instead of fixed pixels - When sizing tap targets appropriately for mobile (minimum 44x44px) - When optimizing images and assets for mobile network conditions - When testing and verifying UI across multiple screen sizes - When ensuring readable typography across all breakpoints - When prioritizing content layout for smaller screens - When designing responsive interfaces for cross-device compatibility ## Instructions For details, refer to the information provided in this file: [frontend responsive](../../../agent-os/standards/frontend/responsive.md) --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/shynlee04) — claim your Tome and manage your conversions.