stitch::react-nativeyazan Google Labs

Stitch React Native Skill.

Claude Code ve Codex için mobil uygulama tasarımı skill'i: Stitch HTML tasarımlarını React Native bileşenlerine dönüştürür veya senkronize eder.

Mobil Uygulamalar
UI kodu

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

google-labs-code/stitch-skills · plugins/stitch-build/skills/react-native/SKILL.mdSKILL.md

--- name: stitch::react-native description: - Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet. --- ## Phase 1: Retrieval and networking ## Phase 2: Theme extraction ## Phase 3: Architectural rules and HTML mapping ## Phase 4: Execution steps

Ön bilgi ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okunmuştur · tam hali 12.389 karakter

01 Ne yapar

stitch::react-native Skill'i Claude Code ve Codex'te Ne Yapar

Ö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, Stitch HTML/CSS web tasarımlarını StyleSheet kullanarak üretime hazır React Native bileşenlerine dönüştürür ve mevcut native bileşenleri en güncel Stitch tasarımlarıyla senkronize edebilir. Dört aşamalı bir süreçte çalışır: scripts/fetch-stitch.sh ile her ekranı indirin ve her ekran görüntüsünü görsel olarak denetleyin, tailwind.config token'larını src/theme.ts içine çıkarın, HTML öğelerini ve CSS'i katı mimari kurallar altında React Native ilkellerine eşleyin, ardından resources/component-template.tsx'ten bileşenleri taslak haline getirin.

Bileşenler, src/components/ altındaki Atomic Design klasörlerini takip eder, mantık src/hooks/ içinde yer alır, içerik src/data/mockData.ts içindedir ve her bileşen dosyası salt-okunur bir [ComponentName]Props arayüzü dışa aktarır. npm run validate ve tsc --noEmit ile doğrulama isteğe bağlıdır ve kullanıcının iznini gerektirir.

Neler üretir

src/theme.ts, tasarımın tailwind.config'inden çıkarılan renkleri, boşlukları ve tipografiyi barındıran bir TypeScript token dosyası.
src/data/mockData.ts, tüm statik metinleri, görsel URL'lerini ve listeleri barındırır; böylece bileşenlerde hiçbir içerik sabit kodlanmaz.
src/hooks/ altındaki özel hook'lar, olay işleyicilerini, API çağrılarını ve iş mantığını üstlenir, bileşenler yalnızca render işlemi yapar.
Uygulama klasörü içine yazılan ve çalışma alanı köküne yansıtılan bir .stitch/metadata.json dosyası.

Örnek istemi görün ↗

Nasıl Çalışır

01
MCP Ad Alanını Keşfet
Stitch MCP önekini bulmak için list_tools çalıştırın, ardından oturum boyunca yapılacak her sonraki çağrıda bu öneki yeniden kullanın.
02
İndirmeyi Script Üzerinden Yapın
Dahili fetch araçları Google Cloud Storage alan adlarında başarısız olabilir, bu nedenle HTML ve ekran görüntüleri, yönlendirmeleri ve güvenlik el sıkışmalarını yöneten scripts/fetch-stitch.sh üzerinden indirilir.
03
Her Ekran Görüntüsünü Denetleyin
Tasarımın nasıl göründüğünü varsaymak yerine, tasarım amacını ve düzen ayrıntılarını doğrulamak için indirilen PNG'yi açın.
04
Temayı Çıkarın
Her HTML head script bloğu içindeki tailwind.config nesnesini renkler, yazı tipleri, boşluklar, köşe yarıçapları ve tipografi için okuyun, ardından bunları TypeScript sabitleri olarak src/theme.ts'e yazın.
05
Şablondan Taslak Hazırlayın
Her bileşene resources/component-template.tsx dosyasından başlayın ve yer tutucu bileşen adının her örneğini bulup değiştirin.
06
Senkronizasyon Meta Verisini Kaydet
Proje yapılandırmasını, mevcut senkronizasyon çalıştırma zamanıyla eşleşen bir Last Sync Time alanıyla birlikte .stitch/metadata.json dosyasına kaydedin.

02 Uyumunuzu bulun

stitch::react-native Skill Ne Zaman Kullanılır

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

İyi Uyum

Bileşenleri kaymış ve en yeni Stitch tasarımlarıyla yeniden hizalanması gereken mevcut bir React Native uygulaması.
App.tsx içinde bir stack veya tab navigator ile bağlanmış bir NavigationContainer gerektiren, çok ekranlı bir Stitch projesi.
Gölgelerin her iki platformda da doğru görünmesi gereken, iOS gölge özellikleri için Platform.select ve Android için elevation ile ele alınan bir tasarım.
Çalışmayı tamamlanmış olarak kabul etmeden önce çıktının yazılı bir mimari kontrol listesine karşı çalıştırılmasını isteyen ekipler.

Sınırları Bilin

CSS hover, transition veya animasyon efektlerine dayanan tasarımlar: hover ve transition'ın karşılığı yoktur, animasyonlar react-native-reanimated'e aittir.
Web tasarımından açılır menü veya select alanları, çünkü React Native yerleşik bir select ile gelmez ve üçüncü taraf bir picker veya özel bir modal gerektirir.
Web görsel beklentileri: bir React Native Image'ın kendine özgü bir boyutu yoktur, bu nedenle her zaman width ve height veya bir aspectRatio verilmelidir.

Ne Sağlamalısınız

Stitch projesi ve MCP önekiAjan, Stitch MCP önekini bulmak için list_tools çalıştırır ve bunu tüm get_screen ve get_project çağrıları için yeniden kullanır.
Ekranın genişlik değeriEkran meta verisindeki genişlik kullanılarak ekran görüntüsü URL'lerine =w{width} eklenmelidir, çünkü aksi halde Google'ın CDN'i düşük çözünürlüklü küçük resimler sunar.
Doğrulama ve uygulamayı çalıştırma için onayUygulamanın bir cihazda doğru şekilde render edildiğini kontrol etmek için packager'ı başlatmadan veya görsel simülatör denetimlerini başlatmadan önce izin gereklidir.

03 Skill'in içinde

stitch::react-native Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Alım Sürecinde Kısayol Yok
1. Aşama, tüm ekranlar betik aracılığıyla indirilip görsel olarak denetlendikten sonra tamamlanmış sayılır; önce MCP get_screen çağrısı yapmadan yerel tasarım dosyalarını okumak yasaktır.
Tasarımları Yenilemeden Önce Sorun
.stitch/designs/{page}.html ve .png dosyaları zaten mevcutsa, ajan Stitch projesinden yenilemeyi mi yoksa yerel dosyaları kullanmayı mı istediğinizi sormalı ve yalnızca onay üzerine yeniden indirmelidir.
Bileşenlerde Ham Renk Yok
Renk hex kodları ve rgba dizeleri bileşen dosyalarında yasaktır; her renk, boşluk ve font boyutu değeri src/theme.ts'den gelmelidir.
Salt Okunur Bir Props Interface'i Dışa Aktarın
Ekranlar dahil her bileşen dosyası, readonly değiştiricilerle [ComponentName]Props adlı bir interface dışa aktarmalıdır, aksi halde doğrulama başarısız olur.
Doğru Paketten Güvenli Alanlar
Üst düzey ekranlar, react-native ile birlikte gelen varsayılan bileşen yerine react-native-safe-area-context'ten SafeAreaView ile sarılmalıdır.
Atomic Design Dosyalarına Bölün
Bileşenler src/components/atoms/, molecules/ ve organisms/ klasörlerine yerleştirilir; tüm arayüzü tek bir sayfa veya ekran dosyasına koymak yasaktır.
Google Başlıklarını Kullanmayın
Oluşturulan bileşenler hedef projenin kurallarına uyar ve Google lisans başlıkları içermemelidir.
Test Öncesi İzin Alın
Doğrulama betikleri, paketleyiciler ve simülatör denetimleri tek başına başlatılmaz; ajan önce kullanıcının iznini istemelidir.

04 İşe koyun

Claude Code veya Codex'e stitch::react-native Kur

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

Claude Code, Codex veya Ajanınıza stitch::react-native Ekleyin

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

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::react-native

plugins/stitch-build/skills/react-native/SKILL.md için genel skills CLI formu; depo kendi yolunu belgelemiş olabilir.

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

Convert the Stitch designs in project [project ID] to React Native. Download every screen with scripts/fetch-stitch.sh, visually audit the screenshots, extract the tailwind.config tokens into src/theme.ts, and build the components from resources/component-template.tsx using the atoms, molecules and organisms folders. Please hold off on starting the packager or a simulator audit for now.

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

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Bileşenler ve ekranlardaki her .tsx dosyasına karşı doğrulayıcıyı çalıştırarak bileşen geçerliliğini bildirin.
Projenin hâlâ derlendiğini doğrulamak için TypeScript derleyicisini no-emit modunda çalıştırın.
src/theme.ts içindeki renklerin ve fontların HTML tasarımından çıkanlarla gerçekten eşleştiğini doğrulayın.
Hiçbir ham metnin bir Text bileşeninin dışında yer almadığını kontrol edin, çünkü React Native bu durumda çöker.

OpenDesign'da stitch::react-native'i kendi 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: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Skill dosyası: plugins/stitch-build/skills/react-native/SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit 0337446
License: Apache-2.0 LICENSE dosyasından.
Repository yıldızları: 8.304 GitHub görüntüsü 2026-09-14 tarihinde, bu katalogda 12 skill içeren google-labs-code/stitch-skills deposunun tamamı için alınmıştır. stitch::react-native 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

Aşama 1: Erişim ve ağ iletişimiMCP önekini bulun, her ekranı getirin, HTML ve ekran görüntülerini betikle indirin, görsel olarak denetleyin, meta verileri kaydedin.
Aşama 2: Tema çıkarımıtailwind.config renk, font, boşluk, köşe yuvarlama ve tipografi token'larını src/theme.ts içine aktarın.
Aşama 3: Mimari kurallar ve HTML eşlemesiHTML etiketlerini ilkellere eşleyin, CSS'i StyleSheet'e dönüştürün, Atomic Design, hook, tema ve erişilebilirlik kurallarına uyun.
Aşama 4: Yürütme adımlarıBağımlılıkları kurun, şablondan tema, veri ve bileşenleri oluşturun, navigasyonu bağlayın, ardından isteğe bağlı olarak izinle doğrulayın.
Sorun gidermeGetirme hataları, doğrulama başarısızlıkları, sarılmamış metin, görsel boyutlandırma ve VirtualizedList uyarıları için düzeltmeler.

Skill'in Kendi Açıklaması

"- Stitch HTML tasarımlarını React Native bileşenlerine dönüştürür veya mevcut native bileşenleri en güncel Stitch tasarımlarıyla eşitlemek üzere günceller, StyleSheet kullanarak."

SKILL.md dosyasından front-matter açıklaması. Dosyanın tamamı yaklaşık 12.389 karakterdir. Dosyanın tamamını GitHub'da okuyun.

06 Kurmadan önce

stitch::react-native Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Stitch MCP'yi atlayıp doğrudan yerel HTML dosyalarını verebilir miyim?

Hayır. Aşama 1, hiçbir şey okunmadan önce her ekranın get_screen ile getirilmesini ve scripts/fetch-stitch.sh ile indirilmesini gerektirir; önce get_screen çağırmadan yerel tasarım HTML'ini doğrudan okumak bir anti-pattern olarak listelenmiştir.

Bu sadece yeni ekranları mı iskeletlendiriyor, yoksa sahip olduğum bir uygulamayı güncelleyebilir mi?

İkisini de yapar. Yeni Stitch HTML'ini bileşenlere dönüştürmenin yanı sıra, skill mevcut yerel bileşenleri en son Stitch tasarımlarıyla eşleşecek şekilde senkronize eder ve günceller.

Sonucu kontrol etmek için kendi başına bir simülatör veya paketleyici başlatır mı?

Varsayılan olarak hayır. Aşama 4 doğrulaması, denetimler ve simülatör veya paketleyici testleri isteğe bağlıdır ve ajan doğrulama betiklerini çalıştırmadan, bir paketleyici başlatmadan veya simülatör denetimleri başlatmadan önce izninizi almalıdır.

Stitch React Native

stitch::react-native skill'ini Gerçek Bir Mobil Uygulama Tasarım Görevinde Çalıştırın.

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

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