Guia de leitura localizado
frontend-design-reviewFinalidade, utilização e fonte
Revisar e criar interfaces front-end distintas e de nível de produção, com alta qualidade de design e conformidade com o sistema de design. A avaliação é feita com base em três pilares: compreensão e ação sem atritos, qualidade na execução e construção confiável. IDEAL PARA: Revisões de relações públicas, revisões de design, auditorias de acessibilidade, verificações de conformidade com o sistema de design, design front-end criativo, revisão de código de interface do usuário, revisões de componentes, verificações de design responsivo, testes de temas e criação de interfaces memoráveis. NÃO IDEAL PARA: Revisões de API de back-end, revisões de esquema de banco de dados, trabalho de infraestrutura ou DevOps, lógica de negócios pura sem interface do usuário ou código que não seja de front-end.
Fonte recuperada:
- Repositório de origem
- microsoft/skills
- SKILL.md
.github/skills/frontend-design-review/SKILL.md- Estrelas do repositório
- 3,157
- Atualização do repositório
- 2026-10-31
- Classificação de Habilidades
- Desenvolvimento
- Última coleta
Licença: MIT
Os trechos do fluxo de trabalho são auxiliares de leitura e não instruções executáveis do Codez. Nenhuma Skill de terceiros foi executada para gerar esta página.
Os trechos abaixo, que descrevem o propósito e o fluxo de trabalho, são material original, organizado e traduzido para facilitar a leitura. Eles são distintos da análise editorial da Codez, que possui uma etiqueta separada.
O que esta habilidade faz
Revisar e criar interfaces front-end distintas e de nível de produção, com alta qualidade de design e conformidade com o sistema de design. A avaliação é feita com base em três pilares: compreensão e ação sem atritos, qualidade na execução e construção confiável. IDEAL PARA: Revisões de relações públicas, revisões de design, auditorias de acessibilidade, verificações de conformidade com o sistema de design, design front-end criativo, revisão de código de interface do usuário, revisões de componentes, verificações de design responsivo, testes de temas e criação de interfaces memoráveis. NÃO IDEAL PARA: Revisões de API de back-end, revisões de esquema de banco de dados, trabalho de infraestrutura ou DevOps, lógica de negócios pura sem interface do usuário ou código que não seja de front-end.
Como funciona o fluxo de trabalho upstream
Fluxo de trabalho do sistema de design
Analise o componente no seu Storybook/biblioteca de componentes para verificar a API e o uso. Use o Modo de Desenvolvimento do Figma para obter as especificações exatas (espaçamento, tokens, propriedades). Implemente usando os componentes do sistema de design e os tokens de design. Compare a implementação com o design do Figma.
Passagem a montante · L54 ↗Processo de revisão
Identificar a tarefa do usuário. Verificar se o sistema de design corresponde aos padrões. Avaliar a direção estética. Identificar o escopo (componente, recurso ou fluxo).
Passagem a montante · L72 ↗Princípios Fundamentais
Conclusão da tarefa: Cliques mínimos. Cada tela responde às perguntas "O que posso fazer?" e "O que acontece a seguir?". Hierarquia de ações:1-2Ações primárias por visualização. Divulgação progressiva para ações secundárias. Integração: Explicação dos recursos na introdução. Configurações padrão inteligentes em vez de configurações adicionais. Navegação: Limparentry/exitpontos.Back/cancelSempre disponível. Migalhas de pão para fluxos profundos.
Passagem a montante · L82 ↗Requisitos e configuração
Nenhuma passagem de requisitos resumida foi selecionada deste arquivo. Isso não significa que a Skill não tenha dependências. Verifique as instruções de configuração do repositório e os arquivos referenciados.
Limites e verificações de qualidade
2Qualidade é artesanato.
Conformidade com o sistema de design: corresponde às especificações do Figma, utiliza tokens de design. Direção estética: tipografia distinta, cores coesas, movimento intencional.
Passagem a montante · L99 ↗Comece com um teste seguro.
- Verifique o host compatível e as instruções de instalação do repositório. Mantenha o diretório Skill e seus scripts, recursos e documentação referenciados juntos;SKILL.mdsozinho pode omitir dependências.
- Forneça ao agente suas entradas reais, a saída desejada e os critérios de aceitação. A sintaxe de invocação e as ferramentas disponíveis dependem do host; este site não pressupõe um comando de instalação universal.
- Teste o fluxo de trabalho original em um projeto descartável ou em uma cópia. Analise as operações que alteram arquivos, serviços remotos ou recursos faturáveis antes de permiti-las.
- Valide o resultado comparando-o com as verificações de qualidade da fonte e com seus próprios requisitos. Um gatilho bem-sucedido ou uma alta contagem de estrelas no repositório não garantem um resultado correto.
Leia mais na fonte.
- Revisão do design de front-end
- Modo1Revisão de projeto
- Modo2Design criativo de front-end
- Design criativo de front-end
- Diretrizes de Estética
- Fluxo de trabalho do sistema de design
- Processo de revisão
- Princípios Fundamentais
- 1. Visão clara e objetiva para ação
- 2Qualidade é artesanato.
- 3Edifício confiável
- Formato de saída da revisão
- Modificadores de tipo de revisão
- Lista de verificação rápida
- Exemplos de padrões
- Agradecimentos
Habilidades relacionadas
Tradução e escopo
Este guia de leitura seleciona trechos do texto fixado a montante.SKILL.mdA tradução foi feita com auxílio de ferramentas. Este não é um manual completo nem garante compatibilidade comprovada. Leia o original e os arquivos referenciados antes de usar.
Esta introdução refere-se à versão fixada abaixo; a atividade atual do repositório e o tempo de coleta são mostrados separadamente.
- Fonte fixada
- Leia o original ↗
- Fonte recuperada
- Commit de origem
00d66a64919edca5bca2c673373444e36a4b5461- Fonte SHA-256
639b68cdc6f9b4cdd66a111851555afee2eb82d4de37bf9cbad3be845bb00c2d