Meilleurs skills pour Développeur frontend

Developpement

Cette compétence fournit 57 règles d'optimisation des performances pour React 19 et Next.js 16, couvrant le chargement des données, la taille du bundle, le rendu côté serveur et client, ainsi que les re-rendus. Elle aide les développeurs à éliminer les cascades (waterfalls), réduire la taille du bundle et améliorer les performances globales du frontend sur la plateforme Arcanea.

Developpement

Exécute une série exhaustive de vérifications sur les fichiers modifiés avant de créer une pull request, couvrant la rigueur TypeScript, les patterns React, la structure des routes, la récupération de données, la validation, les variables d'environnement, les imports, le code mort, la sécurité, l'hygiène Git, les performances, le style, les dates, l'accessibilité et le style de code. Aide à détecter les problèmes courants en amont pour accélérer la revue de code et réduire les bugs.

Developpement

Crée des interfaces web de qualité production avec une identité visuelle distinctive et un design soigné. À utiliser pour construire des pages d'atterrissage, tableaux de bord, composants React ou toute UI web nécessitant une esthétique intentionnelle et mémorable plutôt que des mises en page génériques. Génère du code soigné avec une typographie avancée, des systèmes de couleurs, des animations et un design responsive.

Developpement

Génère une application Electron complète avec TypeScript, React et Vite. Configure automatiquement la structure du projet, les dépendances essentielles et des options facultatives comme SQLite (via Knex), Jest pour les tests et Storybook pour les composants.

Developpement

Génère des composants d'interface et des pages BIM Verdi conformément au système de conception établi. Applique une esthétique calme d'entreprise avec un accent orange chaud, une typographie Moderat et une mise en page basée sur les espaces blancs. À utiliser lors de la création de modèles ou d'interfaces pour bimverdi.no pour éviter les motifs génériques d'IA.

Developpement

Génère un nouveau hook React personnalisé dans un module fonctionnel existant. Il vous guide dans le nommage, la sélection de la fonctionnalité cible, le choix du type de hook (récupération de données, gestion d'état ou utilitaire), puis crée le fichier du hook ainsi que l'export barrel. Utile pour ajouter rapidement un hook réutilisable à une fonctionnalité en respectant les conventions du projet.

Developpement

Compétence pour le développement et la revue de code Vue. En mode développement, génère des composants et composables Vue de haute qualité à partir de descriptions. En mode revue, utilise la commande /vue <path> pour analyser les fichiers .vue et fournir un rapport structuré avec des points de contrôle.

Developpement

Utilisez cette compétence pour appliquer les normes CSS modernes dans les projets CUI : méthodologie BEM, propriétés personnalisées, Grid/Flexbox et requêtes de conteneur. Elle couvre le design responsive, l'optimisation des performances, l'accessibilité et la configuration d'outils comme PostCSS et Stylelint. Idéale pour écrire, modifier ou auditer du CSS dans un contexte professionnel.

Developpement

Fournit les meilleures pratiques pour structurer les contrôleurs Stimulus dans les applications Rails, notamment les définitions de cibles, actions, valeurs et classes. Explique quand utiliser Stimulus pour des améliorations UI comme les toggles et interactions de formulaire, et quand privilégier Turbo ou les approches côté serveur.

Developpement

Créez des composants React et des pages respectant le système de design runi, qui transmet la vigilance et la protection via des points de signal subtils et des tokens de couleur sémantiques. Utilisez cette compétence lors du développement de l'interface du client HTTP runi pour garantir une prise en charge cohérente du mode sombre, un artisanat de composants sur mesure et une esthétique calme et livresque. Elle aide à maintenir la philosophie de la marque qui consiste à réduire l'incertitude en vérité avec des informations exploitables.

Developpement

Guide étape par étape pour ajouter une nouvelle page au frontend Yew WebAssembly de Lightfriend. Couvre la création du composant, l'ajout de la route et du gestionnaire, la déclaration de module dans le bloc inline de main.rs (sans mod.rs), et l'insertion d'un lien de navigation facultatif. Utile lorsque vous devez étendre l'interface avec une nouvelle vue.

Developpement

Guide l'écriture de composants React en évitant les appels inutiles à useEffect. Utile lors de la création ou la révision de composants, du refactoring d'effets, ou lorsque le code utilise useEffect pour transformer des données ou gérer des événements au lieu de synchroniser avec des systèmes externes.

Developpement

Génère un modal complet d'import Excel basé sur le hook useExcelImport, comprenant le composant modal, la fonction de parsing et les interfaces TypeScript. Exécutez ce skill lors de l'ajout d'une fonctionnalité d'import pour un nouveau domaine ou pour refactoriser un modal existant selon le pattern standard. Il fournit également des indications pour connecter les callbacks du composant parent.

Developpement

Conçoit et implémente des systèmes de design complets avec tokens OKLCH, propriétés CSS personnalisées et architecture à trois niveaux. Utile pour créer des guides de style évolutifs, des bibliothèques de composants ou des systèmes de thème à partir de zéro, ou pour auditer du CSS existant.

Developpement

Audite et refond le CSS pour respecter la méthodologie BEM et le système de design Game Loopers. Identifie les sélecteurs non conformes, les violations des tokens, les collisions de noms et les règles trop spécifiques, puis propose des corrections alignées sur BEM. Utile pour maintenir la cohérence et l’évolutivité du CSS dans les composants Astro, SolidJS et les feuilles globales.

Developpement

Utilisez-la pour analyser et résoudre les goulets d'étranglement de performance dans les couches base de données, API, réseau et frontend. Elle guide l'identification du type de goulot, la mesure des métriques de base et l'application d'optimisations spécifiques comme l'indexation, la mise en cache, le chargement différé et la détection de changements OnPush. Utile en cas de temps de réponse API lents, d'optimisation de requêtes base de données, de problèmes de rendu frontend ou de planification de montée en charge.

Developpement

Associe des captures d'écran ou descriptions visuelles d'interface aux fichiers source de composants frontend. Se déclenche automatiquement avant /scout lors du collage d'une capture d'écran, en extrayant les signaux visuels (texte, layout, couleurs) et en les comparant à un index de composants avec un score de confiance. Génère un diagramme Mermaid des relations entre composants pour faciliter la navigation.

Developpement

Lint et corrige automatiquement les fichiers JavaScript, CSS et PHP selon les standards de codage (ESLint, Stylelint, WPCS). Utile avant chaque commit pour garantir la qualité et la conformité du code.

Developpement

Lance le serveur de développement Vite/React avec remplacement à chaud des modules. Supporte plusieurs environnements (développement, staging, production, e2e) et des ports personnalisés. Utile pour le développement rapide du frontend et les tests avec des mises à jour en temps réel.

Developpement

Aide à construire des applications React de qualité production avec Next.js. Utilisez-le avec App Router, Server Components, Server Actions, Middleware, ou pour déployer sur Vercel ou des environnements auto-hébergés. Mots déclencheurs : nextjs, next.js, app router, server components, server actions, react framework, ssr, isr.

Developpement

Compétence spécialisée pour créer des interfaces utilisateur modernes, accessibles et performantes. Elle couvre le design visuel, l'architecture des composants, les animations et l'accessibilité, garantissant un code front-end cohérent et soigné. Utile pour déléguer le travail d'interface ou implémenter des conceptions visuelles.

Developpement

Ce skill structure la conception, la revue et l'optimisation des performances des interfaces React/Next.js, en considérant l'UI comme un modèle de calcul (composants/état/rendu). Il est activé pour les projets listant React ou Next.js dans `doc/input/rdd.md`, ou lors de discussions sur l'état, le rendu, les Server Components, le SSR, le streaming, le bundling et les performances. Il fournit des checklists et des pièges à éviter pour une architecture propre et performante.

Developpement

À utiliser pour vérifier l'état des feature flags, comparer des canaux ou déboguer pourquoi une fonctionnalité se comporte différemment selon les canaux de diffusion. Permet de comparer des canaux avec --diff, de regrouper par statut de nettoyage avec --cleanup, et d'exporter en CSV. Aide à diagnostiquer les incohérences liées aux flags entre les canaux internes Meta et OSS.

Developpement

Fournit des conseils sur les modèles de framework Next.js, notamment le routage basé sur les fichiers, le SSR/SSG, les routes API et le middleware. Utile lors de la création d'applications React fullstack, de la configuration du rendu côté serveur ou du déploiement de projets Next.js.