mobile-android-designvon Seth Hobson

Mobile Android Design Skill.

Ein Claude Code und Codex skill für Mobile-App-Design: native Android UI mit Material Design 3 und Jetpack Compose.

Mobile Apps
UI-Code

OpenDesign herunterladen Anleitung ansehen

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

--- name: mobile-android-design description: Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines. --- ## When to Use This Skill ## Detailed section: Core Concepts ## Quick Start Component ## Best Practices

Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 3.797 Zeichen insgesamt

01 Was es tut

Was der Skill mobile-android-design in Claude Code und Codex leistet

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

Dieser Skill vermittelt Agents, native Android-Anwendungen mit Material Design 3 (Material You) und Jetpack Compose zu erstellen. Er umfasst die Implementierung von Compose-UI-Layouts, Android-Navigationsmustern mit Navigation Compose, adaptiven Layouts für Smartphones, Tablets und Foldables, Material-3-Theming mit dynamischen Farben, barrierefreien Android-Oberflächen sowie Android-spezifischen Gesten und Interaktionen.

Der Skill konzentriert sich auf die Erstellung moderner, adaptiver Android-Anwendungen, die sich nahtlos in das Android-Ökosystem einfügen, den Material-Design-Richtlinien von Google folgen und unterschiedliche Bildschirmkonfigurationen berücksichtigen.

UI-Code

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Material-3-Theming anwenden
Greifen Sie über MaterialTheme.colorScheme auf Farben zu, um den Dark Mode automatisch zu unterstützen und dynamische Farben auf Android 12+ zur Personalisierung zu aktivieren.
02
Compose-UI-Komponenten erstellen
Erstellen Sie Composables nach Jetpack-Compose-Mustern mit korrektem State Hoisting, damit Komponenten wiederverwendbar und testbar sind.
03
Adaptive Layouts implementieren
Verwenden Sie WindowSizeClass, um responsive Designs zu erstellen, die sich an Smartphones, Tablets und Foldables anpassen.
04
Barrierefreiheit-Unterstützung hinzufügen
Geben Sie für alle interaktiven Elemente eine contentDescription an und stellen Sie mindestens 48dp große Touch-Ziele für Barrierefreiheit sicher.
05
State korrekt handhaben
Verwenden Sie remember und rememberSaveable angemessen, um Statusverlust bei Konfigurationsänderungen zu vermeiden.

02 Finden Sie Ihren Favoriten

Wann Sie den mobile-android-design Skill verwenden

Verwenden Sie den mobile-android-design-Skill in Claude Code oder Codex, wenn es um Mobile-App-Design dieser Art geht. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Gestaltung von Android-App-Oberflächen nach den Richtlinien von Material Design 3
Erstellung von Jetpack-Compose-UI und -Layouts für native Android-Anwendungen
Erstellung adaptiver Layouts, die auf Smartphones, Tablets und Foldables funktionieren
Implementierung von Android-Navigationsmustern mit Navigation Compose
Erstellung barrierefreier Android-Oberflächen mit geeigneten Touch-Zielen und Content-Beschreibungen

03 Innerhalb des Skills

Regeln, die der Skill mobile-android-design Claude Code und Codex vorgibt

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

LazyColumn für lange Listen
Verwenden Sie LazyColumn statt Column, wenn Sie lange scrollbare Listen anzeigen, um Performance-Probleme zu vermeiden.

04 In Betrieb nehmen

Installation von mobile-android-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.

mobile-android-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 mobile-android-design

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

Geben Sie dem Skill eine erste Mobile-App-Design-Aufgabe

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

Starter prompt

Build a product listing screen for [app name] using Jetpack Compose with Material Design 3. The screen should display a list of [items] with thumbnails, titles, and prices. Use adaptive layout with WindowSizeClass to show a single column on phones and a two-column grid on tablets. Each item card should navigate to a detail screen when tapped. Include proper state hoisting and accessibility support with content descriptions.

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 den mobile-android-design Skill in seinem Plan oder Transkript, bevor er das Ergebnis liefert.
Ihre eigenen Inhalte, Namen und Zahlen erscheinen unverändert in der Ausgabe.

In OpenDesign importieren Sie mobile-android-design über dessen 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/mobile-android-design/SKILL.md Inhalts-Prüfsumme bei Verifizierung erfasst; Commit 4236bb9
License: MIT Aus LICENSE.
Repository-Sterne: 39.635 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository wshobson/agents, das 18 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für mobile-android-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 Szenarien für Material Design 3, Compose UI, Navigation, adaptive Layouts, Theming und Barrierefreiheit auf
KernkonzepteDetaillierte technische Inhalte wurden aufgrund von Größenbeschränkungen nach references/details.md verschoben
Schnellstart-KomponenteEnthält ein vollständiges Compose-Codebeispiel für ItemListCard mit Material Design 3-Styling
Best PracticesAcht konkrete Regeln zu Theming, dynamischer Farbe, Layouts, Barrierefreiheit, State und Previews
Häufige ProblemeSechs häufige Probleme: Recomposition, State-Verlust, Performance, Theme-Leaks, Navigation und Memory-Leaks

Die eigene Beschreibung des Skills

„Beherrschen Sie Material Design 3 und Jetpack Compose-Muster für die Entwicklung nativer Android-Apps. Verwenden Sie diesen Skill beim Entwerfen von Android-Oberflächen, der Implementierung von Compose-UI oder beim Befolgen von Googles Material Design-Richtlinien."

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

Mobile Android Design

Führen Sie mobile-android-design für eine echte Mobile-App-Design-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie mobile-android-design über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen