Uniwind skill

O Claude monta e conserta as telas do seu app em React Native com classes do Tailwind, sem cair nas regras que quebram o estilo no celular.

por uni-stack

instalações: 4.500
estrelas no GitHub: 1.737
No skills.sh desde: março de 2026
Licença: MIT

Atualizada no GitHub em 23 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

uni-stack
uniwind
O Claude monta e conserta as telas do seu app em React Native com classes do Tailwind, sem cair nas regras que quebram o estilo no celular.Auditada4.500 instalações, grátis

O que ela faz

Ensina o Claude a usar o Uniwind, que leva o Tailwind CSS v4 pro React Native: os componentes nativos aceitam className e o estilo é compilado no build, sem custo na hora de rodar. Vale pra React Native 0.81 ou mais novo, Expo SDK 54 em diante e Uniwind 1.7.0 ou superior.

Traz 14 regras que evitam os erros mais comuns: não montar classe com variável (bg-${cor}), nada de tailwind.config.js porque tudo vai no global.css, prefixo accent- pra cor de props como placeholder e tintColor, uma fonte só por família e as mesmas variáveis em todos os temas.

Pra cada tarefa abre o guia certo: instalação e Metro, temas e variáveis CSS, variantes por plataforma e tamanho de tela, safe area, gradientes, fontes, React Navigation, kits de UI, diagnóstico de estilo quebrado e o Uniwind Pro. Na dúvida, confere na documentação oficial em vez de chutar.

Nas palavras de quem fez

Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames.

uni-stack, no SKILL.md

Quando usar

Configurar o Uniwind num app Expo novo
Criar tema claro, escuro ou com as cores da marca do cliente
Descobrir por que um estilo não aparece no celular
Estilizar componentes de terceiros como expo-image e expo-blur
Ajustar o layout por plataforma (iOS e Android) e por tamanho de tela

Depois de instalar, é só pedir assim

Usa a skill do uniwind e configura o Tailwind no meu app Expo, com o global.css e o Metro certinhos
Cria um tema escuro e um tema com as cores da minha marca, com um botão pra trocar entre eles
A cor do placeholder do meu campo de texto não muda, descobre o que está errado

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Uniwind no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Uniwind, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

Precisa pagar alguma coisa?

O Uniwind é grátis. A skill também cobre o Uniwind Pro, versão paga com motor em C++, animação por classe e transição de tema: US$ 99 por pessoa ao ano, mais barato por pessoa em equipe maior. Pro básico ele não é necessário.

Serve pra migrar do NativeWind?

Não. A migração do NativeWind fica numa skill separada do mesmo repositório, a migrate-nativewind-to-uniwind. Esta é pra quem já usa ou vai começar com o Uniwind.

Roda no Codex e no Antigravity?

Sim. São regras e guias de consulta em texto, então qualquer agente que lê skills usa. O que precisa existir é o projeto em React Native com o Node instalado.

Levar essa skill

1x uniwindR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/uni-stack/uniwind

Aprenda a usar

Criar site com IA: o passo a passo no Claude Code
Como eu crio site com IA pros clientes sem saber programar: no Claude Code, no Codex ou de graça no Antigravity. O passo a passo, sem cara de template.