yagyaraj234/skills

Prontidão do frontend

Invoque como $frontend-readiness diff, $frontend-readiness pr <URL>, $frontend-readiness release ou $frontend-readiness full.

Use o modo, evidência, veredito e regras de edição em check-readiness. Quando invocado diretamente, selecione um modo lá. Quando invocado por check-readiness, mantenha o alvo selecionado. Avalie apenas superfícies de frontend.

Avalie as verificações que se aplicam ao alvo escolhido. Marque uma exceção dentro do escopo como N/A com um motivo. Uma seção que não se aplica (app não público para Busca e compartilhamento, sem framework para Convenções do framework) é uma linha N/A, não uma por verificação.

Áreas bloqueantes: fluxo ou rota crítica quebrada, UI de autenticação e permissão, renderização insegura de conteúdo do usuário, segredos vazados, falhas de acessibilidade em fluxos críticos, estados de erro ou vazio ausentes em superfícies orientadas a dados, build ou testes com falha. Outras falhas são aconselhamento.

Correção

• Toda rota dentro do escopo renderiza através de navegação direta, atualização, navegação no app, voltar e avançar.
• Todo fluxo crítico completa seu caminho feliz e preserva entrada útil em falha recuperável.
• Formulários validam entrada, previnem envio duplicado, mostram erros acionáveis e expõem erros à tecnologia assistiva.
• Estado do cliente, servidor, URL e persistido permanece consistente entre atualização, cancelamento, respostas obsoletas e ações repetidas.
• Console não tem novos erros ou avisos; requisições de rede com falha são explicadas.
• Limites de autenticação e permissão mostram UI correta, preservam rotas de retorno pretendidas e lidam com sessões expiradas, respostas proibidas e mudanças de papel.

Toda superfície orientada a dados tem uma matriz de estados explícita. Marque um estado como N/A apenas quando ele não pode ocorrer ou não oferece valor voltado ao usuário.

• Vazio: resultado bem-sucedido com zero dados explica o que aconteceu e oferece uma próxima ação útil.
• Carregando: o progresso é claro, conteúdo existente útil permanece estável e ações repetidas permanecem controladas.
• Esqueleto: onde o layout final é previsível e o atraso é perceptível, placeholders correspondem a ele e evitam mudança de layout; caso contrário, registre N/A.
• Parcial: conteúdo disponível permanece utilizável enquanto seções independentes carregam ou falham.
• Erro: a mensagem é acionável, entrada útil é preservada e a tentativa novamente ou recuperação funciona.

Convenções do framework

Pule itens para frameworks que o projeto não usa; nomeie o framework detectado e a versão.

• APIs de framework, roteador e carregamento de dados correspondem à versão instalada e às convenções existentes do projeto; registre a versão e a fonte da verdade.
• Navegação interna usa o componente de link do framework detectado, como Link de next/link ou @tanstack/react-router; <a> nativo lida com links externos, download, e-mail e telefone.
• Parâmetros de rota, parâmetros de busca, redirecionamentos e navegação usam as APIs e hooks do roteador do framework.
• Estilos estáticos e dinâmicos seguem o sistema de estilos existente suportado pelo framework; valores dinâmicos usam propriedades personalizadas CSS, a menos que o posicionamento exigido pela biblioteca precise de estilos inline.

Interface e acessibilidade

• Layout funciona em cada viewport registrado sem overflow não intencional. Texto longo, mídia ausente, dados lentos e grandes coleções permanecem utilizáveis.
• Hierarquia, espaçamento, tipografia, cores e feedback interativo são consistentes; controles cobrem estados de hover, foco, ativo, desabilitado, carregamento e erro.
• Ações destrutivas exigem intenção clara e oferecem recuperação quando prático.
• Marcos semânticos, títulos, controles, rótulos e nomes acessíveis correspondem ao propósito.
• Uso apenas com teclado alcança e opera todo elemento interativo em ordem lógica; o foco permanece visível e se move corretamente entre diálogos, menus, erros e mudanças de rota.
• Texto e UI essencial atendem ao alvo de acessibilidade registrado (WCAG 2.2 AA, a menos que um requisito mais rigoroso se aplique); o significado não depende apenas de cor.
• Imagens têm alternativas apropriadas; mídia decorativa permanece silenciosa. Zoom, redimensionamento de texto, movimento reduzido e anúncios necessários do leitor de tela preservam o fluxo.

Resiliência, privacidade e segurança

• Conteúdo controlado pelo usuário é renderizado com segurança; segredos e decisões privilegiadas permanecem no lado do servidor.
• Links externos, redirecionamentos, uploads, armazenamento e APIs de navegador validam entrada não confiável. Abas externas usam comportamento de abridor seguro quando aplicável.
• Comportamento offline e de tempo limite evita perda de dados.
• UI de erro omite detalhes confidenciais internos, enquanto logs retêm contexto diagnóstico suficiente.
• Produtos de autenticação ou dados pessoais expõem páginas públicas de Termos e Privacidade a partir da navegação autenticada e persistente; o conteúdo corresponde ao comportamento real.
• Cookies, defesas CSRF, cabeçalhos de segurança de resposta, redirecionamentos e política de cache são verificados quando o aplicativo os controla.
• Análise, rastreamento de erros e consentimento respeitam requisitos de privacidade e não expõem dados pessoais ou secretos.
• Flags de funcionalidade têm um valor de ambiente alvo verificado e, para mudanças arriscadas, um caminho documentado de reversão ou desativação.

Desempenho e ativos

• Rotas representativas são medidas a partir de uma build de produção no ambiente registrado usando TTFB, LCP, INP, CLS, primeiro conteúdo útil e tempo da interação primária.
• Toda rota dentro do escopo mostra conteúdo útil ou um fallback acionável e aceita sua interação primária dentro do orçamento registrado; cinco segundos é o padrão apenas quando nenhum orçamento de produto mais rigoroso existe.
• Saída da build de produção, chunks de rota e waterfall de rede não contêm alto custo não explicado.
• Otimizações de desempenho alteradas têm benefício medido e preservam comportamento de teclado, foco, leitor de tela e offline quando aplicável.
• Efeitos liberam listeners, assinaturas, observadores, requisições pendentes, workers, temporizadores, quadros de animação e trabalho debounced ou throttled quando dependências mudam ou componentes desmontam.
• Imagens usam otimização de framework disponível, dimensões responsivas e sizes, formatos modernos, compressão, proporções de aspecto estáveis e prioridade eager/lazy correta. Vídeo e fontes têm entrega, fallback e comportamento de pré-carregamento deliberados.
• Scripts de terceiros, inline e bloqueadores têm propósito e prioridade de carregamento explícitos.

Busca e compartilhamento

Aplica-se apenas a rotas públicas ou compartilháveis; apps apenas autenticados precisam apenas da verificação de não indexação.

• Toda rota define metadados de título e descrição apropriados. Rotas indexáveis públicas definem intenção canônica e de robôs através de APIs do framework; ambientes não produtivos e protegidos não são indexados acidentalmente.
• Rotas compartilháveis resolvem metadados Open Graph e sociais para valores absolutos e rastreáveis. Imagens OG retornam o tipo de conteúdo, dimensões e texto alternativo corretos; tags renderizadas e uma prévia de compartilhamento real são verificadas.
• Para um portão de release, Lighthouse executa contra rotas de produção implantadas em perfis móvel e desktop registrados; resultados e regressões de Performance, Acessibilidade, Melhores Práticas e SEO são registrados.

Engenharia e implantação

• Formatador, lint, typecheck, testes e build de produção passam ou têm uma falha de linha de base explícita.
• Lógica alterada tem a menor verificação útil de regressão automatizada.
• Variáveis de ambiente, flags de funcionalidade, URLs de API, suporte a navegador e contas de teste correspondem ao ambiente alvo.
• Rastreamento de erros, favicons e ícones de instalação funcionam onde o produto os exige.
• Para um portão de release ou mudança que afeta implantação, ativos, rotas, APIs, autenticação, cabeçalhos, redirecionamentos e comportamento de cache implantados são verificados no ambiente alvo.