aubarcito48/portfolio

Wandeln Sie bestehenden Frontend-Code (Vite, React, Angular, Vue usw.) in ein Stitch-Design um, indem Sie statische HTML-Extraktion, Designsystem-Extraktion und Datei-Upload verketten. **Verwenden Sie diesen Skill IMMER**, wenn der Benutzer vorhandene Web-Apps oder React/Angular/Vue-Komponenten nach Stitch migrieren möchte (z. B. Anfragen wie „speichern“, „migrieren“ oder „hochladen“). Sie müssen diesen Skill selbst für einfache „Speichern“-Vorgänge verwenden, da er die einzige Möglichkeit ist, sicherzustellen, dass das Designsystem extrahiert und Assets korrekt verknüpft sind.

Was ist portfolio?

Dieser Skill wandelt vorhandenen Frontend-Code (React + Vite, Next.js, Angular, Vue usw.) in ein Stitch-Design um. Er orchestriert drei weitere Skills in einer festgelegten Reihenfolge: (1) `extract-static-html` extrahiert eine einzelne, in sich geschlossene HTML-Datei aus dem Build-Output oder dem laufenden Dev-Server. (2) `extract-design-md` analysiert den Quellcode (einschließlich Angular `angular.json`, externe `.html`-Templates, Theme-Dateien und Komponenten), um ein vollständiges Designsystem (DESIGN.md) zu erstellen. (3) `upload-to-stitch` lädt die HTML-Datei und das Designsystem in Ihr Stitch-Projekt hoch. Der Skill ist besonders nützlich für Entwickler, die bestehende Web-Apps oder Komponenten nahtlos in Stitch migrieren möchten, um sie dort weiterzuentwickeln und zu verbessern. Er stellt sicher, dass das Designsystem korrekt extrahiert und Assets wie z. B. Screens nach ihrer Route (z. B. `/dashboard`) benannt werden.

Funktioniert mit✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/aubarcito48/portfolio/tree/HEAD/.agents/skills/stitch-code-to-design

Dokumentation

Code zu Design

Wandeln Sie Ihren vorhandenen Frontend-Code (React + Vite, Next.js, Angular, Vue usw.) in ein Stitch-Design um, damit Sie ihn mit Stitch iterieren und verbessern können.

Dieser Skill orchestriert drei andere Skills in einer festgelegten Reihenfolge:

extract-static-html: Extrahiert eine einzelne, in sich geschlossene HTML-Datei aus Ihrem Build-Output oder laufenden Dev-Server (z. B. Vite Dev Server oder Angular CLI ng serve).
extract-design-md: Analysiert den Quellcode (einschließlich Angular angular.json, externe .html-Templates, Theme-Dateien und Komponenten), um ein Designsystem (DESIGN.md) zu erstellen.
upload-to-stitch: Lädt diese HTML-Datei und das Designsystem in Ihr Stitch-Projekt hoch.

Workflow

Befolgen Sie diese Schritte, um Ihren vorhandenen Code zu konvertieren.

Voraussetzungen

Ein laufender lokaler Dev-Server (z. B. npm run dev, ng serve) ODER ein Build-Verzeichnis der Webanwendung, das index.html und Assets enthält.
Ziel-Stitch projectId (verwenden Sie list_projects, falls unbekannt).

Schritte

1. In sich geschlossenes HTML extrahieren

Delegieren Sie an den Skill extract-static-html, um eine eigenständige HTML-Datei zu generieren. Lesen Sie skills/extract-static-html/SKILL.md für detaillierte Anweisungen und Skriptnutzung.

Erwartete Ausgabe: Eine einzelne Datei wie /path/to/extracted/standalone.html.

2. HTML überprüfen (Optional – Benutzergesteuert)

Informieren Sie den Benutzer nach der Extraktion über den Pfad der Ausgabedatei, damit er sie bei Bedarf manuell in einem Browser überprüfen kann. Blockieren Sie nicht die Überprüfung – fahren Sie direkt mit Schritt 3 fort.

Wenn der Benutzer nach der Überprüfung Probleme meldet, beheben Sie diese, bevor Sie fortfahren.

3. Designsystem extrahieren (Datei)

Delegieren Sie an den Skill extract-design-md, um die Quelldateien des Projekts (Komponenten, Stylesheets, Theme-Konfigurationen) zu analysieren und ein Designsystem zu erstellen. Lesen Sie skills/extract-design-md/SKILL.md für den gesamten Analyse-Workflow.

Schreiben Sie .stitch/DESIGN.md gemäß der Ausgabestruktur des Skills extract-design-md.

4. DESIGN.md hochladen und Designsystem in Stitch erstellen

Delegieren Sie an den Skill manage-design-system, um die DESIGN.md hochzuladen und das Designsystem in Stitch zu erstellen. Lesen Sie skills/manage-design-system/SKILL.md für den gesamten Workflow (Skriptnutzung zum Hochladen, Aufruf von create_design_system_from_design_md und erforderliche Schemata). Übergeben Sie --generated-by 'stitch::code-to-design' beim Hochladen.

5. HTML zu Stitch hochladen

Verwenden Sie das Skript desselben Skills upload-to-stitch, um die extrahierte HTML-Datei hochzuladen. Lesen Sie skills/upload-to-stitch/SKILL.md für detaillierte Anweisungen und Skriptnutzung.

Sie benötigen:

Den Pfad zur eigenständigen HTML-Datei, die in Schritt 1 generiert wurde.
Ihren Stitch API-Key (derselbe wie in Schritt 4).
Die Ziel-projectId.
Das --generated-by-Argument gesetzt auf 'stitch::extract-static-html'.
Das --title-Argument gesetzt auf den Routenpfad der Seite (z. B. '/dashboard', '/settings/profile', '/inbox'), damit der Bildschirmname/-titel in Stitch seine Route in der Anwendung klar identifiziert.