react-vite-dashboardyazan Google Labs

React Vite Dashboard Skill.

Claude Code ve Codex için bir UI tasarım skill'i: Stitch tasarımlarını TanStack Query ile React + Vite panolarına dönüştürür.

Web & UI
UI kodu

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

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

--- name: react-vite-dashboard description: Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem). --- ## Prerequisites ## Workflow ## HTML → React mapping ## DESIGN.md integration ## Web3 dashboard conventions ## File structure

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

01 Ne yapar

react-vite-dashboard Skill'inin Claude Code ve Codex'te Yaptıkları

Ö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

Stitch ekranlarını React 18, Vite, TypeScript, TanStack Query ve React Router üzerinde veri yoğun panolara dönüştüren frontend mühendisleri için bir build skill'i; zincir üzeri okumalar için isteğe bağlı ethers v6 veya viem içerir.

İş akışı altı adımda çalışır: Stitch MCP önekini keşfet, ekranı getir, HTML ve ekran görüntüsünü .stitch/designs/ altında kalıcı hale getir, DESIGN.md dosyasını oku ve renkleri, tipografiyi ve boşlukları src/index.css içindeki CSS değişkenlerine eşle, bileşenleri ve sayfaları üret, sonra sunum bileşenlerini sade tutarken veriyi TanStack Query üzerinden bağla. Bir eşleme tablosu tablolar, düğmeler, formlar, yükleme ve cüzdan bağlantısı için davranışı sabitler, dosya bir WCAG 2.2 AA kalite kontrol listesiyle sona erer.

Neler üretir

Stitch ekranından oluşturulan, veri katmanı için TanStack Query kullanan üretim düzeyinde bir React + Vite panosu.
Kaynak tasarımın .stitch/designs/{screen}.html olarak depoda tutulan yerel kopyaları ve eşleşen bir .png ekran görüntüsü.
Sorumluluğa göre ayrılmış bir kaynak ağacı; hooks, useQuery sarmalayıcılarını ve cüzdan hook'larını, lib ise ABI yardımcılarını ve biçimlendiricileri barındırır.

Örnek istemi görün ↗

Nasıl Çalışır

01
MCP Önekini Keşfet
Önce list_tools'u çalıştırın ve araçların hangi Stitch öneki altında sunulduğunu not edin, çünkü sonraki her çağrı bundan oluşturulur.
02
Ekranı Getir
Keşfedilen önek üzerinde get_screen aracını çağırın, hem Stitch proje kimliğini hem de ekran kimliğini geçirin.
03
DESIGN.md Token'larını Bağla
Proje DESIGN.md dosyasını okuyun ve renk, tipografi ve boşluk girdilerini src/index.css içindeki CSS değişkenlerine çevirin.
04
Üretilen UI'yi Role Göre Böl
Üretilen kod tek bir düz dosyaya değil, src/components, src/pages ve src/hooks içine yerleşir.
05
Verileri TanStack Query Üzerinden İletin
Zaman uyumsuz veri çekme işlemleri TanStack Query üzerinden yapılır; böylece Stitch ekranından oluşturulan sunum bileşenleri saf kalır.

02 Uyumunuzu bulun

react-vite-dashboard Skill Ne Zaman Kullanılır

Bu tür UI tasarım işleri için Claude Code veya Codex'te react-vite-dashboard skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Stitch ekranlarını pazarlama sayfaları yerine, ekran başına çok sayıda bileşen içeren veri yoğun panel arayüzlerine dönüştürme.
Panelin diğer veri katmanının yanında ethers v6 veya viem üzerinden zincir üstü okumalara ihtiyaç duyan Web3 ön yüzleri.
Tasarım sistemi zaten bir DESIGN.md içinde bulunan ve oluşturulan arayüzün bu token'lara sadık kalmasını isteyen ekipler.

Sınırları Bilin

Stitch MCP'nin zaten yapılandırılmış olduğu kabul edilir; dosya yalnızca yapılandırılmamışsa harici kurulum kılavuzuna yönlendirir.
Zincir üstü çalışma, salt okunur kontrat çağrılarıyla sınırlıdır; bu nedenle imzalama veya yazma akışları skill'in kapsamı dışındadır.

Ne Sağlamalısınız

GerektirirGoogle Stitch — SKILL.md'de gerekli olarak belirtilmiştir.
GirdiStitch MCP yapılandırılmış (kurulum kılavuzu)
GirdiToken doğruluğu için bir proje DESIGN.md dosyası (design-md skill'ine bakın)
GirdiVite + React + TypeScript iskeleti (npm create vite@latest)

03 Skill'in içinde

react-vite-dashboard Skill'inin Claude Code ve Codex'e Verdiği Kurallar

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

Tablolar Semantik Kalır
Tablo verileri gerçek bir table öğesi veya TanStack Table kullanmalıdır; sadece div'lerden oluşan ızgaralar açıkça hariç tutulmuştur.
Cüzdan Kodu Ayrıştırılmış ve Anahtarsızdır
Cüzdan bağlantısı bir WalletProvider içinde yer alır ve oluşturulan kod hiçbir zaman özel anahtar içermemelidir.
Her Girdiyi Etiketleyin ve Hataları Ona Bağlayın
Formlarda label htmlFor, input id ile eşleştirilir ve doğrulama hataları serbestçe gösterilmek yerine aria-describedby ile ilişkilendirilir.
Butonlarda Varsayılan Odak Halkasını Koruyun
Butonlar type="button" olarak tanımlanır ve görünür bir odak halkasına sahiptir; DESIGN.md odak token'larını tanımlamadığı sürece tarayıcı varsayılanı korunur.
Yükleme Durumunu Programatik Olarak Bildirin
Veri çeken ekranlarda iskelet (skeleton) bileşenleri kullanılır; istek devam ederken konteynerlerde aria-busy ayarlanır.
Gaz Hassasiyeti Olan Akışlarda Okumaları Gruplayın
Okumalar gruplanmalı ve render döngülerinden gereksiz eth_call istekleri gönderilmemelidir.
Depoda Gizli Bilgi Bulunmaz
RPC URL'leri ortam değişkenlerinden gelir ve VITE_ öneki yalnızca herkese açık uç noktalar için kullanılır.

04 İşe koyun

Claude Code veya Codex'e react-vite-dashboard Yükleyin

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 react-vite-dashboard 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 react-vite-dashboard

plugins/stitch-build/skills/react-vite-dashboard/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

Turn the Stitch screen [screen ID] in project [project ID] into a React + Vite dashboard page. Pull the numbers through the TanStack Query hooks in src/hooks instead of fetching in the component, and bridge the tokens from DESIGN.md into src/index.css so the colors and spacing match. Add a read-only balance card for [token contract] that shows the network name and chain ID in the settings footer.

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:

Herhangi bir arayüzü yayınlamadan önce design.md linter'ını yerel olarak DESIGN.md'ye karşı çalıştırın.
Kontrast, DESIGN.md içinde tanımlanan bileşen çiftleri için WCAG 2.2 AA'yı karşılamalı ve bu, linter'ın geçmesiyle doğrulanmalıdır.
Klavye ile gezinme çalışmalı ve odak sırası, gösterge panelinin görsel sırasıyla eşleşmelidir.
Yerleşimi 375px ve 1280px genişliklerde test edin.
TypeScript strict modda çalışır ve kontrat ABI'leri any olarak tiplendirilmemelidir.

OpenDesign içinde react-vite-dashboard'u SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta 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-vite-dashboard/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ü 2026-09-14 tarihinde, 12 skill içeren google-labs-code/stitch-skills deposunun tamamı için alındı. react-vite-dashboard için bir puan veya kullanım sayısı değil.
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

Ön koşullarStitch MCP, bir DESIGN.md ve bir Vite React TypeScript iskeleti
WorkflowMCP önek keşfinden bileşen oluşturma ve veri bağlantısına kadar altı adım
HTML → React eşlemesiYerleşim, kartlar, tablolar, düğmeler, formlar, yükleme ve cüzdan bağlama işlemlerini markup'a dönüştüren tablo
DESIGN.md entegrasyonuDESIGN.md token'larından CSS değişkeni köprüsü ile design.md lint komutu
Web3 gösterge paneli kurallarıSalt okunur kontrat çağrıları, formatUnits tutarları, düz dilde tx hataları, toplu okumalar
Dosya yapısıBileşenler, sayfalar, hook'lar, lib ve stiller için beş kaynak klasörü
Kalite kontrol listesiWCAG 2.2 AA, klavye sırası, kesme noktaları, gizli bilgiler ve strict tipleri kapsayan beş kontrol
Stitch belgeleri notuGöreli belge bağlantıları hatalı yönlendirme yaptığında mutlak stitch.withgoogle.com URL'lerini kullanın

Skill'in Kendi Açıklaması

"Stitch tasarımlarını TanStack Query, DESIGN.md'den erişilebilir token'lar ve Web3 hazır kalıplarla (ethers/viem) üretime hazır React + Vite panolarına dönüştürür."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 3.656 karakter uzunluğunda. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

react-vite-dashboard 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.

Yerleşim için Tailwind kullanmak zorunda mıyım?

Hayır. Eşleme tablosu, aralıklar DESIGN.md içindeki token'lara uyduğu sürece Tailwind yardımcı sınıflarına veya CSS modüllerine izin verir.

Bu skill bir kontrata yazma işlemini ele alıyor mu?

Belirtilen kurallar okumalar ve sonuçların sunumuyla ilgilidir: işlem hataları düz dilde açıklanmalı ve bir txHash mevcutsa bir blok gezginine bağlantı verilmelidir. İmzalama veya yazma akışı tanımlanmamıştır.

Stitch belge bağlantılarında sıra dışı bir şey var mı?

stitch.withgoogle.com/docs üzerindeki bağlantıları takip ederken, göreli gezinme hatalı yönlendirme yapabileceğinden tam https://stitch.withgoogle.com/docs/... URL'sini kullanın.

React Vite Dashboard

react-vite-dashboard'u gerçek bir kullanıcı arayüzü tasarım görevinde çalıştırın.

OpenDesign'ı indirin, react-vite-dashboard'u 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