@andespindola/crow-skills 0.40.0 → 0.42.0

package/skills/crow-design/references/movimento.md

@@ -0,0 +1,144 @@
+<!-- Derivado de Impeccable (Apache-2.0, Paul Bakaus), design-taste-frontend e high-end-visual-design (MIT, Leonxlnx), design-system (MIT, claudekit) e platform-design-skills (MIT, ehmo); reescrito e modificado pelo Crow em 2026-11-13. Ver ../NOTICE.md. -->
+# Movimento
+
+Leia quando o contrato for decidir se algo anima, quanto, com que duração e easing, com que runtime, o que acontece com movimento reduzido, ou quando o brief pede técnicas ambiciosas (scrollytelling, View Transitions, WebGL).
+
+## Tese de movimento
+
+Todo movimento serve hierarquia, narrativa, feedback ou transição de estado. "Ficou bonito" não é motivo; se o propósito não cabe numa frase, corte. Antes de especificar qualquer animação, o contrato escreve a tese da superfície:
+
+- **Momento focal:** a única sequência ou interação que merece autoria, se houver. Ela vem do conceito do produto e da superfície; fade com subida genérico, hover que levanta, camada de parallax ou reveal por rolagem não são tese.
+- **Continuidade:** as mudanças de estado, layout ou navegação que precisam ser explicadas (o item da lista que vira a página de detalhe).
+- **Feedback:** os controles e resultados que precisam de confirmação.
+- **Orçamento:** quais efeitos custam caro, onde rodam e com que frequência.
+
+**Um momento autoral, não efeitos espalhados.** Uma ideia forte de material, levada pelo momento focal e por estados de apoio silenciosos, costuma bastar. Empilhar técnicas para impressionar dilui a ideia e o desempenho.
+
+**Material pelo significado:**
+
+- **Continuidade e relação:** elemento compartilhado entre estados, transformações no estilo FLIP, View Transitions, movimento espacial deliberado.
+- **Foco e profundidade:** desfoque, luz e sombra **estáticos** que mudam por troca de estado, não animados quadro a quadro.
+- **Revelação e composição:** máscara, `clip-path`, recorte, oclusão controlada (ver a exceção abaixo).
+- **Material e energia:** cor, posição de gradiente (com `@property`), textura, distorção ou shader quando o mundo e o runtime sustentam.
+- **Estado e feedback:** a menor mudança que torna causa e resultado inconfundíveis.
+
+Vocabulário útil para nomear a escolha: cascata (stagger), varredura por máscara (clip wipe), escala com foco, morph entre estados, parallax.
+
+**Stagger só em listas,** quando algo aparece como lista, e com **teto total**: a cascata inteira termina em poucas centenas de milissegundos, seja qual for o número de itens (por exemplo, 60ms por item até no máximo 6 a 8 itens; o resto entra junto). Toda seção rolada reinterpretada como lista em cascata é vício.
+
+## Tokens de duração e easing
+
+| Token | Operar | Demais modos | Uso |
+|---|---|---|---|
+| `duration.instant` | 100–150ms | 100–150ms | Feedback imediato: pressão, toggle, hover |
+| `duration.state` | 150–250ms | 150–300ms | Mudança de estado rotineira |
+| `duration.layout` | até 250ms | 300–500ms | Layout, overlay, transição de view |
+| `duration.focal` | não existe (sem entrada focal) | 500–800ms | Entrada focal autoral, só em Persuadir e Experienciar |
+
+| Token | Curva | Uso |
+|---|---|---|
+| `easing.enter` | `cubic-bezier(0.16, 1, 0.3, 1)`; em UI de produto, `cubic-bezier(0.2, 0, 0, 1)` | Chegadas: desacelera ao entrar |
+| `easing.enter-premium` | `cubic-bezier(0.32, 0.72, 0, 1)` | Entrada longa do registro premium, quando adotado |
+| `easing.exit` | ease-in, por exemplo `cubic-bezier(0.3, 0, 1, 1)` | Saídas, **mais curtas que a entrada** |
+| `easing.linear` | `linear` (`ease: none` nas bibliotecas) | Scrub ligado à rolagem, progresso, indicadores contínuos |
+| `easing.spring` | rigidez 100, amortecimento 20 como ponto de partida | Só onde há gesto, arraste ou interrupção |
+
+Uma versão mais calma do `easing.enter` é a ease-out-quart (`cubic-bezier(0.25, 1, 0.5, 1)`). Mudanças simétricas de cor podem usar ease-in-out. Bounce e elástico não entram por reflexo. Banir `linear` ou `ease-in-out` em bloco é erro: scrub e progresso precisam de linear. Os nomes `duration.instant/state/layout/focal` e `easing.enter/exit` são **semânticos**: vivem na camada semântica com nomes por propósito e apontam para primitivos nomeados por valor (75, 100, 150, 200, 300, 500, 700 e 1000ms; curvas idem). O modo troca a referência do semântico, não o primitivo (ver [sistema de tokens](sistema-de-tokens.md)).
+
+Duração expressa distância e consequência: feedback longo parece latência; entrada focal curta demais parece corte.
+
+## O que pode e o que não pode animar
+
+- **Anima `transform` e `opacity`.** São as propriedades que o navegador compõe sem refazer layout.
+- **Não anima** `width`, `height`, `top`, `left` nem margens; use FLIP, transform ou técnicas de grid quando o tamanho precisa mudar.
+- **Filtros são estáticos.** Desfoque, saturação e brilho mudam por troca de estado, não por animação; desfoque animado na entrada (o "blur-in") é caro em celular e não entra.
+- **Exceção registrada para máscara e `clip-path`:** permitidos só no momento focal, em região isolada, com custo medido no dispositivo-alvo e registrados como exceção no contrato. No resto da superfície, só transform e opacity. Quando der, a revelação se faz movendo com transform a camada que oculta.
+- **Nunca `transition: all`.** A transição lista as propriedades (`transform, opacity` e, quando preciso, `color, background-color, border-color`). `all` anima layout e cor sem controle.
+- **`will-change` só durante** a animação conhecida, removido depois; permanente desperdiça memória.
+- **Pressão (`:active`) desce, nunca sobe:** `translateY(1px)` ou `scale(0.98)`. Sem deslocamento com movimento reduzido.
+- **Nada pisca mais de 3 vezes por segundo** (WCAG 2.3.1, nível A): flash, estroboscópio, alternância de cor saturada ou brilho que se repete acima disso só é aceitável abaixo dos limiares de flash geral e de vermelho, isto é, numa área pequena (somada, menor que cerca de 25% de 10 graus do campo visual, da ordem de 341 x 256px a uma distância típica de leitura). Na dúvida, não pisca. Vale em todo nível do botão MOVIMENTO, inclusive em WebGL, vídeo e canvas.
+- **Movimento não causa salto de layout:** animações não podem empurrar conteúdo (CLS abaixo de 0.1) nem atrasar a resposta à interação (INP abaixo de 200ms).
+
+## Runtime por necessidade
+
+- **CSS** (transições e keyframes) para o que é declarativo e limitado.
+- **Web Animations API ou a biblioteca que o projeto já tem** quando a animação precisa ser interrompida, encadeada ou receber valores dinâmicos.
+- **View Transitions** quando a continuidade entre estados é a ideia (mesma página e entre documentos têm suporte diferente; confira o suporte na data da implementação e registre-o datado no contrato).
+- **Scroll-driven** (`animation-timeline: scroll()` ou `view()`) só quando a relação com a rolagem carrega significado, sempre dentro de `@supports` e com estado estático bom como fallback.
+- **IntersectionObserver** para disparar entradas. **Nunca listener de `scroll`** nem posição de rolagem guardada em estado de componente.
+- **Bibliotecas, sem misturar na mesma árvore:** Motion (`motion/react`; `framer-motion` é o nome legado) para interface, estado, layout compartilhado e gestos; GSAP com ScrollTrigger para scrollytelling, fixação e scrub; Three.js (ou OGL e regl, mais leves) para canvas, 3D e shaders. Em React, valores contínuos (ponteiro, rolagem, física) vivem em motion values, não em estado; o que anima vira componente cliente isolado; efeitos limpam seus observadores e contextos ao desmontar; o que pesa e está abaixo da dobra carrega sob demanda.
+- **Sem dependência nova sem decisão:** se o efeito exige uma biblioteca que o projeto não tem, isso vira proposta com custo, não instalação silenciosa.
+
+## Valores por faixa do botão MOVIMENTO
+
+O botão (1 a 10) é derivado do brief e declarado na leitura (ver [leitura do brief](leitura-do-brief.md)).
+
+- **1–3:** nenhuma animação automática. Só feedback de hover, foco, pressão e transições de estado com `duration.instant` e `duration.state`.
+- **4–7:** transições em propriedades explícitas, por exemplo `transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms cubic-bezier(0.16, 1, 0.3, 1)`; cascatas com `animation-delay: calc(var(--index) * 60ms)` dentro do teto total; entrada de reveal: de `opacity: 0` e deslocamento de 16 a 24px para o estado final, 600ms, `easing.enter`, disparada uma vez quando cerca de 30% do elemento entra na tela.
+- **8–10:** reveals por rolagem, parallax, scroll-driven ou ScrollTrigger, momentos de física (botão magnético, só com motion values e em brief premium, lúdico ou de agência), micro-interações perpétuas (pulso, digitação, flutuação, brilho, carrossel) só acima de 5 e quando a seção ganha com isso.
+
+Em todas as faixas: no máximo **um marquee** por página, e movimento reduzido sempre (abaixo).
+
+**Movimento declarado é movimento entregue.** Se o contrato declara MOVIMENTO acima de 4, a superfície tem entrada no hero, revelação por rolagem com propósito e resposta física nos controles principais. Se não vai ter, o botão desce para 3 e o contrato diz isso: declarar movimento que não existe engana quem implementa e quem revisa.
+
+## Técnicas avançadas
+
+Escolhas legítimas quando o mundo as nomeia, cada uma construída de verdade (não imitada), com melhoria progressiva e caminho em movimento reduzido:
+
+- **View Transitions:** elemento compartilhado entre estados (item que expande em detalhe, botão que vira diálogo).
+- **`@starting-style`:** entrada a partir de `display: none` só com CSS.
+- **Molas:** massa, tensão e amortecimento em vez de curva, onde há gesto ou interrupção.
+- **Scroll-driven:** progresso, revelação e parallax ligados à rolagem, com fallback estático.
+- **WebGL** (Three.js, OGL, regl) e **WebGPU** com fallback para WebGL2 e, por fim, para uma versão só CSS que ainda fica boa.
+- **Canvas 2D e OffscreenCanvas** (em Worker, para tirar o render da thread principal); **WASM** e **Workers** para cálculo pesado.
+- **Filtros SVG funcionais** (deslocamento, morfologia) para distorção que serve à ideia, com orçamento.
+- **`@property`** para animar gradientes, cores e valores tipados que o CSS não interpola sozinho.
+- **Dados vivos:** transição entre estados de gráfico em vez de substituição; rolagem virtual para listas enormes (ver [dados e densidade](dados-e-densidade.md)).
+- **Web Audio** só depois de um gesto do usuário e com consentimento; **APIs de dispositivo** (orientação, luz) com parcimônia e permissão.
+
+**Meta de 60fps;** abaixo de 50fps, simplifique. Inicialize contextos pesados (WebGL, WASM) só perto do viewport, pause o que está fora da tela, meça em aparelho intermediário real e date o suporte de navegador de cada técnica no contrato.
+
+## Scrollytelling
+
+Padrões úteis, com as correções que os tornam acessíveis:
+
+- **Pilha fixa (sticky stack):** cada card ocupa a altura do viewport (`min-height: 100dvh`); ao chegar o seguinte, o anterior recua para `scale: 0.92` e `opacity: 0.55`, com scrub linear do topo do card seguinte entrando (`top bottom`) até ele encostar no topo (`top top`). **Um mecanismo de fixação só:** ou CSS `position: sticky` com scrub de transform, ou o pin da biblioteca (com o espaçamento de pin desligado e o fim no último card), nunca os dois no mesmo elemento, que gera salto ou espaço dobrado. O contexto da biblioteca é revertido ao desmontar. Com movimento reduzido, vira lista normal.
+- **Pan horizontal:** o trilho translada no eixo x pela diferença entre a largura rolável e a da janela, fixado enquanto a rolagem vertical percorre essa distância, com scrub suave (da ordem de 1) e recálculo ao redimensionar. **Caminho sem animação obrigatório:** com movimento reduzido ou sem JavaScript, o trilho vira rolagem horizontal nativa (`overflow-x: auto` com `scroll-snap`) ou empilhamento vertical, e o teclado alcança todos os itens. Sair cedo da animação e deixar o trilho com `overflow: hidden` esconde os cards além do viewport justamente de quem pediu menos movimento.
+- **Reveals:** conteúdo visível por padrão; a entrada é melhoria progressiva (próxima seção).
+
+## Movimento reduzido, sempre
+
+`prefers-reduced-motion: reduce` é respeitado **em todo nível do botão de movimento**, para todo movimento não essencial: transições de layout, hover com deslocamento e cascatas de nível baixo, não só os efeitos grandes.
+
+- **Alternativa intencional,** não um "mata tudo" global com duração de 0.01ms: remova ou reduza o deslocamento espacial; mantenha opacidade, cor e feedback que confirmam uma ação; troque transições espaciais por fade curto ou corte; pare loops, parallax, rolagem sequestrada e física de ponteiro. O contrato diz o que cada efeito vira em `reduce`.
+- **Conteúdo visível por padrão.** O estado inicial invisível (opacidade zero antes da entrada) só se aplica com `prefers-reduced-motion: no-preference` **e** JavaScript ativo. Sem JavaScript, com o script falhando ou com movimento reduzido, nada some.
+- **Movimento automático que dura mais de 5 segundos no total e roda junto com outro conteúdo** (marquee, carrossel, fundo animado, pulso, digitação) tem controle de pausa, parada ou ocultação (WCAG 2.2.2, nível A); o que conta é a duração total, não o comprimento de um ciclo do loop. Além disso, para fora da tela e com movimento reduzido. Loop perpétuo nunca é baseline em todo card, avatar ou ponto de status.
+- Som e vibração só com consentimento e respeitando as preferências do sistema.
+
+## Produto e Operar
+
+- Durações pela coluna Operar da tabela de tokens: `duration.instant` 100–150ms, `duration.state` 150–250ms, `duration.layout` (overlay, painel, transição de view) até 250ms; **sem entrada focal**.
+- Propósitos permitidos: **estado e feedback** (abrir, fechar, selecionar, confirmar, resultado de ação).
+- **Carregamento = skeleton com a forma do conteúdo,** sem coreografia: a tela não "se monta" em cascata toda vez que abre. Spinner só inline, na ação que está esperando, nunca no meio da página.
+- **Revelação decorativa não entra:** sem reveal por rolagem, sem animação decorativa, sem hover que levanta cards de dados, sem acento animado em item inativo.
+- Ler: quase nada; transições de navegação e disclosure.
+
+## Momentos de deleite
+
+Quando o contrato prevê deleite, ele é uma tese em uma frase e aparece onde há motivo: sucesso proporcional ao feito, espera verdadeira (não inventar progresso), primeiro uso, descoberta. Nunca atrasa a tarefa, nunca viola acessibilidade, nunca encena trabalho falso e nunca faz graça com perda, dinheiro ou privacidade.
+
+## Nativo
+
+- **iOS:** transições e molas do sistema; com Reduzir Movimento, crossfade no lugar de deslocamento e zoom.
+- **Android:** padrões do Material (container transform, eixo compartilhado, fade-through), respeitando "Remover animações", que zera as durações do sistema.
+- Detalhes de plataforma em [adaptação](adaptacao.md).
+
+## Vícios
+
+- A mesma entrada em toda seção.
+- Fade com subida genérico apresentado como tese.
+- Hover que levanta tudo, espalhado pela página.
+- Bounce e elástico por reflexo.
+- Desfoque animado na entrada.
+- Elementos que "nunca aparecem estáticos": conteúdo escondido até a animação rodar.
+- Movimento declarado e não entregue, ou entregue sem caminho reduzido.

package/skills/crow-design/references/redesign-e-sistemas-existentes.md

@@ -0,0 +1,91 @@
+<!-- Derivado de Impeccable (Apache-2.0, Paul Bakaus), design-taste-frontend e high-end-visual-design (MIT, Leonxlnx), design-system (MIT, claudekit) e platform-design-skills (MIT, ehmo); reescrito e modificado pelo Crow em 2026-11-13. Ver ../NOTICE.md. -->
+# Redesign e sistemas existentes
+
+Leia quando já existe interface, marca ou código com identidade visual: redesign, nova superfície dentro de um produto, ou quando telas divergiram e é preciso decidir qual fonte vale. Se o pedido é **documentar** um sistema que existe só no código (produzir o DESIGN.md dele), isso é da `crow-interface`; aqui a leitura do código serve para decidir o redesign.
+
+## O existente é autoridade até prova em contrário
+
+A ausência de documento do sistema não torna um projeto greenfield. Custom properties, tema, componentes, páginas publicadas e assets de marca são evidência de uma identidade, e a precedência (dono, brief, marca e autoridade visual existente, contrato, defaults) põe essa identidade acima de qualquer default da skill. Duas consequências práticas:
+
+- **Variação só contra defaults genéricos.** O teste anti-cluster e as listas de "evitar como default" servem para que uma decisão livre não caia no lugar-comum. Elas não se aplicam contra a marca nem contra o sistema existente: exigir aparência nova a cada entrega quebra a identidade que o produto construiu.
+- **A marca existente vence as listas de "proibido".** Se a fonte oficial da marca está na lista de fontes de reflexo, ela continua; marca roxa continua roxa; uma marca que já é creme com serifa continua assim. A lista de defaults é zerada para os ativos da própria marca, e a exceção fica registrada no [documento do sistema](documento-do-sistema.md) para que a próxima sessão não a "corrija".
+
+## Qual situação é esta
+
+- **Preservar (evolução dirigida):** o mundo visual continua; melhora-se dentro dele.
+- **Refazer (overhaul):** troca-se o mundo visual, preservando conteúdo, função e verdade do produto. O visual antigo é evidência do que o assunto é, não autoridade sobre o que ele vira.
+- **Greenfield:** marca nova; o existente é só referência do que não repetir.
+- **Mundo estabelecido com adição local:** nova seção, componente, feature ou estado dentro de uma superfície existente herda a superfície. Não é redesign.
+
+Na dúvida entre preservar e refazer, faça uma pergunta só: "o redesign preserva a marca existente?". Não fique no meio-termo: um redesign que troca metade do mundo e mantém a outra metade sem regra produz duas identidades. Os botões de direção seguem a escolha: preservar mantém V/M/D iguais aos atuais (qualquer aumento é proposta explícita); refazer parte de +2/+2 com a densidade atual (ver [direção estética](direcao-estetica.md)).
+
+## Auditoria primeiro
+
+Antes de propor qualquer valor, inventarie o que existe. A auditoria é leitura; o contrato registra o que foi lido e onde.
+
+1. **Tokens de marca:** cores, fontes (com licença), raios, sombras, espaçamento, movimento, onde cada um é definido.
+2. **Arquitetura de informação:** rotas, navegação primária e seus rótulos, hierarquia de páginas.
+3. **Blocos de conteúdo:** tipos de seção e de tela, componentes recorrentes, conteúdo real disponível (texto, fotografia própria, provas com origem).
+4. **Padrões a preservar:** o que funciona e o que o público reconhece.
+5. **Padrões a aposentar:** o que contradiz a marca, quebra acessibilidade ou é default genérico sem decisão.
+6. **Leitura atual dos botões:** V/M/D que a interface pratica hoje, para que "preservar" tenha referência numérica.
+7. **Linha de base de busca:** URLs, títulos, descrições, estrutura de títulos, dados estruturados e redirecionamentos. A migração de URL é o maior risco de um redesign; o detalhamento de busca segue com `crow-seo` quando disponível.
+8. **Ganhos de acessibilidade já feitos:** foco visível, textos alternativos, operação por teclado, contraste, regiões live, preferências respeitadas. Redesign não regride nenhum deles; o estado anterior é o piso.
+9. **Estados existentes:** carga, vazio, erro, sucesso, desabilitado, seleção. O que existe e funciona é mantido ou melhorado; o que falta entra na matriz de [componentes e estados](componentes-e-estados.md).
+10. **Eventos de analytics** amarrados a elementos, para não quebrar medição.
+
+### O que se preserva
+
+Arquitetura de informação, slugs, âncoras e rótulos de navegação; as cores da marca extraídas antes de qualquer decisão de cor; a voz do texto; os ganhos de acessibilidade; os eventos de analytics. Refinamento preserva identidade, comportamento, texto e tudo que está fora do escopo pedido.
+
+### O que nunca muda sem aprovação explícita
+
+Estrutura de URL; rótulos da navegação primária; nomes e ordem de campos de formulário; logo e wordmark; textos legais, de consentimento e de cookies. Trocar texto factual ou acrescentar afirmação também exige perguntar antes.
+
+### Alavancas, em ordem de risco crescente
+
+1. Tipografia.
+2. Espaçamento e ritmo.
+3. Cor.
+4. Camada de movimento.
+5. Recomposição do hero e das seções-chave.
+6. Troca total de blocos.
+
+Árvore de decisão: se arquitetura, conteúdo e busca estão saudáveis, a evolução dirigida pelas quatro primeiras alavancas costuma entregar a maior parte do valor com bem menos risco que um redesign total (heurística, não medida: cede quando a dívida está justamente na composição); se há dívida estrutural (arquitetura confusa, componentes incoerentes), refaça preservando o conteúdo; se a marca é nova, é greenfield.
+
+## Ler a identidade do código
+
+Quando falta documento, a identidade é lida do código como autoridade visual, só para decidir o redesign; o resultado entra no contrato como evidência, não vira DESIGN.md por aqui (documentar a partir do código é da `crow-interface`, ver [documento do sistema](documento-do-sistema.md)). Procure nesta ordem de prioridade e registre nome, valor e arquivo de definição de cada achado:
+
+1. **Custom properties CSS:** declarações com prefixos como `--color-`, `--font-`, `--spacing-`, `--radius-`, `--shadow-`, `--ease-`, `--duration-` (e o prefixo próprio do projeto), em folhas globais, de tema ou de app.
+2. **Tema Tailwind:** na v3, o bloco `theme.extend` de `tailwind.config.{js,ts,cjs,mjs}` (cores, `fontFamily`, `spacing`, `borderRadius`, `boxShadow`); na v4, os blocos `@theme` no CSS. A versão vem do `package.json` e da sintaxe (`@tailwind base` é v3; `@import "tailwindcss"` com `@theme` é v4).
+3. **Temas CSS-in-JS:** styled-components, emotion, vanilla-extract, stitches; arquivos como `theme.ts` ou `tokens.ts`.
+4. **Arquivos de tokens:** `tokens.json`, `design-tokens.json`, saída de Style Dictionary, formato DTCG.
+5. **Biblioteca de componentes:** botão, card, input, navegação, diálogo principais; APIs de variante e estilos default.
+6. **CSS global:** a folha raiz costuma ter a tipografia e as cores base.
+7. **Estilos computados da interface renderizada:** quando há ferramenta de navegador disponível no ambiente, amostre `body`, `h1`, `a`, `button` e cards; isso pega valores que os tokens não declaram. É evidência observada; diga de onde veio.
+
+O que vira sistema é o que se repete com a mesma intenção (como regra de bolso, três ou mais usos). Um valor que aparece uma vez é one-off: fica de fora do sistema e, se estiver errado, vai para a lista de drift. Organize o extraído por papel, não por ordem de hex: cores em primária, secundária, terciária e neutras (com um acento só, primária e neutras; não invente secundária); tipografia pelos papéis do sistema (display, headline, title, body, label, caption, code; ver [sistema de tokens](sistema-de-tokens.md)) com famílias, pilhas de fallback e razão da escala; vocabulário de elevação (projeto plano com camadas tonais é resposta válida, declarada); por componente, forma, cor, hover e foco, padding interno; layout com grade, container, breakpoints, ritmo e densidade; formas com raio, borda e recorte recorrentes.
+
+Mantenha o espaço de cor que o projeto trata como canônico (hex, `rgb()`, `oklch()`): não divida a fonte de verdade convertendo metade dos valores. Converter para OKLCH é decisão de sistema, com versão e changelog.
+
+Depois de ler, passe os achados que o redesign vai manter para o formato de [sistema de tokens](sistema-de-tokens.md) e valide; contraste reprovado num valor existente é achado a relatar com a razão medida e a proposta, não algo a trocar em silêncio.
+
+## Drift: quatro tipos
+
+Quando telas divergem do sistema (ou umas das outras), classifique cada divergência, porque cada tipo pede uma ação diferente:
+
+- **Token ausente:** o mesmo valor literal se repete em vários lugares sem token. Ação: criar o token no nível certo (normalmente semântico) e migrar os usos.
+- **Implementação avulsa:** um componente do sistema foi reimplementado localmente (um botão próprio numa tela). Ação: migrar para o componente do sistema, ou, se a variante é legítima, acrescentá-la ao sistema.
+- **Desencontro conceitual:** o mesmo conceito tem nomes ou tratamentos diferentes (sucesso verde numa tela e azul noutra; "Arquivar" e "Mover para arquivo" para a mesma ação), ou o mesmo nome significa coisas diferentes. Ação: decidir o conceito canônico com o dono, criar alias para o nome antigo com prazo de depreciação.
+- **Defeito local:** um erro pontual numa tela, sem padrão. Ação: correção local.
+
+Drift nunca é reparado como efeito colateral de outra tarefa: ele é relatado com local, evidência e ação proposta, e a correção acontece no escopo autorizado. O contrato registra a classificação; a execução da correção e a consolidação de componentes são de `crow-interface` e `crow-frontend`.
+
+## Documento desatualizado
+
+Quando há documento do sistema, mas o código andou, compare os dois e relate contradições concretas (o documento diz raio de 8px, os componentes usam 12px), não contagem de commits, que não prova divergência. O dono decide qual lado vale; o documento é atualizado por versão, com changelog. Antes de um redesign grande, vale capturar o estado atual num documento datado, como referência do que existia; essa captura a partir do código é da `crow-interface`.
+
+## Redesign num sistema oficial
+
+Se o produto usa um sistema oficial (Fluent, Material, Carbon, Polaris e outros listados em [direção estética](direcao-estetica.md)), o redesign acontece dentro dele: tokens do sistema, temas suportados, componentes oficiais. Sobrescrever a maior parte dos tokens de um sistema importado é sinal de que a direção pede outro caminho, e isso é decisão explícita, não deriva. Um sistema por projeto também vale durante a migração: a convivência temporária de dois é registrada com prazo e plano de remoção.

package/skills/crow-design/references/registro-premium.md

@@ -0,0 +1,154 @@
+<!-- Derivado de Impeccable (Apache-2.0, Paul Bakaus), design-taste-frontend e high-end-visual-design (MIT, Leonxlnx), design-system (MIT, claudekit) e platform-design-skills (MIT, ehmo); reescrito e modificado pelo Crow em 2026-11-13. Ver ../NOTICE.md. -->
+# Registro premium: técnicas de alto acabamento com guarda-corpos
+
+Leia quando o dono ou o brief pedir explicitamente aparência premium, de agência ou de alto acabamento, ou quando a direção comprometida em [direção estética](direcao-estetica.md) cair no registro ousado com essa intenção. Sem esse pedido, nada daqui entra por default.
+
+## O que o registro premium é
+
+É um parâmetro explícito do contrato, não um nível de qualidade. Um contrato no registro seguro bem executado não é "menos" que um premium; é outra escolha. O premium troca densidade e velocidade por espaço, profundidade e coreografia, e isso tem custo: página mais alta, mais peso de mídia, mais movimento para governar e mais fallbacks para especificar. Por isso ele é declarado na leitura, nunca presumido.
+
+Não há persona, faixa de preço de estúdio nem raciocínio escondido: vibe, composição e técnicas aparecem nas decisões do contrato com motivo ligado ao brief ou à marca. Variação existe só contra defaults genéricos; um produto com marca e sistema segue a marca e o sistema, e a mesma composição se repete quando é a mesma função. Todas as regras das outras referências continuam valendo aqui dentro: contraste, foco, movimento reduzido, alvos, conteúdo real. Fallback não é "básico demais"; é parte do critério de pronto.
+
+## Vibes de partida
+
+Três pontos de partida, nunca obrigatórios. Cada um cede à marca e ao brief, e cada um encosta num cluster de interface gerada, por isso vem com a correção que o mantém longe dele (clusters em [direção estética](direcao-estetica.md) e [anti-padrões](anti-padroes.md)).
+
+- **Vidro etéreo** (SaaS, IA, tecnologia). Origem: fundo quase preto (ordem de `#050505`), malha de gradientes radiais com orbs coloridas, cards muito escuros translúcidos com desfoque forte (ordem de 40px) e hairlines brancas a 10%, grotesca geométrica larga. Correção: o vidro fica em camada fixa (nav, overlay); cards de conteúdo usam superfície opaca tingida; orbs roxas são o default "de IA" e só entram quando a marca é roxa; quase preto com um acento brilhante é o cluster 2, então o acento e a malha saem da marca, não do gênero; hairline a 10% sobre quase preto dá cerca de 1.2:1 e só serve como decoração de superfície não interativa.
+- **Luxo editorial** (lifestyle, imóveis, agência). Origem: cremes (ordem de `#FDFBF7`), verde-sálvia, marrom-espresso, serifa variável de alto contraste em títulos enormes, grão a 3%. Correção: creme com serifa e acento quente é o cluster 1; entra só quando o assunto é genuinamente editorial, de luxo ou de herança, ou quando a marca já usa, e a serifa segue o critério de [tipografia](tipografia.md). Fora disso, a paleta sai da marca.
+- **Estruturalismo suave** (consumo, saúde, portfólio). Origem: fundo prata claro ou quase branco, grotesca em peso alto e tamanho grande, componentes flutuando com sombra ambiente muito difusa. Correção: a sombra é tingida pelo matiz da superfície, nunca preta pura, e o limite de controle interativo atinge 3:1 por borda, não só por sombra.
+
+## Composições
+
+- **Bento assimétrico.** Uma célula grande (8 colunas por 2 linhas numa grade de 12) ao lado de células de 4 colunas empilhadas. N itens geram N células, sem célula vazia; duas ou três células com fundo diferente (imagem, cor de marca, padrão, tint) dão ritmo e o resto fica neutro. Colapso móvel: uma coluna, todas as células com a mesma largura, intervalo de 24px.
+- **Cascata em profundidade (Z-Axis Cascade).** Cards sobrepostos com rotação leve, de −2deg e 3deg. Abaixo do ponto de colapso (tipicamente perto de 768px), sem rotação e sem margem negativa: a sobreposição rouba área de toque e esconde conteúdo.
+- **Divisão editorial (Editorial Split).** Tipografia ocupando metade da largura; do outro lado, mídia em pílulas horizontais ou cards escalonados. No celular, empilhado em largura total; rolagem horizontal só permanece com `scroll-snap`, acesso por teclado a todos os itens e fallback empilhado quando falta JavaScript.
+
+- **Hero com imagem de fundo e fade.** Composição assimétrica sobre uma imagem real de fundo que se dissolve na cor de fundo da página (gradiente da imagem para o token `surface.canvas` do modo, refeito no claro e no escuro, para não cortar numa faixa de outra cor). O texto sobre a imagem passa 4.5:1 (3:1 se grande) **no ponto mais desfavorável da imagem**, em cada modo; quando não passa, entra scrim tingido ou o texto vai para a região já dissolvida. A imagem tem origem e licença registradas, e com transparência reduzida ou sem a imagem o texto continua legível sobre o fundo.
+
+Em qualquer composição: altura cheia com `dvh` ou `svh` descontando o cromo persistente, nunca `100vh`; o colapso móvel é declarado por seção; a ordem do DOM acompanha a ordem visual.
+
+## Técnicas
+
+Cada técnica traz onde entra, onde não entra e o guarda-corpo.
+
+### Moldura dupla (Double-Bezel)
+
+Uma casca externa envolve um núcleo, como um objeto montado num suporte.
+
+- **Casca:** fundo com alfa muito baixo (preto a 5% no claro, branco a 5% no escuro), contorno de 1px (preto a 5% no claro; branco a 10% no escuro), padding de 6px ou 8px, raio de 2rem.
+- **Núcleo:** fundo próprio opaco, brilho interno `inset 0 1px 1px` em branco a 15%, raio concêntrico `calc(2rem - 0.375rem)` (raio externo menos o padding da casca; com 8px de padding, `calc(2rem - 0.5rem)`).
+- **Onde entra:** mídia de destaque e hero. Técnica opcional.
+- **Onde não entra:** **nunca em input** (duas bordas confundem o limite do campo; o campo tem uma borda única com 3:1) e nunca em todo card: card só existe quando a elevação comunica hierarquia.
+- **Guarda-corpo:** o contorno da casca fica em torno de 1.1:1 e é decorativo; se o elemento é interativo, o limite real do controle precisa de 3:1. Em `forced-colors: active`, a casca vira borda real de 1px.
+
+### Botão-ilha
+
+Botão em pílula (raio pelo token `radius.full`, 9999px) com padding de 24px por 12px; o ícone final (seta diagonal ou equivalente) fica dentro de um círculo próprio de 32px, centrado, encostado no padding do lado final. Fundo do círculo: preto a 5% no claro, branco a 10% no escuro, ou o token opaco equivalente. O rótulo é texto com 4.5:1; o círculo precisa de 3:1 só quando é o único indicador de ação. Em idioma RTL, o ícone direcional espelha e o círculo vai para o outro lado (propriedades lógicas). O alvo total cumpre 44×44 em toque.
+
+### Macro-espaço
+
+Seções respiram mais que no registro seguro, mas o valor sai dos tokens de densidade, nunca de um mínimo fixo por seção: o premium usa a faixa arejada da tabela canônica (DENSIDADE 1–3, padding de seção de 128–192px, 8–12rem, no desktop, e menos no celular pelo token do breakpoint). Uma tabela, um formulário ou uma lista de preços dentro da página premium mantêm a densidade que a tarefa exige. Ver [sistema de tokens](sistema-de-tokens.md) e [layout e espaço](layout-e-espaco.md).
+
+### Rótulo em pílula acima do título
+
+Pílula pequena (raio cheio, padding de 4px por 12px) com texto em caixa alta espaçada antes de um título. É exceção, não ritual: a contagem é semântica (rótulo imediatamente acima de um título de seção), na ordem de um a cada três seções, o hero incluído; texto de pelo menos 12px, tracking positivo só em escrita latina, contraste AA.
+
+### Easing e duração por propósito
+
+Curvas customizadas, escolhidas pelo propósito: entrada com ease-out longo (`cubic-bezier(0.16, 1, 0.3, 1)` ou `cubic-bezier(0.32, 0.72, 0, 1)`), saída com ease-in e mais curta que a entrada, scrub ligado à rolagem com easing linear, mola só onde há gesto ou interrupção. Banir `linear` ou `ease-in-out` em bloco quebra scrub e indicadores contínuos. Entrada focal de 500–800ms só em Persuadir e Experienciar; estados de controle seguem 100–300ms. Toda transição lista as propriedades. Tokens em [movimento](movimento.md).
+
+### Navegação em ilha flutuante e menu em overlay
+
+O padrão de navegação sai da arquitetura de informação e do conteúdo, não da estética.
+
+- **Ilha flutuante:** pílula de vidro (raio `radius.full`; vidro pela receita canônica em [superfície e profundidade](superficie-e-profundidade.md)) afastada do topo (ordem de 24px), centrada, com largura do conteúdo. Funciona com poucos itens curtos. Com muitos itens ou rótulos traduzidos longos (alemão e português crescem de 30 a 40%), ela estoura: preveja a largura com o rótulo mais longo de cada idioma e defina o ponto em que vira menu. A barra fixa de ponta a ponta continua sendo padrão válido e acessível.
+- **Menu em overlay de tela cheia:** fundo com desfoque forte e superfície a 80% de opacidade (ou opaca sob transparência reduzida), links com revelação mascarada (de 3rem abaixo e opacidade zero para a posição final, atrasos escalonados de 100, 150 e 200ms) e o ícone de três linhas virando X por rotação de ±45deg; com movimento reduzido, o painel aparece por opacidade, sem deslocamento nem atraso. A especificação de acessibilidade (nome e estado do botão, foco, diálogo modal com fundo inerte, Esc, retorno de foco, rolagem travada) é a canônica de [componentes e estados](componentes-e-estados.md), na seção de menus, disclosure e navegação recolhida; nada aqui a substitui.
+
+### Hover magnético e resposta física
+
+Só com MOVIMENTO acima de 5 e brief premium, lúdico ou de agência. Referência de valores: pressão com `scale(0.98)`; ícone interno deslocando 4px na direção da ação e 1px para cima no hover, com escala de 1.05. O efeito é melhoria: o controle tem estado de foco equivalente ao hover (`:focus-visible` produz a mesma resposta visual, sem depender de ponteiro), funciona igual por toque, e fica estático com movimento reduzido ou em `pointer: coarse`. Pressão desce ou comprime, nunca sobe.
+
+### Entrada por rolagem
+
+Melhoria progressiva: o conteúdo é visível por padrão e o reveal só se aplica com JavaScript ativo e `prefers-reduced-motion: no-preference`. Anima só `transform` e `opacity`, com deslocamento curto (16–24px) e duração de entrada focal (500–800ms); desfoque, se existir, é estático. Disparo por Intersection Observer, scroll-driven animations dentro de `@supports` ou a biblioteca que o projeto já usa; nunca listener de scroll. Nem todo elemento entra animado: o reveal marca hierarquia (o que chega primeiro), não decora tudo.
+
+### Vidro e desfoque
+
+`backdrop-filter` só em elemento fixo ou sobreposto (nav, overlay, legenda sobre mídia), nunca em container que rola nem em área grande de conteúdo, onde o custo de composição pesa em celular. A receita de vidro e a de aproximação de Liquid Glass, com fallbacks por modo e `forced-colors`, são as canônicas de [superfície e profundidade](superficie-e-profundidade.md).
+
+### Grão e ruído
+
+Textura estática (imagem pequena repetida ou gerada uma vez) num pseudo-elemento `position: fixed; inset: 0; pointer-events: none`, na posição de grão da escala de camadas, com opacidade na ordem de 3%. Nunca em container que rola, nunca animada. Grão decorativo gerado por filtro de turbulência em tempo real não entra; distorção funcional por filtro só com orçamento de desempenho declarado.
+
+### Camadas
+
+Nada de z-index arbitrário (`50`, `9999`): a escala é token e cada técnica ocupa uma posição nomeada nela; a escala canônica está em [superfície e profundidade](superficie-e-profundidade.md).
+
+### Ícones
+
+Uma biblioteca e uma espessura de traço que acompanha o peso do texto ao lado. Traço ultrafino em tamanho pequeno perde leitura; ícone que carrega significado sozinho precisa de 3:1 e nome acessível.
+
+## Regras de desempenho
+
+- Anima só `transform` e `opacity`; filtros e desfoques ficam estáticos.
+- `will-change` só durante a animação, retirado depois.
+- `backdrop-filter` só em camada fixa ou sobreposta.
+- Grão estático em pseudo-elemento fixo, nunca em container que rola.
+- z-index só da escala tokenizada.
+- Mídia e bibliotecas de movimento abaixo da dobra carregam sob demanda.
+- Meta da experiência entregue: LCP abaixo de 2.5s, INP abaixo de 200ms, CLS abaixo de 0.1, medidos por quem implementa no dispositivo-alvo.
+
+## Vocabulário de padrões
+
+Nomes de referência para conversar sobre a direção. Nenhum é obrigatório; todos passam pelos guarda-corpos acima e por [movimento](movimento.md) e [componentes e estados](componentes-e-estados.md).
+
+- **Hero:** divisão assimétrica, manifesto editorial, máscara de vídeo ou mídia, tipografia cinética, revelação em cortina, hero preso à rolagem.
+- **Navegação:** ampliação tipo dock, botão magnético, menu gooey, ilha dinâmica, menu radial contextual, discagem rápida flutuante, mega menu.
+- **Layout:** bento, masonry, grade cromática, tela dividida com rolagem, seções empilhadas fixas.
+- **Cards:** inclinação com parallax, borda com holofote, painel de vidro, folha holográfica, pilha deslizável, modal que se transforma.
+- **Rolagem:** pilha fixa, rolagem horizontal sequestrada, sequência quadro a quadro, zoom com parallax, caminho de progresso, transição líquida.
+- **Galerias:** cúpula, coverflow, arrastar para mover, acordeão de imagens, rastro de imagem no hover, glitch.
+- **Texto:** marquee cinético, revelação por máscara, embaralhamento, texto em caminho circular, contorno em gradiente, grade tipográfica cinética.
+- **Micro:** botão com partículas, puxar para atualizar líquido, skeleton com brilho, botão sensível à direção do hover, ondulação no clique, desenho de linha em SVG, fundo em malha de gradiente, profundidade com desfoque de lente.
+
+Guarda-corpos do vocabulário: no máximo um marquee por página; rolagem horizontal sequestrada tem fallback nativo (rolagem horizontal com `scroll-snap` ou empilhamento) com movimento reduzido ou sem JavaScript, e o teclado alcança todos os itens; pilha fixa usa um único mecanismo de fixação (CSS sticky ou o pin da biblioteca, nunca os dois no mesmo elemento); loop com mais de 5 segundos é pausável e para fora da tela e com movimento reduzido; interação de ponteiro (radial, rastro, magnético) tem equivalente por teclado e toque; cursor customizado é default recusável (ver [anti-padrões](anti-padroes.md)): só em Experienciar, com o cursor do sistema preservado sobre controles e texto e sem atraso de seguimento sob movimento reduzido.
+
+## Critérios de aceite do registro premium
+
+Cada item é observável no contrato ou na entrega, e entra além de [aceite e pré-voo](aceite-e-pre-voo.md):
+
+1. **Nenhum default genérico sem decisão:** cada item do catálogo de [anti-padrões](anti-padroes.md) presente na direção tem exceção registrada com motivo.
+2. **Vibe e composição nomeadas** na leitura ou no contrato de direção, com o motivo ligado ao brief ou à marca, e sem cair num cluster sem pedido.
+3. **Moldura dupla só em mídia e hero:** nenhum input e nenhum card comum com casca dupla; raio interno = raio externo − padding.
+4. **Botão-ilha conferido:** rótulo com 4.5:1, círculo com 3:1 quando é o único indicador, ícone espelhado em RTL, alvo de 44×44 em toque.
+5. **Espaço de seção vem de token de densidade** declarado; nenhuma seção com padding fixo fora da escala.
+6. **Easing e duração declarados por propósito** (entrada, saída, scrub, mola), nenhum `transition: all`.
+7. **Conteúdo visível sem JavaScript e com movimento reduzido:** desligar JS e ativar `prefers-reduced-motion: reduce` não esconde nem corta nada; o reveal é melhoria.
+8. **Colapso móvel declarado por seção**, sem rotação, sobreposição ou estouro horizontal abaixo do ponto de colapso.
+9. **Só `transform` e `opacity` animados:** nenhum filtro, desfoque, `width`, `height`, `top` ou margem animados.
+10. **Desfoque só em camada fixa ou sobreposta**, com fallback de transparência reduzida por modo e borda em `forced-colors`; contraste verificado nos quatro cenários.
+11. **Acabamento verificável, não impressão:** contraste por modo e estado, foco visível, nav e menu com a especificação de acessibilidade de [componentes e estados](componentes-e-estados.md), mídia com origem e licença registradas e conteúdo real ou rotulado; "parece caro" não é critério.
+
+## O que não herdamos da origem, e por quê
+
+As técnicas acima vêm de um catálogo de estética de agência que tinha falhas. Corrigido aqui:
+
+- **Sem movimento reduzido e "nada aparece estático":** reveal virou melhoria progressiva; movimento reduzido vale sempre.
+- **Desfoque animado na entrada** contra a própria regra de animar só transform e opacity: desfoque estático ou nenhum.
+- **Vidro em cards de conteúdo que rolam** contra a regra de desfoque só em camada fixa: cards opacos tingidos.
+- **z-index fixo ao lado da proibição de z-index arbitrário:** escala tokenizada.
+- **Presumir fontes comerciais disponíveis e reprovar Inter, Roboto, Arial, Open Sans e Helvetica:** fonte da marca primeiro, licença declarada, lista de fontes como "não escolha por reflexo".
+- **Eyebrow antes de todo título, em 10px:** exceção rara, contagem semântica, ≥12px, AA.
+- **Paletas de creme com espresso e de orbs roxas como vibe:** paleta da marca e do brief; esses clusters só com pedido.
+- **Serifa enorme como default editorial:** serifa só pelo critério de tipografia.
+- **"Nunca repetir layout":** variação só contra defaults genéricos; produto e sistema existentes mantêm consistência.
+- **Moldura dupla obrigatória em todo card, input e grade:** técnica opcional para mídia e hero, nunca em input.
+- **Hairlines de 1.1–1.2:1 como limite de componente:** limite interativo com 3:1.
+- **Barra fixa de ponta a ponta proibida e ilha de largura fixa ao conteúdo:** navegação escolhida pela arquitetura de informação, com largura prevista por idioma.
+- **`linear` e `ease-in-out` proibidos:** easing por propósito, scrub linear.
+- **"Não inclua fallbacks genéricos":** fallbacks fazem parte do critério de pronto.
+- **Menu overlay sem `aria-expanded`, foco, Esc nem rótulo:** especificação canônica em componentes e estados.
+- **Nenhum modo escuro estruturado, i18n, estados, formulários ou conteúdo real:** o catálogo vive sob as regras do pacote inteiro.
+- **Persona, preço de estúdio e "pensamento silencioso":** critérios observáveis e leitura declarada.
+- **Ícones ultrafinos como regra:** espessura acompanha o peso do texto, 3:1.
+- **Padding de seção mínimo fixo em toda seção:** tokens de densidade.