Communitygithub.com

revisão-de-movimento

Revise e corrija uma página web com muito movimento (histórias de rolagem, heróis WebGL, scrub de filmes, seções de shader) usando um ciclo de olhar-e-corrigir. Use quando for solicitado a revisar, criticar, fazer QA, polir ou "deixar pronta para publicação" uma landing page animada, template ou herói, ou antes de publicar uma. Tira screenshots das seções em tamanhos desktop e celular, pontua a página em 10 critérios, executa verificações de QA bloqueantes (erros no console, overflow, rolagem reversível, controle de pausa, movimento reduzido, tamanho do texto, alvos de toque, flash branco, fontes, texto alternativo, foco, peso da página) e corrige o que falha.

O que é revisão-de-movimento?

Este skill, 'Revisão de Movimento', é uma ferramenta avançada para desenvolvedores e profissionais de controle de qualidade que precisam garantir que landing pages animadas, heróis WebGL e seções com shaders estejam prontos para produção. Ele fornece um ciclo estruturado de 'olhar e corrigir' que começa capturando screenshots de cada seção da página em resoluções de desktop (1440x900) e celular (390x844). O skill então avalia a página usando uma rubrica de 10 critérios, com pontuações de 1 a 10, e executa uma lista de verificação de QA bloqueante que verifica desde erros de console e overflow até controle de pausa de animação e tamanho dos alvos de toque. Após identificar as falhas, o desenvolvedor corrige o problema mais crítico, refaz os screenshots e reavalia, repetindo o ciclo até que a página atinja uma média de 8 ou mais na rubrica, sem nenhum critério abaixo de 7, e todas as verificações bloqueantes passem. O skill suporta plataformas como Claude Code e Cursor, e usa scripts Node.js/Playwright para automação, além de scripts manuais para verificações que exigem julgamento humano, como o comportamento da página ao reverter a rolagem ou ao usar 'reduced motion'.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/iboss21/regescore-motioncraft-skills/tree/main/plugins/motioncraft/skills/motion-review
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Revisão de Movimento

Uma página com movimento não está pronta quando funciona no seu monitor. Ela está pronta quando obtém uma boa pontuação em uma rubrica fixa, passa em todas as verificações bloqueantes nos tamanhos desktop e celular, e você olhou o resultado em vez de confiar no código.

Este skill fornece três coisas:

  1. Um ciclo de olhar-e-corrigir: screenshot, pontue, corrija o pior problema, screenshot novamente.
  2. Uma rubrica de 10 critérios pontuados de 1 a 10, com a aparência de uma pontuação 5, 8 e 10: references/rubric.md.
  3. Uma lista de verificação de QA bloqueante e dois scripts independentes que a medem: references/qa-checklist.md, scripts/section-shots.mjs, scripts/qa-lite.mjs.

O padrão

  • Média da rubrica 8 ou superior, e nenhum critério individual abaixo de 7.
  • Todas as verificações bloqueantes passam em 1440x900 e 390x844.
  • Você viu cada seção nos dois tamanhos. Uma revisão sem screenshots é um palpite.

Se a página não atingir o padrão, ela não está pronta, por mais bonito que o herói pareça.

Requisitos

  • Node 18 ou mais recente.
  • Playwright no projeto que você está revisando: npm i -D playwright e depois npx playwright install chromium. Ou use um Chrome instalado com playwright-core e passe --chrome "<caminho para o chrome>". Os scripts encontram Chrome ou Edge nos locais comuns do Windows, macOS e Linux por conta própria.
  • Opcional: npm i -D sharp para folhas de contato. Sem ele, você ainda obtém cada PNG.
  • Execute os scripts da sua pasta de projeto. Eles procuram Playwright e sharp primeiro na pasta de onde você os executa, depois ao lado do script, então uma instalação no seu projeto é suficiente. Os caminhos dos scripts abaixo são relativos à pasta deste skill. O Claude Code mostra essa pasta quando o skill carrega; após uma cópia manual, ela é, por exemplo, ~/.claude/skills/motion-review/, então a chamada completa é node ~/.claude/skills/motion-review/scripts/qa-lite.mjs ./site.

A convenção ?shot=N

Os scripts abrem index.html?shot=N e esperam que a página vá para a seção N. Adicione isso à sua página uma vez (custa algumas linhas e torna cada revisão reproduzível):

// Gancho de QA: ?shot=N rola a seção N para o meio da janela de visualização após o carregamento.
const shot = new URLSearchParams(location.search).get("shot");
if (shot !== null) addEventListener("load", () => {
  const marked = document.querySelectorAll("[data-shot]");
  const s = (marked.length ? marked : document.querySelectorAll("section"))[+shot];
  if (s) scrollTo(0, s.getBoundingClientRect().top + scrollY + s.offsetHeight / 2 - innerHeight / 2);
});

Para um filme ou uma introdução que toca uma vez, também avance a linha do tempo para seu estado estabilizado quando ?shot estiver presente, para que o screenshot mostre o quadro composto e não o quadro 1. Para filmes cronometrados, veja o método de captura justa no skill de análise: ../motion-analytics/references/reference-grading.md.

O ciclo de olhar-e-corrigir

Execute este ciclo até que a página atinja o padrão. Cada passagem deve corrigir primeiro o problema mais prejudicial, não dez pequenos problemas de uma vez.

1. Fotografe

node scripts/section-shots.mjs ./meu-site 6 ./qa/shots

Isso serve ./meu-site em uma porta local, abre index.html?shot=0 até ?shot=5 nos tamanhos desktop e celular, escreve d0.png ... d5.png, p0.png ... p5.png, e desk-sheet.png e phone-sheet.png quando o sharp está instalado. Imprime todos os erros de página e erros de console que viu.

2. Olhe

Abra primeiro as duas folhas de contato, depois os quadros individuais. Pergunte, seção por seção:

  • A ideia central da página é visível neste quadro, ou esta é uma seção genérica?
  • O quadro do celular tem sua própria composição, ou é o desktop comprimido?
  • Algum texto está sobre uma parte movimentada da imagem?
  • Algo está cortado, sobreposto, em branco ou ainda carregando?
  • Cada seção parece da mesma marca?

Escreva o que você vê em palavras simples antes de pontuar. "O título do herói no celular cobre o rosto do sujeito" é útil. "Parece bom" não é.

3. Verifique

node scripts/qa-lite.mjs ./meu-site

Imprime PASS ou FAIL para cada verificação bloqueante, com os números medidos. Qualquer FAIL bloqueia a publicação. Veja references/qa-checklist.md para saber o que cada verificação significa, como o script a mede e a correção usual.

Algumas verificações precisam de um humano: o controle de pausa para tudo que se move, a reprodução da rolagem é limpa no sentido inverso após um movimento rápido, a página parece correta com o som ligado. A lista de verificação marca estas como manuais. Faça-as.

4. Pontue

Pontue todos os 10 critérios da rubrica a partir dos screenshots e do uso da página. Use os âncoras em references/rubric.md. Pontue o que está na tela, não o que o código pretende. Escreva uma frase de evidência por pontuação.

5. Corrija o pior problema

Escolha a pontuação mais baixa ou o primeiro FAIL. Corrija a causa, não o sintoma: se o texto está ilegível no celular, corrija a escala do tipo e o filtro, não diminua a imagem. Mantenha a mudança pequena e local.

6. Repita

Fotografe novamente, olhe novamente, repontue os critérios que você tocou. Pare quando o padrão for atingido. Três a cinco passagens é normal para uma página nova.

Formato do relatório de revisão

Quando você relatar uma revisão, use este formato para que os resultados possam ser comparados ao longo do tempo:

Página: <nome>   Passagem: <n>   Data: <aaaa-mm-dd>
Rubrica: ideia 8, artesanato 7, movimento 9, ... média 8,1, menor 7 (artesanato)
Bloqueante: 11 de 12 PASS. FAIL: alvos de toque (3 abaixo de 44 px no celular: .nav a, #prev, #next)
Visto: 6 quadros desktop, 6 quadros celular
Pior problema: <uma frase>
Correção aplicada: <uma frase>
Próximo: <uma frase>

Regras práticas

  • Celular primeiro ao pontuar. A maioria dos visitantes chega pelo celular. Uma página que é 9 no desktop e 6 no celular é 6.
  • Movimento que você não pode parar é um bug. Qualquer coisa que se mova por mais de cinco segundos precisa de um controle de pausa visível, e o movimento reduzido deve fornecer uma página completa e composta.
  • A rolagem deve funcionar nos dois sentidos. Rolar para cima deve desfazer o que rolar para baixo fez, de forma limpa, em qualquer velocidade.
  • Sem erros silenciosos. Um erro de console é FAIL, mesmo que a página pareça boa. Geralmente significa que um caminho de fallback está quebrado.
  • Julgue o quadro estabilizado e o quadro em movimento. Um screenshot mostra composição; apenas usar a página mostra o tempo. Faça ambos.

Relacionados

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

motion-analytics

Measure the quality and performance of a motion-heavy web page (WebGL, scroll film, shader heroes, particle scenes) and compare it fairly against a reference. Use when asked to profile, speed up, budget, benchmark or grade an animated page, when a scene stutters or drains phones, when choosing quality tiers or DPR caps, or when judging "how close is our page to the reference". Covers frame-time budgets with p50 and p95, a rolling quality ladder, page and texture weight budgets, Web Vitals for motion sites, and reference grading with side-by-side sheets and independent graders.

motioncraft-builder

Build a cinematic, award-level motion website or hero section (scroll-driven three.js scenes, film-led heroes, depth-photo parallax, synthesized sound, live 3D callouts) from one idea taken from the customer's own world. Use when someone asks for a premium animated landing page, a scroll story, a 3D product page, a video hero, an "Awwwards-style" or "expensive feeling" site, or wants a brief turned into a beat sheet, a grey-boxed mechanic and a dressed, accessible, fast page. Do not use for flat SaaS layouts, simple CSS fade-ins or static brochure pages.

Habilidades Relacionadas

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community