Comment apprendre aux agents IA à concevoir sans modèles et à assembler des présentations vidéo

Quiconque a demandé à Claude ou Cursor de créer une landing page connaît ce résultat. Le code généré fonctionne techniquement, mais visuellement, il ressemble à une page typique de 2018 avec des boutons bleus et des cartes arrondies. Les modèles connaissent la syntaxe CSS et React, mais ils manquent de goût intégré en matière de design et de compréhension de la structure des projets.

Le dépôt garden-skills du développeur chinois ConardLi résout ce problème grâce au format Agent Skills. Il s'agit d'un ensemble de modules suivant la spécification SKILL.md qui transforment Claude Code, Cursor, Codex et autres agents de terminal en ingénieurs spécialisés.

Que sont les Agent Skills et comment ils fonctionnent

Anthropic a récemment proposé une norme ouverte pour étendre les capacités des agents. En substance, un skill est un dossier séparé dans votre projet ou votre répertoire personnel contenant un manifeste SKILL.md avec un en-tête YAML, des instructions textuelles, des scripts prêts à l'emploi et des guides de référence.

L'agent analyse le champ description dans le manifeste. Lorsque la tâche de l'utilisateur correspond à la description, le modèle charge le contexte pertinent directement pendant la conversation. Cela élimine le besoin de copier de longues invites système dans chaque discussion.

Le dépôt garden-skills contient cinq modules prêts à l'emploi pour des tâches de travail réelles.

Skills prêts à l'emploi dans le dépôt

Chaque skill est adapté à un scénario spécifique et contient des règles d'interaction strictes pour empêcher l'agent d'halluciner ou de sauter les approbations d'étapes.

1. web-design-engineer

Le module se concentre sur la mise en page de sites, tableaux de bord, prototypes et composants interactifs. Au lieu de modèles génériques, il utilise une base de données de 25 styles visuels prêts à l'emploi. Ceux-ci incluent l'esthétique de Linear, le terminal de Bloomberg, le style suisse, le neumorphisme, le rétro-futurisme et le minimalisme inspiré du designer kényan Kenya Hara (Muji).

Le skill force le modèle à travailler sur cinq paramètres : densité des éléments, dynamique d'animation, dépendance des ressources, alignement de marque et variabilité. L'agent valide d'abord le concept et la palette dans oklch(), puis construit un prototype v0 précoce, et écrit uniquement le code React final après approbation.

2. web-video-presentation

Ce skill prend du texte source, un article technique ou des notes de cours et assemble une présentation web interactive à une résolution fixe de 1920×1080 en utilisant la pile Vite, React et TypeScript.

La présentation est contrôlée par des étapes et des clics clavier, donc chaque emphase sémantique est synchronisée avec l'étape visuelle à l'écran. Les éléments UI se masquent au survol, vous permettant d'enregistrer un écran propre pour la vidéo.

Le module prend en charge 23 thèmes intégrés et s'intègre avec la génération vocale via MiniMax CLI, OpenAI TTS, ElevenLabs ou l'utilitaire système macOS say.

3. beautiful-article

L'outil convertit les données brutes (liens, PDF, DOCX, notes ou exports de chat) en une mise en page d'article lisible. Le skill s'appuie sur la bibliothèque de composants Reacticle et 11 profils de designers (Tufte, Bodoni, Vignelli, Knuth).

Le module offre 10 formats de publication, des tutoriels détaillés avec 90% de préservation du texte original aux explainers interactifs avec une refonte approfondie du contenu. Pendant l'assemblage, l'agent fait obligatoirement des pauses pour confirmer le thème, la structure et la stratégie d'illustration.

4. gpt-image-2 et kb-retriever

Deux autres skills couvrent des tâches plus spécifiques :

• gpt-image-2 contient 79 modèles de prompts structurés pour générer des diagrammes, des schémas architecturaux, des bannières et des maquettes UI via des API compatibles OpenAI. Il peut fonctionner en mode génération de code ou simplement comme conseiller pour composer des prompts.
• kb-retriever organise la recherche locale dans un dossier structuré avec des documents, PDF et tableaux Excel. Au lieu de nourrir l'agent avec des fichiers volumineux et d'encombrer la fenêtre de contexte, le skill lit les index arborescents data_structure.md, utilise des utilitaires comme grep ou pdftotext, et trouve des extraits précis en 5 itérations maximum.

Méthodes d'installation dans un projet

Le moyen le plus rapide d'ajouter des skills à votre environnement de travail est d'utiliser le gestionnaire de paquets npx skills. L'utilitaire détecte automatiquement quel assistant IA s'exécute dans le répertoire et place les fichiers dans le bon dossier.

Installer tous les modules en une seule fois :

npx skills add ConardLi/garden-skills

Installer un skill spécifique dans la configuration globale :

npx skills add ConardLi/garden-skills -s web-design-engineer --global

Si vous utilisez Claude Code, vous pouvez connecter des plugins directement via le marketplace intégré :

/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skills

Pour des versions figées dans CI/CD ou des projets avec des exigences strictes de dépendances dans les versions, le dépôt fournit des archives .zip signées avec des sommes de contrôle SHA-256. Décompressez simplement l'archive vers .claude/skills/ ou .agents/skills/.

Compatibilité avec les agents

Le format est ouvert, donc les skills fonctionnent non seulement avec l'écosystème Anthropic. Le projet a été testé avec les outils suivants :

• Claude Code et l'interface web Claude.ai (via la section Capabilities)
• Cursor (dossier .agents/skills/<name>/)
• Codex CLI
• Gemini CLI
• OpenCode

À qui ce projet sera utile

La collection de ConardLi fait gagner du temps à ceux qui utilisent des agents IA quotidiennement dans le terminal ou l'éditeur de code. Au lieu de configurer manuellement le contexte et de corriger des erreurs de mise en page enfantines, vous obtenez un pipeline prévisible avec des points de contrôle et des tokens de design de qualité.

Le moyen le plus simple de commencer est avec web-design-engineer ou beautiful-article. Ils donnent des résultats visibles dès la première demande et montrent comment composer correctement vos propres instructions pour la spécification SKILL.md.