Html

O frontend-slides ajuda você a criar apresentações em HTML ricas em animação do zero ou convertendo arquivos PowerPoint. Use o skill frontend-slides para palestras, pitch decks, workshops, demos internas e frontend-slides para UI Design quando quiser exploração visual, saída no navegador sem dependências e slides que caibam em uma única viewport.

Use ckm:slides para transformar ideias soltas em apresentações HTML estratégicas com estratégias de slides, fórmulas de copywriting, padrões de layout e template pronto para Chart.js.

A skill optimize diagnostica e corrige problemas de performance de UI em velocidade de carregamento, renderização, animações, imagens e tamanho do bundle. Use quando precisar de um guia estruturado do optimize para otimização de performance, com troubleshooting orientado por métricas para experiências web lentas, travadas ou pouco fluidas.

baoyu-post-to-wechat é uma skill de publicação para Contas Oficiais do WeChat, com fluxos via navegador e API para artigos e posts de imagem e texto. Suporta entrada em Markdown, HTML e texto simples, extração de título e resumo com base em frontmatter, conversão de Markdown para WeChat, tratamento de imagens e verificações de ambiente para automação com perfil do Chrome.

baoyu-markdown-to-html converte Markdown em HTML com estilo para publicação no padrão WeChat. Oferece suporte a temas, destaque de código, matemática, PlantUML, notas de rodapé, tratamento de imagens e citações opcionais de links, com execução em tempo de execução via bun ou npx -y bun.

guizang-ppt-skill é uma skill de apresentação para criar slide decks em um único arquivo HTML, com estética de revista editorial × e-ink. Ela ajuda você a montar decks com navegação horizontal por swipe para lançamentos, palestras e demos, com tipografia forte, fundos em WebGL e layouts reutilizáveis. Use o guia do guizang-ppt-skill para gerar decks mais rápido e de forma repetível.

A hyperframes-registry ajuda você a instalar e conectar itens reutilizáveis do registro HyperFrames com menos tentativa e erro. Use-a para executar `hyperframes add`, identificar blocos vs. componentes, mesclar snippets, integrar blocos ao `index.html` e seguir os mapeamentos de caminho do `hyperframes.json` para implementação de design e descoberta do registro.

gsap é uma referência prática de animação para composições HyperFrames. Ele ajuda você a escolher entre `gsap.to()`, `from()`, `fromTo()` e `gsap.timeline()`, e então aplicar os `vars`, easing, stagger, transforms e padrões de performance corretos. Use este guia de gsap quando precisar de motion pronto para implementação em animações de entrada, transições e efeitos de design reutilizáveis.

hyperframes é uma skill de fluxo de trabalho para criar composições de vídeo baseadas em HTML no HyperFrames. Use-a para cards de título, sobreposições, legendas, narração, movimento reativo ao áudio e transições de cena quando precisar de hyperframes estruturados e orientados por código para Edição de Vídeo. Ela prioriza decisões de layout, tempo e animação em vez de pedidos genéricos de vídeo só com prompt.

hyperframes-cli é a skill de CLI do HyperFrames para criar, validar, pré-visualizar e renderizar projetos de vídeo no terminal. Use-a para estruturar projetos, fazer lint de composições, pré-visualizar edições, transcrever, gerar TTS, executar diagnósticos e repetir fluxos de uso do hyperframes-cli em workflows de edição de vídeo com apoio de IA.

infocard ajuda você a criar cards informativos em estilo editorial no Markdown, incorporando HTML e CSS diretamente na página. É útil para resumos, panoramas de tópicos, painéis de destaque, cards de eventos, blocos de comparação e outros conteúdos pensados para UI Design que precisam parecer intencionalmente bem projetados. Não é indicado para diagramas nem visualização de dados; para isso, use uma skill dedicada a diagramas ou gráficos.

Architecture é uma skill de diagramas para criar visões de sistemas em camadas em HTML e CSS, com seções codificadas por cor, layouts em grade e hierarquia clara de componentes. É ideal para diagramas de usuário/aplicação/dados/infraestrutura, mapas de microsserviços e arquitetura corporativa. Use-a em vez de prompts genéricos quando quiser uma saída de architecture rápida, editável e pronta para Diagramming.

ui-web ajuda você a projetar e estilizar componentes de UI web com verificações de WCAG 2.1 AA, alto contraste, controles visíveis e padrões Tailwind amigáveis ao modo escuro. Use este skill ui-web para front ends em estilo React quando precisar de orientação prática de UI Design que melhore a acessibilidade e reduza a dúvida na hora de decidir.

web-design-guidelines é um guia agnóstico de framework para criar, revisar e corrigir interfaces web acessíveis e responsivas. Use-o para HTML semântico, checagens de WCAG 2.2, formulários, estados de foco, contraste, modo escuro, desempenho e decisões de layout em HTML, CSS e JS.

Crie diagramas de arquitetura polidos, com tema escuro, como arquivos HTML independentes com SVG embutido. A skill architecture-diagram foi feita para diagramas de arquitetura de sistemas, infraestrutura, cloud, segurança e topologia de rede, oferecendo uma visualização pronta para o navegador com cores semânticas, relações claras entre componentes e um estilo técnico consistente.

O pptx-posters ajuda a criar pôsteres de pesquisa em HTML/CSS para entrega compatível com PowerPoint, exportação em PDF ou conversão para PPTX. Use esta skill somente quando o usuário precisar explicitamente de um pôster em PPTX ou de edição no PowerPoint. Para pôsteres de pesquisa padrão, o latex-posters costuma ser a opção mais adequada.

A skill redesign-existing-projects eleva sites e apps existentes a um nível premium. Ela faz uma auditoria do design atual, identifica padrões genéricos de IA e aplica uma implementação de design sofisticada sem quebrar a funcionalidade. Funciona com qualquer framework CSS ou com CSS puro.

speed abre um leitor de RSVP baseado no navegador que exibe o texto uma palavra por vez, com destaque de ORP no estilo Spritz. Use-o para revisar rapidamente respostas de assistentes, artigos ou notas, com um fluxo previsível que remove markdown e abre um arquivo local de leitura.

frontend-slides é uma skill do Claude Code para criar apresentações HTML ricas em animação ou converter arquivos PPT/PPTX em decks de slides prontos para o navegador. Use quando precisar de um deck polido rapidamente, quiser uma saída sem dependências e preferir explorar estilo visual em vez de fazer suposições abstratas de design. Inclui orientações de uso do frontend-slides, notas de instalação e dicas de fluxo de trabalho.

Use o wp-block-themes para trabalho com temas de blocos do WordPress: `theme.json`, templates, template parts, patterns, variações de estilo e depuração no Site Editor. Ele foi feito para implementação de design, fluxos de instalação e uso, e para resolver com menos suposições problemas de hierarquia de estilos, overrides, cache e personalização do usuário.

A skill wp-block-development ajuda você a criar, atualizar e depurar blocos do WordPress Gutenberg com menos tentativa e erro. Use para metadados do block.json, register_block_type(_from_metadata), atributos e serialização, supports, renderização dinâmica, deprecations e ferramentas de build. É especialmente útil em tarefas de Frontend Development que exigem paridade entre editor e front-end.

Guia da netlify-forms para lidar com formulários HTML no Netlify. Use para adicionar formulários de contato, feedback, upload de arquivos, filtragem de spam, envios via AJAX e uma página personalizada de agradecimento, sem código no servidor. Útil para fluxos de Backend Development e apps renderizados em JS que precisam de detecção de formulários no build.