Css

frontend-slides vous aide à créer des présentations HTML riches en animations, à partir de zéro ou en convertissant des fichiers PowerPoint. Utilisez le skill frontend-slides pour des conférences, des pitch decks, des ateliers, des démos internes et frontend-slides pour la conception d’interface quand vous voulez explorer visuellement, obtenir un rendu navigateur sans dépendance et des slides qui tiennent sur une seule vue.

Utilisez frontend-design pour créer des interfaces frontend distinctives, prêtes pour la production, avec une vraie intention visuelle. Ce skill frontend-design est pensé pour les landing pages, les dashboards, les shells d’app et les composants où la hiérarchie, la typographie, le mouvement et la finition comptent autant que l’implémentation. Il inclut des নির্দেশications d’installation et d’utilisation pour un travail UI centré sur le design.

Utilisez le skill design-system pour générer ou auditer un système UI, extraire des tokens depuis du code existant et vérifier la cohérence du style dans de vrais dépôts.

overdrive est une skill GitHub conçue pour les projets de design UI ambitieux, avec un fort accent sur le contexte, une planification orientée proposition et une qualité d’interaction remarquable. Utilisez-la pour installer et appliquer overdrive afin de créer des transitions cinématographiques, des interfaces réactives et des expériences produit à fort impact.

typeset améliore la typographie des interfaces en corrigeant le choix des polices, la hiérarchie, les tailles, les graisses et la lisibilité, pour que le texte paraisse vraiment intentionnel. Utilisez la skill typeset pour le design d’interface lorsque le texte semble générique, incohérent ou difficile à parcourir, et que vous voulez un système typographique plus clair avec moins d’approximations.

La compétence layout aide à améliorer l’espacement, la hiérarchie et la composition lorsqu’une interface paraît plate, surchargée ou agencée de façon trop mécanique. Utilisez-la pour les problèmes de mise en page, d’alignement et de rythme visuel, avec un guide pratique de layout pour le design UI plutôt qu’un simple conseil de style générique. Elle est particulièrement utile quand vous avez besoin de corrections structurelles, d’un regroupement plus clair et d’un meilleur ordre de lecture.

La skill optimize permet de diagnostiquer et corriger les problèmes de performance UI liés à la vitesse de chargement, au rendu, aux animations, aux images et à la taille du bundle. Utilisez-la si vous cherchez un guide optimize structuré pour l’optimisation des performances, avec une démarche de diagnostic axée d’abord sur la mesure pour résoudre des expériences web lentes, saccadées ou peu fluides.

impeccable est une skill de design UI et de frontend conçue pour créer des interfaces distinctives et prêtes pour la production. Utilisez craft, teach ou extract pour orienter les designs, charger des références ciblées, puis implémenter des composants, pages et patterns de design system soignés, avec des indications plus solides pour l’installation et l’usage.

Le skill layout aide à analyser et améliorer la composition d’interface, l’espacement, la hiérarchie, l’alignement et le rythme visuel. Il convient surtout aux écrans surchargés ou à la structure fragile, et dépend de /impeccable pour recueillir le contexte avant utilisation.

frontend-design est une skill centrée sur le contexte pour créer un code UI frontend distinctif. Utilisez-la pour traduire l’audience, le cas d’usage et le ton de marque en choix plus solides de mise en page, typographie, couleur, motion, états d’interaction et UX writing pour des pages, des composants et des parcours.

La skill harden aide à rendre les interfaces frontend prêtes pour la production grâce à une gestion des erreurs plus solide, des états vides et de chargement bien traités, des correctifs d’overflow de texte, la prise en charge de l’i18n et une meilleure couverture des cas limites liés aux données réelles.

guizang-ppt-skill est une skill de présentation pour créer des diaporamas HTML en un seul fichier, dans un style éditorial mêlant magazine et e-ink. Elle aide à concevoir des decks horizontaux à faire défiler par balayage pour des lancements, des conférences et des démonstrations, avec une typographie soignée, des fonds WebGL et des mises en page réutilisables. Utilisez le guide guizang-ppt-skill pour générer des decks plus vite, de façon reproductible.

hyperframes-registry vous aide à installer et à brancher des éléments de registre HyperFrames réutilisables avec moins d’hésitation. Utilisez-le pour exécuter `hyperframes add`, distinguer les blocks des components, fusionner des extraits, relier des blocks dans `index.html` et suivre les mappages de chemins de `hyperframes.json` pour l’implémentation design et la découverte du registre.

gsap est une référence pratique d’animation pour les compositions HyperFrames. Elle vous aide à choisir entre `gsap.to()`, `from()`, `fromTo()` et `gsap.timeline()`, puis à appliquer les bons `vars`, `easing`, `stagger`, transformations et patterns de performance. Utilisez ce guide gsap quand vous avez besoin d’animations prêtes à implémenter pour des entrées, des transitions et des effets de design réutilisables.

hyperframes est un skill de workflow pour créer des compositions vidéo en HTML dans HyperFrames. Utilisez-le pour les cartes de titre, les superpositions, les sous-titres, les voix off, les mouvements réactifs à l'audio et les transitions de scène lorsque vous avez besoin de hyperframes structurés, pensés d'abord en code, pour le montage vidéo. Il privilégie les choix de mise en page, de timing et d'animation plutôt que de simples requêtes vidéo génériques basées sur du prompt.

vue-best-practices est une skill Vue 3 dédiée à la génération de code, à la revue et au refactoring. Elle oriente les agents vers la Composition API, `<script setup lang="ts">`, des flux de données explicites, des choix compatibles SSR, ainsi que vers les références essentielles sur la réactivité, les SFC, les composables, Router, Pinia et les applications basées sur Vite.

infocard vous aide à créer des cartes d’information au style éditorial en Markdown, en intégrant directement du HTML et du CSS dans la page. C’est utile pour des résumés, des aperçus de sujets, des panneaux de mise en avant, des cartes d’événements, des blocs de comparaison et d’autres contenus pensés pour un design UI soigné. En revanche, ce n’est pas adapté aux schémas ni à la visualisation de données ; utilisez plutôt une compétence dédiée aux diagrammes ou aux graphiques.

Architecture est une skill de diagrammation pour créer des vues de systèmes en couches en HTML et CSS, avec des sections codées par couleur, des mises en page en grille et une hiérarchie claire des composants. Elle convient particulièrement aux diagrammes utilisateur/application/données/infrastructure, aux cartographies de microservices et à l’architecture d’entreprise. Utilisez-la à la place d’invites génériques lorsque vous voulez une architecture rapide, modifiable et adaptée à la sortie Diagramming.

ui-web vous aide à concevoir et styliser des composants d’UI web avec des vérifications WCAG 2.1 AA, un contraste élevé, des contrôles bien visibles et des patterns Tailwind adaptés au mode sombre. Utilisez cette compétence ui-web pour des frontends de type React lorsque vous avez besoin de conseils pratiques en design UI qui améliorent l’accessibilité et réduisent les approximations.

web-design-guidelines est un guide agnostique du framework pour concevoir, relire et corriger des interfaces web accessibles et responsives. Utilisez-le pour le HTML sémantique, les vérifications WCAG 2.2, les formulaires, les états de focus, le contraste, le mode sombre, la performance et les choix de mise en page en HTML, CSS et JS.

Créez des diagrammes d’architecture soignés, sur fond sombre, sous forme de fichiers HTML autonomes avec SVG intégré. Le skill architecture-diagram est conçu pour les diagrammes d’architecture système, d’infrastructure, de cloud, de sécurité et de topologie réseau, afin de vous offrir un rendu visuel prêt pour le navigateur, avec des couleurs sémantiques, des relations claires entre composants et un style technique cohérent.

pptx-posters aide à créer des affiches de recherche en HTML/CSS, avec une livraison compatible PowerPoint, une exportation en PDF ou une conversion en PPTX. Utilisez cette skill uniquement lorsque l’utilisateur demande explicitement une affiche PPTX ou une édition dans PowerPoint. Pour les affiches de recherche classiques, latex-posters est généralement le meilleur choix.

La skill redesign-existing-projects modernise des sites web et des applications existants pour leur donner un rendu premium. Elle audite l’existant, repère les motifs visuels génériques issus de l’IA et applique une implémentation design haut de gamme sans casser le fonctionnement. Compatible avec n’importe quel framework CSS ou avec du CSS brut.

fixing-motion-performance aide à auditer et corriger les problèmes de performance des animations UI sans changer votre stack par défaut. Utilisez-la pour les travaux frontend lorsque les animations saccadent, que les effets liés au scroll coûtent cher, ou que les transitions déclenchent du travail de layout, de paint ou de compositing. Elle transforme les bugs d’animation en corrections claires, au niveau du code.