overdrive
Crie interfaces web extraordinárias com efeitos de última geração
Interfaces web padrão parecem estáticas e previsíveis. O Overdrive as transforma com transições cinematográficas, visuais acelerados por GPU e animações baseadas em física que surpreendem e encantam os usuários.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "overdrive". Adicione uma transição cinematográfica ao abrir um modal de detalhes do produto a partir de um card em grade
Resultado esperado:
Implementação de View Transition com morfismo de elemento compartilhado: a imagem do produto se expande da miniatura em grade para o tamanho completo, o título desliza para cima da posição do card e o fundo aparece com fade. O fallback cross-browser usa transforms CSS e transições de opacidade.
A utilizar "overdrive". Faça esta tabela de dados lidar com 50k linhas sem jank
Resultado esperado:
Implementação de virtual scrolling que renderiza apenas as 20-30 linhas visíveis, usa CSS contain para isolamento de layout e mantém a posição do scroll. Atinge 60fps em laptops de gama média com seleção e ordenação instantâneas de linhas.
Auditoria de Segurança
SeguroAll static analysis findings are false positives. The skill is a Markdown documentation file containing instructions for AI assistants on creating frontend UI effects. Detected patterns (backticks, code references) are Markdown syntax and inline code examples, not executable commands. No network access, file system operations, external command execution, or data exfiltration patterns exist. The skill teaches standard browser APIs (WebGL, WebGPU, View Transitions, Canvas) for client-side visual effects.
Pontuação de qualidade
O Que Você Pode Construir
Aprimoramento de Portfólio Criativo
Adicione revelações cinematográficas acionadas por scroll, sistemas de partículas e fundos com shaders para tornar um site de portfólio memorável e expressivo.
Otimização de Dashboards Empresariais
Implemente virtual scrolling para tabelas de dados grandes, gráficos acelerados por GPU e transições de dados suaves que mantêm 60fps com conjuntos de dados massivos.
Polimento de Produto SaaS
Aprimore dialogs, formulários e navegação com física de mola, atualizações otimistas de UI e transições em morfismo que parecem nativas e responsivas.
Tente Estes Prompts
Adicione uma View Transition a esta página que transforma o item da lista na visualização de detalhes quando clicado. Inclua um fallback para navegadores sem suporte.
Crie uma animação acionada por scroll para a seção hero onde o parallax do fundo rola na metade da velocidade e o texto aparece em 30% da posição de scroll. Use apenas CSS com fallback em JS.
Construa uma tabela com virtual scrolling que renderiza apenas as linhas visíveis de um conjunto de dados de 100.000 linhas. Target 60fps de performance de scroll com headers fixos e seleção de linhas.
Crie um sistema de partículas WebGL interativo que responde ao movimento do mouse. Inclua uma implementação leve baseada em OGL com fallback elegante Canvas 2D para navegadores sem suporte.
Melhores Práticas
- Sempre siga o Context Gathering Protocol - efeitos extraordinários devem combinar com a personalidade e objetivos do projeto
- Proponha 2-3 direções diferentes com trade-offs antes da implementação para evitar esforço desalinhado
- Itere visualmente com automação de navegador - efeitos raramente ficam certos na primeira implementação
- Target 60fps e respeite prefers-reduced-motion como um requisito de acessibilidade inegociável
- Forneça fallbacks funcionais para todas as APIs bleeding-edge - a experiência base ainda deve ser boa
Evitar
- Usar ambição técnica para mascarar fundamentos de design fracos - corrija o design primeiro
- Camadas múltiplas de momentos extraordinários competindo - foco cria impacto, excesso cria ruído
- Entregar efeitos que causam jank em dispositivos de gama média ou sem alternativas reduced-motion
- Ignorar o contexto - sistemas de partículas em páginas de configurações são vergonhosos, não impressionantes