angular-ui-patterns
Crie UIs Robustas em Angular com Padrões Comprovados
Criar interfaces Angular confiáveis requer tratamento consistente de estados de carregamento, erros e estados vazios. Esta habilidade fornece padrões testados em batalha que garantem que os usuários sempre entendam o que está acontecendo em seu aplicativo.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“angular-ui-patterns”。 Um componente que busca e exibe posts de usuários
预期结果:
- Componente mostra skeleton loader no carregamento inicial (ainda não há dados)
- Quando dados chegam vazios, exibe estado vazio com botão 'Criar Post'
- Quando API retorna erro, mostra banner de erro com opção de retry mantendo dados em cache visíveis
- Ao carregar com sucesso, renderiza a lista completa de posts com atributos de acessibilidade apropriados
正在使用“angular-ui-patterns”。 Um botão de salvar em um formulário de configurações
预期结果:
- Botão é habilitado apenas quando formulário é válido
- Ao clicar, botão se torna desabilitado e mostra spinner com texto 'Salvando...'
- No sucesso, mostra checkmark verde com 'Salvo!' e reverte após 2 segundos
- No erro, mostra X vermelho com mensagem de erro e re-habilita botão para retry
安全审计
安全Documentation-only skill containing Angular UI pattern guidance. All 63 static analysis findings are false positives: URLs are documentation references (not network calls), backticks are markdown code fencing (not shell execution), and crypto detections are text pattern misidentifications. No executable code, network requests, or command execution present.
质量评分
你能构建什么
Desenvolvedor Frontend Construindo Dashboards Orientados a Dados
Implementar estados consistentes de carregamento, erro e vazio em widgets de dashboard que buscam dados de múltiplas APIs com latências variadas.
Líder de Equipe Estabelecendo Padrões de UI
Definir padrões em toda a organização para gerenciamento de estado, tratamento de erros e feedback ao usuário para garantir experiência consistente entre equipes.
Assistente de IA Gerando Componentes Angular
Guiar Claude ou Codex para gerar componentes Angular que seguem padrões comprovados para tratamento de estado, evitando armadilhas comuns como erros silenciosos ou estados de carregamento ausentes.
试试这些提示
Crie um componente Angular que exibe uma lista de itens. Mostre um skeleton loader quando carregando sem dados, um estado vazio quando a lista estiver vazia, um estado de erro com retry quando o carregamento falhar, e os dados reais quando disponíveis. Use Angular Signals e controle de fluxo moderno.
Construa um componente de formulário Angular com validação de formulários reativos. Mostre mensagens de erro inline para campos inválidos, desabilite o botão de submissão durante o envio do formulário, exiba um indicador de carregamento no botão e mostre notificações toast de sucesso ou erro após a operação assíncrona completar.
Implemente uma página Angular que carrega conteúdo crítico imediatamente e adia seções não-críticas como comentários, itens relacionados ou analytics usando @defer. Inclua estados de placeholder, carregamento e erro para cada bloco deferido com tempos mínimos de carregamento apropriados.
Crie um padrão de diálogo de confirmação de exclusão que mostra um modal pedindo confirmação, aplica atualizações otimistas de UI quando confirmado, reverte mudanças se a requisição do servidor falhar, e exibe feedback apropriado ao usuário durante todo o processo.
最佳实践
- Sempre mostre erros aos usuários - nunca capture exceções silenciosamente sem feedback
- Exiba indicadores de carregamento apenas quando não há dados existentes para prevenir flash de conteúdo
- Desabilite botões de ação durante operações assíncronas para prevenir submissões duplicadas
避免
- Mostrar spinner enquanto dados em cache existem - causa flash visual desnecessário durante refetch
- Engolir erros em blocos catch sem informar o usuário sobre falhas
- Permitir múltiplos cliques rápidos em botões de submissão não desabilitando durante processamento