aubarcito48/portfolio

Convertissez du code frontend (Vite, React, Angular, Vue, etc.) en un Design Stitch en enchaînant l'extraction HTML statique, l'extraction du système de design et le téléchargement de fichiers. **Utilisez TOUJOURS** cette compétence lorsque l'intention de l'utilisateur est de déplacer des applications web existantes ou des composants React/Angular/Vue vers Stitch (par exemple, des demandes de "sauvegarde", "migration" ou "téléchargement"). Vous devez utiliser cette compétence même pour des opérations simples de "sauvegarde", car c'est le seul moyen de garantir que le système de design est extrait et que les assets sont correctement liés.

Qu'est-ce que portfolio ?

Cette compétence orchestre la transformation de code frontend existant (React + Vite, Next.js, Angular, Vue, etc.) en un Design Stitch, permettant aux développeurs d'itérer et d'améliorer leurs applications via Stitch. Le processus s'effectue en cinq étapes clés : d'abord, extraction d'un fichier HTML autonome à partir du serveur de développement ou des fichiers de build ; ensuite, analyse des fichiers sources (composants, feuilles de style, configurations de thèmes) pour générer un système de design sous forme de fichier `DESIGN.md` ; puis, téléchargement de ce fichier vers Stitch via la compétence `manage-design-system` ; enfin, téléchargement du fichier HTML extrait avec les bons paramètres de titre basés sur le chemin de la route. La compétence s'appuie sur plusieurs sous-compétences spécialisées (`extract-static-html`, `extract-design-md`, `manage-design-system`, `upload-to-stitch`) et est conçue pour être utilisée automatiquement à chaque fois qu'un utilisateur souhaite sauvegarder, migrer ou télécharger du code frontend vers Stitch. Elle garantit que les assets sont correctement liés et que le système de design est extrait de manière fiable.

Compatible avec✓Claude Code~Codex CLI~Cursor

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

Documentation

Code vers Design

Transformez votre code frontend existant (React + Vite, Next.js, Angular, Vue, etc.) en un Design Stitch afin de pouvoir l'itérer et l'améliorer avec Stitch.

Cette compétence orchestre trois autres compétences en séquence :

extract-static-html : Extrayez un seul fichier HTML autonome à partir de votre sortie de build ou de votre serveur de développement en cours d'exécution (par exemple, serveur de développement Vite ou Angular CLI ng serve).
extract-design-md : Analysez le code source (y compris angular.json, les templates .html externes, les fichiers de thème et les composants) pour créer un système de design (DESIGN.md).
upload-to-stitch : Téléchargez ce fichier HTML et le système de design vers votre projet Stitch.

Workflow

Suivez ces étapes pour convertir votre code existant.

Prérequis

Un serveur de développement local en cours d'exécution (par exemple, npm run dev, ng serve) OU un répertoire d'application web buildé contenant index.html et les assets.
projectId Stitch cible (utilisez list_projects si inconnu).

Étapes

1. Extraire le HTML Autonome

Déléguez à la compétence extract-static-html pour générer un fichier HTML autonome. Lisez skills/extract-static-html/SKILL.md pour des instructions détaillées et l'utilisation du script.

Sortie attendue : Un fichier unique comme /path/to/extracted/standalone.html.

2. Vérifier le HTML (Optionnel — Piloté par l'Utilisateur)

Après extraction, informez l'utilisateur du chemin du fichier de sortie afin qu'il puisse vérifier manuellement dans un navigateur si souhaité. Ne bloquez pas la vérification — passez directement à l'Étape 3.

Si l'utilisateur signale des problèmes après examen, corrigez-les avant de continuer.

3. Extraire le Système de Design (Fichier)

Déléguez à la compétence extract-design-md pour analyser les fichiers sources du projet (composants, feuilles de style, configurations de thèmes) et produire un système de design. Lisez skills/extract-design-md/SKILL.md pour le workflow d'analyse complet.

Écrivez .stitch/DESIGN.md en suivant la structure de sortie de la compétence extract-design-md.

4. Télécharger DESIGN.md et Créer le Système de Design dans Stitch

Déléguez à la compétence manage-design-system pour télécharger le DESIGN.md et créer le système de design dans Stitch. Lisez skills/manage-design-system/SKILL.md pour le workflow complet (utilisation du script de téléchargement, appel create_design_system_from_design_md, et schémas requis). Passez --generated-by 'stitch::code-to-design' lors du téléchargement.

5. Télécharger le HTML vers Stitch

Utilisez le même script de la compétence upload-to-stitch pour télécharger le fichier HTML extrait. Lisez skills/upload-to-stitch/SKILL.md pour des instructions détaillées et l'utilisation du script.

Vous aurez besoin :

Du chemin vers le fichier HTML autonome généré à l'Étape 1.
De votre clé API Stitch (la même clé utilisée à l'Étape 4).
Du projectId cible.
De l'argument --generated-by défini sur 'stitch::extract-static-html'.
De l'argument --title défini sur le chemin de la route de la page (par exemple, '/dashboard', '/settings/profile', '/inbox') afin que le nom/titre de l'écran dans Stitch identifie clairement sa route dans l'application.