react-native-design

Visão Geral

O que é react-native-design?

react-native-design é um conjunto prático de habilidades para desenvolvedores que desejam criar aplicativos móveis visualmente refinados e de alto desempenho com React Native. Ele abrange padrões essenciais para estilização, navegação e animação, utilizando ferramentas como StyleSheet, React Navigation e Reanimated 3. Esta skill é ideal para designers de frontend e UI, engenheiros React Native e qualquer pessoa que queira entregar experiências nativas de alta qualidade tanto no iOS quanto no Android.

Para quem é esta Skill?

• Desenvolvedores React Native que buscam aprimorar o polimento da UI/UX
• Equipes que constroem apps móveis multiplataforma
• Engenheiros implementando fluxos de navegação complexos ou animações personalizadas
• Quem precisa de layouts responsivos e padrões de design específicos para cada plataforma

Problemas que Resolve

• Estilização consistente e fácil de manter usando StyleSheet e styled-components
• Navegação escalável e com tipagem segura usando React Navigation 6+
• Animações suaves e performáticas com Reanimated 3
• Layouts responsivos e interações baseadas em gestos
• Ajustes específicos de UI para iOS e Android

Como Usar

Passos para Instalação

1. Adicione a skill ao seu agente ou projeto:

   npx skills add https://github.com/wshobson/agents --skill react-native-design
   

2. Comece revisando o SKILL.md para uma visão geral e melhores práticas.
3. Explore a pasta references/ para guias detalhados:
   • references/styling-patterns.md para técnicas avançadas de estilização
   • references/navigation-patterns.md para configuração e padrões de navegação
   • references/reanimated-patterns.md para receitas de animação

Arquivos e Pastas Principais

• SKILL.md: Visão geral da skill e cenários de uso
• references/: Contém guias de navegação, animação e estilização
• references/navigation-patterns.md: Configuração passo a passo da navegação com tipagem segura
• references/reanimated-patterns.md: Padrões práticos de animação com Reanimated 3
• references/styling-patterns.md: StyleSheet, theming e padrões de estilização de componentes

Adaptando ao Seu Projeto

• Use os padrões fornecidos como referência — adapte-os ao seu código, sistema de design e necessidades da plataforma
• Integre os padrões de navegação e animação de forma incremental para melhores resultados
• Aproveite a navegação com tipagem segura e theming para apps fáceis de manter e escalar

Perguntas Frequentes

Quando devo usar o react-native-design?

Use o react-native-design ao criar novos apps React Native, refatorar a UI para melhor manutenção ou adicionar recursos avançados de navegação e animação.

O que o react-native-design cobre?

Ele cobre estilização com StyleSheet e styled-components, navegação com React Navigation 6+ e animações com Reanimated 3. Também inclui padrões para layouts responsivos, theming e manipulação de gestos.

Esta skill é adequada para iniciantes?

Sim. Os guias começam com fundamentos e avançam para tópicos mais complexos, sendo útil tanto para iniciantes quanto para desenvolvedores experientes.

Onde encontro exemplos práticos?

Confira a pasta references/ para exemplos de código e padrões de implementação. Comece por references/styling-patterns.md para estilização, references/navigation-patterns.md para navegação e references/reanimated-patterns.md para animação.

Como obter suporte ou ver mais exemplos?

Abra a aba Files no diretório da skill para navegar por todos os guias e scripts auxiliares disponíveis. Adapte os padrões ao seu próprio projeto para melhores resultados.