react-native-designvon Seth Hobson

React Native Design Skill.

Ein Claude Code und Codex Skill für Mobile-App-Design: React Native Styling, Navigation und Reanimated-Animationen.

Mobile Apps
UI-Code

OpenDesign herunterladen Anleitung ansehen

wshobson/agents · plugins/ui-design/skills/react-native-design/SKILL.mdSKILL.md

--- name: react-native-design description: Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations. --- ## When to Use This Skill ## Detailed section: Core Concepts ## Quick Start Component ## Best Practices

Metadaten und Abschnittsüberschriften aus der Quelldatei vom 14.09.2026 · 3.949 Zeichen insgesamt

01 Was es tut

Was der react-native-design Skill 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 React-Native-Styling-Muster, React Navigation 6+ und Reanimated 3 für den Bau plattformübergreifender mobiler Anwendungen. Er behandelt StyleSheet und styled-components für das Styling, responsive Layouts für unterschiedliche Bildschirmgrößen, plattformspezifische iOS- und Android-Designs, gestengesteuerte Interaktionen mit Gesture Handler und Techniken zur Leistungsoptimierung.

Der Skill konzentriert sich darauf, Nutzererlebnisse in nativer Qualität zu schaffen, mit 60-fps-Animationen, die auf dem UI-Thread laufen, korrekten Navigations-Typdefinitionen und Praktiken zum Testen auf echten Geräten.

Was er erzeugt

React-Native-Komponenten mit TypeScript-Interfaces, StyleSheet-Definitionen und Reanimated-Animationen
Animierte Komponenten mit Reanimated 3 unter Verwendung von useSharedValue und useAnimatedStyle für 60-fps-Leistung

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Mit StyleSheet stylen
Definieren Sie Komponentenstile mit StyleSheet.create statt mit Inline-Styles, um eine bessere Performance zu erzielen.
02
Navigation mit typisierten Routen aufbauen
Implementieren Sie die Navigation mit React Navigation 6+ und TypeScript-ParamList-Typdefinitionen für alle Navigatoren, um Typsicherheit über alle Screens hinweg zu gewährleisten.
03
Animationen auf dem UI-Thread ausführen
Erstellen Sie performante Animationen mit Reanimated-3-Worklets, die auf dem UI-Thread laufen, indem Sie useSharedValue und useAnimatedStyle für 60fps-Performance einsetzen.
04
Gesten mit GestureDetector verarbeiten
Implementieren Sie gestengesteuerte Interaktionen mit Gesture Handler, umschließen Sie Gesten mit GestureDetector und lösen Sie Konflikte mit simultaneousHandlers.
05
Rendering optimieren
Verwenden Sie React.memo und useCallback, um unnötige Rerenders zu vermeiden. Nutzen Sie für Listen immer FlatList statt ScrollView mit map.

02 Finden Sie Ihren Favoriten

Wann Sie das react-native-design Skill verwenden

Verwenden Sie den react-native-design Skill in Claude Code oder Codex, wenn die Aufgabe Mobile-App-Design dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Plattformübergreifende mobile Apps mit React Native erstellen
Navigation mit React Navigation 6+ implementieren
Performante Animationen mit Reanimated 3 erstellen
Responsive Layouts für verschiedene Bildschirmgrößen erstellen
Erstellen gestengesteuerter Interaktionen mit Gesture Handler

Grenzen kennen

Benötigt React NativeDie SKILL.md nennt diese Abhängigkeit; das Skill funktioniert ohne React Native in Ihrem Projekt nicht.

Was Sie bereitstellen sollten

Benutzerdefinierte SchriftenSchriftdateien, die mit expo-font oder react-native-asset für benutzerdefinierte Typografie in der App geladen werden.

03 Innerhalb des Skills

Regeln, die der react-native-design-Skill Claude Code und Codex vorgibt

5 konkrete Anweisungen, Standardwerte und Grenzen, die SKILL.md für den Agenten festlegt — der Teil der Datei, der das Ergebnis verändert.

TypeScript für Navigation
Definieren Sie ParamList-Typen für alle Navigatoren, um Typsicherheit über Navigationsgrenzen hinweg zu gewährleisten.
Umgang mit dem sicheren Bereich (Safe Area)
Verwenden Sie SafeAreaView oder useSafeAreaInsets, um Geräte mit Notch bei iPhones und Android-Telefonen mit Aussparungen zu berücksichtigen.
Komponenten memoisieren
Verwenden Sie React.memo und useCallback, um unnötige Rerenders von Komponenten zu vermeiden und die Performance zu optimieren.
Tests auf echten Geräten
Testen Sie auf echten Geräten, da sich die Performance von Simulator und Emulator von der tatsächlichen Geräte-Performance unterscheidet.
Animationen bereinigen
Beenden Sie Animationen und führen Sie das Aufräumen in useEffect durch, um Speicherlecks zu vermeiden.

04 In Betrieb nehmen

Installieren Sie react-native-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.

Fügen Sie react-native-design zu Claude Code, Codex oder Ihrem Agent hinzu

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 react-native-design

Generische skills-CLI-Form für plugins/ui-design/skills/react-native-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 card component for [my e-commerce app] that shows a product image, title, and price. Add a spring animation that scales the card down to 0.97 when pressed, and use React Navigation to navigate to a detail screen when tapped. Make sure it handles safe areas on notched devices and uses TypeScript for all props.

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 das react-native-design-Skill in seinem Plan oder Transkript, bevor er das Ergebnis erzeugt.
React Native ist im Projekt vorhanden; das Skill ersetzt es nicht.
Ihre eigenen Inhalte, Namen und Zahlen erscheinen unverändert in der Ausgabe.

In OpenDesign importieren Sie react-native-design über seinen 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/react-native-design/SKILL.md Inhaltsprüfsumme bei Verifizierung aufgezeichnet; Commit 4236bb9
License: MIT Aus LICENSE.
Repository-Sterne: 39.635 GitHub-Snapshot vom 14.09.2026 für das gesamte wshobson/agents-Repository, das 18 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für react-native-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 Sie diesen Skill verwenden solltenListet acht Szenarien für React-Native-Apps, Navigation, Animationen, Styling und plattformspezifische Designs auf
KernkonzepteAufgrund der 8-KB-Grenze für den Skill-Body nach references/details.md verschoben, ursprünglich 6471 Bytes
Schnellstart-KomponenteTypeScript-Beispiel einer ItemCard mit Reanimated-Spring-Animation und StyleSheet-Styling
Best PracticesAcht Regeln zu TypeScript, Memoization, UI-Thread-Animationen, StyleSheet, Safe Areas, Gerätetests, FlatList, Platform.select
Häufige ProblemeSechs Probleme und Lösungen zu Gestures, Navigation-Typen, Animation-Jank, Memory-Leaks, Fonts, Safe Areas

Die eigene Beschreibung des Skills

Beherrschen Sie React Native Styling, Navigation und Reanimated-Animationen für plattformübergreifende Mobile-Entwicklung. Verwenden Sie es beim Erstellen von React Native Apps, beim Implementieren von Navigationsmustern oder beim Erstellen performanter Animationen.

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

React Native Design

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

Laden Sie OpenDesign herunter, importieren Sie react-native-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