interaction-design

Visão geral da skill interaction-design

O que a skill interaction-design faz

A interaction-design skill ajuda um agente a projetar e implementar motion de interface, microinterações, transições e estados de feedback que tornam as interfaces mais claras e responsivas. Ela funciona melhor quando o objetivo não é apenas “fazer animar”, mas “fazer a interface comunicar estado, intenção e mudança por meio do movimento”.

Quem deve instalar esta skill

A interaction-design skill é uma boa escolha para UI designers, engenheiros frontend e times de produto que trabalham em superfícies de produto mais refinadas: botões, estados de loading, modais, toasts, revelações no scroll, drag-and-drop, estados de hover e transições de página. Ela é especialmente útil se você já sabe qual recurso quer construir, mas precisa de uma estrutura melhor para timing, easing e padrões de interação.

Qual problema real ela resolve

A maioria dos usuários adota interaction-design para resolver um problema prático: prompts genéricos costumam gerar animações chamativas, porém arbitrárias. Esta skill direciona o agente para um motion intencional, voltado a feedback, orientação, foco e continuidade. Por isso, ela é mais útil para UI Design em produção do que um pedido vago como “adicione animações agradáveis”.

O que diferencia esta skill de um prompt genérico de UI

O principal valor está nas restrições. A skill oferece orientação de timing, padrões de easing e referências concretas de implementação, em vez de deixar o modelo improvisar. Ela também inclui arquivos de referência ricos em exemplos para bibliotecas de animação, padrões de microinteração e animações de scroll, o que reduz bastante a tentativa e erro na implementação.

O que verificar antes de instalar

Instale esta skill se você quer orientação pronta para implementação e exemplos de padrões. Ignore se a sua necessidade for uma estratégia visual mais ampla, governança de design systems ou uma auditoria completa de acessibilidade. O repositório é mais forte em comportamento de interação e padrões de implementação frontend, especialmente em exemplos voltados a React.

Como usar a skill interaction-design

Contexto de instalação e setup da interaction-design

O SKILL.md de origem não fornece um comando de instalação via CLI, então use seu fluxo normal de skills para o repositório wshobson/agents e depois ative interaction-design a partir de plugins/ui-design/skills/interaction-design. Antes do primeiro uso, leia:

• SKILL.md
• references/animation-libraries.md
• references/microinteraction-patterns.md
• references/scroll-animations.md

Se você for olhar apenas um arquivo de apoio, comece por references/microinteraction-patterns.md, porque ele é o mais próximo do trabalho comum de produto.

Melhores momentos para acionar interaction-design

Use interaction-design quando estiver:

• adicionando estados de loading, sucesso, erro ou desabilitado
• tornando dropdowns, modais, tabs ou drawers mais claros de usar
• refinando feedback de hover, focus, press e gestos
• implementando transições de página ou de componentes
• adicionando revelações acionadas por scroll ou indicadores de progresso
• escolhendo entre transições em CSS e uma biblioteca de animação em JS

Ela ajuda menos em wireframes estáticos ou em exploração de marca puramente estética.

Quais entradas a skill precisa

A qualidade do interaction-design usage depende muito da especificidade da entrada. Informe:

• nome do componente ou do fluxo
• ação do usuário que inicia a interação
• estados antes e depois
• plataforma ou framework
• restrições de motion, performance e acessibilidade
• se você precisa apenas de conceito, apenas de código ou de ambos

Uma entrada fraca:

• “Adicione animações legais a este dashboard.”

Uma entrada melhor:

• “Use the interaction-design skill to improve a React settings panel. I need hover, pressed, saving, success, and error states for a save button; a 250ms drawer transition; and motion that feels calm, not playful. Prefer CSS or Framer Motion. Respect reduced motion.”

Como transformar um objetivo vago em um prompt forte

Um bom prompt de interaction-design guide normalmente tem quatro partes:

1. Superfície de UI: qual componente ou tela está mudando
2. Intenção: o que o motion deve comunicar
3. Restrições: timing, stack, acessibilidade, performance
4. Formato de saída: racional do padrão, código e edge cases

Exemplo:

• “Apply the interaction-design skill for UI Design on a checkout form. Design loading and validation feedback for submit, inline field errors, and a success transition after payment. Use React and Tailwind. Include durations, easing choices, reduced-motion handling, and sample implementation.”

Fluxo de trabalho sugerido para projetos reais

Um fluxo prático é:

1. Defina a ação do usuário e as mudanças de estado.
2. Peça primeiro à skill o racional do comportamento.
3. Depois peça a implementação na sua stack.
4. Compare a resposta com os arquivos de referência.
5. Corte qualquer motion que não melhore feedback ou orientação.
6. Teste reduced motion e dispositivos mais lentos.

Essa sequência funciona melhor do que pedir código completo de imediato, porque o maior valor da skill está em escolher o sistema de motion certo antes de codar.

Ordem de leitura do repositório para ganhar tempo

Se você está avaliando se vale instalar, leia nesta ordem:

1. SKILL.md para princípios e orientação de timing
2. references/microinteraction-patterns.md para estados comuns de UI
3. references/animation-libraries.md se precisar de ajuda para escolher biblioteca
4. references/scroll-animations.md se o seu caso de uso for guiado por viewport

Esse caminho deixa clara a principal força da skill: não só teoria, mas implementação sustentada por padrões.

Escolhas de biblioteca e implementação

As referências puxam bastante para padrões em React e incluem exemplos com Framer Motion, além de abordagens nativas do navegador como IntersectionObserver. Isso significa que a interaction-design skill é uma boa opção se você quiser:

• interações leves com CSS ou APIs nativas do navegador
• animação declarativa mais rica em React

Se você trabalha fora do ecossistema React, os princípios ainda se transferem bem, mas alguns exemplos de código vão exigir adaptação.

Orientação prática de timing e easing

Uma das partes mais úteis da skill é o modelo de timing:

• 100-150ms para feedback de hover e click
• 200-300ms para transições pequenas de componentes
• 300-500ms para modais e mudanças de estado maiores
• 500ms+ apenas para sequências mais coreografadas

Use isso como base inicial, não como regra cega. O jeito mais rápido de melhorar a saída é pedir que o agente justifique cada duração pelo propósito: feedback, orientação, foco ou continuidade.

Padrões de uso que a skill cobre bem

Este interaction-design usage é mais forte em:

• botões com loading e feedback assíncrono
• transições de tabs e shared layout
• affordances de hover e tap
• skeletons e indicadores de progresso
• seções com scroll reveal
• motion de notificações e toasts
• feedback visual de drag-and-drop

São exatamente os pontos em que prompts comuns costumam especificar mal as mudanças de estado e acabam gerando comportamentos frágeis de UI.

Restrições que vale declarar explicitamente

Para obter uma resposta confiável, diga isso de forma explícita:

• dar suporte a prefers-reduced-motion
• evitar layout shift
• manter as animações interrompíveis
• não bloquear a entrada do usuário durante transições, a menos que seja necessário
• preferir transforms compatíveis com GPU em vez de mudanças caras de layout
• seguir um tom de interação como calmo, preciso, lúdico ou enterprise-neutral

Sem essas restrições, o agente pode cair em um motion que parece bom isoladamente, mas soa errado no contexto do produto.

FAQ da skill interaction-design

Vale a pena usar interaction-design em vez de um prompt normal?

Sim, se você se importa com qualidade de implementação e com o propósito do motion. Um prompt normal pode gerar animação decorativa. A interaction-design skill é mais útil quando você precisa de comportamento orientado a estados, orientação de timing e padrões sustentados por exemplos que realmente podem ir para produção.

Esta skill interaction-design é amigável para iniciantes?

Moderadamente. Os princípios são fáceis de seguir, mas muitos exemplos partem do pressuposto de familiaridade com frontend, especialmente React e uso de bibliotecas de animação. Ainda assim, iniciantes podem aproveitar bem se pedirem saídas mais simples, como transições em CSS, diagramas de estado ou passos de implementação.

interaction-design funciona só para React?

Não, mas React recebe o suporte mais claro nas referências, especialmente com Framer Motion. Se a sua stack for Vue, Svelte ou JavaScript puro, peça ao agente para traduzir o padrão preservando timing, easing e lógica de estados.

Quando não devo usar interaction-design?

Não use interaction-design quando o problema maior for arquitetura da informação, branding visual ou estratégia de produto. Ela também não é a ferramenta certa para cenas de marketing pesadas em animação, nas quais a narrativa cinematográfica importa mais do que feedback de usabilidade.

Posso usar interaction-design em trabalho de UI Design systems?

Sim, especialmente para padronizar motion tokens, faixas de timing, comportamento de hover/press, estados de loading e convenções de transição entre componentes. Ela é mais útil para regras de interação do que para uma arquitetura completa de design tokens.

Ela cobre acessibilidade automaticamente?

Não completamente. A skill ajuda a tomar decisões melhores de motion, mas você ainda deve pedir explicitamente comportamento de reduced motion, visibilidade de foco, tratamento de interação por teclado e feedback não baseado apenas em movimento para mudanças importantes de status.

Como melhorar a skill interaction-design

Forneça à interaction-design entradas estado por estado

A melhor forma de melhorar a saída de interaction-design é descrever cada estado, não apenas o componente. Por exemplo:

• idle
• hover
• pressed
• loading
• success
• error
• disabled

Isso ajuda o agente a desenhar transições que conectam mudanças reais de estado, em vez de inventar efeitos isolados.

Peça o racional antes do código

Um modo comum de falha é pular direto para a implementação. Primeiro pergunte:

• o que deve se mover
• por que deve se mover
• quanto tempo deve levar
• que confusão do usuário isso evita

Depois peça o código. Isso produz um motion mais limpo e reduz excesso de animação.

Especifique seu orçamento de motion

Diga se você quer:

• motion utilitário mínimo
• polimento moderado de produto
• motion expressivo de marca

Essa instrução única muda bastante a qualidade do resultado. Sem ela, o modelo pode exagerar e adicionar uma densidade de animação que o seu produto não precisa.

Peça reduced motion e comportamento de fallback

Se você quer resultados prontos para produção, peça à skill que forneça:

• tratamento de prefers-reduced-motion
• uma variante sem animação ou com menos motion
• feedback de teclado e de estado de tela que não dependa só de movimento

Essa é uma das formas mais fáceis de transformar uma resposta razoável em algo realmente publicável.

Forneça contexto de código, não apenas screenshots

Se você já tem um componente, cole o JSX, CSS ou a lógica de estado relevante. A interaction-design skill fica muito mais útil quando consegue mapear o motion para event handlers reais, nomes de estado e estrutura de DOM.

Fique atento a estes modos de falha comuns

Tenha cautela se a primeira resposta vier com:

• animação em todos os elementos sem propósito de comunicação
• timing inconsistente entre componentes relacionados
• transições que escondem latência em vez de explicá-la
• efeitos de hover que não funcionam em touch
• animações de scroll que disparam demais ou prejudicam a legibilidade

Esses são sinais de que o prompt precisa de restrições mais fortes.

Itere testando uma família de interação por vez

Não redesenhe todo o motion de uma vez. Comece por uma família, como botões ou transições de modal, e só depois expanda. Isso facilita avaliar se a interaction-design skill está de fato melhorando a clareza ou apenas adicionando movimento.

Cruze as respostas com as referências para ganhar profundidade de implementação

Se uma resposta parecer genérica, redirecione o agente para os arquivos de apoio do repositório:

• references/microinteraction-patterns.md para estados comuns de componentes
• references/animation-libraries.md para exemplos em nível de API
• references/scroll-animations.md para comportamento acionado por viewport

Isso normalmente eleva a resposta do nível conceitual para algo pronto para implementação.

Peça tradeoffs, não só recomendações

Um prompt de alto valor é:

• “Use interaction-design and compare CSS transitions vs Framer Motion for this component, including bundle cost, complexity, and maintainability.”

Isso força o modelo a ajudar na decisão de adoção, não apenas a gerar código.

Melhore a qualidade da saída com critérios concretos de revisão

Termine seu prompt com critérios de revisão como:

• “Keep motion purposeful, short, and consistent.”
• “Avoid layout shift.”
• “Respect reduced motion.”
• “Prefer patterns that are easy to maintain.”
• “Explain how the interaction improves feedback or orientation.”

Esses critérios alinham o interaction-design guide com o que os times realmente precisam para aprovar e colocar motion de UI em produção.