suryxnshsingh/design-engineer

design-engineer : quelle compétence pour quel travail

Toutes les compétences spécialisées sous ~/.claude/skills/ sont de simples pointeurs vers des dépôts upstream en direct. Aucune ne contient une copie. Chacune vous indique comment récupérer la dernière version avant d'agir. Le récupérateur partagé est :

bash ~/.claude/skills/design-engineer/scripts/upstream.sh <nom>   # clone ou met à jour, affiche PATH=<répertoire>

Noms : impeccable ui-ux-pro-max blender-mcp img2threejs video-shotcraft hyperframes penpot remotion lemo-opuscar diagram-design. Ajoutez --no-update si vous êtes hors ligne.

Table de routage

L'utilisateur souhaite	Compétence	Pourquoi celle-ci
Direction stylistique, palette, polices, système de design complet pour un nouveau produit ou une page	ui-ux-pro-max	Cherche parmi 79 styles / 192 types de produits et émet un système
Améliorer, réviser, polir, débâcler, rendre plus audacieux/plus calme une UI existante	impeccable	24 commandes d'orientation/révision/finition + détecteur de 62 règles
Attraper le bâclage IA avant de livrer tout changement UI	impeccable detect	Déterministe, sans LLM
Architecture, flux, séquence, ER, Gantt, organigramme, tout diagramme	diagram-design	Un fichier HTML+SVG de marque, 45 types
Graphiques dans une UI produit (pas un diagramme autonome)	dataviz (intégré) puis impeccable	dataviz pour le système de graphiques, impeccable pour l'UI environnante
Vidéo promo d'un site Web ou d'une application réelle	video-shotcraft	Capture des pages réelles, fiches de prise, rendu Remotion
Vidéo à partir d'HTML/CSS, jetons de marque depuis Figma, inverser une vidéo existante, diaporama	hyperframes	HTML vers MP4, 450 blocs, sous-compétence /figma
Vidéo en React, ou un dépôt Remotion existant	remotion	Compétences officielles Remotion
Court métrage narré / explicatif dans un style pictural ou documentaire, sans séquences	lemo-opuscar	60+ styles de film codés uniquement avec partition + TTS
Image de référence vers modèle Three.js uniquement en code	img2threejs	Procédural, prêt pour l'animation
Modélisation 3D réelle, scènes, matériaux, rendus, import d'actifs	blender-mcp	Pilote Blender en direct via MCP
Lire ou modifier un fichier de design Penpot	penpot	MCP officiel Penpot
Lire un fichier Figma pour travail UI (jetons, cadres, composants)	MCP Figma officiel (claude mcp add figma -t http https://mcp.figma.com/mcp)	Non couvert par cet ensemble ; la sous-compétence figma d'HyperFrames est vidéo uniquement
Tirer les actifs de marque Figma dans une vidéo	hyperframes sous-compétence figma	Lit Figma uniquement pour construire le mouvement HyperFrames

Règles de décision

1. UI existante vs nouvelle UI. Existante : commencer par impeccable critique sur une cible étroite. Nouvelle sans système de design : ui-ux-pro-max d'abord, persister dans DESIGN.md, construire, puis impeccable pour réviser. Ne jamais sauter l'étape de révision sur une UI livrée.
2. Vidéo : choisir selon le matériau source.
   • Pages produit réelles → video-shotcraft.
   • Compétences HTML/CSS, actifs de marque ou Figma → hyperframes.
   • Équipe code en React / dépôt utilise déjà Remotion → remotion.
   • Film d'histoire ou de sujet, dessiné en code → lemo-opuscar. Ne pas mélanger deux frameworks vidéo dans un seul projet sauf portage (HyperFrames dispose de remotion-to-hyperframes).
3. 3D : code ou DCC. La sortie doit être un actif Web construit en code → img2threejs. Tout ce qui nécessite un outil de modélisation réel, des rendus ou des actifs téléchargés → blender-mcp. Les deux nécessitent que l'utilisateur confirme la configuration de l'hôte (installateur ou addon Blender) ; dites ce qu'il doit faire.
4. Les diagrammes ne sont pas des graphiques. Un diagramme d'un système → diagram-design. Un graphique de données dans une application → dataviz. Un graphique dans une vidéo → le bloc de graphique de la compétence vidéo.
5. Fichiers de design. Penpot → penpot. Figma pour UI → MCP Figma officiel ; Figma pour une vidéo → sous-compétence figma d'hyperframes. Tirez les jetons une fois et écrivez-les dans DESIGN.md pour que toutes les autres compétences les réutilisent.
6. Compétences basées sur MCP (blender-mcp, penpot) nécessitent une application hôte en cours d'exécution. Vérifiez d'abord claude mcp list ; si absent, donnez à l'utilisateur les étapes d'installation et de connexion et arrêtez-vous jusqu'à ce qu'il confirme.

Enchaînements courants

• Nouvelle page d'atterrissage : ui-ux-pro-max (système) → construire → impeccable detect + critique → polish.
• Kit de lancement : jetons ui-ux-pro-max → site → video-shotcraft promo → diagram-design architecture pour docs, le tout sur les mêmes jetons.
• Transfert de design : jetons/cadres penpot → DESIGN.md → construire → impeccable audit.
• Film explicatif avec diagrammes : images diagram-design fixes → hyperframes ou lemo-opuscar pour le mouvement.
• Objet 3D héroïque : img2threejs à partir d'une photo de produit → intégrer → impeccable overdrive pour l'interaction.

Avant de commencer toute tâche de design

1. Choisissez la compétence dans le tableau. Si deux s'appliquent, suivez les règles de décision ; si ce n'est toujours pas clair, posez une question.
2. Récupérez la dernière version avec upstream.sh <nom> et lisez le fichier d'entrée que la compétence nomme. Lisez uniquement ce dont l'étape actuelle a besoin.
3. Cherchez les fichiers DESIGN.md, PRODUCT.md, .diagram-design ou un fichier de jetons existants dans le projet et réutilisez-les.
4. Dites quelle compétence vous avez choisie et pourquoi en une ligne, puis effectuez le travail.

Maintenance

• upstream.sh conserve un clone superficiel par compétence dans ~/.cache/design-skills/. Supprimez ce dossier pour réinitialiser.
• Pour ajouter une compétence : ajoutez un cas à scripts/upstream.sh, écrivez un pointeur SKILL.md, et ajoutez une ligne ci-dessus.
• Là où l'upstream fournit un plugin ou un chemin npx skills add, privilégiez cela dans les projets réels ; la compétence pointeur est la solution de repli toujours disponible.