UI Tooling
Figma, accessibility audit, screenshot, Playwright UI testing.
| # | Skill | Source | Description | Maj | |
|---|---|---|---|---|---|
| 1 | developing-with-streamlit | streamlit/agent-skills | Router vers les sous-skills spécialisés pour développer, optimiser et styliser des apps Streamlit. | 187 | 23min |
| 2 | figma-create-new-file | figma/mcp-server-guide | Créer un nouveau fichier Figma vierge dans les brouillons d'un utilisateur. | 1 411 | 14h |
| 3 | xr-cockpit | elophanto/elophanto | Concevoir des interfaces cockpit XR immersives, ergonomiques et résistantes au mal des transports. | 59 | 10j |
| 4 | xr-interface | elophanto/elophanto | Concevoir des interfaces spatiales XR intuitives, accessibles et confortables pour environnements immersifs. | 59 | 10j |
| 5 | 12-principles-of-animation | elophanto/elophanto | Auditer le code d'animation selon les 12 principes Disney adaptés au web. | 59 | 10j |
| 6 | fixing-accessibility | elophanto/elophanto | Auditer et corriger les problèmes d'accessibilité UI selon les normes ARIA et WCAG. | 59 | 10j |
| 7 | frontend-design | elophanto/elophanto | Créer des interfaces frontend distinctives, production-ready, avec une direction esthétique audacieuse. | 59 | 10j |
| 8 | interaction-design | elophanto/elophanto | Concevoir des microinteractions, transitions et animations fluides pour enrichir l'expérience utilisateur. | 59 | 10j |
| 9 | interface-design | elophanto/elophanto | Concevoir des interfaces admin et SaaS avec intention et cohérence visuelle. | 59 | 10j |
| 10 | dd-browser-sdk | datadog-labs/agent-skills | Mettre à niveau le SDK navigateur Datadog de la version 6 à 7. | 108 | 14j |
| 11 | write-example | tldraw/tldraw | Créer des exemples minimaux et bien structurés pour le SDK tldraw. | 47 008 | 16j |
| 12 | omni-embed | exploreomni/omni-agent-skills | Intégrer des dashboards Omni dans des applications externes via des iframes signées. | 16 | 20j |
| 13 | gsap-framer-scroll-animation | github/awesome-copilot | Implémenter des animations de scroll production avec GSAP ou Framer Motion. | 32 879 | 28j |
| 14 | shopify-polaris-admin-extensions | shopify/shopify-ai-toolkit | Créer et intégrer des extensions UI personnalisées dans l'administration Shopify via CLI. | 312 | 1mo |
| 15 | shopify-polaris-checkout-extensions | shopify/shopify-ai-toolkit | Créer des extensions UI personnalisées pour le tunnel de paiement Shopify. | 312 | 1mo |
| 16 | shopify-pos-ui | shopify/shopify-ai-toolkit | Créer et scaffolde des extensions UI pour le point de vente Shopify POS. | 312 | 1mo |
| 17 | shopify-polaris-admin-extensions | shopify/agent-skills | Créer et intégrer des extensions UI personnalisées dans l'administration Shopify via CLI. | 31 | 1mo |
| 18 | shopify-polaris-checkout-extensions | shopify/agent-skills | Créer des extensions UI personnalisées pour le tunnel de paiement Shopify. | 31 | 1mo |
| 19 | shopify-polaris-customer-account-extensions | shopify/agent-skills | Créer des extensions UI personnalisées pour les pages de compte client Shopify. | 31 | 1mo |
| 20 | shopify-pos-ui | shopify/agent-skills | Créer et scaffolde des extensions UI pour le point de vente Shopify POS. | 31 | 1mo |
| 21 | mapbox-store-locator-patterns | mapbox/mapbox-agent-skills | Créer des localisateurs de magasins interactifs avec Mapbox GL JS et filtres. | 53 | 1mo |
| 22 | mapbox-data-visualization-patterns | mapbox/mapbox-agent-skills | Créer des visualisations cartographiques avancées avec Mapbox : choroplèthes, cartes de chaleur et 3D. | 53 | 1mo |
| 23 | mapbox-web-performance-patterns | mapbox/mapbox-agent-skills | Optimiser les performances des applications Mapbox en éliminant chargements séquentiels et surcharges inutiles. | 53 | 1mo |
| 24 | huggingface-gradio | huggingface/skills | Créer des interfaces web interactives et démos ML avec Python via Gradio. | 10 483 | 1mo |
| 25 | expo-tailwind-setup | expo/skills | Configurer Tailwind CSS v4 avec NativeWind v5 dans une app Expo multiplateforme. | 1 905 | 2mo |
| 26 | ux-copy | anthropics/knowledge-work-plugins | Rédiger et réviser des microtextes UX adaptés à chaque contexte d'interface. | 12 101 | 2mo |
| 27 | playwright-interactive | openai/skills | Déboguer et tester visuellement des apps web ou Electron via Playwright en session persistante. | 19 025 | 2mo |
| 28 | accessibility-compliance | wshobson/agents | Implémenter l'accessibilité WCAG 2.2 pour créer des interfaces inclusives et conformes. | 35 316 | 2mo |
| 29 | interaction-design | wshobson/agents | Concevoir des interactions UI fluides avec animations, transitions et micro-feedbacks engageants. | 35 316 | 2mo |
| 30 | web-coder | github/awesome-copilot | Coder des applications web performantes, accessibles et sécurisées selon les standards modernes. | 32 879 | 2mo |
| 31 | winui-app | openai/skills | Créer, configurer et déboguer des applications WinUI 3 avec Windows App SDK. | 19 025 | 2mo |
| 32 | building-streamlit-custom-components-v2 | streamlit/agent-skills | Créer des composants UI interactifs et réutilisables pour Streamlit avec l'API CCv2. | 187 | 2mo |
| 33 | building-streamlit-dashboards | streamlit/agent-skills | Créer des dashboards Streamlit avec métriques, graphiques et filtres en sidebar. | 187 | 2mo |
| 34 | game-engine | github/awesome-copilot | Créer des jeux web 2D/3D avec HTML5 Canvas, WebGL et JavaScript. | 32 879 | 2mo |
| 35 | fluentui-blazor | github/awesome-copilot | Intégrer et configurer correctement les composants Fluent UI dans une application Blazor. | 32 879 | 2mo |
| 36 | building-streamlit-chat-ui | streamlit/agent-skills | Construire des interfaces de chat conversationnelles avec Streamlit et des LLMs. | 187 | 3mo |
| 37 | building-streamlit-multipage-apps | streamlit/agent-skills | Structurer une application Streamlit multi-pages avec navigation et état partagé. | 187 | 3mo |
| 38 | displaying-streamlit-data | streamlit/agent-skills | Afficher données et graphiques Streamlit avec clarté et lisibilité optimales. | 187 | 3mo |
| 39 | using-streamlit-layouts | streamlit/agent-skills | Structurer une app Streamlit avec sidebar, colonnes, onglets et dialogues. | 187 | 3mo |
| 40 | using-streamlit-markdown | streamlit/agent-skills | Formater du texte Streamlit avec Markdown, icônes, couleurs et LaTeX. | 187 | 3mo |
| 41 | choosing-streamlit-selection-widgets | streamlit/agent-skills | Choisir et utiliser les widgets de sélection Streamlit adaptés à chaque cas. | 187 | 3mo |
| 42 | improving-streamlit-design | streamlit/agent-skills | Peaufiner l'interface visuelle d'une app Streamlit avec icons, badges et espacements. | 187 | 3mo |
| 43 | using-streamlit-custom-components | streamlit/agent-skills | Intégrer des composants Streamlit tiers pour étendre les fonctionnalités de votre application. | 187 | 3mo |
À propos de cette sélection
Générer un screenshot automatisé, détecter une régression visuelle avant la prod, brancher un audit d'accessibilité dans une pipeline CI : les équipes reportent souvent ces étapes faute d'outillage clair. Pourtant, l'écosystème a bien mûri. Les skills ui tooling disponibles ici couvrent des cas concrets, du test interactif avec Playwright piloté par un agent jusqu'à la génération de composants animés via GSAP ou Framer. Streamlit est bien représenté pour les interfaces data-driven, et les profils qui exploitent Fluent UI ou tldraw trouveront aussi leur terrain. Le tout s'adresse autant aux devs JavaScript et TypeScript qu'aux équipes Python qui assemblent des interfaces sans framework lourd, avec suffisamment de couverture pour automatiser sérieusement ce qui se voit.