Frontend & Design
Skills pour interfaces web et mobile : React, design systems, accessibilite, mobile.
| # | Skill | Source | Description | Δ | |
|---|---|---|---|---|---|
| 1 | frontend-design | anthropics/skills | Créer des interfaces frontend mémorables, distinctives et production-ready avec une vision esthétique audacieuse. | 176 307 | 1078 |
| 2 | web-artifacts-builder | anthropics/skills | Construire et bundler des artifacts frontend React en un fichier HTML autonome. | 176 307 | 1078 |
| 3 | figma-code-connect-components | openai/skills | Connecter des composants Figma à leurs équivalents code via Code Connect. | 27 186 | 734 |
| 4 | figma-create-design-system-rules | openai/skills | Générer des règles de système de design personnalisées pour guider les agents IA dans l'implémentation Figma. | 27 186 | 734 |
| 5 | figma-create-new-file | openai/skills | Créer un nouveau fichier Figma vierge dans les brouillons d'un utilisateur. | 27 186 | 734 |
| 6 | figma-generate-design | openai/skills | Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system. | 27 186 | 734 |
| 7 | figma-generate-library | openai/skills | Construire des systèmes de design Figma professionnels en orchestrant des workflows multi-phases structurés. | 27 186 | 734 |
| 8 | figma-implement-design | openai/skills | Convertir des designs Figma en code production avec une précision pixel-perfect. | 27 186 | 734 |
| 9 | figma-use | openai/skills | Exécuter du JavaScript dans Figma via le Plugin API pour manipuler des fichiers. | 27 186 | 734 |
| 10 | figma | openai/skills | Implémenter des designs Figma en code en traduisant fidèlement les composants visuels. | 27 186 | 734 |
| 11 | playwright-interactive | openai/skills | Déboguer et tester visuellement des apps web ou Electron via Playwright en session persistante. | 27 186 | 734 |
| 12 | winui-app | openai/skills | Créer, configurer et déboguer des applications WinUI 3 avec Windows App SDK. | 27 186 | 734 |
| 13 | n8n:ui-design | n8n-io/n8n | Concevoir et styliser des composants UI frontend selon les standards n8n. | 204 305 | 544 |
| 14 | power-apps-code-app-scaffold | github/awesome-copilot | Scaffolger un projet Power Apps Code App complet avec React, TypeScript et Vite. | 39 002 | 226 |
| 15 | react18-batching-patterns | github/awesome-copilot | Diagnostiquer et corriger les bugs de batching automatique dans React 18. | 39 002 | 226 |
| 16 | react18-dep-compatibility | github/awesome-copilot | Vérifier la compatibilité des dépendances npm avec React 18 et 19. | 39 002 | 226 |
| 17 | react18-enzyme-to-rtl | github/awesome-copilot | Migrer des tests Enzyme vers React Testing Library en adoptant une approche comportementale. | 39 002 | 226 |
| 18 | react18-legacy-context | github/awesome-copilot | Migrer les contextes React legacy vers l'API moderne Context de React 18/19. | 39 002 | 226 |
| 19 | react18-lifecycle-patterns | github/awesome-copilot | Migrer les méthodes de cycle de vie obsolètes de React vers des patterns React 18 conformes. | 39 002 | 226 |
| 20 | react19-concurrent-patterns | github/awesome-copilot | Préserver les patterns React 18 et adopter les nouvelles API React 19 après migration. | 39 002 | 226 |
| 21 | react19-source-patterns | github/awesome-copilot | Migrer le code source React vers les APIs modernes de React 19. | 39 002 | 226 |
| 22 | react19-test-patterns | github/awesome-copilot | Migrer les tests React 18 vers React 19 en adaptant imports et assertions. | 39 002 | 226 |
| 23 | apple-appstore-reviewer | github/awesome-copilot | Auditer le code iOS et signaler les risques de rejet sur l'App Store. | 39 002 | 226 |
| 24 | react18-string-refs | github/awesome-copilot | Migrer les string refs React 18 vers createRef() en trois étapes simples. | 39 002 | 226 |
| 25 | fluentui-blazor | github/awesome-copilot | Intégrer et configurer correctement les composants Fluent UI dans une application Blazor. | 39 002 | 226 |
| 26 | gsap-framer-scroll-animation | github/awesome-copilot | Implémenter des animations de scroll production avec GSAP ou Framer Motion. | 39 002 | 226 |
| 27 | next-intl-add-language | github/awesome-copilot | Ajouter une nouvelle langue à un projet Next.js avec next-intl. | 39 002 | 226 |
| 28 | penpot-uiux-design | github/awesome-copilot | Concevoir des interfaces professionnelles dans Penpot via un serveur MCP dédié. | 39 002 | 226 |
| 29 | premium-frontend-ui | github/awesome-copilot | Architecturer des interfaces web premium avec animations, micro-interactions et identité visuelle forte. | 39 002 | 226 |
| 30 | web-design-reviewer | github/awesome-copilot | Inspecter visuellement un site web et corriger ses problèmes de design au niveau du code. | 39 002 | 226 |
| 31 | ui-screenshots | github/awesome-copilot | Capturer et recadrer des screenshots d'interfaces web pendant le développement. | 39 002 | 226 |
| 32 | react-container-presentation-component | github/awesome-copilot | Créer un composant React selon le pattern Container/Presentation dans un projet TypeScript. | 39 002 | 226 |
| 33 | anti-ui-slop | github/awesome-copilot | Concevoir des interfaces web ou iOS uniques, fonctionnelles et fidèles au produit. | 39 002 | 226 |
| 34 | markstream-install | github/awesome-copilot | Intégrer et configurer Markstream pour le rendu Markdown en streaming selon le framework cible. | 39 002 | 226 |
| 35 | vercel-composition-patterns | vercel-labs/agent-skills | Structurer des composants React flexibles avec composition et patterns avancés. | 31 193 | 214 |
| 36 | vercel-react-best-practices | vercel-labs/agent-skills | Optimiser les performances React/Next.js selon 70 règles Vercel classées par impact. | 31 193 | 214 |
| 37 | vercel-react-native-skills | vercel-labs/agent-skills | Optimiser les apps React Native et Expo selon des règles de bonnes pratiques catégorisées. | 31 193 | 214 |
| 38 | web-design-guidelines | vercel-labs/agent-skills | Auditer des fichiers web selon les Web Interface Guidelines officielles. | 31 193 | 214 |
| 39 | vercel-react-view-transitions | vercel-labs/agent-skills | Animer les transitions d'interface React avec les View Transitions natives du navigateur. | 31 193 | 214 |
| 40 | vercel-react-best-practices | cherryhq/cherry-studio | Optimiser les performances React et Next.js selon 62 règles priorisées par impact. | 51 791 | 214 |
| 41 | write-example | tldraw/tldraw | Créer des exemples minimaux et bien structurés pour le SDK tldraw. | 50 356 | 149 |
| 42 | screen-reader-testing | wshobson/agents | Tester l'accessibilité web avec les lecteurs d'écran VoiceOver, NVDA et JAWS. | 39 652 | 148 |
| 43 | angular-migration | wshobson/agents | Migrer des applications AngularJS vers Angular avec stratégies hybrides et conversion de composants. | 39 652 | 148 |
| 44 | react-modernization | wshobson/agents | Migrer des composants React class vers hooks et moderniser les applications vers React 18. | 39 652 | 148 |
| 45 | nextjs-app-router-patterns | wshobson/agents | Implémenter les patterns App Router Next.js 14 pour des applications React full-stack modernes. | 39 652 | 148 |
| 46 | brand-landingpage | wshobson/agents | Concevoir une landing page branded clé en main via interview, génération et itération visuelle. | 39 652 | 148 |
| 47 | react-native-architecture | wshobson/agents | Architecturer des applications React Native avec Expo, navigation et offline-first. | 39 652 | 148 |
| 48 | react-state-management | wshobson/agents | Gérer l'état React avec Zustand, Redux Toolkit ou React Query selon les besoins. | 39 652 | 148 |
| 49 | tailwind-design-system | wshobson/agents | Créer des design systems production-ready avec Tailwind CSS v4. | 39 652 | 148 |
| 50 | accessibility-compliance | wshobson/agents | Implémenter l'accessibilité WCAG 2.2 pour créer des interfaces inclusives et conformes. | 39 652 | 148 |
À 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.