interaction-designpor Seth Hobson

Interaction Design Skill.

Um skill do Claude Code e Codex para pesquisa de UX: microinterações, movimento, transições e padrões de feedback do usuário.

UX & Research

Baixar OpenDesign Ver guia de uso

wshobson/agents · plugins/ui-design/skills/interaction-design/SKILL.mdSKILL.md

--- name: interaction-design description: Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences. --- ## When to Use This Skill ## Core Principles ## Quick Start: Button Microinteraction ## Interaction Patterns ## CSS Animation Patterns ## Accessibility Considerations

Cabeçalho e títulos de seção lidos do arquivo original em 14/09/2026 · 7.572 caracteres no total

01 O que faz

O Que a Skill interaction-design Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Esta skill projeta e implementa microinterações, motion design, transições e padrões de feedback do usuário para melhorar a usabilidade e encantar os usuários. Ela fornece diretrizes específicas de tempo: 100-150ms para microfeedback como hovers e cliques, 200-300ms para transições pequenas como toggles e dropdowns, 300-500ms para transições médias incluindo modais e mudanças de página, e 500ms+ para animações coreografadas complexas.

A skill abrange estados de carregamento com skeleton screens e indicadores de progresso, interações baseadas em gestos como swipe-to-dismiss, transições de página e padrões de feedback como efeitos de ripple. Ela enfatiza movimento propositivo que comunica em vez de decorar, usando quatro princípios: feedback para confirmar ações, orientação para mostrar o movimento de elementos, foco para direcionar a atenção e continuidade para manter o contexto durante as transições.

O que ele produz

Microinterações de botão com animações de hover, tap e spring
Skeleton screens com animação pulsante para estados de carregamento
Componentes toggle com transições de estado suaves baseadas em spring
Transições de página com opacidade e movimento vertical usando AnimatePresence

Veja o exemplo de prompt ↗

Como funciona

01
Siga as Diretrizes de Tempo por Escala de Interação
Use 100-150ms para microfeedback como hovers e cliques, 200-300ms para transições pequenas como toggles, 300-500ms para transições médias como modais, e 500ms+ para animações complexas.
02
Selecione Funções de Easing Apropriadas
Use ease-out (desacelerar) para elementos que entram, ease-in (acelerar) para elementos que saem, ease-in-out para movimentos entre estados, e spring para efeitos de overshoot lúdicos.
03
Respeitar as preferências de acessibilidade
Verifique a media query prefers-reduced-motion e reduza a duração das animações para 0.01ms quando os usuários tiverem solicitado movimento reduzido, garantindo que as animações não causem desconforto.

02 Encontre o ideal para você

Quando usar a skill interaction-design

Use a skill interaction-design no Claude Code ou Codex quando o trabalho for pesquisa de UX desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Adicionando microinterações para melhorar o feedback do usuário em botões, toggles e elementos interativos
Implementando transições suaves de página e componentes entre visualizações ou estados
Projetando estados de carregamento e skeleton screens que preservam o layout durante a busca de dados
Criando interações baseadas em gestos, como swipe-to-dismiss ou drag-and-drop
Construindo sistemas de notificação e toast com animações de entrada e saída

Conheça os Limites

Animando propriedades width, height, top ou left, o que causa desempenho travado
Usar will-change em excesso para otimização, o que pode prejudicar o desempenho

03 Dentro da skill

Regras que o skill interaction-design dá ao Claude Code e ao Codex

3 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Anime Apenas Transform e Opacity
Use exclusivamente as propriedades transform e opacity para animações suaves a 60fps. Nunca anime width, height, top ou left, pois causam animações travadas.
O movimento deve comunicar, não decorar
Toda animação deve ter um propósito: confirmar que ações ocorreram, mostrar para onde os elementos se movem, direcionar a atenção para mudanças ou manter o contexto.
Usar uma escala de tempo consistente
Aplique os mesmos valores de tempo e funções de easing de forma consistente em toda a aplicação para criar uma sensação coesa.

04 Coloque em prática

Instalar interaction-design no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar interaction-design ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/wshobson/agents --skill interaction-design

Formato genérico do CLI skills para plugins/ui-design/skills/interaction-design/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Pesquisa de UX

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Add microinteractions to the [component name] in [file path]. Implement hover and tap feedback on the submit button, add a skeleton screen for the loading state, and create a smooth toggle animation for the [setting name] switch. Make sure all animations respect prefers-reduced-motion and run at 60fps.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Teste se os usuários conseguem interromper e cancelar animações longas

No OpenDesign, importe interaction-design a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Arquivo da skill: plugins/ui-design/skills/interaction-design/SKILL.md Checksum de conteúdo registrado na verificação; commit 4236bb9
License: MIT Do LICENSE.
Estrelas do repositório: 39.635 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório wshobson/agents, que contém 18 skills neste catálogo. Não é uma classificação ou contagem de uso para interaction-design.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Quando usar este skillLista oito cenários, incluindo microinterações, transições, estados de carregamento, gestos, notificações, drag-and-drop, animações de scroll e estados de hover
Princípios fundamentaisDefine movimento com propósito por meio de quatro princípios e fornece diretrizes de tempo e funções de easing para diferentes tipos de interação
Início rápido: microinteração de botãoMostra um exemplo completo de botão com Framer Motion, com hover, tap e animação spring
Padrões de interaçãoFornece exemplos de código para estados de carregamento, transições de estado, transições de página, padrões de feedback como ripple e interações por gestos como swipe-to-dismiss
Padrões de animação CSSDemonstra animações por keyframes para fadeIn, pulse e spin, além de transições CSS para efeitos de hover
Considerações de AcessibilidadeMostra como detectar e respeitar prefers-reduced-motion tanto em CSS quanto em JavaScript
Boas PráticasLista sete regras, incluindo abordagem com desempenho em primeiro lugar, suporte a movimento reduzido, timing consistente, animações com spring, capacidade de interrupção, progressive enhancement e testes em dispositivos
Problemas ComunsIdentifica cinco armadilhas, incluindo animações travadas, excesso de animação, interações bloqueadas, vazamentos de memória e uso incorreto de will-change

A Descrição da Própria Skill

"Projete e implemente microinterações, motion design, transições e padrões de feedback do usuário. Use ao adicionar polimento a interações de UI, implementar estados de carregamento ou criar experiências de usuário agradáveis."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 7.572 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill interaction-design

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Qual biblioteca de animação essa skill usa?

A skill utiliza principalmente o Framer Motion para componentes React, demonstrado em exemplos como AnimatePresence para transições de página e componentes motion para gestos. Também aborda animações puras em CSS usando keyframes e transitions, mostrando que as duas abordagens funcionam juntas.

Interaction Design

Execute interaction-design em uma Tarefa Real de Pesquisa de UX.

Baixe OpenDesign, importe interaction-design do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills