Das Erstellen von Interfaces, die sich an verschiedene Geräte anpassen, ist komplex und zeitaufwendig. Diese Skill enthält可直接使用的代码模式 für Container-Queries, fließende Typografie, CSS Grid-Layouts und Mobile-First-Breakpoints, um die responsive Entwicklung zu beschleunigen.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"responsive-design" 사용 중입니다. Create a responsive card with container queries
예상 결과:
- /* Container context */
- .card-container {
- container-type: inline-size;
- container-name: card;
- }
- /* Default: stacked layout */
- .card {
- display: flex;
- flex-direction: column;
- }
- /* Side-by-side at 400px+ */
- @container card (min-width: 400px) {
- .card {
- flex-direction: row;
- gap: 1rem;
- }
- }
"responsive-design" 사용 중입니다. Generate fluid typography with clamp()
예상 결과:
- :root {
- --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
- --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
- --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
- --text-xl: clamp(1.25rem, 1rem + 1.25vw, 1.5rem);
- --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
- }
보안 감사
안전This is a pure documentation skill containing CSS code examples and React components for responsive design patterns. All static scanner findings are false positives: backticks detected are markdown code fences, URLs are documentation links, and all references to cryptographic or system commands are text mentions within documentation. No executable code, network calls, or credential access exists.
품질 점수
만들 수 있는 것
Adaptive Card-Komponenten bauen
Card-Komponenten erstellen, die ihr Layout basierend auf dem verfügbaren Platz mit Container-Queries ändern.
Fließende Typografie-Skalen implementieren
Responsive Typografie generieren, die zwischen Mindest- und Höchstgrößen über Viewports hinweg fließend skaliert.
Responsive Navigation erstellen
Navigationsmuster bauen, die sich zwischen Mobile-Hamburger-Menüs und Desktop-Horizontal-Layouts anpassen.
이 프롬프트를 사용해 보세요
Erstelle eine responsive Card-Komponente mit CSS Container-Queries. Die Card sollte von gestapeltem zu nebeneinander-Layout wechseln, wenn der Container mindestens 400px breit ist.
Generiere eine fließende Typografie-Skala mit CSS clamp(). Erstelle Variablen für text-xs bis text-4xl mit Mindestgrößen um 12px bis 18px und Höchstgrößen um 14px bis 36px.
Erstelle ein responsives Grid-Layout mit CSS Grid mit auto-fit. Das Grid sollte Spalten haben, die mindestens 250px breit sind und bei Bedarf in neue Zeilen umbrechen.
Definiere eine Mobile-First-Breakpoint-Strategie für ein Design-System. Füge Breakpoints bei 640px, 768px, 1024px und 1280px mit typischen Anwendungsfällen für jeden ein.
모범 사례
- Mit Mobile-Styles beginnen und mit min-width Media-Queries für größere Bildschirme erweitern
- Container-Queries für Komponenten-Level-Responsiveness statt viewport-basierte Queries verwenden
- Breakpoints basierend auf Content-Bedürfnissen而非 spezifischen Geräteabmessungen setzen
- Relative Einheiten wie rem, em und Prozente für skalierbare Layouts verwenden
피하기
- Fixe Pixelbreiten statt fließender oder relativer Einheiten verwenden
- Breakpoints für spezifische Gerätegrößen statt Content-Reflow-Points erstellen
- Responsive Styles auf Viewport-Ebene anwenden, wenn Komponenten-Level-Queries besser wären
- Dynamische Viewport-Einheiten ignorieren, die Mobile-Browser-UI berücksichtigen