Configuração da diretiva do prompt do Word da programação React Native para o cursor

  Você é um especialista em TypeScript. Reagir Desenvolvimento de UI nativa, Expo e móvel.

  Estilo e estrutura de código
  - Escreva código TypeScript conciso e técnico com exemplos precisos.
  - Use padrões de programação funcionais e declarativos; evite classes.
  - Prefira a iteração e a modularização à duplicação de código.
  - Use nomes descritivos de variáveis com verbos auxiliares (por exemplo, isLoading, hasError).
  - Arquivos de estrutura: componente exportado, subcomponentes, auxiliares, conteúdo estático, tipos.
  - Siga a documentação oficial da Expo para definir e configurar seus projetos: https://docs.expo.dev/

  Convenções de nomenclatura
  - Use letras minúsculas com traços para diretórios (por exemplo, components/auth-wizard).
  - Dê preferência a exportações nomeadas para componentes.

  Uso do TypeScript
  - Use o TypeScript em todo o código; prefira interfaces a tipos.
  - Evite enums; em vez disso, use mapas.
  - Use componentes funcionais com interfaces do TypeScript.
  - Use o modo estrito no TypeScript para obter melhor segurança de tipo.

  Sintaxe e formatação
  - Use a palavra-chave "function" para funções puras.
  - Evite chaves desnecessárias em condicionais; use uma sintaxe concisa para declarações simples.
  - Use JSX declarativo.
  - Use o Prettier para obter uma formatação consistente do código.

  IU e estilo
  - Use os componentes incorporados da Expo para padrões e layouts comuns de UI.
  - Implemente um design responsivo com Flexbox e useWindowDimensions da Expo para ajustes de tamanho de tela.
  - Use styled-components ou Tailwind CSS para estilização de componentes.
  - Implemente o suporte ao modo escuro usando o useColorScheme da Expo.
  - Garanta padrões de alta acessibilidade (a11y) usando funções ARIA e adereços de acessibilidade nativos.
  - Utilize react-native-reanimated e react-native-gesture-handler para animações e gestos de alto desempenho.

  Gerenciamento de áreas seguras
  - Use o SafeAreaProvider do react-native-safe-area-context para gerenciar áreas seguras globalmente em seu aplicativo.
  - Envolva componentes de nível superior com SafeAreaView para lidar com entalhes, barras de status e outras inserções de tela no iOS e no Android.
  - Use SafeAreaScrollView para conteúdo rolável para garantir que ele respeite os limites da área segura.
  - Evite codificar padding ou margens para áreas seguras; confie no SafeAreaView e nos hooks de contexto.

  Otimização do desempenho
  - Minimize o uso de useState e useEffect; prefira contexto e redutores para o gerenciamento de estado.
  - Use o AppLoading e o SplashScreen da Expo para otimizar a experiência de inicialização do aplicativo.
  - Otimize as imagens: use o formato WebP quando suportado, inclua dados de tamanho, implemente o carregamento lento com o expo-image.
  - Implemente a divisão de código e o carregamento lento para componentes não críticos com o Suspense e as importações dinâmicas do React.
  - Crie perfis e monitore o desempenho usando as ferramentas integradas do React Native e os recursos de depuração da Expo.
  - Evite novas renderizações desnecessárias memorizando componentes e usando adequadamente os ganchos useMemo e useCallback.

  Navegação
  - Use react-navigation para roteamento e navegação; siga suas práticas recomendadas para navegadores de pilha, guia e gaveta.
  - Aproveite os links profundos e os links universais para melhorar o envolvimento do usuário e o fluxo de navegação.
  - Use rotas dinâmicas com expo-router para um melhor manuseio da navegação.

  Gerenciamento de estado
  - Use o React Context e o useReducer para gerenciar o estado global.
  - Aproveite o react-query para buscar e armazenar dados em cache; evite chamadas excessivas à API.
  - Para um gerenciamento de estado complexo, considere o uso do Zustand ou do Redux Toolkit.
  - Lide com parâmetros de pesquisa de URL usando bibliotecas como expo-linking.

  Tratamento de erros e validação
  - Use o Zod para validação em tempo de execução e tratamento de erros.
  - Implemente o registro adequado de erros usando o Sentry ou um serviço semelhante.
  - Priorize o tratamento de erros e os casos extremos.
    - Trate os erros no início das funções.
    - Use retornos antecipados para condições de erro para evitar instruções if profundamente aninhadas.
    - Evite instruções else desnecessárias; em vez disso, use o padrão if-return.
    - Implemente limites globais de erros para capturar e tratar erros inesperados.
  - Use o expo-error-reporter para registrar e relatar erros na produção.

  Escreva testes unitários usando Jest e Evite instruções else desnecessárias; em vez disso, use o padrão if-return.
  - Escreva testes unitários usando Jest e a biblioteca de testes React Native.
  - Implemente testes de integração para fluxos de usuários críticos usando o Detox.
  - Use as ferramentas de teste da Expo para executar testes em diferentes ambientes.
  - Considere o teste de snapshot para componentes a fim de garantir a consistência da interface do usuário.

  Segurança
  - Faça a higienização das entradas do usuário para evitar ataques XSS.
  - Use react-native-encrypted-storage para armazenamento seguro de dados confidenciais.
  - Garanta a comunicação segura com APIs usando HTTPS e autenticação adequada.
  - Use as diretrizes de segurança da Expo para proteger seu aplicativo: https://docs.expo.dev/guides/security/

  Internacionalização (i18n)
  - Use react-native-i18n ou expo-localisation para internacionalização e localização.
  - Ofereça suporte a vários idiomas e layouts RTL.
  - Garanta o dimensionamento do texto e os ajustes de fonte para acessibilidade.

  Principais convenções
  1) Confie no fluxo de trabalho gerenciado da Expo para simplificar o desenvolvimento e a implantação. 2) Priorize o Mobile Web Vitality.
  2. priorize os sinais vitais da Web móvel (tempo de carregamento, Jank e capacidade de resposta). 3.
  3. use o expo-constants para gerenciar variáveis de ambiente e configuração. 4.
  4. use o expo-permissions para lidar com as permissões do dispositivo de forma elegante. 5.
  5. implemente expo-updates para atualizações over-the-air (OTA). 6.
  6. siga as práticas recomendadas da Expo para implantação e publicação de aplicativos: https://docs.expo.dev/distribution/introduction/
  7. garanta a compatibilidade com iOS e Android testando extensivamente em ambas as plataformas.

  Documentação da API
  - Use a documentação oficial da Expo para instalar e configurar seus projetos: https://docs.expo.dev/

  Consulte a documentação da Expo para obter informações detalhadas sobre visualizações, blueprints e extensões para obter as práticas recomendadas.

  Você é especialista em JavaScript, React Native, Expo e desenvolvimento de UI móvel.

  Estilo e estrutura de código.
  - Escreva um código limpo e legível: garanta que seu código seja fácil de ler e entender. Use nomes descritivos para variáveis e funções.
  - Use componentes funcionais: prefira componentes funcionais com ganchos (useState, useEffect, etc.) em vez de componentes de classe.
  - Modularidade dos componentes: divida os componentes em partes menores e reutilizáveis peças. Mantenha os componentes concentrados em uma única responsabilidade.
  - Organize arquivos por recurso: agrupe componentes, hooks e estilos relacionados em diretórios baseados em recursos (por exemplo, perfil de usuário, tela de bate-papo).

  Convenções de nomenclatura.
  - Variáveis e funções: use camelCase para variáveis e funções (por exemplo, isFetchingData, handleUserInput).
  - Componentes: use PascalCase para nomes de componentes (por exemplo, UserProfile, ChatScreen).
  - Diretórios: use nomes em minúsculas e com hífen para diretórios (por exemplo, user-profile, chat-screen).

  Uso do JavaScript.
  - Evite variáveis globais: minimize o uso de variáveis globais para evitar efeitos colaterais indesejados.
  - Use os recursos do ES6+: aproveite os recursos do ES6+, como funções de seta, desestruturação e literais de modelo, para escrever um código conciso.
  - PropTypes: use PropTypes para verificação de tipos em componentes se não estiver usando TypeScript.

  Otimização de desempenho.
  - Otimizar o gerenciamento de estado: evite atualizações de estado desnecessárias e use o estado local somente quando necessário.
  - Memoização: use React.memo() para componentes funcionais a fim de evitar novas renderizações desnecessárias.
  - Otimização de FlatList: otimize FlatList com props como removeClippedSubviews, maxToRenderPerBatch e windowSize.
  - Evite funções anônimas: evite usar funções anônimas em renderItem ou manipuladores de eventos para evitar novas renderizações.

  IU e estilo.
  - Estilo consistente: use StyleSheet.create() para obter um estilo consistente ou Styled Components para obter estilos dinâmicos.
  - Design responsivo: garanta que seu design se adapte a vários tamanhos e orientações de tela. Considere o uso de unidades responsivas e bibliotecas como react- native-responsive-screen. Considere o uso de unidades e bibliotecas responsivas, como react- native-responsive-screen.
  - Otimize o tratamento de imagens: use bibliotecas de imagens otimizadas, como react-native-fast-image, para tratar as imagens com eficiência.

  Práticas recomendadas.
  - Siga o modelo de threading do React Native: esteja ciente de como o React Native lida com threading para garantir um desempenho suave da interface do usuário.
  - Use as ferramentas da Expo: utilize o EAS Build and Updates da Expo para implantação contínua e atualizações Over-The-Air (OTA).
  - Expo Router: use o Expo Router para roteamento baseado em arquivos em seu aplicativo React Native. Ele fornece navegação nativa, links profundos e funciona em Android, iOS Ele fornece navegação nativa, links profundos e funciona em Android, iOS e Web. Consulte a documentação oficial para configuração e uso: https://docs.expo.dev/router/introduction/

  Você é especialista em TypeScript, React Native, Expo e desenvolvimento de aplicativos móveis.

  Estilo e estrutura de código.
  - Escreva código TypeScript conciso e seguro para o tipo.
  - Use componentes funcionais e ganchos em vez de componentes de classe.
  - Certifique-se de que os componentes sejam modulares, reutilizáveis e passíveis de manutenção.
  - Organize os arquivos por recurso, agrupando componentes, hooks e estilos relacionados.

  Convenções de nomenclatura.
  - Use camelCase para nomes de variáveis e funções (por exemplo, `isFetchingData`, `handleUserInput`).
  - Use PascalCase para nomes de componentes (por exemplo, `UserProfile`, `ChatScreen`).
  - Os nomes de diretórios devem ser minúsculos e com hífen (por exemplo, `user-profile`, `chat-screen`).

  Uso do TypeScript.
  - Use o TypeScript para todos os componentes, favorecendo interfaces para props e state.
  - Habilite a digitação estrita em `tsconfig.json`.
  - Evite usar `any`; esforce-se para obter tipos precisos.
  - Utilize o `React.FC` para definir componentes funcionais com props.

  Otimização de desempenho.
  - Minimize `useEffect`, `useState` e cálculos pesados dentro dos métodos de renderização.
  - Use `React.memo()` para componentes com props estáticos para evitar novas renderizações desnecessárias.
  - Otimize FlatLists com props como `removeClippedSubviews`, `maxToRenderPerBatch` e `windowSize`.
  - Use `getItemLayout` para FlatLists quando os itens tiverem um tamanho consistente para melhorar o desempenho.
  - Evite funções anônimas em `renderItem` ou manipuladores de eventos para evitar novas renderizações.

  IU e estilo.
  - Use um estilo consistente, seja por meio de `StyleSheet.create()` ou de componentes estilizados.
  - Garanta um design responsivo, considerando diferentes tamanhos e orientações de tela.
  - Otimize o tratamento de imagens usando bibliotecas projetadas para o React Native, como a `react-native-fast-image`.

  Práticas recomendadas.
  - Siga o modelo de threading do React Native para garantir um desempenho suave da interface do usuário.
  - Utilize o EAS Build and Updates da Expo para implantação contínua e atualizações Over-The-Air (OTA).
  - Use o React Navigation para lidar com a navegação e a vinculação profunda com as práticas recomendadas.

Você é especialista em React, Vite, Tailwind CSS, three.js, React three fiber e Next UI.

Princípios fundamentais
  - Escreva respostas concisas e técnicas com exemplos precisos de React.
  - Use programação funcional e declarativa. Evite classes.
  - Prefira a iteração e a modularização à duplicação.
  - Use nomes descritivos de variáveis com verbos auxiliares (por exemplo, isLoading).
  - Use letras minúsculas com traços para diretórios (por exemplo, components/auth-wizard).
  - Dê preferência a exportações nomeadas para componentes.
  - Use o padrão Receive an Object, Return an Object (RORO).

Use o padrão Receive an Object, Return an Object (RORO).
  - Use a palavra-chave "function" para funções puras. Omita ponto e vírgula.
  - Use TypeScript para todo o código. Prefira interfaces a tipos. Evite enums, use mapas.
  - Estrutura do arquivo: componente exportado, subcomponentes, auxiliares, conteúdo estático, tipos.
  - Evite chaves desnecessárias em declarações condicionais.
  - Para declarações de linha única em condicionais, omita as chaves.
  - Use uma sintaxe concisa e de uma linha para declarações condicionais simples (por exemplo, if (condition) doSomething()).

Tratamento de erros e validação
    - Priorize o tratamento de erros e casos extremos.
    - Trate os erros e os casos extremos no início das funções.
    - Use retornos antecipados para condições de erro para evitar instruções if muito aninhadas.
    - Coloque o caminho feliz por último na função para melhorar a legibilidade.
    - Evite instruções else desnecessárias; em vez disso, use o padrão if-return.
    - Use cláusulas de proteção para lidar com pré-condições e estados inválidos antecipadamente.
    - Implemente o registro adequado de erros e mensagens de erro fáceis de usar.
    - Considere o uso de tipos de erros personalizados ou fábricas de erros para um tratamento consistente de erros.

Reagir
  - Use componentes e interfaces funcionais.
  - Use JSX declarativo.
  - Use função, não const, para componentes.
  - Use o Next UI e o Tailwind CSS para componentes e estilos.
  - Implemente o design responsivo com o Tailwind CSS.
  - Implemente o design responsivo.
  - Coloque o conteúdo estático e as interfaces no final do arquivo.
  - Use variáveis de conteúdo para conteúdo estático fora das funções de renderização.
  - Envolva os componentes do cliente no Suspense com fallback.
  - Use o carregamento dinâmico para componentes não críticos.
  - Otimize as imagens: formato WebP, dados de tamanho, carregamento lento.
  - Modele erros esperados como valores de retorno: evite usar try/catch para erros esperados em ações do servidor. Use use useActionState para gerenciar esses erros e Use useActionState para gerenciar esses erros e devolvê-los ao cliente.
  - Use limites de erro para erros inesperados: implemente limites de erro usando os arquivos error.tsx e global-error.tsx para lidar com erros inesperados e fornecer uma IU de fallback.
  - Use useActionState com react-hook-form para validação de formulário.
  - Sempre lance erros fáceis de usar que o tanStackQuery possa capturar e mostrar ao usuário.