responsive-designvon Seth Hobson

Responsive Design Skill.

Ein Claude Code- und Codex-Skill für UI-Design: responsive Layouts mit Container Queries, fluider Typografie, CSS Grid und Mobile-First-Breakpoints.

Web & UI
UI-Code

OpenDesign herunterladen Anleitung ansehen

wshobson/agents · plugins/ui-design/skills/responsive-design/SKILL.mdSKILL.md

--- name: responsive-design description: Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 1.989 Zeichen insgesamt

01 Was es tut

Was die responsive-design Skill in Claude Code und Codex bewirkt

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Diese Skill implementiert moderne responsive Layouts mit Container Queries, fluider Typografie, CSS Grid und Mobile-First-Breakpoint-Strategien. Sie umfasst Responsivität auf Komponentenebene, fluide Typografie- und Abstandsskalen, komplexe Layouts mit CSS Grid und Flexbox sowie Breakpoint-Strategien für Design-Systeme. Die Skill befasst sich mit responsiven Bildern und Medien, adaptiven Navigationsmustern sowie responsiven Tabellen und Datenanzeigen.

Sie betont Mobile-First-Entwicklung, inhaltsbasierte statt geräteabhängige Breakpoints und Container Queries für die Anpassung auf Komponentenebene. Die Skill enthält Hinweise zu Touch-Targets, logischen Eigenschaften für Internationalisierung und Performance-Optimierung durch Bildbehandlung und Lazy Loading.

UI-Code

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Mobile-first beginnen
Beginnen Sie mit Mobile-Styles als Grundlage und erweitern Sie progressiv für größere Bildschirme, statt Desktop-abwärts zu arbeiten.
02
Inhaltsbasierte Breakpoints festlegen
Definieren Sie Breakpoints anhand der Stellen, an denen der Inhalt umbrechen muss, nicht anhand bestimmter Gerätemaße.

02 Finden Sie Ihren Favoriten

Wann das responsive-design-Skill verwendet wird

Verwenden Sie den responsive-design Skill in Claude Code oder Codex, wenn es um UI-Design dieser Art geht. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Mobile-First Responsive Layouts implementieren
Container Queries für komponentenbasierte Responsiveness verwenden
Fließende Typografie- und Abstands-Skalen erstellen
Entwicklung von Breakpoint-Strategien für Design-Systeme
Aufbau responsiver Tabellen und Datenanzeigen

03 Innerhalb des Skills

Regeln, die die responsive-design Skill Claude Code und Codex gibt

1 konkrete Anweisungen, Vorgaben und Grenzen, die SKILL.md dem Agent setzt — der Teil der Datei, der das Ergebnis verändert.

Optimieren und Lazy Load
Optimieren Sie Bilder für die Performance und laden Sie Inhalte, die zunächst außerhalb des Bildschirms liegen, per Lazy Loading.

04 In Betrieb nehmen

Installieren Sie responsive-design in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

responsive-design zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

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

Generische skills CLI-Form für plugins/ui-design/skills/responsive-design/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Build a responsive product card grid that uses container queries to adapt the card layout based on available space. Implement fluid typography for the product titles and descriptions, maintain 44x44px touch targets for all buttons, and use CSS Grid with mobile-first breakpoints. Include responsive product images with proper aspect ratios and lazy loading for cards below the fold.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Prüfen Sie vor Annahme der Ausgabe Folgendes im Transkript und in den Dateien:

Das Ergebnis wird als UI-Code geliefert, wie im Katalog für dieses Skill aufgeführt.
Der Agent nennt das responsive-design Skill in seinem Plan oder Transkript, bevor er das Ergebnis erzeugt.
Ihre eigenen Inhalte, Namen und Zahlen erscheinen unverändert in der Ausgabe.

In OpenDesign importieren Sie responsive-design über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill-Datei: plugins/ui-design/skills/responsive-design/SKILL.md Content-Checksumme bei Verifikation erfasst; Commit 4236bb9
License: MIT Aus LICENSE.
Repository-Sterne: 39.635 GitHub-Snapshot vom 14.09.2026 für das gesamte wshobson/agents Repository, das 18 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für responsive-design.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Wann dieser Skill verwendet wirdListet acht Szenarien auf, darunter Mobile-First-Layouts, Container Queries, fluide Typografie und responsive Datenanzeigen
Detaillierte Muster und BeispieleVerweist bei Bedarf auf references/details.md für tiefergehende Musterdokumentation
Best PracticesAcht Kernprinzipien, darunter Mobile-First-Ansatz, Content-Breakpoints, fluide Werte, Container Queries und Performance
Häufige ProblemeSieben häufige Probleme wie horizontales Überlaufen, feste Breiten, Viewport-Höhe und Größe von Touch-Zielen

Die eigene Beschreibung des Skills

„Moderne responsive Layouts mit Container Queries, fließender Typografie, CSS Grid und Mobile-First Breakpoint-Strategien implementieren. Verwenden Sie es beim Erstellen adaptiver Interfaces, Implementieren fließender Layouts oder Entwickeln komponentenbasierter Responsiveness."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 1.989 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

Responsive Design

responsive-design für eine echte UI-Design-Aufgabe ausführen.

Laden Sie OpenDesign herunter, importieren Sie responsive-design über den SKILL.md-Link, fügen Sie die obige Eingabeaufforderung ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen