building-native-ui

Vue d’ensemble de la compétence building-native-ui

À quoi sert la compétence building-native-ui

La compétence building-native-ui est un guide pratique pour créer des interfaces Expo Router soignées, avec un rendu réellement natif plutôt qu’un simple habillage cross-platform. Elle est particulièrement utile lorsque vous voulez qu’un agent IA prenne des décisions UI concrètes pour des apps React Native et Expo : structure des routes, contrôles de style iOS, headers, tabs, animations, flux média, effets visuels et patterns adaptés à chaque plateforme.

À qui son installation s’adresse

Cette building-native-ui skill convient surtout aux développeurs frontend qui travaillent avec Expo ou React Native et qui ont besoin de plus que du code de composants générique. Elle est particulièrement pertinente pour les équipes qui conçoivent des produits mobile-first, où la navigation, les contrôles natifs, le motion design et les conventions de plateforme ont un vrai poids. Si vous utilisez déjà Expo Router, ou prévoyez de l’adopter, cette compétence vous donnera une direction bien plus utile qu’un simple prompt du type « build me a mobile UI ».

Le vrai besoin auquel elle répond

En pratique, on installe généralement building-native-ui quand on veut qu’un agent transforme une idée produit encore floue en choix UI prêts à être implémentés, sans tâtonner sur la bonne manière de faire avec Expo. Sa vraie valeur ne se limite pas à fournir des exemples de code : elle évite surtout les faux départs sur les tabs, sheets, search, storage, media, icons, animations et l’organisation des routes.

Ce qui la distingue d’un prompt UI générique

Son principal différenciateur, c’est qu’elle encode des préférences et contraintes propres à Expo. Elle oriente l’agent vers :

• les conventions de fichiers et de layout d’Expo Router
• des contrôles iOS au rendu natif et les SF Symbols
• des animations basées sur Reanimated plutôt que sur des approches plus anciennes
• des limites de plateforme très concrètes, notamment quand Expo Go suffit et quand un custom build devient nécessaire
• une documentation de référence ciblée pour les tabs, la search, les media, les gradients, les zoom transitions et les effets visuels

Ce qu’il faut savoir avant d’adopter building-native-ui

Avant d’utiliser building-native-ui for Frontend Development, il faut savoir que cette compétence a des choix assumés. Elle privilégie les patterns natifs aux UI kits cross-platform génériques, préfère les APIs compatibles avec Expo, et inclut des fonctionnalités soumises à des limites de version ou de plateforme, comme certaines capacités iOS-only, les exigences liées à la New Architecture ou des prérequis de SDK. C’est un vrai atout si vous cherchez une sensation native de haute qualité, mais c’est moins adapté à des design systems largement partagés avec le web ou à un scaffolding d’app agnostique au framework.

Comment utiliser la compétence building-native-ui

Installer la compétence building-native-ui

Si votre agent prend en charge les Skills, ajoutez-la depuis le dépôt Expo skills :

npx skills add https://github.com/expo/skills --skill building-native-ui

Si le repo Expo skills est déjà disponible dans votre environnement, chargez la skill building-native-ui depuis plugins/expo/skills/building-native-ui.

Lire ces fichiers en priorité

Pour l’adopter rapidement, ne commencez pas par tout survoler. Lisez dans cet ordre :

1. SKILL.md
2. references/route-structure.md
3. references/tabs.md
4. references/toolbar-and-headers.md
5. references/animations.md

Ensuite, n’ouvrez les références plus ciblées que si votre fonctionnalité en a réellement besoin :

• references/form-sheet.md
• references/search.md
• references/media.md
• references/storage.md
• references/icons.md
• references/visual-effects.md
• references/zoom-transitions.md
• references/gradients.md
• references/webgpu-three.md

Cet ordre reflète la manière dont les vraies décisions UI se prennent le plus souvent : d’abord la structure de l’app, ensuite la navigation, puis le comportement des écrans et enfin les finitions.

Comprendre le contexte d’installation avant de rédiger votre prompt

Une bonne décision d’installation de building-native-ui dépend de vos contraintes d’exécution. La compétence recommande explicitement d’essayer Expo Go en premier avant de partir sur des custom builds. C’est important, car certaines capacités mentionnées ne fonctionnent pas partout :

• les CSS gradients nécessitent React Native New Architecture et ne sont pas disponibles dans Expo Go
• les Apple Zoom transitions nécessitent iOS 18+
• certains patterns de toolbar et de search sont iOS-only
• les exemples de form sheet demandent une configuration Expo Router stack, et certains détails requièrent des versions plus récentes du SDK Expo

Si votre app doit fonctionner entièrement dans Expo Go, dites-le clairement dans le prompt. Sinon, l’agent risque de choisir des fonctionnalités qui imposent un development build.

Donner à la compétence les bons inputs

La qualité d’utilisation de building-native-ui dépend fortement du contexte fourni. Donnez :

• votre version d’Expo SDK
• si Expo Go est obligatoire ou non
• les plateformes cibles : iOS, Android, web
• si vous utilisez déjà Expo Router
• l’écran ou le flow à construire
• les objectifs de design, par exemple « sensations de réglages iOS natifs » ou « caméra type Instagram »
• toute contrainte forte liée au storage, aux media, aux animations, à la search ou aux tabs

Input faible :
« Build a settings screen. »

Input solide :
« Using Expo Router on Expo SDK 55, build a settings area for iOS and Android. Must work in Expo Go. Use native-feeling controls for notification toggles, theme mode selection, and a storage section. Keep route files in app/ only and place reusable UI in components/. »

La seconde version donne à la compétence assez d’éléments pour choisir les bons contrôles, éviter les APIs non prises en charge et respecter les conventions de routing.

Transformer une idée floue en prompt complet

Un modèle de prompt fiable pour le guide building-native-ui est :

• contexte produit
• plateformes cibles
• contraintes d’exécution
• liste des écrans ou arborescence des routes
• détails d’interaction
• objectifs de style visuel
• format de sortie attendu

Exemple :

“Use the building-native-ui skill to design and implement a photo detail flow in Expo Router. Target iOS first, Android acceptable. Try to stay compatible with Expo Go unless a feature clearly requires a custom build. I need:

• route structure for list, detail, and search
• native tabs if appropriate
• a large collapsing image header
• search in the header
• saved items persisted locally
• smooth Reanimated transitions
  Return:

1. recommended file tree
2. route files to create
3. key component code
4. note any features that require iOS-only APIs or custom builds.”

Ce prompt fonctionne parce qu’il demande à la compétence de prendre des décisions, pas simplement de générer du JSX.

Suivre le workflow recommandé par la compétence building-native-ui

En pratique, le meilleur workflow d’utilisation de building-native-ui est le suivant :

1. Demandez d’abord la structure des routes et de la navigation.
2. Demandez ensuite les choix de contrôles natifs par écran.
3. Ajoutez le motion et les headers une fois la structure validée.
4. N’ajoutez le storage, les media ou la search que lorsque ces flows sont déjà clairs.
5. Enfin, demandez à l’agent de signaler toute exigence de custom build ou toute contrainte platform-only.

Cette méthode évite beaucoup de rework, surtout quand une idée d’UI spectaculaire entre en conflit avec Expo Go, les conventions de routing ou le support réel des plateformes.

Respecter à la lettre les conventions de routes

L’un des aspects les plus précieux de cette compétence, c’est sa rigueur autour d’Expo Router. Quand vous rédigez votre prompt, demandez explicitement à l’agent de suivre les règles de routing de references/route-structure.md :

• garder les fichiers de routes dans app/
• placer le code non lié aux routes en dehors de app/
• utiliser _layout.tsx pour les stacks
• utiliser correctement [id].tsx et [...slug].tsx
• s’assurer que / résout toujours vers une route

C’est plus important qu’il n’y paraît. Les prompts génériques mélangent souvent routes et composants dans app/, ce qui crée ensuite de vrais problèmes de maintenance.

Demander des contrôles natifs plutôt que des widgets custom

Si votre objectif est un rendu natif, demandez explicitement à la compétence de choisir des contrôles intégrés ou natifs à la plateforme dès que possible. Les références recommandent notamment :

• Switch pour les réglages binaires
• un segmented control pour des bascules de mode courtes
• un picker pour les listes d’options plus longues
• les SF Symbols via expo-symbols plutôt que des packs d’icônes type FontAwesome

Cette recommandation est précieuse, car beaucoup de prompts génériques partent par défaut sur des contrôles trop personnalisés, moins natifs et plus coûteux à maintenir côté design.

Préférer Reanimated quand le motion compte

La compétence est très claire sur ce point : utilisez Reanimated v4 plutôt que l’API Animated intégrée à React Native dès que l’animation a un vrai rôle dans l’interface. Si votre écran a besoin d’animations d’entrée, de sortie, de layout ou liées au scroll, dites-le explicitement. Cela aide l’agent à choisir des patterns déjà couverts par les références et évite de retomber sur du code d’animation plus faible.

Associer chaque idée de fonctionnalité au bon fichier de référence

Voici une carte de lecture rapide du repo si la première réponse est trop large :

• transitions animées ou finitions gestuelles → references/animations.md
• sliders, switches, segmented controls → references/controls.md
• expériences de cartes modales → references/form-sheet.md
• gradients et arrière-plans en couches → references/gradients.md
• systèmes d’icônes → references/icons.md
• caméra, vidéo, audio, sauvegarde de fichiers → references/media.md
• structure du dossier app et params → references/route-structure.md
• search dans le header et filtrage → references/search.md
• persistance locale → references/storage.md
• native tabs et choix de migration → references/tabs.md
• stack headers, menus, actions de toolbar → references/toolbar-and-headers.md
• effets de blur et de verre → references/visual-effects.md

Exemples de prompts concrets qui améliorent les résultats

Mieux que :
“Make a tabbed app UI.”

Utilisez :
“Apply building-native-ui to recommend whether this app should use Expo Router NativeTabs or JS tabs. The app has Home, Search, Inbox, and Profile. Prioritize native behavior on iOS, keep labels short, and explain any migration tradeoffs.”

Mieux que :
“Add icons and animations.”

Utilisez :
“Using building-native-ui, replace generic icon usage with SF Symbols where supported and add Reanimated-based entering and scroll-linked animations for the header. Keep the implementation maintainable and call out any platform fallbacks needed.”

Ces prompts produisent de meilleurs résultats parce qu’ils obligent l’agent à appliquer les vraies règles de décision de la compétence, au lieu de générer du code générique.

FAQ sur la compétence building-native-ui

La compétence building-native-ui est-elle réservée aux apps de style iOS ?

Non, mais elle penche clairement vers une UI mobile native-first et inclut plusieurs recommandations orientées iOS, comme les SF Symbols, les Apple Zoom transitions, certains patterns de toolbar et certains comportements de sheet. Elle reste utile sur Android, car ses conseils sur les routes, les animations, les media, le storage et Expo Router gardent toute leur valeur.

La compétence building-native-ui est-elle adaptée aux débutants ?

Oui, à condition de connaître déjà les bases de React Native ou d’Expo. La compétence est davantage tournée vers l’implémentation que vers la pédagogie conceptuelle ; les débutants en tirent donc le plus de valeur lorsqu’ils demandent un seul écran ou un seul flow à la fois, en précisant dès le départ les versions et les plateformes visées.

Qu’est-ce que building-native-ui fait mieux qu’un prompt classique ?

Son principal avantage, c’est une réponse consciente des contraintes. Un prompt classique peut inventer une mauvaise structure de navigation, choisir des systèmes d’icônes peu natifs, ignorer les conventions Expo Router ou recommander des fonctionnalités qui nécessitent un custom build sans vous le signaler. building-native-ui resserre ces choix autour de patterns appuyés sur les références Expo.

Quand ne faut-il pas utiliser building-native-ui ?

Mieux vaut l’éviter si votre objectif principal est :

• une app React agnostique vis-à-vis du design system
• une UI pensée d’abord pour le web
• une bibliothèque de composants entièrement custom et fortement brandée, avec peu d’intérêt pour les conventions natives
• une guidance d’architecture mobile indépendante du framework

Dans ces cas-là, le biais Expo et patterns natifs de la compétence peut être trop étroit.

Est-ce que building-native-ui exige Expo Router ?

En pratique, oui, si vous voulez les meilleurs résultats. Une grande partie de la compétence est structurée autour des concepts Expo Router, comme _layout.tsx, les dossiers de routes, les native tabs, les form sheets et les headers. Vous pouvez réutiliser une partie des conseils sur les contrôles ou les animations en dehors d’Expo Router, mais sa vraie force apparaît quand votre app suit déjà cette stack.

Faut-il un custom dev build pour bien utiliser building-native-ui ?

Pas forcément. La compétence recommande explicitement de tenter Expo Go en premier. Mais certaines fonctionnalités qu’elle cite peuvent demander davantage :

• la New Architecture pour les CSS gradients
• des versions iOS récentes pour certaines transitions propres à Apple
• des packages ou APIs non disponibles dans Expo Go

Si la simplicité du build est importante, indiquez « Expo Go only » dans votre prompt.

Comment améliorer l’usage de la compétence building-native-ui

Commencer par les contraintes, pas par l’esthétique

Le moyen le plus rapide d’améliorer les résultats de building-native-ui, c’est d’indiquer les contraintes fortes avant de demander du polish UI :

• Expo Go uniquement ou custom build autorisé
• version du SDK
• iOS-only ou cross-platform
• router déjà installé ou non
• New Architecture activée ou non

Sans cela, l’agent peut choisir des patterns séduisants mais coûteux à adopter.

Demander des décisions, pas seulement du code

Cette compétence est la plus utile quand vous lui demandez de trancher entre plusieurs options natives. Par exemple :

• “Should this be segmented control or tabs?”
• “Should search live in the header or in-content?”
• “Should I use NativeTabs here?”
• “Can this visual effect stay in Expo Go?”

Les prompts orientés décision donnent de meilleurs résultats qu’un simple « generate a screen », car le dépôt est particulièrement solide comme guide de patterns.

Fournir une arborescence de routes cible

Une grande partie de la qualité de sortie dépend de la clarté de la navigation. Même une arborescence approximative aide :

• /
• /search
• /items/[id]
• /settings/profile

Cela donne à la compétence assez de structure pour appliquer les conventions Expo Router et éviter des placements de fichiers désordonnés.

Nommer précisément les patterns d’interaction attendus

Ne dites pas seulement « make it feel premium ». Décrivez précisément l’interaction :

• header réactif au scroll
• form sheet modale avec footer
• search native dans le header
• caméra avec contrôles de flip et de flash
• état sauvegardé localement
• transition d’image de type zoom

Ces formulations correspondent directement aux fichiers de référence de la compétence et mènent à des choix d’implémentation plus ancrés dans le réel.

Surveiller ces modes d’échec fréquents

Les faiblesses les plus courantes dans les réponses sont :

• fichiers de routes et de composants mélangés dans app/
• suggestion de packs d’icônes custom au lieu des SF Symbols
• usage d’anciennes APIs d’animation là où Reanimated serait plus adapté
• proposition de fonctionnalités non prises en charge sans mention des contraintes de plateforme ou de build
• contrôles surdesignés alors que des contrôles natifs seraient plus simples et meilleurs

Si vous voyez l’un de ces problèmes, demandez à l’agent une révision en s’appuyant sur le fichier de référence concerné.

Demander à l’agent d’annoter les limites de plateforme

Une étape de raffinement particulièrement utile consiste à demander :
“Revise this using building-native-ui and annotate each feature as Expo Go compatible, custom-build required, iOS-only, or New Architecture only.”

Cela transforme une réponse agréable à lire en plan réellement exploitable pour une adoption.

Itérer par couches plutôt que tout réécrire d’un coup

Pour de meilleurs résultats, affinez en plusieurs passes :

1. structure des routes
2. squelettes d’écrans
3. choix des contrôles
4. navigation et headers
5. animation et polish visuel
6. intégration du storage ou des media

Ce workflow par couches correspond à l’organisation de la compétence et permet de repérer plus tôt les mauvaises hypothèses.

Demander une implémentation fichier par fichier

Quand la première réponse reste trop générique, demandez des modifications dans des fichiers précis :

• app/_layout.tsx
• app/index.tsx
• app/search.tsx
• app/items/[id].tsx
• components/ItemCard.tsx

Cela pousse l’agent à utiliser building-native-ui comme guide d’implémentation, plutôt que comme simple brainstorming design.

S’appuyer sur les références pour challenger des réponses faibles

Si l’agent donne des conseils trop génériques, renvoyez-le vers le repo :

• “Rework this using references/route-structure.md conventions.”
• “Switch this animation approach to the patterns in references/animations.md.”
• “Replace the icons with the references/icons.md guidance.”
• “Check whether this should be a form sheet based on references/form-sheet.md.”

C’est la manière la plus concrète d’obtenir un vrai gain d’information avec cette compétence, au lieu d’un résumé superficiel.

Améliorer les résultats de building-native-ui avec un meilleur prompt final

Un bon prompt final pour building-native-ui for Frontend Development ressemble à ceci :

“Use the building-native-ui skill to implement an Expo Router feature for a saved-recipes app. Target iOS and Android, but keep Expo Go compatibility if possible. I need a route structure, native-feeling tabs, a search experience, recipe detail pages, local persistence for favorites, and smooth header animations. Put only routes in app/, use Reanimated for motion, prefer SF Symbols where appropriate, and clearly mark any part that requires iOS-only APIs, New Architecture, or a custom build.”

Ce prompt fonctionne parce qu’il réunit au même endroit l’objectif produit, les limites techniques, la discipline de routing, les attentes UX et les critères de revue.