Frontend & Design
Skills pour interfaces web et mobile : React, design systems, accessibilite, mobile.
| # | Skill | Source | Description | Maj | |
|---|---|---|---|---|---|
| 1 | eas-simulator | expo/skills | Lancer et piloter un simulateur iOS/Android distant depuis un agent IA. | 2 530 | 8h |
| 2 | remotion-upgrade | remotion-dev/skills | Mettre à jour Remotion et ses dépendances vers la dernière version stable. | 4 580 | 2j |
| 3 | shopify-hydrogen | shopify/shopify-ai-toolkit | Générer du code Hydrogen valide pour Shopify en recherchant et validant automatiquement. | 544 | 3j |
| 4 | shopify-polaris-admin-extensions | shopify/shopify-ai-toolkit | Générer des extensions UI Shopify Admin validées avec scaffold CLI automatique. | 544 | 3j |
| 5 | shopify-polaris-app-home | shopify/shopify-ai-toolkit | Générer du code UI Shopify Polaris App Home validé et documenté. | 544 | 3j |
| 6 | shopify-polaris-checkout-extensions | shopify/shopify-ai-toolkit | Générer et valider du code d'extension UI Checkout Shopify via CLI et outils bash. | 544 | 3j |
| 7 | shopify-polaris-customer-account-extensions | shopify/shopify-ai-toolkit | Générer et valider du code d'extension UI pour les comptes clients Shopify. | 544 | 3j |
| 8 | shopify-pos-ui | shopify/shopify-ai-toolkit | Générer du code d'extension UI pour Shopify POS avec validation automatique. | 544 | 3j |
| 9 | expo-animation | expo/skills | Construire des animations performantes pour React Native avec Reanimated sur thread UI. | 2 530 | 3j |
| 10 | figma-use | figma/mcp-server-guide | Exécuter du JavaScript dans Figma via l'API Plugin pour manipuler des fichiers. | 1 990 | 3j |
| 11 | expo-overview | expo/skills | Router d'orientation pour identifier et charger le bon skill Expo ou EAS selon l'objectif. | 2 530 | 4j |
| 12 | expo-brownfield | expo/skills | Intégrer React Native et Expo dans une application native iOS ou Android existante. | 2 530 | 4j |
| 13 | figma-code-connect | figma/mcp-server-guide | Générer des fichiers .figma.ts pour connecter des composants Figma à du code. | 1 990 | 4j |
| 14 | figma-create-new-file | figma/mcp-server-guide | Créer un nouveau fichier Figma vierge dans les brouillons de l'utilisateur. | 1 990 | 4j |
| 15 | figma-design-to-code | figma/mcp-server-guide | Convertir un design Figma en code adapté à la stack et aux conventions du projet cible. | 1 990 | 4j |
| 16 | figma-generate-design | figma/mcp-server-guide | Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system. | 1 990 | 4j |
| 17 | figma-generate-diagram | figma/mcp-server-guide | Générer des diagrammes Mermaid.js éditables dans FigJam avec contraintes et routage par type. | 1 990 | 4j |
| 18 | figma-generate-library | figma/mcp-server-guide | Construire des design systems Figma professionnels en orchestrant des workflows multi-phases structurés. | 1 990 | 4j |
| 19 | figma-generative-plugins | figma/mcp-server-guide | Créer et mettre à jour des plugins Figma génératifs via des appels d'outils structurés. | 1 990 | 4j |
| 20 | figma-implement-motion | figma/mcp-server-guide | Traduire des animations Figma en code motion.dev, CSS keyframes ou bibliothèques framework. | 1 990 | 4j |
| 21 | figma-shaders | figma/mcp-server-guide | Créer et mettre à jour des shaders Figma de type effet ou fill via MCP. | 1 990 | 4j |
| 22 | figma-swiftui | figma/mcp-server-guide | Convertir des designs Figma en SwiftUI et inversement, dans les deux sens. | 1 990 | 4j |
| 23 | figma-use-figjam | figma/mcp-server-guide | Manipuler des fichiers FigJam via l'API Figma Plugin dans un agent IA. | 1 990 | 4j |
| 24 | figma-use-motion | figma/mcp-server-guide | Gérer les animations, keyframes et styles de motion dans Figma via l'API Plugin. | 1 990 | 4j |
| 25 | figma-use-slides | figma/mcp-server-guide | Manipuler des fichiers Figma Slides via l'API plugin MCP avec règles spécifiques. | 1 990 | 4j |
| 26 | figma-use | figma/mcp-server-guide | Créer, modifier et assembler des nœuds Figma via le Plugin API JavaScript. | 1 990 | 4j |
| 27 | eas-app-stores | expo/skills | Construire et déployer des apps Expo natives sur l'App Store et Google Play via EAS. | 2 530 | 5j |
| 28 | expo-design-system | expo/skills | Centraliser tous les tokens visuels d'une app Expo dans un système de design cohérent. | 2 530 | 5j |
| 29 | expo-data-fetching | expo/skills | Gérer les requêtes réseau, le cache et les erreurs dans une app Expo. | 2 530 | 5j |
| 30 | expo-native-ui | expo/skills | Guider le développement d'interfaces natives Expo avec bonnes pratiques et bibliothèques recommandées. | 2 530 | 5j |
| 31 | n8n:ui-design | n8n-io/n8n | Concevoir et styliser des composants UI frontend selon les standards n8n. | 204 305 | 6j |
| 32 | figma-generate-design | figma/mcp-server-guide | Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system. | 1 990 | 6j |
| 33 | accessibility | verygoodopensource/vgv-ai-flutter-plugin | Auditer et corriger l'accessibilité Flutter selon les niveaux WCAG 2.1 A, AA et AAA. | 162 | 6j |
| 34 | bloc | verygoodopensource/vgv-ai-flutter-plugin | Gérer l'état Flutter avec le pattern BLoC en séparant logique métier et présentation. | 162 | 6j |
| 35 | dart-flutter-sdk-upgrade | verygoodopensource/vgv-ai-flutter-plugin | Mettre à jour les versions Flutter/Dart dans les fichiers CI et pubspec.yaml d'un projet VGV. | 162 | 6j |
| 36 | internationalization | verygoodopensource/vgv-ai-flutter-plugin | Internationaliser une application Flutter avec ARB, flutter_localizations et bonnes pratiques RTL. | 162 | 6j |
| 37 | layered-architecture | verygoodopensource/vgv-ai-flutter-plugin | Structurer une app Flutter en monorepo avec quatre couches indépendantes et unidirectionnelles. | 162 | 6j |
| 38 | material-theming | verygoodopensource/vgv-ai-flutter-plugin | Centraliser couleurs, typographie et composants Flutter via ThemeData Material 3. | 162 | 6j |
| 39 | navigation | verygoodopensource/vgv-ai-flutter-plugin | Implémenter la navigation Flutter avec GoRouter selon les meilleures pratiques recommandées. | 162 | 6j |
| 40 | ui-package | verygoodopensource/vgv-ai-flutter-plugin | Créer une bibliothèque de widgets Flutter réutilisables avec theming, API et tests cohérents. | 162 | 6j |
| 41 | animations | verygoodopensource/vgv-ai-flutter-plugin | Appliquer les meilleures pratiques d'animation Flutter avec Material 3 et sans bibliothèques tierces. | 162 | 6j |
| 42 | expo-router | expo/skills | Gérer la navigation et le routage d'applications Expo Router avec stacks, modales et liens. | 2 530 | 6j |
| 43 | e2e-test | divinevideo/divine-mobile | Exécuter des tests E2E d'une app mobile contre un backend Docker local complet. | 264 | 7j |
| 44 | building-html-canvases | posthog/skills | Créer des canvases HTML statiques ou animés avec WebGL, CSS et APIs navigateur. | 61 | 8j |
| 45 | building-react-quill-canvases | posthog/skills | Construire des tableaux de bord PostHog avec React, Quill et les règles de la plateforme. | 61 | 8j |
| 46 | nextjs-on-cloudflare | cloudflare/skills | Déployer des projets Next.js sur Cloudflare Workers via vinext plutôt qu'OpenNext. | 2 830 | 9j |
| 47 | web-perf | cloudflare/skills | Auditer les performances web d'une page via Chrome DevTools et Core Web Vitals. | 2 830 | 9j |
| 48 | signals-scout-web-vitals | posthog/skills | Identifier et signaler les pages web sous-performantes selon les seuils Core Web Vitals. | 61 | 9j |
| 49 | eas-update | expo/skills | Déployer des mises à jour JavaScript et assets sans soumettre un nouveau binaire natif. | 2 530 | 11j |
| 50 | frontend-design | anthropics/skills | Créer des interfaces frontend mémorables, distinctives et production-ready avec une vision esthétique audacieuse. | 176 307 | 11j |
À 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.