106.9K+Baixar
Ir para o guia de uso
Transitions.devpor Jakubantalik

Transitions.dev Skill.

Aplique transições CSS específicas de componentes e tokens semânticos de motion.

  • Transições
  • Animação web
Baixar OpenDesignVer guia de uso
Análise da fonte · transitions-devSKILL.md
Tarefa Aplique transições CSS específicas de componentes e tokens semânticos de motion. Entregáveis Uma receita de transição selecionada com as variáveis CSS exigidas. Antes de começar Forneça marcação, estilos e tratamento de estado do componente, além dos tokens de motion existentes. Revise a licença personalizada para seu uso antes de adaptar uma receita; redistribuição e uso em templates têm condições específicas.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Aplique transições CSS específicas de componentes e tokens semânticos de motion

Explore transições CSS para menus, modais, texto e controles, com tokens semânticos, hooks de estado e verificações de interação repetida.

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

A abordagem de trabalho

transitions-dev fornece receitas portáveis de transição CSS com seletores em namespaces e variáveis semânticas de motion. Associa o componente visível a uma receita, como dropdown ancorado no gatilho, modal, texto que muda ou indicador deslizante de abas. A implementação conecta os hooks de estado documentados ao comportamento real da aplicação.

A skill também oferece rotas de revisão e refinamento. A revisão localiza usos potenciais sem editar; o refinamento mapeia valores avulsos para tokens conforme o significado. Uma animação de fechamento é associada ao token de duração de fechamento pelo propósito, não porque o número atual seja parecido.

Entregas esperadas

  • Uma receita de transição selecionada com as variáveis CSS exigidas.
  • Hooks documentados de classe ou atributo conectados ao componente.
  • Uma revisão por arquivo ou proposta de refinamento com tokens semânticos.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Associe o componente

    Inspecione o elemento e a mudança de estado. Diferencie menu ancorado de modal centralizado, ou troca de texto de movimento de página.

  2. 02
    Adicione tokens e hooks de estado

    Use o bloco compartilhado de variáveis uma única vez ou as variáveis da receita escolhida. Preserve limpeza após fechamento, replay e orquestração JavaScript necessária.

  3. 03
    Exercite o comportamento repetido

    Abra, feche e reabra o componente. Confira o caminho de movimento reduzido e se timings baseados em variáveis permanecem sincronizados com a limpeza.

02 Quando usar

Quando usar

Forneça marcação, estilos e tratamento de estado do componente, além dos tokens de motion existentes. Revise a licença personalizada para seu uso antes de adaptar uma receita; redistribuição e uso em templates têm condições específicas.

Bom encaixe

  • Um componente precisa de transição definidaAs receitas conectam comportamento CSS a estados reconhecíveis de UI, não a um pedido abstrato de animação.
  • Valores de timing ficaram inconsistentesO refinamento sugere tokens semânticos conforme a ação servida por cada duração.

Limites a verificar

  • A biblioteca limita redistribuiçãoA licença personalizada permite uso pessoal e em produtos comerciais, mas proíbe republicar a coleção ou parte substancial como biblioteca de transições, motion pack ou kit de animação concorrente. Templates e temas têm termos adicionais; a licença MIT exclusiva das ferramentas do repositório não cobre esta skill.
  • Os hooks ainda precisam de integraçãoUm snippet não fornece automaticamente estado correto da aplicação, gerenciamento de foco ou comportamento do componente ao redor.

Traga estas entradas

  • Código do componenteForneça marcação, estilos e implementação de estado relevantes.
  • Intenção de interaçãoEspecifique o evento de abrir, fechar, trocar ou dar feedback.
  • Sistema de motion existenteInclua tokens atuais, comportamento de temas e qualquer bloco compartilhado de variáveis já instalado.

03 Decisões importantes

Decisões importantes

  1. Ajuste semântico

    Durações e distâncias nomeadas expressam como um componente se move.

  2. Escopo pequeno de componente

    A fonte favorece alterações direcionadas e evita trazer uma biblioteca geral de motion.

  3. Interações repetíveis

    Regras de limpeza e replay tratam falhas que surgem somente na segunda interação.

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 marcação, estilos e implementação de estado relevantes.

Arquivo-fonte original
https://github.com/Jakubantalik/transitions.dev/blob/e3aefb554d8fd2cb3e91e773e82a0f2d5a4f82a0/skills/transitions-dev/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 transitions-dev para melhorar o dropdown de conta no meu app existente. Inspecione gatilho, estado do menu e CSS atual antes de escolher a receita. Faça o menu crescer a partir do gatilho, preserve teclado e foco do projeto e use variáveis semânticas de motion sem duplicar um bloco raiz já presente. Confira interação rápida de abrir-fechar-abrir e confirme a limpeza da classe de fechamento. Preserve movimento reduzido e temas claro/escuro. Retorne mudanças direcionadas e explique os hooks conectados; não redesenhe o conteúdo do menu ou componentes não relacionados.

Inspecione o resultado

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

  • Teste limpeza de fechamento e ativação repetida ou interrompida.
  • Confira que importações de tokens não se duplicam e leituras de timing correspondem ao CSS.
  • Exercite movimento reduzido, foco e os dois temas.

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
Jakubantalik
Repositório
Jakubantalik/transitions.dev
Arquivo da skill
SKILL.md
Licença
LicenseRef-Transitions-dev
Versão revisada
2026-11-02 · e3aefb554d8f
Resumo editorial da fonte
Aplique transições CSS específicas de componentes e tokens semânticos de motion.

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

Exige framework JavaScript de animação?

As receitas usam CSS e, quando necessário, pequenos snippets de orquestração de estado. A fonte não exige framework geral de motion.

O que refine muda?

Primeiro propõe substituir valores avulsos de motion conforme o uso semântico. Valores sem token com significado correspondente ficam intactos.

Por que uma animação pode falhar na segunda abertura?

A fonte destaca classes de fechamento remanescentes e falta de reflow para replay como causas comuns. Uma captura da primeira abertura não revela essas falhas.

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/Jakubantalik/transitions.dev/blob/e3aefb554d8fd2cb3e91e773e82a0f2d5a4f82a0/skills/transitions-dev/SKILL.md