login-flow
Cria as telas de login e autenticação para aplicativos móveis. Garante um fluxo de entrada seguro e fácil para os usuários.
O que ela faz
Esta ferramenta cria telas de login para aplicativos de celular. Ela pode gerar opções como login por SMS, senha ou contas sociais (Google, Facebook, etc.).
Quando usar
- ✓Quando você precisa de uma tela de entrada para um novo aplicativo móvel.
- ✓Se o seu app precisa verificar o número de telefone do usuário via SMS.
- ✓Para adicionar opções de login rápido com contas existentes (Google, Facebook).
Exemplo do que pedir para a IA
“Crie uma tela de login para meu app que aceite login por telefone e SMS, com botão para login com Google.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A ferramenta primeiro verifica os requisitos básicos. Depois, ela pergunta qual método de login você prefere (SMS, senha ou social). Por fim, ela constrói o código HTML para essa tela, incluindo os estados de erro e carregamento.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add nexu-io/open-design --skill login-flowOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/login-flow/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Fluxo de Login Skill
Uma skill para gerar telas de login e autenticação mobile-first. Use esta skill quando o usuário desejar uma experiência de login para um aplicativo mobile, incluindo verificação por telefone + SMS, login baseado em senha e opções de SSO social.
Fluxo de Trabalho
- Ler arquivos de referência primeiro (veja abaixo)
- Clarificar método de autenticação: telefone/SMS, senha ou SSO social
- Verificação de checklist — verificar itens P0 antes de emitir
<artifact> - Construir o protótipo HTML com estados adequados (padrão, carregando, erro)
- Encapsular em tag
<artifact>referenciando o arquivo de saída
Arquivos Auxiliares
references/checklist.md— Critérios de aceitação P0/P1
Saída
Um único arquivo HTML autônomo implementando a tela de login com:
- Rótulos acima dos campos de entrada (nunca apenas placeholder)
- Campo de senha com alternância de mostrar/ocultar
- Botões de SSO social com ícones SVG
- Estados de erro abaixo dos campos
- Spinner de carregamento no CTA principal
- Alvos de toque com no mínimo 44px
Restrições Mobile-First
- Viewport: 375px de largura (padrão do iPhone)
- Sem rolagem horizontal
- Insets de área segura para dispositivos com notch
- Teclados de entrada:
telpara telefone,passwordpara campos de senha
Perguntas frequentes
O que são 'estados' na tela de login?
São as diferentes aparências que a tela pode ter, como o estado normal, o estado de carregamento enquanto a senha é verificada, ou o estado de erro se algo der errado.
O que significa 'mobile-first'?
Significa que a tela é pensada primeiro para funcionar bem em celulares, com um tamanho de tela padrão de 375 pixels de largura, garantindo que nada fique cortado ou exija rolagem horizontal.
O que são 'touch targets'?
São as áreas clicáveis na tela (botões, campos de texto). 'Touch targets' de 44px garantem que seja fácil tocar nelas com o dedo em telas de celular.
Detalhes
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #738
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC