react-native-designyazan Seth Hobson

React Native Design Skill.

Claude Code ve Codex için bir mobil uygulama tasarım skill'i: React Native stillendirme, navigasyon ve Reanimated animasyonları.

Mobil Uygulamalar
UI kodu

OpenDesign İndir Kullanım kılavuzunu görüntüle

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

Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · toplam 3.949 karakter

01 Ne yapar

react-native-design Skill'in Claude Code ve Codex İçinde Yaptığı Şey

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Bu skill, platformlar arası mobil uygulamalar oluşturmak için React Native stil desenlerini, React Navigation 6+'ı ve Reanimated 3'ü öğretir. Stil için StyleSheet ve styled-components'i, farklı ekran boyutları için duyarlı düzenleri, platforma özel iOS ve Android tasarımlarını, Gesture Handler ile hareket odaklı etkileşimleri ve performans optimizasyon tekniklerini kapsar.

Skill, UI iş parçacığında çalışan 60fps animasyonlar, uygun navigasyon tür tanımları ve gerçek cihaz test uygulamalarıyla yerel kalitede kullanıcı deneyimleri oluşturmaya odaklanır.

Neler üretir

TypeScript arayüzleri, StyleSheet tanımları ve Reanimated animasyonlarına sahip React Native bileşenleri
60fps performans için useSharedValue ve useAnimatedStyle ile Reanimated 3 kullanan animasyonlu bileşenler

Örnek istemi görün ↗

Nasıl Çalışır

01
StyleSheet ile Stil Verme
Daha iyi performans için satır içi stiller yerine StyleSheet.create kullanarak bileşen stillerini tanımlayın.
02
Tiplenmiş Rotalarla Navigasyon Oluşturma
Ekranlar arasında tür güvenliğini sağlamak için tüm navigator'lar için TypeScript ParamList tür tanımlarıyla React Navigation 6+ kullanarak navigasyonu uygulayın.
03
UI İş Parçacığında Animasyon
60fps performans elde etmek için UI iş parçacığında çalışan Reanimated 3 worklet'leriyle performanslı animasyonlar oluşturun; bunun için useSharedValue ve useAnimatedStyle kullanın.
04
GestureDetector ile Jestleri Yönetme
Gesture Handler kullanarak jest odaklı etkileşimler uygulayın; jestleri GestureDetector ile sarmalayın ve çakışmaları çözmek için simultaneousHandlers kullanın.
05
Render'ı Optimize Etme
Gereksiz yeniden render'ları önlemek için React.memo ve useCallback kullanın. Listeler için map ile ScrollView yerine her zaman FlatList kullanın.

02 Uyumunuzu bulun

react-native-design Skill'i Ne Zaman Kullanılır

Claude Code veya Codex'te iş bu türden mobil uygulama tasarımı olduğunda react-native-design skill'ini kullanın. Uygunluk ve sınırlar aşağıda skill'in kendi dosyasından alınmıştır.

İyi Uyum

React Native ile platformlar arası mobil uygulamalar oluşturma
React Navigation 6+ ile navigasyon uygulama
Reanimated 3 ile performanslı animasyonlar yaratma
Farklı ekran boyutları için duyarlı düzenler oluşturma
Gesture Handler ile jest odaklı etkileşimler oluşturma

Sınırları Bilin

React Native GerektirirSKILL.md bu bağımlılığı belirtir; skill projenizde React Native olmadan çalışmaz.

Ne Sağlamalısınız

Özel fontlarUygulamada özel tipografi için expo-font veya react-native-asset kullanılarak yüklenen font dosyaları.

03 Skill'in içinde

react-native-design Skill'inin Claude Code ve Codex'e Verdiği Kurallar

Ajanın için SKILL.md dosyasının belirlediği 5 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Navigasyon için TypeScript
Navigasyon sınırları boyunca tip güvenliğini korumak için tüm navigator'lar için ParamList tiplerini tanımlayın.
Güvenli Alan Yönetimi
Çentikli iPhone'larda ve kesikli Android telefonlarda güvenli alanları yönetmek için SafeAreaView veya useSafeAreaInsets kullanın.
Bileşenleri Memoize Edin
Gereksiz bileşen yeniden render'larını önlemek ve performansı optimize etmek için React.memo ve useCallback kullanın.
Gerçek Cihazda Test
Simülatör ve emülatör performansı gerçek cihaz performansından farklı olduğu için gerçek cihazlarda test edin.
Animasyonları Temizleyin
Bellek sızıntılarını önlemek için animasyonları iptal edin ve temizliği useEffect içinde yapın.

04 İşe koyun

Claude Code veya Codex'e react-native-design Yükleme

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

react-native-design'ı Claude Code, Codex veya Ajanınıza Ekleme

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/wshobson/agents --skill react-native-design

plugins/ui-design/skills/react-native-design/SKILL.md için genel skills CLI formu; depo kendi yolunu farklı belgeleyebilir.

Skill'e İlk Mobil Uygulama Tasarım Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

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.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

Çıktıyı kabul etmeden önce, transkript ve dosyalarda bunları arayın:

Sonuç, bu skill için katalog listelerinin gösterdiği gibi, UI kodu olarak teslim edilir.
Ajan, sonucu üretmeden önce planında veya transkriptinde react-native-design skill'ini belirtir.
Projede React Native mevcut; skill bunun yerine geçmez.
Kendi içeriğiniz, isimleriniz ve numaralarınız çıktıda değişmeden görünür.

OpenDesign'da react-native-design'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill dosyası: plugins/ui-design/skills/react-native-design/SKILL.md İçerik sağlaması doğrulama sırasında kaydedildi; commit 4236bb9
License: MIT LICENSE dosyasından.
Repository yıldızları: 39.635 GitHub anlık görüntüsü 2026-09-14 tarihinde wshobson/agents deposunun tamamı için alındı; bu katalogda 18 skill içermektedir. react-native-design için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Bu Skill Ne Zaman KullanılırReact Native uygulamaları, navigasyon, animasyonlar, stillendirme ve platforma özgü tasarımlar için sekiz senaryo listeler
Temel Kavramlar8 KB skill gövdesi sınırı nedeniyle references/details.md'ye taşındı, başlangıçta 6471 bayttı
Hızlı Başlangıç BileşeniReanimated yay animasyonu ve StyleSheet stillendirmesiyle ItemCard'ın TypeScript örneği
En İyi UygulamalarTypeScript, memoization, UI thread animasyonları, StyleSheet, güvenli alanlar, cihaz testi, FlatList, Platform.select ile ilgili sekiz kural
Sık Karşılaşılan SorunlarGesture'lar, navigasyon türleri, animasyon takılmaları, bellek sızıntıları, fontlar, güvenli alanlar için altı sorun ve çözüm

Skill'in Kendi Açıklaması

"Platformlar arası mobil geliştirme için React Native stil, navigasyon ve Reanimated animasyonlarında ustalaşın. React Native uygulamaları oluştururken, navigasyon desenlerini uygularken veya performanslı animasyonlar yaratırken kullanın."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 3.949 karakterdir. GitHub'da dosyanın tamamını okuyun.

React Native Design

react-native-design ile gerçek bir mobil uygulama tasarım görevini çalıştırın.

OpenDesign indirin, react-native-design dosyasını SKILL.md bağlantısından içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın