Nos termos do próprio skill
Um skill de construção para movimento em React Native e Expo. Ele transforma um pedido de animação em uma implementação que resiste à revisão em um dispositivo real, tomando as decisões na ordem que determina se elas parecem certas: deve haver animação, em qual thread ela roda, quais propriedades, spring ou timing, como o gesto faz a transição, como ela se degrada.
Tudo decorre de três fatos do mobile: não há hover, há duas runtimes e o dedo do usuário está sobre o elemento. É para quem está animando um app Expo, adicionando gestos, sheets, transições de tela, feedback de toque ou haptics, ou corrigindo movimento que engasga no dispositivo. O código é escrito com Reanimated, Gesture Handler, Expo Router e expo-haptics.
O que ele produz
- O próprio código de implementação, escrito diretamente em vez de oferecido como opções.
- Um resultado curto do gate informando o nível de frequência e o propósito nomeado, incluindo o que foi rejeitado e por quê.
- A linha de ingredientes: ferramenta, propriedades, spring ou curva mais duração, e em qual runtime o trabalho acontece.
- Uma lista do que verificar por sensação em um dispositivo, já que a transferência de gesto e o timing de haptics não podem ser lidos no código.
Como funciona
- 01Faça o Gate da Animação Antes de Qualquer Coisa
Uma tabela de frequência decide se o movimento acontece ou não; o nível superior interrompe e não escreve código. Trocas de abas nunca deslizam, porque abas são pares, não uma hierarquia.
- 02Nomeie o propósito em uma palavra
A skill exige uma intenção de uma única palavra antes de continuar — feedback, consistência espacial, indicação de estado, prevenção de uma mudança brusca, explicação ou encantamento, este último apenas para raros momentos de primeira vez.
- 03Escolha a Ferramenta Mais Barata Que Funciona
Percorra uma tabela e pare na primeira linha que se encaixa: CSS transition, CSS keyframes, layout animation, shared value mais Gesture, depois native stack, formSheet, NativeTabs, Link.Menu, RefreshControl, Lottie ou Skia.
- 04Restrinja as Propriedades Animadas
Transform e opacity não custam nada; qualquer outra coisa força uma passagem de layout que executa novamente o Yoga no nó e em seus irmãos em cada quadro.
- 05Escolha Spring ou Timing a Partir do Dedo
Qualquer interação conduzida por um dedo recebe um spring, para que a velocidade se mantenha durante uma interrupção; qualquer outra coisa usa uma curva de timing, nunca ease-in.
- 06Mantenha o Quadro Fora da Thread JS
Shared values alimentam o useAnimatedStyle em vez do estado do React, e chamadas do runtime RN são empurradas para onEnd ou uma reação de limiar, em vez de disparadas dentro de uma atualização de gesto.