技能 adapt
📦

adapt

安全

Designs für jeden Bildschirm oder jede Plattform anpassen

Sie haben Schwierigkeiten, Ihr Design für mobile Geräte, Tablets, Desktops, Print oder E-Mail nutzbar zu machen? Dieser Skill bietet Expertenhilfe zur Anpassung von Designs an verschiedene Kontexte unter Beibehaltung von Konsistenz und Benutzerfreundlichkeit.

支持: Claude Codex Code(CC)
📊 71 充足
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“adapt”。 Help me adapt a complex data dashboard for mobile

预期结果:

Für mobile Dashboards priorisieren Sie: einspaltiges Layout, einklappbare Bereiche für sekundäre Daten, größere Touch-Targets (mindestens 44px),fixierte Header mit wichtigen Metriken,Bottom-Navigation für schnellen Zugriff, progressive Offenlegung für komplexe Diagramme. Erwägen Sie, niedrigpriorisierte Widgets auf mobilen Geräten vollständig auszublenden, anstatt alles zu stapeln.

正在使用“adapt”。 What are best practices for tablet landscape orientation?

预期结果:

Tablet im Querformat eignet sich hervorragend für Master-Detail-Muster, nebeneinanderliegende Inhaltsbereiche, mehrspaltige Formulare und Inline-Bearbeitung. Verwenden Sie Zweispalten-Layouts anstatt Ein- oder Dreispalten. Unterstützen Sie sowohl Touch- als auch Pointer-Eingabe. Erlauben Sie orientationsspezifische Layouts, während Sie die Konsistenz der Informationsarchitektur beibehalten.

安全审计

安全
v1 • 3/15/2026

Static scanner flagged 31 potential issues, all evaluated as false positives. The 'external_commands' detections are CSS/HTML code examples (clamp(), display:none, srcset) incorrectly flagged. 'Weak cryptographic algorithm' and 'system reconnaissance' are common English words (desktop, mobile, context) wrongly matched. This is a pure design guidance skill with no executable code, network calls, or file operations.

1
已扫描文件
200
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude

质量评分

38
架构
100
可维护性
87
内容
35
社区
100
安全
83
规范符合性

你能构建什么

Mobile Website-Neugestaltung

Ein bestehendes Desktop-Website für mobile Benutzer mit touchfreundlichen Interaktionen und optimierten Layouts anpassen

Plattformübergreifende App-UI

Sicherstellen, dass eine Web-App nahtlos auf Desktop-Browsern und mobilen Tablets mit konsistenter UX funktioniert

E-Mail-Newsletter-Design

Eine webbasierte Ankündigung in eine mobileFriendly E-Mail umwandeln, die mit allen wichtigen E-Mail-Clients kompatibel ist

试试这些提示

Grundlegende mobile Anpassung 
Helfen Sie mir, dieses [Komponente/Seite/Design] für mobile Geräte anzupassen. Es wurde ursprünglich für [Desktop/Tablet] entworfen. Welche Änderungen sollte ich am Layout, der Navigation und den Interaktionen vornehmen?
Tablet- und Desktop-Strategie 
Ich habe ein Mobile-First-Design und muss es für Tablet und Desktop anpassen. Erstellen Sie eine Anpassungsstrategie, die den horizontalen Raum effektiv nutzt und gleichzeitig die Konsistenz beibehält.
Print- und E-Mail-Anpassung 
Wie passe ich ein Webseiten-Design für [Print/E-Mail] an? Was sind die wesentlichen Unterschiede bei Layout, Inhalt und technischen Einschränkungen, die ich berücksichtigen muss?
Responsive Implementierungsanleitung 
Geben Sie spezifische CSS-Techniken für die Implementierung von responsivem Design, einschließlich Breakpoints, Container-Queries, flüssiger Typografie mit clamp() und Touch-Target-Größen.

最佳实践

  • Beginnen Sie nach Möglichkeit mit dem Mobile-First-Ansatz und erweitern Sie dann progressive für größere Bildschirme
  • Verwenden Sie inhaltsgesteuerte Breakpoints anstelle von beliebigen Gerätebreiten
  • Testen Sie auf echten Geräten und verlassen Sie sich nicht nur auf Browser-DevTools-Emulation
  • Behalten Sie eine konsistente Informationsarchitektur über alle Breakpoints und Plattformen hinweg bei

避免

  • Kernfunktionalität auf mobilen Geräten ausblenden, anstatt sie funktionsfähig zu machen
  • Unterschiedliche Informationsarchitektur auf mobilen Geräten im Vergleich zu Desktop verwenden
  • Benutzererwartungen für jede Plattform brechen (z.B. Hamburger-Menüs auf Desktop)
  • Generische Breakpoints blind verwenden, ohne zu berücksichtigen, wo das Design tatsächlich bricht

常见问题

Was ist der Unterschied zwischen responsivem und adaptivem Design?
Responsives Design verwendet flüssige Layouts und CSS, um sich an jede Bildschirmgröße anzupassen. Adaptives Design verwendet vordefinierte Layouts für spezifische Gerätekategorien. Die meisten modernen Websites verwenden responsive Techniken.
Was sind die Standard-Responsive-Breakpoints?
Häufige Breakpoints sind: Mobile (320-767px), Tablet (768-1023px), Desktop (1024px+). Inhaltsgesteuerte Breakpoints, die zu den Stellen passen, an denen das Design bricht, sind jedoch effektiver als gerätebasierte.
Wie behandle ich Bilder für verschiedene Bildschirmgrößen?
Verwenden Sie srcset und das picture-Element, um verschiedene Bildgrößen basierend auf dem Viewport bereitzustellen. Berücksichtigen Sie auch die format-Eigenschaft für moderne Formate wie WebP mit Fallbacks und Lazy Loading für nicht sichtbare Bilder.
Welche Touch-Target-Größe sollte ich verwenden?
Verwenden Sie mindestens 44x44px Touch-Targets für alle interaktiven Elemente. Erhöhen Sie den Abstand zwischen Targets, um versehentliche Tippen zu verhindern. Entfernen Sie hover-abhängige Interaktionen, da Hover auf Touch-Geräten nicht funktioniert.
Wie passe ich die Navigation für mobile Geräte an?
Verwenden Sie Hamburger-Menüs oder untere Navigationsleisten auf mobilen Geräten. Halten Sie die Navigation einfach mit weniger Elementen. Stellen Sie Zurück-Buttons im Navigationsfluss sicher. Erwägen Sie fixierte Header für Kontext.
Sollte ich eine mobile spezifische Domain oder Subdomain verwenden?
Nein, responsives Design mit einer einzelnen URL wird für SEO und Benutzerfreundlichkeit bevorzugt. Separate mobile Websites (m.example.com) erwarten Wartungsaufwand und können die Suchrankings beeinträchtigen.

开发者详情

作者

pbakaus

许可证

MIT

仓库

https://github.com/pbakaus/impeccable/tree/main/source/skills/adapt/

引用

main

文件结构

📄 SKILL.md