responsive-design

Überblick über die responsive-design-Skill

Die responsive-design-Skill hilft einem Agenten dabei, moderne, direkt umsetzbare Empfehlungen für adaptive Interfaces zu liefern – mit Container Queries, fluiden Größen, CSS Grid, Flexbox und Mobile-First-Breakpoints. Sie eignet sich besonders für alle, die echte UI-Layouts, Design-System-Komponenten, Dashboards, Karten, Navigationen oder datenintensive Ansichten bauen, die auf unterschiedlichen Bildschirmgrößen funktionieren sollen, ohne fragiles, gerätespezifisches CSS pflegen zu müssen.

Für wen die responsive-design-Skill gedacht ist

Nutze diese responsive-design-Skill, wenn du mehr brauchst als nur „mach es mobilfreundlich“. Sie passt für Frontend-Entwickler:innen, UI-Designer:innen mit Blick auf die Implementierung und Agent-Nutzer:innen, die praxistaugliche Responsive-Patterns für das Verhalten auf Komponentenebene wollen – nicht nur allgemeine Media-Query-Tipps.

Welches Problem sie dir tatsächlich löst

Die eigentliche Aufgabe besteht darin, ein grobes Layout-Ziel in eine responsive Implementierungsstrategie zu übersetzen: Was sollte fluid sein, was braucht Breakpoints, wann sind Container Queries sinnvoller als Viewport Queries und wie bleiben Komponenten in unterschiedlichen Kontexten wiederverwendbar?

Wodurch sich diese Skill von einem generischen Prompt unterscheidet

Ein generischer Prompt liefert oft veraltete Empfehlungen wie gerätebasierte Breakpoints und zu viele Media Queries. Die responsive-design-Skill fokussiert sich auf neuere CSS-Muster aus dem Repository, insbesondere auf:

• inhaltsgetriebene, Mobile-First-Breakpoint-Strategien
• Container Queries für wiederverwendbare Komponenten
• fluide Typografie und Abstände mit clamp()
• Layout-Entscheidungen, die Viewport-Fragen von Komponenten-Fragen trennen

Was vor der Installation am wichtigsten ist

Diese Skill passt gut, wenn dein Zieloutput CSS, Komponenten-Spezifikationen oder UI-Implementierungsempfehlungen sind. Weniger nützlich ist sie, wenn du nur visuelle Mockups, No-Code-Tool-Anleitungen oder frameworkspezifische Abstraktionen ohne zugrunde liegende CSS-Entscheidungen suchst. Das Repository ist referenzgetrieben – der eigentliche Mehrwert steckt in den Mustern und Beispielen unter references/, nicht in Automatisierungsskripten.

So verwendest du die responsive-design-Skill

responsive-design-Installationskontext

Installiere die Skill aus der Skill-Collection im Repository-Root:

npx skills add https://github.com/wshobson/agents --skill responsive-design

Da die Upstream-Skill weder Skripte noch Framework-Bindings mitliefert, geht es bei der Installation vor allem darum, die Empfehlungen für deinen Agenten aufrufbar zu machen. Erwarte also eher eine Dokumentations- und Pattern-Skill als einen Code-Generator mit streng definierten Inputs.

Diese Dateien solltest du zuerst lesen

Starte in dieser Reihenfolge mit den folgenden Dateien:

1. plugins/ui-design/skills/responsive-design/SKILL.md
2. plugins/ui-design/skills/responsive-design/references/container-queries.md
3. plugins/ui-design/skills/responsive-design/references/fluid-layouts.md
4. plugins/ui-design/skills/responsive-design/references/breakpoint-strategies.md

Diese Reihenfolge ist wichtig: Die zentrale Skill steckt den Rahmen ab, und die Referenzen liefern anschließend die Implementierungsdetails, die die Ausgabequalität tatsächlich verbessern.

Welche Eingaben die Skill von dir braucht

Die responsive-design-Skill funktioniert am besten, wenn du Folgendes mitgibst:

• den Komponenten- oder Seitentyp
• Layout-Beschränkungen
• Ziel-Screen-Kontexte
• ob Responsiveness viewport-basiert, container-basiert oder gemischt sein soll
• vorhandene Design-System-Tokens oder Breakpoint-Konventionen
• Anforderungen an Browser-Support

Schwacher Input: „Mach das responsive.“

Stärkerer Input: „Erstelle ein responsives Card-Grid für ein Dashboard. Die Cards müssen sowohl auf einer Seite in voller Breite als auch in einer schmalen Sidebar funktionieren. Nutze Container Queries dort, wo sich der Komponenten-Kontext ändert, fluide Abstände und Typografie, und halte die Breakpoints an unsere sm/md/lg-Token-Skala, außer der Inhalt erzwingt einen anderen Schwellenwert.“

Wie du aus einem groben Ziel einen starken Prompt machst

Ein guter Prompt für die responsive-design-Nutzung enthält meist fünf Teile:

1. UI-Objekt: Card-Liste, Nav-Bar, Pricing-Tabelle, Formular, Datentabelle
2. Verhaltensänderungen: stapeln, umbrechen, einklappen, skalieren, neu anordnen, einblenden
3. Quelle der Einschränkung: Viewport, Parent-Container, Inhaltsbreite
4. Systemregeln: Token-Skala, Grid-Regeln, minimale Tap-Größe, Accessibility-Anforderungen
5. Output-Format: CSS-Beispiel, Implementierungsplan, Breakpoint-Begründung, Refactoring-Empfehlung

Beispiel-Prompt:

„Use the responsive-design skill to propose a responsive strategy for a product comparison table. Prioritize small screens first, avoid horizontal overflow where possible, use content-based breakpoints, and explain whether container queries or viewport media queries should control each part. Include sample CSS for typography, spacing, and layout transitions.”

Wann du nach Container Queries fragen solltest

Nutze Container Queries, wenn sich eine Komponente danach richten muss, wo sie eingesetzt wird – nicht nur nach der Browserbreite. Das ist besonders wichtig für wiederverwendbare Cards, Seitenleisten-Panels, Widgets, eingebettete Module und Design-System-Komponenten.

Die Datei references/container-queries.md im Repository ist dafür die beste Quelle, wenn deine Komponente in mehreren Parent-Layouts auftaucht. Sie enthält praxistaugliche Syntax, benannte Container und Hinweise zum Browser-Support.

Wann du besser nach fluiden Layouts statt nach mehr Breakpoints fragen solltest

Wenn dein UI-Problem vor allem darin besteht, Text, Abstände oder Breiten weich zu skalieren, solltest du den Agenten zuerst auf fluide Techniken lenken. Die Datei references/fluid-layouts.md ist besonders hilfreich, wenn du weniger harte Breakpoint-Sprünge und natürlicheres Resizing mit clamp(), relativen Einheiten und intrinsischer Größenbestimmung willst.

Das verbessert in der Regel:

• Überschriften und Fließtext
• Abschnittsabstände
• Card-Größen
• Grids, die erst Luft bekommen sollen, bevor sie auf den nächsten Zustand springen

So nutzt du Breakpoint-Empfehlungen sinnvoll

Das Repository bevorzugt klar inhaltsgetriebene, Mobile-First-Breakpoints gegenüber Geräte-Katalogen. In der Praxis solltest du die Skill bitten, jeden Breakpoint über Layout-Druck zu begründen: Zeilenlänge, zu dicht stehende Cards, Tabellen-Overflow, umbrechende Navigation oder Probleme mit Touch-Zielen.

Wenn dein Team bereits Breakpoint-Tokens aus Tailwind oder Bootstrap nutzt, erwähne das. Die Referenzen enthalten gängige Skalen, wodurch die Skill moderne Strategien an bestehende Systeme anbinden kann, statt beliebige Werte zu erfinden.

Empfohlener Workflow für echte Projekte

Ein praxistauglicher responsive-design guide-Workflow:

1. Beschreibe die Komponente und ihre Ausfall- oder Problemstellen bei kleinen und großen Größen.
2. Frage zuerst nach einer Layout-Strategie, bevor du nach Code fragst.
3. Lege fest, was fluid sein soll, was springen soll und was sich neu anordnen soll.
4. Bitte erst dann um Beispiel-CSS, wenn die Strategie trägt.
5. Teste das Ergebnis an deinen tatsächlichen Containerbreiten, nicht nur mit Browser-Presets.
6. Iteriere mit Screenshots, DOM-Struktur oder aktuellem CSS, wenn der erste Entwurf zu generisch ist.

Diese Reihenfolge liefert bessere Ergebnisse, als sofort nach finalem CSS zu fragen.

Welche Ausgabeformate am besten funktionieren

Bitte die Skill um eines dieser Output-Formate:

• responsiver Implementierungsplan
• Tabelle mit Breakpoint-Begründungen
• CSS-Starter-Pattern
• Komponenten-Refactoring-Strategie
• Audit eines bestehenden Layouts
• Entscheidung „container query vs media query“

Diese Formate erzwingen klarere Entscheidungen als „gib mir responsive Code“.

Praktische Tipps für bessere Ausgabequalität

Für bessere Ergebnisse mit responsive-design for UI Design:

• füge die aktuelle HTML-Struktur hinzu, wenn Layout-Beziehungen wichtig sind
• gib an, ob die Inhaltslänge stark variiert
• nenne minimale lesbare Textgrößen und minimale Größen für interaktive Ziele
• sage dem Agenten, ob Inhalte umsortiert werden dürfen
• erwähne Legacy-Browser-Einschränkungen, bevor er Lösungen vorschlägt, die stark auf Container Queries setzen

Ohne diese Angaben kann die Skill technisch moderne Muster wählen, die aber nicht zu deiner Support-Matrix oder Komponentenarchitektur passen.

FAQ zur responsive-design-Skill

Ist die responsive-design-Skill einsteigerfreundlich?

Ja, wenn du bereits grundlegendes CSS beherrschst. Die Skill ist inhaltlich modern und nicht als Einsteiger-Tutorial angelegt, daher ist sie besonders stark für Nutzer:innen, die CSS lesen können und bessere Responsive-Entscheidungen treffen wollen. Anfänger:innen können sie trotzdem nutzen, sollten aber mit Begriffen wie Container Queries, intrinsischer Größenbestimmung und fluiden Skalen rechnen.

Erzeugt diese Skill frameworkspezifischen Code?

Nicht in erster Linie. Die Inhalte des Repositorys sind auf CSS-Patterns ausgerichtet. Du kannst zwar nach Anpassungen für React, Vue, Tailwind oder pures CSS fragen, aber der eigentliche Mehrwert liegt in der Responsive-Strategie, nicht in Framework-Integrationsdetails.

Ist responsive-design besser als ein normaler UI-Prompt?

In der Regel ja, wenn Responsiveness im Zentrum der Aufgabe steht. Normale Prompts fallen oft auf alte Breakpoint-Gewohnheiten oder oberflächliche Hinweise wie „auf Mobile untereinander stapeln“ zurück. Die responsive-design skill gibt dem Agenten ein klareres, aktuelleres und meinungsstärkeres Vokabular für Layout-Entscheidungen.

Wann solltest du responsive-design nicht verwenden?

Lass sie weg, wenn deine Aufgabe hauptsächlich Folgendes betrifft:

• visuelles Branding
• statische Mockup-Erstellung
• animationslastiges Interaction Design
• Framework-Setup ohne Bezug zum Layout
• pixelgenaue Nachbauten ohne Entscheidungen zu adaptivem Verhalten

Sie ist außerdem nur bedingt geeignet, wenn dein Team keine modernen CSS-Features einsetzen kann und Kompatibilitätsmuster aus der IE-Ära braucht.

Deckt sie Fragen zum Browser-Support ab?

Teilweise. Die Referenzen nennen modernen Support, besonders für Container Queries, und deuten graceful Fallbacks an. Aber das ist keine Skill für Kompatibilitätsmatrizen. Wenn Browser-Support kritisch ist, nenne deine minimal unterstützten Browser explizit im Prompt.

Kann die Skill bei Design-Systemen helfen?

Ja. Sie passt gut zu Breakpoint-Philosophie, token-ausgerichteten Abständen und Typografie sowie wiederverwendbarem Komponentenverhalten in unterschiedlichen Containern. Besonders nützlich ist sie, wenn ein Design-System weniger seitenspezifische Hacks und mehr portable Komponenten braucht.

So verbesserst du die responsive-design-Skill

Gib der responsive-design-Skill echte Einschränkungen

Der größte Qualitätssprung kommt durch konkrete Rahmenbedingungen. Nenne reale Breiten, Token-Namen, Content-Beispiele und UI-Zustände. „Responsive Dashboard-Card“ ist vage; „Card in einer 320px-Sidebar und in einem 1200px-Main-Grid mit langen Titeln und zwei Aktionen“ ist umsetzbar.

Frage nach Entscheidungen, nicht nur nach Code

Besserer Prompt:
„Use the responsive-design skill to decide which parts should use fluid sizing, which need breakpoints, and where container queries are justified.”

Das erzeugt stärkere Begründungen als:
„Write responsive CSS.”

Gib vorhandenes CSS mit, wenn du refactoren willst

Wenn du bereits Layout-Code hast, füge das aktuelle CSS ein und bitte die Skill, es zu vereinfachen. So kann sie unnötige Media Queries entfernen, fragile Breitenannahmen erkennen und reine Viewport-Logik dort durch komponentenbewusste Regeln ersetzen, wo es sinnvoll ist.

Häufige Schwachstellen, auf die du achten solltest

Die erste Ausgabe kann trotzdem noch schwach sein, wenn:

• der Agent Breakpoints ohne Nachweise aus dem Inhalt errät
• Container Queries dort eingesetzt werden, wo Viewport-Regeln einfacher wären
• fluide Typografie ohne Min-/Max-Grenzen ergänzt wird
• Layout-Änderungen Accessibility oder Lesekomfort ignorieren
• Beispiele elegant aussehen, aber nicht zu deiner DOM-Struktur passen

Diese Probleme lassen sich beheben, wenn du nach Begründungen fragst und jede Regel an ein konkretes UI-Problem bindest.

Nutze Iterations-Prompts nach dem ersten Entwurf

Gute Follow-up-Prompts:

• „Reduce unnecessary breakpoints and explain what can be fluid instead.”
• „Refactor this so the component works in both narrow sidebar and wide content areas.”
• „Add fallbacks for teams that cannot rely fully on container queries.”
• „Audit this layout for overflow, cramped text, and awkward wrap points.”

Diese Nachfragen verbessern die praktische Nutzbarkeit meist stärker, als direkt eine komplette Neufassung von Grund auf zu verlangen.

Prüfe gegen Komponenten-Kontexte, nicht nur gegen Bildschirmgrößen

Eine zentrale Erkenntnis der responsive-design-Skill ist: Viele Fehler entstehen, weil nur Viewport-Breiten getestet werden. Bessere Ergebnisse erzielst du, wenn du dieselbe Komponente auch in diesen Kontexten prüfst:

• Full-Page-Content
• Sidebar
• Modal
• dichtes Dashboard-Grid
• eingebetteter Marketing-Abschnitt

Wenn sich das Verhalten je nach Container ändert, sag das der Skill frühzeitig, damit sie den richtigen Responsive-Mechanismus wählen kann.

Nutze die Referenzdateien als Anker im Prompt

Nenne die Repository-Referenzen direkt, wenn du tiefergehende Ausgaben willst:

• references/container-queries.md für komponentenbezogene Responsiveness
• references/fluid-layouts.md für weiche Skalierung
• references/breakpoint-strategies.md für Mobile-First-Breakpoint-Entscheidungen

Das ist einer der einfachsten Wege, um fundiertere responsive-design-Nutzung vom Agenten zu bekommen statt generischer Frontend-Ratschläge.

Verbessere Ergebnisse mit klareren Akzeptanzkriterien

Bitte die Skill, auf konkrete Ziele hin zu optimieren:

• weniger Media Queries
• kein horizontaler Overflow unterhalb einer bestimmten Breite
• gut lesbare Zeilenlängen
• wiederverwendbare Komponenten über verschiedene Containergrößen hinweg
• token-ausgerichtete Abstände und Typografie
• minimale Layout-Verschiebung zwischen Breakpoints

Klare Akzeptanzkriterien machen die responsive-design-Skill für produktive UI-Arbeit deutlich wertvoller.