adapt

Überblick

Was ist die adapt Skill?

Die adapt Skill richtet sich an Frontend-Entwickler und UI-Designer, die digitale Produkte nahtlos auf verschiedenen Geräten und Bildschirmgrößen zum Laufen bringen müssen. Sie bietet einen strukturierten Workflow, um bestehende Designs – etwa Desktop-Weblayouts – an neue Kontexte wie Mobilgeräte, Tablets, Druck oder andere Plattformen anzupassen. Die Skill behandelt wesentliche Techniken des responsiven Designs, darunter Breakpoints, flexible Layouts und die Optimierung von Touch-Zielen.

Für wen ist adapt geeignet?

Nutzen Sie die adapt Skill, wenn Sie:

• Eine Website oder App für Mobil- oder Tablet-Kompatibilität aktualisieren
• Sicherstellen möchten, dass Ihre UI auf verschiedenen Geräten und Eingabemethoden funktioniert
• Herausforderungen bei der geräte- oder plattformübergreifenden Nutzererfahrung angehen
• Anforderungen an responsives Design, Viewport-Anpassung oder Multi-Device-Support erfüllen wollen

Welche Probleme löst sie?

• Anpassung von Desktop-Designs für Mobilgeräte oder Tablets
• Umgang mit verschiedenen Eingabemethoden (Touch, Maus, Tastatur etc.)
• Verwaltung unterschiedlicher Bildschirmgrößen, Auflösungen und Ausrichtungen
• Verbesserung von Barrierefreiheit und Benutzerfreundlichkeit über Plattformen hinweg

Anwendung

Installationsschritte

1. Installieren Sie die adapt Skill mit folgendem Befehl:

   npx skills add https://github.com/pbakaus/impeccable --skill adapt
   

2. Beginnen Sie mit der Datei SKILL.md für eine ausführliche Workflow-Übersicht. Für weitere Informationen sehen Sie sich README.md, AGENTS.md, metadata.json sowie Ordner wie rules/, resources/ oder references/ an, sofern vorhanden.

Workflow-Übersicht

• Unverzichtbare Vorbereitung:

  • Führen Sie zuerst die /frontend-design Skill aus, um Designprinzipien und Kontext zu erfassen. Falls kein Designkontext vorliegt, nutzen Sie /teach-impeccable, um eine Basis zu schaffen.
  • Sammeln Sie Informationen zu Zielgeräten, Plattformen und Nutzungsszenarien.

• Bewertung der Anpassungsaufgabe:

  • Identifizieren Sie den ursprünglichen Designkontext (z. B. Desktop-Web, Mobile App).
  • Definieren Sie den Zielkontext: Gerätetyp, Eingabemethode, Bildschirmbeschränkungen, Verbindungsgeschwindigkeit und Nutzererwartungen.
  • Listen Sie spezifische Anpassungsherausforderungen für Ihr Projekt auf.

• Planung und Umsetzung der Anpassung:

  • Bestimmen Sie notwendige Breakpoints und Layoutänderungen.
  • Passen Sie UI-Elemente für Touch oder andere Eingabemethoden an.
  • Testen Sie auf verschiedenen Geräten und Kontexten, um Benutzerfreundlichkeit und Konsistenz sicherzustellen.

Empfohlene Dateien zum Durchsehen

• SKILL.md (Hauptworkflow und Anleitung)

FAQ

Wann sollte ich die adapt Skill verwenden?

Verwenden Sie adapt, wenn Sie ein bestehendes Design für neue Geräte, Bildschirmgrößen oder Plattformen anpassen müssen – insbesondere bei Anforderungen an responsives Design oder geräteübergreifende Kompatibilität.

Welche Voraussetzungen gibt es für die Nutzung von adapt?

Stellen Sie vor der Nutzung von adapt sicher, dass Sie den notwendigen Designkontext durch Ausführung von /frontend-design und gegebenenfalls /teach-impeccable erfasst haben.

Unterstützt adapt sowohl mobile als auch Desktop-Anpassungen?

Ja, adapt eignet sich zur Anpassung von Designs in beide Richtungen (Desktop zu Mobil oder Mobil zu Desktop) sowie für Tablets, Druck und andere Kontexte.

Wo finde ich detailliertere Anleitungen?

Die Datei SKILL.md im Repository enthält einen schrittweisen Workflow und zusätzliche Ressourcen. Nutzen Sie den Reiter "Files", um unterstützende Skripte und Referenzen zu erkunden.