Frontend Responsive

Run npx skillmds@latest add tomevault-io/frontend-responsive in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

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. It is listed under Design & Media on SkillMD.

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.