المهارات responsive-design
📱

responsive-design

آمن

Responsive Web-Layouts erstellen

متاح أيضًا من: wshobson

Erstellen Sie Websites, die sich mithilfe von Mobile-First-Designprinzipien, CSS Grid, Flexbox und modernen responsiven Techniken an jede Bildschirmgröße anpassen.

يدعم: Claude Codex Code(CC)
📊 70 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "responsive-design". Erstellen Sie ein Mobile-First-Grid-Layout mit Karten

النتيجة المتوقعة:

CSS-Code, der ein Grid zeigt, das mit 1 Spalte beginnt, bei 640px 2 Spalten wird und bei 1024px 3 Spalten, mit fluidem Gap und Padding unter Verwendung von rem-Einheiten.

استخدام "responsive-design". Machen Sie Typografie responsiv ohne Media Queries

النتيجة المتوقعة:

CSS unter Verwendung der clamp()-Funktion für fluide Schriftgrößen, die sich zwischen Minimal- und Maximalwerten basierend auf der Viewport-Breite skalieren.

التدقيق الأمني

آمن
v1 • 3/11/2026

This skill is a legitimate documentation resource for responsive web design. The static scanner produced false positives by misidentifying CSS code examples, markdown links, and reference URLs as security vulnerabilities. All 86 detected patterns are false positives - the skill contains only documentation and CSS/HTML code examples with no executable code, network calls to external services, or file system operations beyond standard documentation references.

2
الملفات التي تم فحصها
529
الأسطر التي تم تحليلها
3
النتائج
1
إجمالي عمليات التدقيق
مشكلات منخفضة المخاطر (3)
SKILL.md:27-513
CSS Code Examples Misidentified as External Commands
Static scanner incorrectly flagged CSS syntax (`.container`, `@media`, etc.) as Ruby/shell backtick execution. These are legitimate CSS code blocks in documentation.
SKILL.md:496-499
Documentation Reference URLs Misidentified as Network Security Issue
Static scanner flagged reference URLs (MDN, CSS-Tricks) as hardcoded URLs. These are legitimate documentation links in the References section.
SKILL.md:509-510
Markdown Relative Links Misidentified as Path Traversal
Static scanner flagged `../ui-component-patterns/SKILL.md` as path traversal. These are standard markdown relative links to related skills.
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
26
المجتمع
99
الأمان
87
الامتثال للمواصفات

ماذا يمكنك بناءه

Neuentwicklung von Websites

Erstellen Sie responsive Layouts für neue Webanwendungen mit dem Mobile-First-Ansatz unter Verwendung von CSS Grid und Flexbox.

Modernisierung von Legacy-Sites

Konvertieren Sie festgelegte Breiten-Layouts zu responsiven Designs, die auf allen Geräten funktionieren.

Erstellung von Komponentenbibliotheken

Erstellen Sie wiederverwendbare responsive Komponenten mit Container Queries für modulare Designsysteme.

جرّب هذه الموجهات

Basis-Responsives Layout 
Erstellen Sie ein responsives Layout mit Mobile-First-CSS mit einem Container, Grid und einem Breakpoint bei 768px. Zeigen Sie, wie sich das Layout von Mobile zu Tablet ändert.
Responsive Navigation 
Erstellen Sie eine responsive Navigationskomponente mit einem Hamburger-Menü auf Mobile, das sich zu einem horizontalen Menü auf Tablet und Desktop erweitert.
Responsive Bildergalerie 
Erstellen Sie eine responsive Bildergalerie, die 1 Spalte auf Mobile, 2 auf Tablet und 4 auf Desktop mit CSS Grid anzeigt.
Container-Query-Komponenten 
Erstellen Sie eine Kartenkomponente, die ihr Layout basierend auf ihrer Containergröße unter Verwendung von CSS Container Queries anpasst.

أفضل الممارسات

  • Beginnen Sie immer mit Mobile-Styles als Standard und fügen Sie dann größere Breakpoints hinzu
  • Verwenden Sie relative Einheiten (rem, em, %, vw/vh) anstelle von festen Pixeln für Skalierbarkeit
  • Verwenden Sie CSS Grid für 2-dimensionale Layouts und Flexbox für 1-dimensionale Layouts

تجنب

  • Vermeiden Sie festgelegte Breiten wie width: 1200px - verwenden Sie stattdessen max-width
  • Duplizieren Sie keine Stile über alle Breakpoints - verwenden Sie Mobile-First-Vererbung
  • Vermeiden Sie die Verwendung von max-width Media Queries für die Basis-Styles - dies erstellt Desktop-First-Code

الأسئلة المتكررة

Was ist Mobile-First-Design?
Mobile-First-Design bedeutet, mit Styles für die kleinsten Bildschirme als Standard zu beginnen und dann größere Breakpoints mit min-width Media Queries hinzuzufügen. Dieser Ansatz stellt sicher, dass die Kernfunktionen auf allen Geräten funktionieren.
Wann sollte ich CSS Grid vs. Flexbox verwenden?
Verwenden Sie CSS Grid für 2-dimensionale Layouts (Zeilen und Spalten zusammen). Verwenden Sie Flexbox für 1-dimensionale Layouts (entweder eine Zeile ODER eine Spalte). Grid eignet sich besser für das gesamte Seitenlayout, Flexbox für die Ausrichtung auf Komponentenebene.
Was sind Container Queries?
Container Queries ermöglichen es Ihnen, Elemente basierend auf ihrer übergeordneten Containergröße anstelle der Viewport-Größe zu gestalten. Dies ermöglicht wirklich wiederverwendbare responsive Komponenten.
Wie mache ich Bilder responsive?
Verwenden Sie das srcset-Attribut, um mehrere Bildgrößen bereitzustellen, das picture-Element für Art Direction (unterschiedliche Bilder bei unterschiedlichen Größen) und CSS background-image mit image-set für High-DPI-Displays.
Was sind die Standard-Breakpoints?
Gängige Breakpoints sind: Mobile (320-767px), Tablet (768-1023px), Desktop (1024-1439px) und große Bildschirme (1440px+). Passen Sie diese basierend auf Ihren Inhaltsanforderungen an.
Wie mache ich Typografie responsive?
Verwenden Sie die CSS clamp()-Funktion für fluide Typografie, die zwischen Minimal- und Maximalwerten skaliert. Beispiel: font-size: clamp(1rem, 2.5vw, 1.5rem) skaliert sich fließend mit der Viewport-Breite.

تفاصيل المطور

المؤلف

supercent-io

الترخيص

MIT

المستودع

https://github.com/supercent-io/skills-template/tree/main/.agent-skills/responsive-design/

مرجع

main

بنية الملفات

📄 SKILL.md

📄 SKILL.toon