building-native-ui

Visão geral da skill building-native-ui

Para que serve a skill building-native-ui

A skill building-native-ui é um guia prático para criar interfaces com Expo Router bem-acabadas, com cara de app nativo — e não apenas “cross-platform”. Ela é mais útil quando você quer que um agente de IA tome decisões concretas de UI para apps em React Native e Expo: estrutura de rotas, controles no estilo iOS, headers, tabs, animações, fluxos de mídia, efeitos visuais e padrões atentos à plataforma.

Quem deve instalar

A building-native-ui skill é mais indicada para desenvolvedores frontend que trabalham com Expo ou React Native e precisam de mais do que código genérico de componentes. Ela se encaixa especialmente bem em times que estão criando produtos mobile-first, nos quais navegação, controles nativos, movimento e convenções de plataforma fazem diferença. Se você já usa Expo Router — ou pretende usar — essa skill oferece uma direção muito melhor do que um prompt amplo do tipo “crie uma UI mobile”.

Qual problema real ela resolve

Normalmente, as pessoas instalam building-native-ui quando querem que um agente transforme uma ideia ainda crua de produto em escolhas de UI prontas para implementação, sem precisar adivinhar o caminho certo dentro do ecossistema Expo. O valor real não está só em código de exemplo; está em evitar erros de direção com tabs, sheets, busca, armazenamento, mídia, ícones, animações e organização de rotas.

O que diferencia essa skill de um prompt genérico de UI

O principal diferencial é que a skill embute preferências e restrições específicas do Expo. Ela orienta o agente para:

• convenções de arquivos e layouts do Expo Router
• controles com aparência nativa no iOS e uso de SF Symbols
• motion com base em Reanimated em vez de abordagens antigas de animação
• limites práticos de plataforma, como quando o Expo Go funciona e quando builds customizados são necessários
• referências objetivas para tabs, busca, mídia, gradientes, zoom transitions e efeitos visuais

O que importa saber antes de adotar

Antes de usar building-native-ui for Frontend Development, vale saber que ela tem opiniões claras. A skill favorece padrões nativos em vez de kits de UI cross-platform genéricos, prefere APIs compatíveis com Expo e inclui recursos com limites de versão ou plataforma, como capacidades exclusivas de iOS, exigências da New Architecture e requisitos de SDK. Isso é ótimo quando você quer uma experiência nativa de alta qualidade, mas faz dela uma opção menos adequada para design systems fortemente compartilhados com web ou para scaffolding de apps agnóstico a framework.

Como usar a skill building-native-ui

Instale a skill building-native-ui

Se o seu agente oferece suporte a Skills, adicione a skill pelo repositório de skills da Expo:

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

Se o seu ambiente já tiver o repositório de skills da Expo disponível, carregue a skill building-native-ui a partir de plugins/expo/skills/building-native-ui.

Leia estes arquivos primeiro

Para adotar mais rápido, não comece folheando tudo. Leia nesta ordem:

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

Depois, só puxe referências mais específicas se a sua feature realmente precisar delas:

• 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

Esse caminho reflete como decisões reais de UI normalmente acontecem: primeiro a estrutura do app, depois a navegação, e só então o comportamento das telas e o acabamento visual.

Entenda o contexto de instalação antes de escrever o prompt

Uma boa decisão de building-native-ui install depende das restrições do seu runtime. A skill recomenda explicitamente testar primeiro com Expo Go antes de partir para builds customizados. Isso importa porque algumas das capacidades referenciadas não funcionam em todo lugar:

• CSS gradients exigem React Native New Architecture e não estão disponíveis no Expo Go
• Apple Zoom transitions funcionam apenas no iOS 18+
• alguns padrões de toolbar e search são exclusivos de iOS
• os exemplos de form sheet exigem configuração de stack no Expo Router, e alguns detalhes dependem de versões mais novas do Expo SDK

Se o seu app precisa rodar inteiramente no Expo Go, diga isso no prompt. Caso contrário, o agente pode escolher recursos que forçam um development build.

Passe os inputs certos para a skill

A qualidade de uso de building-native-ui usage depende bastante do contexto que você fornece. Inclua:

• sua versão do Expo SDK
• se Expo Go é obrigatório
• plataformas-alvo: iOS, Android, web
• se você já usa Expo Router
• a tela ou o fluxo que deseja construir
• objetivos de design, como “cara de ajustes nativos do iOS” ou “câmera estilo Instagram”
• qualquer requisito rígido de storage, media, animations, search ou tabs

Input fraco:
“Build a settings screen.”

Input forte:
“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/.”

A versão mais forte dá informação suficiente para a skill escolher os controles certos, evitar APIs não suportadas e respeitar as convenções de rota.

Transforme uma ideia vaga em um prompt completo

Um template confiável de prompt para o building-native-ui guide é:

• contexto do produto
• plataformas-alvo
• restrições de runtime
• lista de telas ou árvore de rotas
• detalhes de interação
• objetivos de estilo visual
• formato de saída desejado

Exemplo:

“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.”

Esse prompt funciona porque pede que a skill tome decisões, e não apenas gere JSX.

Siga o fluxo de trabalho preferido da skill

Na prática, o melhor fluxo de building-native-ui usage é:

1. pedir primeiro a estrutura de rotas e navegação;
2. depois pedir a escolha de controles nativos por tela;
3. adicionar motion e headers só depois de acertar a estrutura;
4. incluir persistence, media ou search apenas quando esses fluxos já estiverem claros;
5. por fim, pedir ao agente que sinalize qualquer exigência de custom build ou recurso exclusivo de plataforma.

Isso evita retrabalho comum, principalmente quando uma ideia visual chamativa entra em conflito com Expo Go, convenções de rota ou suporte de plataforma.

Use exatamente as convenções de rota

Uma das partes de maior valor desta skill é a disciplina com Expo Router. Ao escrever o prompt, peça que o agente siga as regras de rota de references/route-structure.md:

• mantenha os arquivos de rota em app/
• coloque o código que não é rota fora de app/
• use _layout.tsx para stacks
• use [id].tsx e [...slug].tsx corretamente
• garanta que / sempre resolva para uma rota

Isso é mais importante do que parece. Prompts genéricos costumam misturar arquivos de rota e componentes dentro de app/, o que gera problemas de manutenção no longo prazo.

Peça controles nativos em vez de widgets customizados

Se o objetivo é ter aparência nativa, diga explicitamente que a skill deve escolher controles embutidos ou nativos da plataforma sempre que possível. As referências sugerem:

• Switch para configurações binárias
• segmented control para alternâncias curtas de modo
• picker para listas maiores de opções
• SF Symbols via expo-symbols em vez de pacotes de ícones no estilo FontAwesome

Essa orientação é útil porque muitos prompts genéricos acabam optando por controles customizados demais, que parecem menos nativos e aumentam a dívida de design.

Prefira Reanimated quando movimento for importante

Aqui a skill é bem opinativa: use Reanimated v4 em vez da API Animated embutida no React Native quando a animação for relevante de verdade. Se a sua tela precisa de animações de entrada, saída, layout ou reações ao scroll, diga isso explicitamente. Isso ajuda o agente a escolher padrões já cobertos nas referências e evita código de animação mais fraco ou ultrapassado.

Associe cada ideia de feature ao arquivo de referência certo

Um mapa rápido de leitura do repositório ajuda quando a primeira resposta sai ampla demais:

• transições animadas ou refinamento com gestos → references/animations.md
• sliders, switches, segmented controls → references/controls.md
• experiências modais em formato de card → references/form-sheet.md
• gradientes e fundos em camadas → references/gradients.md
• sistemas de ícones → references/icons.md
• câmera, vídeo, áudio, salvamento de arquivos → references/media.md
• organização da pasta do app e params → references/route-structure.md
• busca e filtros no header → references/search.md
• persistência local → references/storage.md
• native tabs e decisões de migração → references/tabs.md
• stack headers, menus e ações de toolbar → references/toolbar-and-headers.md
• efeitos de blur e glass → references/visual-effects.md

Exemplos práticos de prompt que melhoram a saída

Melhor do que:
“Make a tabbed app UI.”

Use:
“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.”

Melhor do que:
“Add icons and animations.”

Use:
“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.”

Esses prompts melhoram o resultado porque obrigam o agente a aplicar as regras reais de decisão da skill, em vez de produzir código genérico.

FAQ da skill building-native-ui

A building-native-ui serve só para apps com cara de iOS?

Não, mas ela pende bastante para uma UI mobile native-first e traz várias recomendações orientadas a iOS, como SF Symbols, Apple Zoom transitions, padrões de toolbar e certos comportamentos de sheet. Ainda assim, ela continua útil no Android, porque as orientações sobre rotas, animação, mídia, storage e Expo Router seguem valendo.

A skill building-native-ui é amigável para iniciantes?

Sim, desde que você já tenha noções básicas de React Native ou Expo. A skill é mais voltada à implementação do que à explicação conceitual, então iniciantes costumam tirar mais proveito quando pedem uma tela ou fluxo por vez e já informam versão e plataformas logo de cara.

O que a building-native-ui faz melhor do que um prompt comum?

A principal vantagem é gerar respostas conscientes das restrições reais. Um prompt comum pode inventar a estrutura errada de navegação, escolher sistemas de ícones pouco nativos, ignorar as convenções do Expo Router ou sugerir features que exigem custom build sem avisar. A building-native-ui restringe essas escolhas a padrões ancorados nas referências da Expo.

Quando eu não devo usar building-native-ui?

Evite usar se seu objetivo principal for:

• um app React agnóstico a design system
• uma UI web-first
• uma biblioteca de componentes totalmente customizada e fortemente orientada à marca, com pouco interesse em convenções nativas
• orientação de arquitetura mobile neutra em relação a framework

Nesses casos, o viés da skill para Expo e padrões nativos pode ser restritivo demais.

A building-native-ui exige Expo Router?

Na prática, sim, se você quer o melhor resultado. Boa parte da skill está organizada em torno de conceitos do Expo Router, como _layout.tsx, pastas de rota, native tabs, form sheets e headers. Você até pode aproveitar dicas de controles ou animações fora do Expo Router, mas o valor mais forte aparece quando o app segue essa stack.

Preciso de um custom dev build para usar bem a building-native-ui?

Nem sempre. A skill recomenda explicitamente tentar primeiro com Expo Go. Mas alguns recursos citados por ela podem exigir mais:

• New Architecture para CSS gradients
• versões mais novas do iOS para transições específicas da Apple
• packages ou APIs que não estão disponíveis no Expo Go

Se simplicidade de build for importante, escreva “Expo Go only” no prompt.

Como melhorar a skill building-native-ui

Comece pelas restrições, não pela estética

A forma mais rápida de melhorar os resultados com building-native-ui é especificar restrições objetivas antes de pedir acabamento visual:

• somente Expo Go ou custom build permitido
• versão do SDK
• iOS-only ou cross-platform
• router já instalado ou não
• se a New Architecture está habilitada

Sem isso, o agente pode escolher padrões visualmente atraentes, mas caros de adotar.

Peça decisões, não apenas código

Essa skill é mais útil quando você pede que ela escolha entre opções nativas. Por exemplo:

• “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?”

Prompts orientados a decisão geram saídas melhores do que “gere uma tela”, porque o repositório é mais forte como guia de padrões do que como simples gerador de código.

Forneça uma árvore de rotas alvo

Grande parte da qualidade da saída depende da clareza da navegação. Mesmo uma árvore de rotas simples já ajuda:

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

Isso dá estrutura suficiente para a skill aplicar as convenções do Expo Router e evitar organização confusa de arquivos.

Nomeie exatamente os padrões de interação que você quer

Não diga apenas “quero que pareça premium”. Especifique a interação:

• header reativo ao scroll
• modal form sheet com footer
• busca nativa no header
• câmera com controles de flip e flash
• estado salvo localmente
• transição de imagem estilo zoom

Essas expressões se alinham aos arquivos de referência da skill e levam a escolhas de implementação mais concretas.

Fique atento a estes modos de falha comuns

As respostas fracas mais comuns são:

• arquivos de rota e componentes misturados dentro de app/
• sugestão de pacotes de ícones customizados em vez de SF Symbols
• uso de APIs antigas de animação quando Reanimated seria melhor
• proposta de recursos não suportados sem indicar requisitos de plataforma ou build
• controles excessivamente rebuscados quando controles nativos seriam mais simples e melhores

Se você notar um desses problemas, peça ao agente para revisar com base no arquivo de referência correspondente.

Peça ao agente para anotar os limites de plataforma

Um passo de refinamento de alto valor é:

“Revise this using building-native-ui and annotate each feature as Expo Go compatible, custom-build required, iOS-only, or New Architecture only.”

Isso transforma uma resposta bonita em um plano realmente pronto para adoção.

Itere por camadas, não reescrevendo tudo

Para melhores resultados, refine em etapas:

1. estrutura de rotas
2. esqueletos de tela
3. seleção de controles
4. navegação e headers
5. animação e acabamento visual
6. integração de storage ou media

Esse fluxo em camadas combina com a forma como a skill está organizada e facilita identificar suposições ruins logo no começo.

Peça implementação específica por arquivo

Quando a primeira resposta vier genérica demais, peça alterações em arquivos concretos:

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

Isso força o agente a usar building-native-ui como guia de implementação, e não só como brainstorming de design.

Use as referências para contestar respostas fracas

Se o agente der conselhos genéricos, aponte-o de volta para o repositório:

• “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.”

Essa é a forma mais prática de extrair ganho real de informação da skill, em vez de ficar preso a um resumo superficial.

Melhore os resultados de building-native-ui com um prompt final melhor

Um prompt final forte para building-native-ui for Frontend Development fica assim:

“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.”

Esse prompt funciona porque reúne em um só lugar o objetivo do produto, os limites técnicos, a disciplina de rotas, as expectativas de UX e os critérios de revisão.