frontend-responsive

Design mobile-first responsive layouts using fluid containers, relative units, standard breakpoints, and touch-friendly interfaces that adapt seamlessly across devices from mobile to desktop. Use this skill when implementing responsive designs, media queries, viewport configurations, or testing across screen sizes. Applies to any frontend layout work requiring optimization for mobile phones, tablets, and desktop displays with readable typography and appropriate content prioritization.

Zur Installation springen

Repository: ForceInjection/domain-driven-design-skills
Letzte Quellaktivität: 8. Mai 2026 um 03:07
Erkannte Sprache von SKILL.md: Englisch
Sterne: 25
Forks: 7

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/ForceInjection/domain-driven-design-skills --skill frontend-responsive

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

Datei-Explorer

2 Dateien

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

Frontend Responsive

When to use this skill

When implementing layouts that need to work on mobile, tablet, and desktop screen sizes

When using CSS media queries with standard breakpoints (mobile: 320-768px, tablet: 768-1024px, desktop: 1024px+)

When applying responsive Tailwind classes like sm:, md:, lg:, xl: modifiers

When creating fluid layouts with percentage-based widths or CSS Grid/Flexbox that adapt to screen size

When using relative units (rem, em) instead of fixed pixels for scalable, accessible sizing

When designing mobile-first with progressive enhancement for larger screens

When ensuring touch targets are at least 44x44px for mobile usability

When optimizing images and assets for mobile network conditions and different screen densities

When testing UI changes across multiple device sizes and verifying responsive behavior

When maintaining readable font sizes across breakpoints without requiring user zoom

When prioritizing content display on smaller screens (showing critical info first, hiding secondary content)

When configuring viewport meta tags for proper mobile rendering

When implementing responsive navigation patterns (hamburger menus, collapsible sections, drawer navigation)

name

Frontend Responsive

description