106.9K+Baixar
Ir para o guia de uso
CSS Animationpor neonwatty

CSS Animation Skill.

Crie demonstrações de funções em HTML/CSS com base na interface real de um aplicativo.

  • CSS
  • Quadros-chave
Baixar OpenDesignVer guia de uso
Análise da fonte · css-animationSKILL.md
Tarefa Crie demonstrações de funções em HTML/CSS com base na interface real de um aplicativo. Entregáveis Um briefing estruturado que registra tokens de design, geometria e timing da cena. Antes de começar O fluxo original pressupõe Claude-in-Chrome e um app acessível. Outro ambiente precisa de um meio equivalente de inspeção ou deve declarar quais evidências estão faltando.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Crie demonstrações de funções em HTML/CSS com base na interface real de um aplicativo

Pesquise um app, escreva um briefing de demonstração e crie apresentações HTML/CSS com layouts separados para desktop e celular e revisão de estados congelados.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

css-animation cria demonstrações, no navegador, de funções de aplicativos reais. Primeiro pesquisa a linguagem visual e o layout do app; depois planeja uma demonstração de antes–ação–depois ou um carrossel de telas. O resultado é uma animação HTML/CSS autônoma acompanhada de um briefing.

A revisão separa a precisão dos estados estáticos do timing. Os layouts anterior e posterior à ação são congelados e inspecionados; depois, o ciclo completo é reproduzido para ajustar o ritmo. Desktop e celular têm composições separadas; a versão móvel simplifica a cena e substitui o cursor por um indicador de toque.

Entregas esperadas

  • Um briefing estruturado que registra tokens de design, geometria e timing da cena.
  • Uma demonstração de função ou um carrossel de telas em HTML autônomo.
  • Arquivos separados para desktop e celular quando ambos são solicitados.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Pesquise a interface real

    Inspecione o app acessível e os estados relevantes. Registre cores, tipografia, espaçamento e geometria real na viewport pretendida.

  2. 02
    Planeje e construa a demonstração

    Escolha uma transformação de função ou um carrossel de várias telas. Escreva o briefing, calcule as posições dos elementos e use CSS com um pequeno controle de ciclo baseado em classes.

  3. 03
    Inspecione os estados estáticos, depois o timing

    Congele estados importantes para verificar layout e rótulos. Quando estiverem corretos, reproduza o ciclo completo e ajuste a fase específica que estiver rápida ou lenta demais.

02 Quando usar

Quando usar

O fluxo original pressupõe Claude-in-Chrome e um app acessível. Outro ambiente precisa de um meio equivalente de inspeção ou deve declarar quais evidências estão faltando.

Bom encaixe

  • Uma função real precisa de uma demonstração de marketingO fluxo extrai a linguagem visual do aplicativo em vez de inventar uma interface genérica.
  • O celular precisa de uma explicação focadaA fonte simplifica explicitamente o layout em vez de reduzir a cena de desktop.

Limites a verificar

  • A pesquisa pressupõe ferramentas de navegadorO fluxo original pressupõe Claude-in-Chrome e um app acessível. Outro ambiente precisa de um meio equivalente de inspeção ou deve declarar quais evidências estão faltando.
  • HTML é o artefato principalO resultado documentado é uma animação web, não um GIF ou MP4 codificado.
  • O briefing é um ponto de revisãoA fonte pede aprovação do briefing antes da geração; as autorizações existentes do usuário e o fluxo local continuam determinando como essa revisão acontece.

Traga estas entradas

  • Acesso ao appForneça a URL da função ou uma prévia local e acesso aos estados necessários.
  • História da funçãoIdentifique a condição inicial, a ação e o resultado visível útil.
  • Viewport e destinoEspecifique desktop, celular ou ambos, além do local em que os arquivos serão usados.

03 Decisões importantes

Decisões importantes

  1. Aparência específica do app

    Cores, tipografia e geometria medidas tornam a demonstração reconhecível.

  2. Revisão reproduzível

    O briefing registra as decisões de layout e timing junto com o HTML.

  3. Problemas de revisão separados

    Estados congelados revelam defeitos de layout; a reprodução expõe problemas de ritmo.

04 Exemplo de briefing

Experimente um briefing específico

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Confira a fonte e a configuração

Forneça a URL da função ou uma prévia local e acesso aos estados necessários.

Arquivo-fonte original
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md

A referência abaixo abre as instruções originais. Confira a configuração do repositório antes de usá-las; não é um comando de instalação.

Comece com um entregável

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use css-animation para demonstrar a função de agrupamento no meu app de planejamento executado localmente. Inspecione a função real antes de elaborar uma animação de antes–ação–depois: itens não agrupados, a ação do usuário e o resultado organizado. Reproduza as cores e a tipografia do app e preserve os rótulos reais. Crie um briefing para desktop e uma composição móvel separada, focada na ação principal. Use um indicador de toque no celular. Revise os estados inicial, de processamento e final congelados antes de ajustar o ciclo completo. Entregue o briefing e os arquivos HTML e declare qualquer comportamento do app que não tenha conseguido inspecionar.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

  • Compare os layouts e rótulos congelados com o aplicativo real.
  • Teste os limites do conteúdo nas composições de desktop e celular de forma independente.
  • Assista ao ciclo inteiro após corrigir os estados para avaliar o ritmo.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLer o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte
neonwatty
Repositório
neonwatty/css-animation-skill
Arquivo da skill
SKILL.md
Licença
MIT
Versão revisada
2026-11-02 · 68580a34101c
Resumo editorial da fonte
Crie demonstrações de funções em HTML/CSS com base na interface real de um aplicativo.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

A entrega é um vídeo?

O artefato principal da fonte é HTML/CSS independente com JavaScript mínimo. Codificar um vídeo está fora desse padrão documentado.

Desktop e celular podem compartilhar um layout redimensionado?

A fonte recomenda arquivos separados e uma simplificação móvel intencional, incluindo menos elementos e indicadores de ação orientados ao toque.

E se não for possível inspecionar o app?

As instruções originais preveem declarar a ausência da ferramenta de navegador e permitem prosseguir a partir da descrição do usuário. Esse resultado não deve alegar fidelidade observada a um app inacessível.

OpenDesign

Mantenha o briefing e o trabalho de design juntos.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md