stitch::react-componentsyazan Google Labs

Stitch React Components Skill.

Claude Code ve Codex için bir UI tasarım skill'i: Stitch tasarımlarını modüler React + Vite bileşenlerine dönüştürür veya senkronize eder.

Web & UI
UI kodu

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

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

--- name: stitch::react-components description: - Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation. --- ## Phase 1: Retrieval and networking ## Phase 2: Style extraction ## Phase 3: Architectural rules ## Phase 4: Execution steps

Üst veri ve bölüm başlıkları 2026-09-14 tarihinde yukarı akış dosyasından okundu · Tam halde 8.725 karakter

01 Ne yapar

stitch::react-components 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, bir Stitch projesini modüler bir React ve Vite ön ucuna dönüştürür veya mevcut React bileşenlerini en güncel Stitch tasarımlarıyla senkronize eder. Stitch ekranlarıyla çalışan frontend mühendisleri içindir: ajan, list_tools ile Stitch MCP önekini bulur, get_screen ile her ekranı çeker, scripts/fetch-stitch.sh aracılığıyla HTML ve ekran görüntülerini indirir, tailwind.config token'larını resources/style-guide.json'a çıkarır, ardından AST doğrulamasının kontrol ettiği bileşenleri, hook'ları ve sahte verileri oluşturur.

Dört kapılı aşama bu sırayı zorunlu kılar ve npm run validate, Readonly Props arayüzlerini, hex değerleri yerine tema token'larını ve tekil (monolithic) sayfa dosyalarının bulunmamasını zorunlu kılar.

Neler üretir

Her ekran için .stitch/designs/{page}.html ve .stitch/designs/{page}.png konumlarında indirilen tasarım varlıkları.
projectId, title, deviceType, bir screens haritası ve bir Last Sync Time alanı tutan bir .stitch/metadata.json.
Geçerli projenin renk, yazı tipi, boşluk, radius ve tipografi token'larını taşıyan, üzerine yazılmış bir resources/style-guide.json.
src/components içinde React bileşenleri, src/hooks içinde hook'lar, src/data/mockData.ts içinde mock veriler ve bunları render eden güncellenmiş bir giriş noktası.

Örnek istemi görün ↗

Nasıl Çalışır

01
Stitch Namespace'ini Bulun
MCP önekini bulmak için list_tools'u çalıştırın, ardından bu öneki sonraki her Stitch çağrısında yeniden kullanın.
02
Her Ekran İçin Metadata Çekin
Tasarım JSON'unu ve indirme URL'lerini almak için projedeki her ekran için get_screen'i çağırın; hiçbir ekran atlanmasın.
03
İndirmeyi Script Üzerinden Yapın
Dahili fetch araçları Google Cloud Storage'a karşı başarısız olabilir, bu nedenle indirmeler yönlendirmeleri ve güvenlik el sıkışmalarını yöneten sağlanan bash script'i üzerinden yapılır.
04
Tasarım Token'larını Çıkarın
İndirilen her HTML dosyasını açın ve renkler, yazı tipleri, boşluklar, radius ve tipografi için head script bloğundaki tailwind.config nesnesini okuyun.
05
Şablondan Bileşenleri Taslak Haline Getirin
Gönderilen bileşen şablonunu temel olarak kullanın ve giriş noktasını bağlamadan önce yer tutucu bileşen adının her örneğini yeniden adlandırın.

02 Uyumunuzu bulun

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

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

İyi Uyum

Stitch tasarımlarınız var ve bir büyük dönüştürülmüş sayfa yerine temiz, modüler React kodu istiyorsunuz.
Zaten React bileşenleriniz var ve bunların en yeni Stitch tasarımlarıyla yeniden hizalanması gerekiyor.
Her Stitch ekranının bağımsız bir sayfa olduğu, gerçek rotalar ve çalışan navigasyon gerektiren yer tutucu bağlantılara sahip çok sayfalı bir uygulama oluşturuyorsunuz.
Oluşturulan kodu göz kararı incelemek yerine üzerinde otomatik kalite kontrolleri istiyorsunuz.

Sınırları Bilin

Kısmen çalıştırılamaz. Skill, her adımın zorunlu olduğunu ve her bölümde ilerlemeden önce karşılanması gereken bir kapı bulunduğunu belirtir.
Ona zaten indirilmiş tasarım HTML'i verip MCP alım aşamasını atlayamazsınız.
Kendi inisiyatifiyle geliştirme sunucusunu başlatmaz veya tarayıcı denetimleri çalıştırmaz.
Oluşturulan bileşenler Google lisans başlıkları taşımamalıdır.

Ne Sağlamalısınız

Mevcut yerel tasarım dosyaları hakkında bir karar.stitch/designs/{page}.html ve .png dosyaları zaten mevcutsa, yeniden indirmek mi yoksa yeniden kullanmak mı istediğiniz sorulur; skill bunu varsaymaz.
Doğrulama adımları için izinnpm run dev başlamadan veya görsel bir tarayıcı denetimi başlamadan önce sizden onay istenir.
Hedef projenin kendi kısıtlamalarıBileşen kararları, genel bir yerleşim yerine inşa edilen belirli projenin ihtiyaçlarını takip etmelidir.

03 Skill'in içinde

stitch::react-components Skill'inin 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ı.

Her Bileşenin Bir Props Arayüzü Olmalı
Sayfalar da dahil olmak üzere her bileşen dosyası, bileşenin adını taşıyan bir Readonly TypeScript arayüzü tanımlamalıdır. Doğrulayıcı, bu arayüze sahip olmayan dosyaları başarısız sayar.
Tek Parça Sayfa Dosyaları Yasak
Kartlar, rozetler, sayfalama ve arama çubukları gibi yeniden kullanılabilir UI kalıplarının her biri src/components altında kendi dosyasına sahip olmalıdır; tüm sayfayı barındıran tek dosyalar yasaktır.
Mantık Hook'larda Yaşar
Olay işleyicileri ve iş mantığı, src/hooks altındaki özel hook'lara taşınır; örneğin sayfalama usePagination'a, filtreleme ise useFilter'a taşınır.
Sabit Kodlanmış İçerik Yasak
Tüm statik metinler, görsel URL'leri ve listeler, bileşen dosyalarının içinde değil src/data/mockData.ts içinde yer almalıdır.
Yer Tutucu Href'leri Route'lara Dönüştürün
Stitch ekranları href="#" bağlantılarıyla gelir ve bunların her biri doğru route'a işaret eden bir React Router Link haline getirilmelidir.
Logoyu Bir Ana Sayfa Bağlantısı Yapın
TopAppBar logosu veya başlığı köke giden bir Link olmalıdır, çünkü Stitch alt gezinme çubukları md:hidden kullanır ve masaüstünde görünmezdir.
Her Şeyde Tema Token'ları ve Karanlık Mod
Renk sınıfları rastgele hex kodları değil, senkronize edilmiş stil kılavuzundan gelir ve her renk sınıfı bir dark: varyantı da taşır.
Herhangi Bir Şeyi Çalıştırmadan Önce Sorun
Doğrulama betikleri, geliştirme sunucusu ve otomatik tarayıcı denetimleri, kullanıcı izin verdikten sonra çalıştırılır.

04 İşe koyun

stitch::react-components bileşenini Claude Code veya Codex içine kurun

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

stitch::react-components bileşenini Claude Code, Codex veya Ajanınıza 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-components

plugins/stitch-build/skills/react-components/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Skill'e İlk UI 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 screens in my Stitch project [project name] into a modular React + Vite app. Use scripts/fetch-stitch.sh to download every screen, sync the Tailwind tokens into resources/style-guide.json, then split the layout into components under src/components with logic in src/hooks and content in src/data/mockData.ts. Wire all the href="#" navigation links to React Router routes with dark mode variants, and ask me before running validation or the dev server.

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şen geçerliliğini raporlamak için src/components ve src/pages içindeki her .tsx dosyasında AST doğrulayıcısını çalıştırın.
İşi tamamlanmış saymadan önce TypeScript'in derlendiğini doğrulamak için tsc --noEmit'i çalıştırın.
Çıktıyı, verilen mimari kontrol listesiyle karşılaştırın.
Tasarım amacını ve düzen ayrıntılarını varsaymak yerine doğrulamak için indirilen her ekran görüntüsünü inceleyin.
Token'ları yeniden çıkardıktan sonra, stil kılavuzundaki ana rengin, yazı tiplerinin ve boşlukların HTML'den çektiğinizle eşleştiğini doğrulayın.
Gezinmeye tıklayarak her nav öğesinin doğru sayfaya gittiğinden emin olun.

OpenDesign içinde stitch::react-components'i 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-components/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 anlık görüntüsü, katalogda 12 skill içeren google-labs-code/stitch-skills deposunun tamamı için 2026-09-14 tarihinde alındı. stitch::react-components 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: Alma ve ağ işlemleriMCP önekini bulun, her ekranı çekin, betikle indirin, ekran görüntülerini denetleyin, meta verileri yazın.
Aşama 2: Stil çıkarımıMevcut HTML head'inden tailwind.config token'larını çekin ve paylaşılan stil kılavuzunun üzerine yazın.
Aşama 3: Mimari kurallarModüler dosyalar, hook'lar, sahte veriler, Props arayüzleri, tema token'ları, yönlendirme ve karanlık mod.
Aşama 4: Yürütme adımlarıKurulum yapın, veri katmanını oluşturun, şablondan taslak çıkarın, uygulamayı bağlayın, ardından isteğe bağlı kullanıcı onaylı doğrulama.
Sorun gidermeAlma hataları, doğrulama başarısızlıkları, ölü gezinme bağlantıları ve eski stil kılavuzları için düzeltmeler.

Skill'in Kendi Açıklaması

"- Stitch tasarımlarını modüler Vite ve React bileşenlerine dönüştürür veya mevcut React bileşenlerini en son Stitch tasarımlarıyla uyumlu hale getirmek için senkronize eder/günceller; sistem düzeyinde ağ ve AST tabanlı doğrulama kullanır."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 8.725 karakterdir. Tam dosyayı GitHub'da okuyun.

06 Kurmadan önce

stitch::react-components 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.

Bu tasarımları bir kez indirdim zaten. Üzerine yazacak mı?

Hayır. .stitch/designs/{page}.html ve .stitch/designs/{page}.png zaten mevcutsa, Stitch projesinden yenilemek mi yoksa yerel dosyaları kullanmak mı istediğiniz sorulur ve yalnızca siz onayladıktan sonra yeniden indirir.

Stitch React Components

stitch::react-components bileşenini gerçek bir UI tasarım görevinde çalıştırın.

OpenDesign'ı indirin, stitch::react-components'i 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

Terminal

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

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

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

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

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

stitch::react-components Skill'inin Claude Code ve Codex'e Verdiği Kurallar

Her Bileşenin Bir Props Arayüzü Olmalı

Tek Parça Sayfa Dosyaları Yasak

Mantık Hook'larda Yaşar

Sabit Kodlanmış İçerik Yasak

Yer Tutucu Href'leri Route'lara Dönüştürün

Logoyu Bir Ana Sayfa Bağlantısı Yapın

Her Şeyde Tema Token'ları ve Karanlık Mod

Herhangi Bir Şeyi Çalıştırmadan Önce Sorun