react-vite-dashboardvon Google Labs

React Vite Dashboard Skill.

Ein Claude Code und Codex Skill für UI-Design: wandelt Stitch-Designs in React + Vite Dashboards mit TanStack Query um.

Web & UI
UI-Code

OpenDesign herunterladen Anleitung ansehen

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

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

01 Was es tut

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

Ein Build-Skill für Frontend-Entwickler, der Stitch-Screens in datenintensive Dashboards auf React 18, Vite, TypeScript, TanStack Query und React Router umwandelt, mit optionalem ethers v6 oder viem für On-Chain-Lesevorgänge.

Der Workflow läuft in sechs Schritten: das Stitch-MCP-Präfix ermitteln, den Screen abrufen, das HTML und den Screenshot unter .stitch/designs/ speichern, DESIGN.md lesen und Farben, Typografie und Abstände auf CSS-Variablen in src/index.css abbilden, Komponenten und Seiten generieren und dann Daten über TanStack Query verdrahten, während die präsentationsbezogenen Komponenten rein bleiben. Eine Zuordnungstabelle legt das Verhalten für Tabellen, Buttons, Formulare, Ladezustände und Wallet-Connect fest, und die Datei schließt mit einer WCAG-2.2-AA-Qualitätscheckliste.

Was er erzeugt

Ein produktionsreifes React + Vite Dashboard, das aus dem Stitch-Screen erstellt wurde und TanStack Query als Datenschicht nutzt.
Lokale Kopien des Quelldesigns, die im Repository als .stitch/designs/{screen}.html und ein passender .png-Screenshot abgelegt werden.
Ein nach Verantwortlichkeit gegliederter Source-Tree, wobei hooks useQuery-Wrapper und Wallet-Hooks enthält und lib für ABI-Helfer und Formatter zuständig ist.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
MCP-Präfix ermitteln
Führen Sie zuerst list_tools aus und notieren Sie sich das Stitch-Präfix, unter dem die Tools bereitgestellt werden, da jeder spätere Aufruf darauf aufbaut.
02
Screen abrufen
Rufen Sie das Tool get_screen mit dem ermittelten Präfix auf und übergeben Sie sowohl die Stitch-Projekt-ID als auch die Screen-ID.
03
DESIGN.md-Tokens verbinden
Lesen Sie die projektbezogene DESIGN.md und übersetzen Sie deren Einträge zu Farben, Typografie und Abständen in CSS-Variablen innerhalb von src/index.css.
04
Generiertes UI nach Rolle aufteilen
Generierter Code landet in src/components, src/pages und src/hooks statt in einer einzigen flachen Datei.
05
Daten über TanStack Query anbinden
Asynchrone Abrufe laufen über TanStack Query, sodass die aus dem Stitch-Screen aufgebauten Präsentationskomponenten rein bleiben.

02 Finden Sie Ihren Favoriten

Wann Sie das react-vite-dashboard Skill verwenden

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

Gut geeignet

Stitch-Screens in datenintensive Dashboard-Oberflächen statt Marketing-Seiten verwandeln, mit vielen Komponenten pro Screen.
Web3-Frontends, die On-Chain-Lesevorgänge über ethers v6 oder viem neben der übrigen Dashboard-Datenschicht benötigen.
Teams, deren Design System bereits in einer DESIGN.md liegt und die wollen, dass generierte UI diesen Tokens treu bleibt.

Grenzen kennen

Es geht davon aus, dass Stitch MCP bereits konfiguriert ist; die Datei verweist nur auf die externe Einrichtungsanleitung, falls nicht.
On-Chain-Arbeit ist auf reine Lesezugriffe von Contract-Aufrufen beschränkt, Signier- oder Schreibabläufe liegen außerhalb dessen, was das Skill beschreibt.

Was Sie bereitstellen sollten

BenötigtGoogle Stitch – in der SKILL.md als erforderlich genannt.
EingabeStitch MCP konfiguriert (Setup-Anleitung)
EingabeEine projekt-eigene DESIGN.md (siehe design-md Skill) für Token-Treue
EingabeVite + React + TypeScript Gerüst (npm create vite@latest)

03 Innerhalb des Skills

Regeln, die das Skill react-vite-dashboard Claude Code und Codex vorgibt

7 konkrete Anweisungen, Voreinstellungen und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Tabellen bleiben semantisch
Tabellarische Daten müssen ein echtes table-Element oder TanStack Table verwenden; reine div-Grids sind dafür ausdrücklich ausgeschlossen.
Wallet-Code ist isoliert und ohne Schlüssel
Die Wallet-Verbindung liegt innerhalb eines WalletProvider, und generierter Code darf niemals private Keys einbetten.
Jedes Eingabefeld beschriften und Fehler damit verknüpfen
Formulare verbinden label htmlFor mit input id, und Validierungsfehler werden über aria-describedby zugeordnet, statt frei angezeigt zu werden.
Den Standard-Fokusring auf Buttons beibehalten
Buttons sind type="button" mit sichtbarem Fokusring, und der Browser-Standard bleibt erhalten, solange DESIGN.md keine Fokus-Tokens definiert.
Ladezustand programmatisch signalisieren
Abrufende Screens verwenden Skeleton-Komponenten, wobei aria-busy auf den Containern gesetzt wird, während die Anfrage läuft.
Lesevorgänge in gas-sensiblen Abläufen bündeln
Lesevorgänge sollten gebündelt werden, und redundante eth_call-Anfragen dürfen nicht aus Render-Loops heraus ausgelöst werden.
Keine Geheimnisse im Repository
RPC-URLs stammen aus Umgebungsvariablen, und das Präfix VITE_ ist nur für öffentliche Endpunkte gedacht.

04 In Betrieb nehmen

react-vite-dashboard in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

react-vite-dashboard zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

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

Generische skills-CLI-Form für plugins/stitch-build/skills/react-vite-dashboard/SKILL.md; das Repository dokumentiert seinen Pfad möglicherweise selbst.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

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.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Führen Sie den design.md-Linter lokal gegen DESIGN.md aus, bevor Sie UI ausliefern.
Der Kontrast muss WCAG 2.2 AA für die in DESIGN.md definierten Komponentenpaare erfüllen, verifiziert durch einen erfolgreichen Linter-Durchlauf.
Die Tastaturnavigation muss funktionieren, wobei die Fokusreihenfolge der visuellen Reihenfolge des Dashboards entspricht.
Testen Sie das Layout bei Breiten von 375px und 1280px.
TypeScript läuft im Strict Mode, und Contract-ABIs dürfen nicht als any typisiert werden.

In OpenDesign importieren Sie react-vite-dashboard über den 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: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Skill-Datei: plugins/stitch-build/skills/react-vite-dashboard/SKILL.md Content-Prüfsumme bei Verifizierung erfasst; Commit 0337446
License: Apache-2.0 Aus LICENSE.
Repository-Sterne: 8.304 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository google-labs-code/stitch-skills, das 12 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für react-vite-dashboard.
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

VoraussetzungenStitch MCP, eine DESIGN.md und ein Vite React TypeScript-Grundgerüst
WorkflowSechs Schritte von der MCP-Präfix-Erkennung bis zur Komponentenerstellung und Datenanbindung
HTML-zu-React-ZuordnungTabelle, die Layout, Karten, Tabellen, Buttons, Formulare, Ladezustände und Wallet-Connect in Markup umsetzt
DESIGN.md-IntegrationCSS-Variablen-Brücke aus DESIGN.md-Tokens sowie der design.md-Lint-Befehl
Web3-Dashboard-KonventionenNur lesende Contract-Aufrufe, formatUnits-Beträge, verständliche Tx-Fehlermeldungen, gebündelte Reads
DateistrukturFünf Quellordner für Komponenten, Seiten, Hooks, lib und Styles
QualitätschecklisteFünf Prüfungen zu WCAG 2.2 AA, Tastaturreihenfolge, Breakpoints, Secrets und strikten Typen
Hinweis zur Stitch-DokumentationVerwenden Sie absolute stitch.withgoogle.com-URLs, wenn relative Doku-Links falsch weiterleiten

Die eigene Beschreibung des Skills

„Konvertieren Sie Stitch-Designs in produktionsreife React + Vite Dashboards mit TanStack Query, barrierefreien Tokens aus DESIGN.md und Web3-fähigen Patterns (ethers/viem)."

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

06 Vor der Installation

Fragen zum react-vite-dashboard-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Muss ich Tailwind für das Layout verwenden?

Nein. Die Zuordnungstabelle erlaubt sowohl Tailwind-Utilities als auch CSS-Module, solange die Abstände den Tokens in DESIGN.md folgen.

Kümmert sich dieser Skill um das Schreiben in einen Contract?

Die dort festgelegten Konventionen betreffen Reads und die Darstellung von Ergebnissen: Transaktionsfehler sollten verständlich erklärt und, falls ein txHash vorhanden ist, mit einem Block-Explorer verlinkt werden. Ein Signier- oder Write-Ablauf wird nicht beschrieben.

Gibt es etwas Ungewöhnliches an den Stitch-Dokumentationslinks?

Wenn Sie Links auf stitch.withgoogle.com/docs folgen, verwenden Sie die vollständige URL https://stitch.withgoogle.com/docs/..., da relative Navigation falsch weiterleiten kann.

React Vite Dashboard

Führen Sie react-vite-dashboard mit einer echten UI-Design-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie react-vite-dashboard ü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