Meilleurs skills pour Développeur frontend

Developpement

Créez un composable Vue réutilisable (useX) avec tests, selon les conventions TrackGrowth et la distinction Pinia vs composable.

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

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

Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.

Developpement

Guide des bibliothèques d'icônes vectorielles : 10+ librairies, 200K+ icônes, matrices de décision et bonnes pratiques d'implémentation pour le frontend.

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

Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.

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

Référence du système de design pour la pile Vue Devkit (Vuetify 4 + thème personnalisé). Utilisé pour le style, la mise en page et la vérification visuelle.

Developpement

Guide de référence de l'interface web de deevy (apps/web) : langage visuel Humans/Agents/Gates, navigation, registries shadcn, éditeur et contrats de test à respecter.

Developpement

Règles et bonnes pratiques pour créer des composants UI Datagrok en TypeScript : onglets paresseux, grilles, layouts, dialogues et menus contextuels.

Developpement

Structure de répertoire pour projets Next.js avec App Router : pages, composants, fonctionnalités, utilitaires, hooks.

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

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

Bridage des services Effect-TS avec React via des atomes réactifs. Doctrine Atom-as-State pour une gestion d'état canonique.

Developpement

Récupérez, mettez en cache et revalidez les données dans React avec SWR, une bibliothèque légère de Vercel. Prend en charge la pagination, les mises à jour optimistes et la revalidation en arrière-plan.

Developpement

Un composant d'évaluation pour recueillir les avis des utilisateurs avec icônes personnalisables, couleurs et support des demi-étoiles. Idéal pour les critiques de produits, formulaires de feedback et systèmes de notation.

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

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

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

Pour la mise en page HTML/CSS, le comportement responsive et le style UI en suivant le design system du projet. Réutilisez les motifs existants et maintenez l'accessibilité.

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

Rendre et personnaliser le texte des messages comme markdown dans assistant-ui, avec coloration syntaxique, mathématiques LaTeX et diagrammes Mermaid.