Frontend & Design
Skills pour interfaces web et mobile : React, design systems, accessibilite, mobile.
| # | Skill | Source | Description | Maj | |
|---|---|---|---|---|---|
| 1 | figma-use-figjam | figma/mcp-server-guide | Créer, inspecter et organiser des éléments FigJam via l'API plugin Figma. | 1 420 | 4h |
| 2 | figma-use | figma/mcp-server-guide | Exécuter du JavaScript dans Figma via l'API Plugin pour manipuler des fichiers. | 1 420 | 4h |
| 3 | figma-use-slides | figma/mcp-server-guide | Créer et personnaliser des présentations Figma Slides via l'API Plugin MCP. | 1 420 | 4h |
| 4 | encore-frontend | encoredev/skills | Générer un client TypeScript typé pour connecter un frontend React à une API Encore. | 24 | 6h |
| 5 | auth0-ionic-react | auth0/agent-skills | Intégrer l'authentification Auth0 dans une application Ionic React avec Capacitor. | 21 | 9h |
| 6 | developing-with-streamlit | streamlit/agent-skills | Router vers les sous-skills spécialisés pour développer, optimiser et styliser des apps Streamlit. | 189 | 1j |
| 7 | auth0-ionic-vue | auth0/agent-skills | Intégrer l'authentification Auth0 dans une application Ionic Vue avec Capacitor. | 21 | 2j |
| 8 | figma-create-new-file | figma/mcp-server-guide | Créer un nouveau fichier Figma vierge dans les brouillons d'un utilisateur. | 1 420 | 2j |
| 9 | figma-generate-design | figma/mcp-server-guide | Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system. | 1 420 | 2j |
| 10 | wix-design-system | wix/skills | Naviguer et interroger la documentation du design system Wix pour intégrer ses composants. | 11 | 3j |
| 11 | presentation-creator | getsentry/skills | Créer des présentations interactives React en fichier HTML unique avec le design Sentry. | 716 | 5j |
| 12 | webflow-cli:code-component | webflow/webflow-skills | Créer, valider et déployer des composants React dans Webflow Designer via CLI. | 67 | 6j |
| 13 | webflow-cli:devlink | webflow/webflow-skills | Synchroniser des composants Webflow Designer vers du code React/Next.js avec validation et guide d'intégration. | 67 | 6j |
| 14 | webflow-code-component:component-audit | webflow/webflow-skills | Auditer des composants React pour optimiser leur compatibilité et flexibilité dans Webflow Designer. | 67 | 6j |
| 15 | webflow-code-component:component-scaffold | webflow/webflow-skills | Générer un composant Webflow structuré avec fichiers React et définition .webflow.tsx. | 67 | 6j |
| 16 | webflow-code-component:convert-component | webflow/webflow-skills | Convertir un composant React existant en composant Webflow avec fichier de définition adapté. | 67 | 6j |
| 17 | webflow-code-component:local-dev-setup | webflow/webflow-skills | Initialiser un projet Webflow Code Components from scratch avec React et TypeScript. | 67 | 6j |
| 18 | webflow-code-component:pre-deploy-check | webflow/webflow-skills | Valider les composants Webflow avant déploiement pour détecter les erreurs en amont. | 67 | 6j |
| 19 | webflow-code-component:troubleshoot-deploy | webflow/webflow-skills | Diagnostiquer et corriger les erreurs de déploiement de composants Webflow. | 67 | 6j |
| 20 | flutter-use-http-package | flutter/skills | Implémenter des requêtes réseau Flutter avec parsing JSON en arrière-plan. | 1 972 | 7j |
| 21 | rivetkit-client-react | rivet-dev/skills | Connecter des applications React à des Rivet Actors via hooks typés. | 15 | 9j |
| 22 | rivetkit-client-swiftui | rivet-dev/skills | Connecter des apps SwiftUI aux Rivet Actors via le client RivetKitSwiftUI. | 15 | 9j |
| 23 | upgrading-expo | expo/skills | Migrer un projet Expo vers une nouvelle version SDK en gérant dépendances et breaking changes. | 1 914 | 9j |
| 24 | nuxt-ui | nuxt/ui | Intégrer et utiliser les composants Nuxt UI avec les bonnes pratiques et conventions. | 6 578 | 9j |
| 25 | n8n:design-system | n8n-io/n8n | Guider la création et le style de composants UI frontend avec un design system cohérent. | 187 967 | 10j |
| 26 | react-email | resend/resend-skills | Créer et envoyer des emails HTML responsives avec des composants React. | 114 | 11j |
| 27 | auth0-react-native | auth0/agent-skills | Intégrer Auth0 dans une application mobile React Native ou Expo. | 21 | 11j |
| 28 | web-design-guidelines | elophanto/elophanto | Auditer des fichiers UI contre les directives officielles Vercel web interface. | 72 | 12j |
| 29 | whimsy-design | elophanto/elophanto | Concevoir des micro-interactions ludiques et délicieuses pour enrichir l'expérience utilisateur. | 72 | 12j |
| 30 | xr-cockpit | elophanto/elophanto | Concevoir des interfaces cockpit XR immersives, ergonomiques et résistantes au mal des transports. | 72 | 12j |
| 31 | xr-development | elophanto/elophanto | Développer des expériences WebXR immersives multi-appareils avec suivi des mains et interactions spatiales. | 72 | 12j |
| 32 | xr-interface | elophanto/elophanto | Concevoir des interfaces spatiales XR intuitives, accessibles et confortables pour environnements immersifs. | 72 | 12j |
| 33 | 12-principles-of-animation | elophanto/elophanto | Auditer le code d'animation selon les 12 principes Disney adaptés au web. | 72 | 12j |
| 34 | baseline-ui | elophanto/elophanto | Imposer des contraintes strictes de qualité UI pour éviter les interfaces générées bâclées. | 72 | 12j |
| 35 | vercel-composition-patterns | elophanto/elophanto | Composer des composants React flexibles en évitant la prolifération de props booléennes. | 72 | 12j |
| 36 | design-lab | elophanto/elophanto | Explorer visuellement des options de design via interview, variations et feedback itératif. | 72 | 12j |
| 37 | fixing-accessibility | elophanto/elophanto | Auditer et corriger les problèmes d'accessibilité UI selon les normes ARIA et WCAG. | 72 | 12j |
| 38 | fixing-metadata | elophanto/elophanto | Auditer et corriger les métadonnées SEO, Open Graph et structured data d'une page. | 72 | 12j |
| 39 | fixing-motion-performance | elophanto/elophanto | Auditer et corriger les problèmes de performance des animations UI. | 72 | 12j |
| 40 | frontend-design | elophanto/elophanto | Créer des interfaces frontend distinctives, production-ready, avec une direction esthétique audacieuse. | 72 | 12j |
| 41 | frontend-development | elophanto/elophanto | Développer des applications web modernes, accessibles et performantes avec React, Vue ou Svelte. | 72 | 12j |
| 42 | interaction-design | elophanto/elophanto | Concevoir des microinteractions, transitions et animations fluides pour enrichir l'expérience utilisateur. | 72 | 12j |
| 43 | interface-design | elophanto/elophanto | Concevoir des interfaces admin et SaaS avec intention et cohérence visuelle. | 72 | 12j |
| 44 | mobile-app-development | elophanto/elophanto | Développer des applications mobiles natives iOS/Android et cross-platform performantes et optimisées. | 72 | 12j |
| 45 | nextjs16-skills | elophanto/elophanto | Maîtriser Next.js 16 : nouveautés, migrations et breaking changes essentiels. | 72 | 12j |
| 46 | performance-benchmarking | elophanto/elophanto | Tester, analyser et optimiser les performances système avec métriques et recommandations ciblées. | 72 | 12j |
| 47 | plan-review-design | elophanto/elophanto | Auditer un plan UX selon six dimensions et le compléter avant validation ingénierie. | 72 | 12j |
| 48 | vercel-react-best-practices | elophanto/elophanto | Optimiser les performances React et Next.js selon 57 règles priorisées par impact. | 72 | 12j |
| 49 | senior-development | elophanto/elophanto | Créer des interfaces web premium Laravel/Livewire avec animations, effets 3D et glass morphism. | 72 | 12j |
| 50 | shadcn | elophanto/elophanto | Intégrer et configurer des composants UI shadcn/ui dans un projet Next.js. | 72 | 12j |
À propos de cette sélection
L'interface reste souvent le dernier kilomètre qu'un agent rate : il génère du code qui compile, mais casse l'accessibilité, ignore le design system ou produit un composant visuellement incohérent. Les skills frontend & design couvrent précisément ce périmètre, des règles de design system à appliquer mécaniquement jusqu'à la génération de composants React typés et testables. Concrètement, tu peux brancher un agent pour auditer la conformité d'un composant face à un token system existant, ou pour scaffolder des exemples interactifs alignés sur ta charte visuelle. L'outillage est dense et déjà mature côté TypeScript et JavaScript, avec des contributions notables de Shopify et Flutter qui couvrent aussi bien le web que le mobile natif. Un socle utile pour les fullstacks qui veulent déléguer plus que du CRUD.