SkillsAdd

dragoon0x/everything-design-taste

responsive-email

Responsive email design, mobile email optimization, and email-specific media queries.

First seen Jul 18, 2026

Installation

$ npx skills add dragoon0x/everything-design-taste --skill responsive-email
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs
flutter-build-responsive-layout Similar name
flutter/agent-plugins

Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to dif…

33.3K installs
responsive-design Similar name
wshobson/agents 18.2K installs
responsiveness-check Similar name
jezweb/claude-skills

Test website responsiveness across viewport widths using browser automation. Resizes a single s…

1.6K installs
responsive-design Similar name
owl-listener/designer-skills

Design layouts and interactions that adapt across screen sizes and input methods. Use when one …

1.6K installs
responsive-patterns Similar name
yonatangross/orchestkit

Responsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic l…

1.3K installs

Also in this package

Other skills from dragoon0x/everything-design-taste · top by installs.

npx skills add dragoon0x/everything-design-taste
ecommerce-design 6 kiosk-design 5 desktop-app-design 3 brand-photography-guide 3 animation-choreography 3 user-retention-patterns 3 watch-wearable-design 3 travel-hospitality-design 3 travel-booking 3 stepper-input 3

Browse all from dragoon0x/everything-design-taste

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 11
License LICENSE
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,106 B
  • docs SUMMARY.md 109 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 2 installs

SKILL.md

Responsive Email Design

Strategy

  • Design mobile-first (most emails opened on mobile)
  • Single column layout works everywhere
  • Stack multi-column content on small screens

Fluid vs Responsive

  • Fluid: Percentage widths, scales with viewport. Simpler, broader support.
  • Responsive: Media queries for breakpoints. Better control, less support.

Mobile Optimization

  • Minimum font size: 16px (prevents iOS zoom)
  • Minimum tap target: 44x44px
  • CTA button: full-width on mobile
  • Reduce padding on mobile (more content visible)
  • Hide non-essential content on mobile
  • Preheader text: optimize for mobile inbox preview

Media Query Support

@media screen and (max-width: 600px) {
  .column { width: 100% !important; }
  .mobile-hidden { display: none !important; }
  .mobile-full-width { width: 100% !important; }
}

Note: Gmail App supports media queries. Outlook does not.