Frontend

ui-demo vous aide à enregistrer des démos d’app web soignées avec Playwright, un mouvement de curseur visible et un rythme naturel. Utilisez la skill ui-demo pour des démonstrations pas à pas, des vidéos d’onboarding, des présentations de fonctionnalités et des enregistrements de type tutoriel. Suivez le workflow découvrir, répéter, puis enregistrer pour obtenir des résultats fiables, en particulier sur des prototypes et des interfaces qui évoluent vite.

nuxt4-patterns est un skill Nuxt 4 consacré à la sécurité de l’hydratation, aux route rules, au lazy loading et au chargement de données compatible SSR. Utilisez le skill nuxt4-patterns pour prendre de meilleures décisions en Frontend Development, réduire les écarts de rendu et appliquer le bon pattern à chaque page ou composant.

La compétence nextjs-turbopack vous aide à utiliser Turbopack dans Next.js 16+ pour accélérer le développement local, le HMR et les arbitrages liés au bundler. Servez-vous-en comme guide pratique nextjs-turbopack pour l’installation, l’utilisation et les cas où il vaut mieux revenir à webpack dans des workflows de Frontend Development.

healthcare-emr-patterns est une skill pratique pour la conception EMR/EHR dans le domaine des soins de santé. Elle couvre les workflows de consultation patient, la saisie des notes cliniques, les contrôles de médication, la mise en évidence des résultats de laboratoire, les pistes d’audit, l’intégration CDSS et une saisie des données médicales pensée d’abord pour l’accessibilité, afin de sécuriser les workflows des cliniciens.

gan-style-harness est un skill Generator-Evaluator pour Agent Orchestration qui aide à construire des applications complètes avec une critique plus exigeante, de meilleures itérations et moins de points faibles. Utilisez-le lorsque vous avez besoin du skill gan-style-harness pour des projets frontend intensifs, full-stack ou orientés production, là où la qualité de la revue compte davantage que la vitesse.

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.

frontend-patterns est une skill pratique pour le développement frontend avec React et Next.js, qui vous aide à choisir des patterns durables pour les composants, l’état, les formulaires, le routage, l’accessibilité et les performances. Utilisez le guide frontend-patterns lorsque vous avez besoin d’indications claires sur la mise en œuvre et le choix des patterns, pas seulement de bonnes pratiques génériques.

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.

dart-flutter-patterns est une skill pratique Dart et Flutter pour le développement frontend, qui couvre le null safety, l’état immuable, la composition asynchrone, la structure des widgets, la gestion d’état, la navigation avec GoRouter, le réseau avec Dio, les tests et l’architecture propre. Utilisez le guide dart-flutter-patterns pour choisir des patterns prêts pour la production, que ce soit pour de nouvelles fonctionnalités ou pour des refontes.

La skill click-path-audit aide à suivre les handlers UI à travers chaque changement d’état afin de repérer les bugs de séquence, les collisions d’état partagé et les écarts d’état final après des refactorings ou lors d’une revue de code.

Le skill bun-runtime vous aide à choisir Bun pour de nouveaux projets JavaScript ou TypeScript, pour une migration depuis Node, pour des scripts, des tests et des déploiements sur Vercel. Il couvre l’usage de bun-runtime, les conseils d’installation, les compromis entre Bun et Node, ainsi que des workflows concrets pour le développement frontend et full-stack.

browser-qa est une compétence de QA navigateur pour les tests visuels après déploiement, les vérifications d’interaction, les captures responsives et la revue d’accessibilité via l’automatisation du navigateur. Elle aide les développeurs frontend et les équipes QA à valider des pages de staging ou de prévisualisation grâce à un guide browser-qa reproductible, plutôt qu’à une consigne générique.

Utilisez la skill shadcn pour analyser le contexte du projet, exécuter les bonnes commandes CLI, installer des composants et composer une UI à partir de patterns documentés pour base vs radix, les formulaires, le theming et les registries.

frontend-design transforme des idées d’interface floues en UIs distinctives, prêtes pour la prod, avec du vrai code frontend, une direction esthétique claire et moins de style IA générique.

webapp-testing est une skill pour tester des web apps locales avec Python Playwright. Elle aide les agents à démarrer des serveurs via `scripts/with_server.py`, inspecter l’UI rendue, repérer des sélecteurs, capturer des captures d’écran et des logs console, puis valider le comportement frontend avec une approche d’exploration d’abord.

Le skill fullstack-developer est un package de prompts réutilisable pour le travail sur des applications web modernes en JavaScript et TypeScript, couvrant React, Next.js, Node.js, les API, les bases de données, l’authentification et le déploiement. Il convient surtout à la planification et à l’implémentation multi-couches, avec un unique fichier `SKILL.md` qui définit le périmètre et le workflow plutôt que de fournir des scripts ou des templates.

La skill benchmark aide à détecter les régressions de performance dans les workflows web et applicatifs. Utilisez-la pour établir une base de référence, comparer avant et après des changements, et suivre si une PR a rendu des pages plus lentes, plus lourdes ou moins stables. C’est un guide pratique de benchmark pour l’optimisation des performances, les Core Web Vitals, les vérifications Lighthouse, la taille des bundles et l’évolution des temps de chargement.

migrate-to-shoehorn vous aide à remplacer les casts `as` dans les tests TypeScript par @total-typescript/shoehorn, pour des fixtures partielles plus sûres. Utilisez ce skill migrate-to-shoehorn pour nettoyer des données de test trop chargées en casts, suivre le guide migrate-to-shoehorn, ou standardiser migrate-to-shoehorn pour l’automatisation des tests.

Le skill prototype vous aide à créer du code jetable qui répond à une question précise avant de vous engager dans une vraie implémentation. Utilisez-le pour tester la logique, les transitions d’état, la forme des données ou une orientation UI avec un prototype exécutable qui respecte les conventions du dépôt hôte. Il est idéal quand vous avez besoin d’un guide de prototype rapide, pas d’une fonctionnalité finale.

ckm:ui-styling facilite la création d’interfaces accessibles et prêtes pour la production avec shadcn/ui, Tailwind CSS et la conception visuelle sur canvas. Idéal pour les projets React nécessitant des layouts structurés, des composants accessibles, le mode sombre et un design système cohérent. Utilisez ckm:ui-styling pour concevoir, thématiser et prototyper rapidement vos interfaces avec des conseils adaptés à votre stack.

Utilisez ckm:slides pour transformer des idées brutes en decks de slides HTML stratégiques, avec stratégies de slide, formules de copywriting, patterns de layout et template prêt pour Chart.js.

ckm:design-system aide à créer des tokens en trois couches, des specs de composants, des variables CSS, des mappings Tailwind et des slides cohérents avec la marque à partir d’une architecture de tokens claire.

La skill accessibility-compliance aide les équipes à auditer et améliorer des interfaces web ou mobiles grâce à des recommandations concrètes sur WCAG 2.2, ARIA, l’accès au clavier, les lecteurs d’écran et l’accessibilité mobile. Idéale pour les audits UX, les corrections de composants et des recommandations prêtes à mettre en œuvre.

design-system-patterns aide les équipes à concevoir des bases d’interface évolutives grâce à une structure de tokens, une architecture de thèmes et des patterns d’API de composants réutilisables pour les design systems et les bibliothèques de composants.