# UI/UX · Veille technologique [Source canonique]() Conception d’interfaces et de parcours adaptés aux besoins des utilisateurs. ## [Taste Skill : des règles de design et des contrôles navigateur pour les agents de code]() Taste Skill fournit aux agents de code un système pour construire des sites d’entreprise moins génériques : palettes, layouts de hero, fragments d’interface et images réelles, avec une direction adaptée au type d’activité. Le dépôt propose des intégrations pour Claude Code et Codex, ainsi qu’un usage via `npx skills`. Le point distinctif est le contrôle automatisé dans Chrome headless : la page est rendue à quatre largeurs, de 390 à 1440 px, et vérifiée pour les visuels vides, les contrastes, l’alignement ou les images manquantes sur réseau lent. Les effets WebGL et de scroll sont réservés aux pages tech, gaming et software, avec des replis statiques pour mobile et la réduction des animations. 2026-11-06 · [Markdown]() · [Ressource originale]() ## [emoji-picker-react : personnaliser un sélecteur d’émojis React]() emoji-picker-react fournit un sélecteur d’émojis pour React, utilisable avec ses styles intégrés ou adapté à l’identité visuelle du produit. Le playground interactif permet de tester les propriétés, les thèmes CSS et des exemples de personnalisation. Le composant couvre notamment la recherche, les tons de peau, les émojis personnalisés et plusieurs langues. Son mode « réactions » affiche d’abord une sélection compacte de réactions populaires, puis donne accès à la bibliothèque complète. 2026-11-01 · [Markdown]() · [Ressource originale]() ## [OpenTUI : interfaces terminal en TypeScript avec rendu natif en Zig]() OpenTUI permet de construire des interfaces utilisateur pour le terminal en TypeScript, directement ou avec React et Solid. Son moteur de rendu natif est écrit en Zig, et la mise en page s’appuie sur flexbox. La bibliothèque prend en charge les sélecteurs, les champs de saisie et les zones de défilement pilotés au clavier ou à la souris. Elle peut aussi afficher des images, jouer des sons et rendre des graphismes 3D. 2026-11-01 · [Markdown]() · [Ressource originale]() ## [Puck, éditeur visuel pour React : champs et canvas dans la version 0.24]() Puck, l’éditeur visuel de pages pour React, ajoute dans sa version 0.24 des groupes et des onglets pour organiser les champs, ainsi qu’un champ `checkbox` pour sélectionner plusieurs options. Des poignées de déplacement facilitent aussi le réagencement de composants dans des mises en page imbriquées. L’API `renderFields` permet de composer ces présentations. Côté canvas, `InlineTextField` rend possible l’édition directe du texte, tandis que `fieldTransforms` transforme les valeurs au rendu sans modifier les données sous-jacentes. 2026-11-01 · [Markdown]() · [Ressource originale]() ## [MicroKit : 54 micro-interactions React, CSS et Tailwind à copier]() MicroKit rassemble des interactions prêtes à copier — boutons animés, onglets, champs et effets au survol — avec des versions React ou CSS et Tailwind. Chaque composant se récupère séparément en JavaScript ou TypeScript, sans installer de package ; 26 des 54 n’ont aucune dépendance, tandis que 28 utilisent lucide-react. Le code est sous licence MIT et les variantes Tailwind sont prévues pour les versions 3 et 4. Côté Next.js App Router, la plupart des composants restent compatibles avec les server components ; ceux qui utilisent état, ref ou gestionnaire d’événement nécessitent « use client ». 2026-10-29 · [Markdown]() · [Ressource originale]() ## [UI SFX : une bibliothèque de sons d’interface cohérente]() UI SFX organise **78 événements d’interface** en 12 univers sonores, pour comparer le caractère d’un même feedback sans changer sa signification. La bibliothèque rassemble 72 sons ponctuels et six boucles, avec des aperçus interactifs pour les tester dans des parcours de produit. Le package s’installe avec `npm install uisfx` et propose une API TypeScript pour déclencher les sons ou arrêter une boucle quand l’état associé se termine. Les fichiers audio sont sous licence CC0 et le runtime sous MIT ; cette séparation facilite leur réutilisation dans des projets web comme natifs. 2026-10-29 · [Markdown]() · [Ressource originale]() ## [next-themes : gérer les thèmes sans flash ni piège d’hydratation]() next-themes applique le thème dès le chargement, prend en compte la préférence système et synchronise le choix entre les onglets. Son `ThemeProvider` fonctionne avec l’App Router comme avec `pages/`, et expose un hook pour changer de thème ou gérer plusieurs variantes. Le point à intégrer dans l’architecture : le thème stocké dans le navigateur est inconnu au rendu serveur. L’interface qui dépend de `useTheme` doit donc attendre le montage côté client pour éviter les erreurs d’hydratation. La bibliothèque met aussi à jour l’attribut de `` — avec `suppressHydrationWarning` recommandé — et reste indépendante de la solution CSS utilisée. 2026-10-29 · [Markdown]() · [Ressource originale]() ## [Tailwind CSS : un répertoire de composants, templates et outils]() All UtilityCSS rassemble des ressources Tailwind CSS gratuites et payantes, classées par type, usage et technologie. Le catalogue présente notamment des composants copiables, des templates, des starters Next.js et des outils de gestion des couleurs, dont plusieurs prennent en charge les formats OKLCH de Tailwind CSS v4. Le filtrage facilite la recherche de briques adaptées à un projet, mais le répertoire ne garantit pas à lui seul leur qualité ou leur accessibilité : la page conseille de vérifier ces points auprès de chaque ressource. 2026-10-28 · [Markdown]() · [Ressource originale]() ## [Fontastic Space : comparer les polices et leurs métriques]() Fontastic Space compare des Google Fonts côte à côte, avec superposition anatomique, métriques OpenType et scores de compatibilité. L’exemple Playfair Display + DM Sans met en regard hauteur d’x, hauteur des capitales et largeur des chaînes, puis propose des règles CSS prêtes à reprendre. Les scores s’appuient sur plusieurs cadres d’analyse typographique, mais restent un repère : l’outil permet aussi de vérifier visuellement le rendu dans un paragraphe ou une bannière avant de choisir une paire. 2026-10-28 · [Markdown]() · [Ressource originale]() ## [React Bits 2.0 : composants animés et outils de création repensés]() React Bits 2.0 annonce 216 composants animés : 104 ont été reconstruits ou repensés, et plus de 20 ont supprimé des dépendances supplémentaires. Les démos ajoutent presets et interactions au clic, tandis que Background Studio, Shape Magic et Texture Lab ont été reconstruits pour ajuster des effets en direct et exporter leurs résultats. La mise à jour refond aussi la documentation et la page d’accueil, qui utiliserait environ cinq fois moins de JavaScript. Le catalogue facilite le prototypage d’interfaces expressives ; la variété des animations invite toutefois à évaluer leur coût et leurs dépendances avant de les intégrer à un produit. 2026-10-23 · [Markdown]() · [Ressource originale]() ## [React Aria : un composant Sheet animé et optimisé pour le mobile]() La version 1.22.0 de React Aria introduit le composant **Sheet**, une surcouche glissable qui s’appuie sur les gestes natifs de scroll pour offrir des transitions fluides et tactiles, idéales pour les panneaux mobiles ou les notifications. Cette release apporte aussi la prise en charge de Turbopack pour l’optimisation des locales, une meilleure gestion des widgets interactifs comme le clavier virtuel, et plusieurs correctifs sur les collections, ComboBox et formulaires. 2026-10-16 · [Markdown]() · [Ressource originale]() ## [Navbar Gallery : une collection de designs de barres de navigation web]() Navbar Gallery propose une sélection organisée de barres de navigation issues de sites web variés, couvrant des modèles statiques, dropdown, mega menus, sidebars, barres de recherche et annonces. Chaque exemple est consultable par type et renvoie vers le site source, facilitant la veille ou l’inspiration pour concevoir une navigation adaptée à différents contextes d’interface. Une ressource utile pour comparer rapidement des patterns concrets sans se perdre dans des galeries généralistes. 2026-10-16 · [Markdown]() · [Ressource originale]() ## [Galerie Footer Design : inspirations de pieds de page web]() Footer Design propose une **galerie organisée de pieds de page de sites web** issus de projets variés, avec un tri par style et type. Cette ressource permet de parcourir rapidement des exemples concrets pour s’inspirer lors de la conception ou de la refonte d’interfaces. On y trouve des approches typographiques, illustrées, en grille ou animées, utiles pour enrichir sa veille UI/UX. 2026-10-16 · [Markdown]() · [Ressource originale]() ## [Supahero : une bibliothèque de sections hero pour sites web]() Supahero propose une **collection organisée de sections hero** issues de sites web variés, illustrant des approches de design attractives pour l’en-tête d’une page. Chaque exemple met en avant la diversité des styles, des animations et des compositions, facilitant l’inspiration ou la veille pour la conception d’interfaces. L’absence de filtres avancés limite la recherche, mais la navigation rapide permet d’explorer de nombreux cas concrets. 2026-10-16 · [Markdown]() · [Ressource originale]() ## [3dicons.co : bibliothèque d’icônes 3D libres et personnalisables]() 3dicons.co propose plus de 1400 icônes 3D en open source, utilisables sans attribution pour des projets personnels ou commerciaux. L’interface permet de personnaliser la couleur, l’angle et de télécharger chaque icône individuellement ou en lot, avec des collections thématiques et une intégration Figma. La licence CC0 facilite l’intégration dans tout type d’application ou de design system. 2026-10-16 · [Markdown]() · [Ressource originale]() ## [Shaders : 199 composants WebGPU prêts à l’emploi pour React, Vue, Svelte et JavaScript]() Cette documentation présente plus de 190 composants graphiques prêts à l’emploi pour intégrer des effets WebGPU dans React, Vue, Svelte, Solid et JavaScript natif. Les composants couvrent une large palette : textures, formes, matériaux, filtres, distorsions, transitions, flous, ajustements et effets interactifs, chacun avec une description concrète de son rendu et de ses paramètres. Une ressource à explorer pour enrichir rapidement une interface avec des effets visuels avancés sans écrire de shader bas-niveau. 2026-10-16 · [Markdown]() · [Ressource originale]() ## [Prompt Motion : explorer des animations créées avec l’IA]() Prompt Motion est une galerie de vidéos de mouvement accompagnées des prompts et des skills utilisés pour les produire avec Claude Opus 5.5. On peut parcourir des exemples par familles — interface produit, graphiques, typographie ou particules — puis adapter les prompts à un projet, ce qui en fait une source d’expérimentation pour le motion design assisté par IA. 2026-10-08 · [Markdown]() · [Ressource originale]() ## [shadcn-admin-kit : blocs React open source pour back-offices]() Sh​​adcn Admin Kit fournit des blocs open source pour créer des outils internes, tableaux de bord et applications B2B en React. Il préconfigure notamment tables de données, formulaires, authentification, recherche et internationalisation, avec des capacités avancées comme le CRUD généré, les permissions, les actions groupées et l’annulation. 2026-10-06 · [Markdown]() · [Ressource originale]() ## [Penpot, plateforme open source de design et prototypage]() Penpot est une plateforme de conception et de prototypage open source qui relie les workflows de design, de code et d’IA. Elle propose des interfaces responsives, des composants et tokens partagés, ainsi que des formats ouverts comme CSS, HTML, SVG et JSON pour faciliter le passage entre maquettes et implémentation. 2026-10-04 · [Markdown]() · [Ressource originale]() ## [Des transitions prêtes à intégrer dans une application web]() Transitions Pro réunit plus de 43 transitions prêtes pour des applications web en React, TypeScript et Next.js. Les extraits copiables s’accompagnent de skills pour les agents et d’outils de création ou d’audit du mouvement, ce qui aide à passer d’une animation isolée à un système d’interactions cohérent. 2026-09-13 · [Markdown]() · [Ressource originale]() Page 1 / 4 [Suivant]()