stitch::react-componentsvon Google Labs

Stitch React Components Skill.

Ein Claude Code- und Codex-Skill für UI-Design: konvertiert oder synchronisiert Stitch-Designs zu modularen React + Vite-Komponenten.

Web & UI
UI-Code

OpenDesign herunterladen Anleitung ansehen

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

Front Matter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 8.725 Zeichen insgesamt

01 Was es tut

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

Diese Skill verwandelt ein Stitch-Projekt in ein modulares React- und Vite-Frontend oder synchronisiert bestehende React-Komponenten mit den aktuellsten Stitch-Designs. Sie ist für Frontend-Entwickler gedacht, die mit Stitch-Screens arbeiten: Der Agent findet das Stitch-MCP-Präfix mit list_tools, ruft jeden Screen mit get_screen ab, lädt HTML und Screenshots über scripts/fetch-stitch.sh herunter, extrahiert tailwind.config-Tokens in resources/style-guide.json und erstellt dann Komponenten, Hooks und Mock-Daten, die eine AST-Validierung prüft.

Vier abgestufte Phasen erzwingen diese Reihenfolge, und npm run validate erzwingt Readonly-Props-Interfaces, Theme-Tokens statt Hex-Werte und keine monolithischen Page-Dateien.

Was er erzeugt

Heruntergeladene Design-Assets unter .stitch/designs/{page}.html und .stitch/designs/{page}.png für jeden Screen.
Eine .stitch/metadata.json mit projectId, title, deviceType, einer Screens-Map und einem Last-Sync-Time-Feld.
Eine überschriebene resources/style-guide.json mit den Farb-, Schrift-, Abstand-, Radius- und Typografie-Tokens des aktuellen Projekts.
React-Komponenten in src/components, Hooks in src/hooks, Mock-Daten in src/data/mockData.ts und ein aktualisierter Einstiegspunkt, der diese rendert.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Den Stitch-Namespace finden
Führen Sie list_tools aus, um das MCP-Präfix zu ermitteln, und verwenden Sie dieses Präfix dann für jeden weiteren Stitch-Aufruf.
02
Metadaten für jeden Screen abrufen
Rufen Sie get_screen für jeden Screen im Projekt auf, um das Design-JSON und dessen Download-URLs zu erhalten, ohne dass ein Screen ausgelassen wird.
03
Über das Skript herunterladen
Interne Fetch-Tools können bei Google Cloud Storage fehlschlagen, daher laufen Downloads über das bereitgestellte Bash-Skript, das Weiterleitungen und Sicherheits-Handshakes verarbeitet.
04
Design-Tokens extrahieren
Öffnen Sie jede heruntergeladene HTML-Datei und lesen Sie das tailwind.config-Objekt im Head-Script-Block für Farben, Schriften, Abstände, Radius und Typografie.
05
Komponenten aus der Vorlage entwerfen
Verwenden Sie die mitgelieferte Komponentenvorlage als Basis und benennen Sie jede Instanz des Platzhalter-Komponentennamens um, bevor Sie den Einstiegspunkt verdrahten.

02 Finden Sie Ihren Favoriten

Wann Sie den stitch::react-components Skill verwenden sollten

Verwenden Sie den stitch::react-components Skill in Claude Code oder Codex, wenn die Aufgabe UI-Design dieser Art ist. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Sie haben Stitch-Designs und möchten sauberen, modularen React-Code statt einer einzigen großen konvertierten Seite.
Sie verfügen bereits über React-Komponenten und müssen diese mit den neuesten Stitch-Designs abgleichen.
Sie stellen eine mehrseitige App zusammen, bei der jeder Stitch-Screen eine eigenständige Seite ist und Platzhalter-Links durch echte Routen und funktionierende Navigation ersetzt werden müssen.
Sie möchten automatisierte Qualitäts-Gates für den generierten Code statt ihn nur visuell zu prüfen.

Grenzen kennen

Es kann nicht teilweise ausgeführt werden. Der Skill legt fest, dass jeder Schritt verpflichtend ist und jeder Abschnitt ein Gate enthält, das erfüllt sein muss, bevor es weitergeht.
Sie können ihm kein bereits heruntergeladenes Design-HTML übergeben und die MCP-Abrufphase überspringen.
Es startet den Dev-Server nicht und führt keine Browser-Audits von sich aus durch.
Generierte Komponenten sollten keine Google-Lizenzköpfe enthalten.

Was Sie bereitstellen sollten

Eine Entscheidung zu vorhandenen lokalen DesigndateienWenn .stitch/designs/{page}.html und .png bereits vorhanden sind, werden Sie gefragt, ob diese erneut heruntergeladen oder wiederverwendet werden sollen, und der Skill trifft keine Annahme.
Freigabe für VerifizierungsschritteSie werden gefragt, bevor npm run dev startet oder ein visuelles Browser-Audit beginnt.
Die eigenen Vorgaben des ZielprojektsKomponentenentscheidungen sollten sich an den Anforderungen des konkreten Projekts orientieren, das gebaut wird, und nicht an einem generischen Layout.

03 Innerhalb des Skills

Regeln, die der Skill stitch::react-components Claude Code und Codex vorgibt

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

Jede Komponente braucht eine Props-Schnittstelle
Jede Komponentendatei, Seiten eingeschlossen, muss eine Readonly-TypeScript-Schnittstelle deklarieren, die nach der Komponente benannt ist. Der Validator lässt Dateien ohne eine solche durchfallen.
Keine monolithischen Seitendateien
Wiederverwendbare UI-Muster wie Cards, Badges, Pagination und Suchleisten erhalten jeweils eine eigene Datei unter src/components; einzelne Dateien, die die ganze Seite enthalten, sind verboten.
Logik gehört in Hooks
Event-Handler und Geschäftslogik wandern in eigene Hooks unter src/hooks, zum Beispiel Pagination in usePagination und Filterung in useFilter.
Keine hartkodierten Inhalte
Alle statischen Texte, Bild-URLs und Listen gehören in src/data/mockData.ts und nicht in die Komponentendateien.
Platzhalter-Hrefs in Routen umwandeln
Stitch-Screens kommen mit href="#"-Links, und jeder davon muss zu einem React Router Link werden, der auf die richtige Route zeigt.
Das Logo als Link zur Startseite
Das Logo oder der Titel der TopAppBar muss ein Link zu root sein, denn Stitch-Bottom-Nav-Bars nutzen md:hidden und sind auf dem Desktop unsichtbar.
Theme-Tokens und Dark Mode überall
Farbklassen stammen aus dem synchronisierten Styleguide statt aus beliebigen Hex-Codes, und jede Farbklasse trägt zusätzlich eine dark:-Variante.
Erst fragen, dann ausführen
Validierungsskripte, der Dev-Server und automatisierte Browser-Audits laufen erst, nachdem Sie Ihre Zustimmung gegeben haben.

04 In Betrieb nehmen

Installieren Sie stitch::react-components in Claude Code oder Codex

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

Fügen Sie stitch::react-components zu Claude Code, Codex oder Ihrem Agent hinzu

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

Generische skills-CLI-Form für plugins/stitch-build/skills/react-components/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

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

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.

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 AST-Validator für jede .tsx-Datei in src/components und src/pages aus, um die Gültigkeit der Komponenten zu melden.
Führen Sie tsc --noEmit aus, um zu bestätigen, dass das TypeScript kompiliert, bevor Sie die Arbeit als erledigt bezeichnen.
Vergleichen Sie die Ausgabe mit der mitgelieferten Architektur-Checkliste.
Sehen Sie sich jeden heruntergeladenen Screenshot an, um Designabsicht und Layoutdetails zu bestätigen, statt sie anzunehmen.
Bestätigen Sie nach dem erneuten Extrahieren der Tokens, dass Primärfarbe, Schriften und Abstände im Styleguide mit dem übereinstimmen, was Sie aus dem HTML gezogen haben.
Klicken Sie sich durch die Navigation und stellen Sie sicher, dass jeder Navigationseintrag zur richtigen Seite führt.

Importieren Sie in OpenDesign stitch::react-components über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend 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-components/SKILL.md Inhalts-Prüfsumme bei Verifikation aufgezeichnet; 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 stitch::react-components.
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

Phase 1: Abruf und VernetzungErmitteln Sie das MCP-Präfix, rufen Sie jeden Screen ab, laden Sie ihn per Skript herunter, prüfen Sie Screenshots und schreiben Sie Metadaten.
Phase 2: Extraktion des StilsÜbernehmen Sie tailwind.config-Tokens aus dem aktuellen HTML-Head und überschreiben Sie den gemeinsamen Styleguide.
Phase 3: ArchitekturregelnModulare Dateien, Hooks, Mock-Daten, Props-Interfaces, Theme-Tokens, Routing und Dark Mode.
Phase 4: AusführungsschritteInstallieren, die Datenschicht aufbauen, aus der Vorlage entwerfen, die App verdrahten und anschließend optional eine vom Nutzer genehmigte Validierung.
FehlerbehebungLösungen für Abruffehler, Validierungsfehler, defekte Navigationslinks und veraltete Styleguides.

Die eigene Beschreibung des Skills

"- Konvertiert Stitch-Designs in modulare Vite- und React-Komponenten oder synchronisiert/aktualisiert bestehende React-Komponenten, um sie an die neuesten Stitch-Designs anzupassen, unter Verwendung von System-Level-Networking und AST-basierter Validierung."

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

06 Vor der Installation

Fragen zum Skill stitch::react-components

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

Ich habe diese Designs schon einmal herunterladen. Wird das überschrieben?

Nein. Wenn .stitch/designs/{page}.html und .stitch/designs/{page}.png bereits existieren, wird gefragt, ob aus dem Stitch-Projekt aktualisiert oder die lokalen Dateien wiederverwendet werden sollen, und ein erneuter Download erfolgt erst nach Ihrer Bestätigung.

Stitch React Components

Führen Sie stitch::react-components für eine echte UI-Design-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie stitch::react-components über dessen SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

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

Was die stitch::react-components Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann Sie den stitch::react-components Skill verwenden sollten

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die der Skill stitch::react-components Claude Code und Codex vorgibt

Jede Komponente braucht eine Props-Schnittstelle

Keine monolithischen Seitendateien

Logik gehört in Hooks

Keine hartkodierten Inhalte

Platzhalter-Hrefs in Routen umwandeln

Das Logo als Link zur Startseite

Theme-Tokens und Dark Mode überall

Erst fragen, dann ausführen