How do I install the Responsive Rules skill?

Run npx skillmds@latest add dragoon0x/responsive-rules 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.

Is Responsive Rules safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Responsive Rules?

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.

Is Responsive Rules free to use?

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

Who published Responsive Rules?

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

Responsive Rules by dragoon0x — Agent Skill

Name: Responsive Rules
Author: dragoon0x

Responsive Rules

Define responsive design rules including breakpoints, fluid scales, and what changes per viewport. Use whenever the user mentions responsive design, breakpoints, mobile design, fluid typography, viewport sizing, or wants to design for multiple screen sizes.

dragoon0x c444be1 2.1 KB Updated Sep 17, 2026

File contents

responsive-rules

a default set of responsive rules. adjust to your product's traffic mix.

breakpoints

if traffic is mobile-first, structure breakpoints up from the smallest:

xs:  320px (small mobile)
sm:  480px (mobile)
md:  768px (tablet, landscape mobile)
lg:  1024px (small desktop, large tablet landscape)
xl:  1280px (desktop)
2xl: 1536px (large desktop)

if traffic is desktop-heavy, start at lg and adjust downward.

per breakpoint, decide

container width: max-width and side padding
column count: 4 / 8 / 12 grid columns is the standard ladder
type scale: how much does the ramp shift between sizes
spacing scale: same question for spacing tokens
navigation: when does the nav collapse to a hamburger or drawer
content priority: what hides, reorders, or compresses

fluid sizing

for type and spacing, prefer fluid clamps over breakpoint jumps where it reads well:

font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);

use fluid for body type, paragraph spacing, container padding
use breakpoint jumps for headlines, hero sections, where you want intentional weight at scale

images

responsive sizes via srcset
art direction via picture when crops should change at breakpoints
aspect-ratio css to prevent layout shift

touch targets

24x24px minimum at AA
44x44px on mobile is the practical floor

test list

at minimum, design and test at:

360px (smallest common mobile)
768px (tablet portrait)
1024px (standard desktop / tablet landscape)
1440px (common large desktop)
text scaled 200% (accessibility test)

what to avoid

designing only at one breakpoint and praying
hiding critical content on mobile because it doesn't fit
bottom-aligned ctas that fall under the mobile browser chrome
assumed orientation (some users land in landscape on mobile)

---name: responsive-rulesdescription: Define responsive design rules including breakpoints, fluid scales, and what changes per viewport. Use whenever the user mentions responsive design, breakpoints, mobile design, fluid typography, viewport sizing, or wants to design for multiple screen sizes.---# responsive-rulesa default set of responsive rules. adjust to your product's traffic mix.## breakpointsif traffic is mobile-first, structure breakpoints up from the smallest:```xs: 320px (small mobile)sm: 480px (mobile)md: 768px (tablet, landscape mobile)lg: 1024px (small desktop, large tablet landscape)xl: 1280px (desktop)2xl: 1536px (large desktop)```if traffic is desktop-heavy, start at lg and adjust downward.## per breakpoint, decide- **container width**: max-width and side padding- **column count**: 4 / 8 / 12 grid columns is the standard ladder- **type scale**: how much does the ramp shift between sizes- **spacing scale**: same question for spacing tokens- **navigation**: when does the nav collapse to a hamburger or drawer- **content priority**: what hides, reorders, or compresses## fluid sizingfor type and spacing, prefer fluid clamps over breakpoint jumps where it reads well:```cssfont-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);```- use fluid for body type, paragraph spacing, container padding- use breakpoint jumps for headlines, hero sections, where you want intentional weight at scale## images- responsive sizes via srcset- art direction via picture when crops should change at breakpoints- aspect-ratio css to prevent layout shift## touch targets- 24x24px minimum at AA- 44x44px on mobile is the practical floor## test listat minimum, design and test at:- 360px (smallest common mobile)- 768px (tablet portrait)- 1024px (standard desktop / tablet landscape)- 1440px (common large desktop)- text scaled 200% (accessibility test)## what to avoid- designing only at one breakpoint and praying- hiding critical content on mobile because it doesn't fit- bottom-aligned ctas that fall under the mobile browser chrome- assumed orientation (some users land in landscape on mobile)

Frequently asked questions