🚀 Construindo Sua Primeira Skill

O parágrafo de abertura define a saída em uma frase: uma página HTML interativa, autossuficiente, com tema claro/escuro, cartões de voo, agenda dia a dia e checklists que salvam estado.

A primeira frase de uma skill é um contrato. Ela diz ao Claude — e a você — exatamente o que será entregue, evitando saídas genéricas.

Saída concreta · "página, não documento" · self-contained · interatividade como diferencial.

Uma sequência de 4 passos que o Claude DEVE percorrer antes de produzir qualquer coisa: detalhes básicos, integrações, detalhes profundos e confirmação.

É o passo marcado como "CRITICAL". Coletar dados reais é o que transforma um template genérico num documento que parece feito sob medida.

Discovery · "ask before assuming" · 4 passos · confirmar antes de gerar.

O Passo 2 pede para checar e-mail, agenda, Drive, mensagens e URLs. Se o usuário autorizar, a skill usa ferramentas MCP (Gmail, Calendar, Drive) para puxar dados reais.

É o salto de "gerador de texto" para "assistente". Confirmações de voo, reservas e eventos entram sozinhos no documento.

MCP · "ask every time" · permissão · dados reais > placeholder.

A seção define o formato: um único HTML com CSS e JS inline, imagens em base64 ou emoji, nenhuma dependência externa além da fonte. Salvo com nome padronizado.

Restrições explícitas de saída evitam que o Claude invente dependências, links quebrados ou arquivos espalhados.

Self-contained · inline CSS/JS · base64 · convenção de nome do arquivo.

Uma lista numerada de 13 seções sugeridas — hero, stats, mapa de rota, voos, hotel, agenda, orçamento, checklists, rodapé — marcadas como "adapt per trip".

Mostra como dar uma "planta" sem engessar: o Claude escolhe os blocos relevantes àquela viagem em vez de despejar todos.

Lista de blocos · adaptação por caso · ordem sugerida · opcional vs obrigatório.

Seis princípios curtos que resumem o espírito da skill: dados reais primeiro, perguntar antes de assumir, um arquivo, sensação de app, interativo > estático, codificar cores.

Princípios resolvem os casos que a planta não previu. São a regra de bolso quando o Claude precisa decidir sozinho.

Princípios > passos · regra de decisão · tom da skill · consistência.

A skill embute um bloco :root com variáveis CSS para fundo, superfícies, bordas e cinco acentos semânticos (azul, laranja, verde, lavanda, dourado).

Definir os tokens no SKILL.md garante que toda saída tenha a mesma identidade — sem o Claude inventar cores a cada execução.

Design tokens · cor semântica · consistência · custom properties.

Inter para texto, mono para horários e códigos; hero responsivo com clamp(); rótulos em caixa-alta com letter-spacing.

Uma escala tipográfica explícita produz hierarquia consistente; sem ela cada saída fica com tamanhos aleatórios.

Inter · mono para dados · clamp() · rótulos uppercase · pesos.

Doze componentes descritos um a um: hero, banner de evento, cartões de voo, seletor de dia, hotel, mapa de rota, stats, orçamento, checklists e tema.

Descrever cada componente com sua anatomia dá ao Claude peças prontas para montar, em vez de improvisar layouts do zero.

Biblioteca de componentes · anatomia · reuso · composição.

Uma tabela mapeia significado para cor: azul = ida, verde = confirmado, laranja = volta, lavanda = conexão, dourado = evento. Tags são pílulas em caixa-alta.

Cor com significado fixo deixa a página escaneável: você lê o status sem ler o texto. É um dos seis princípios da skill.

Cor semântica · pílulas uppercase · legibilidade · convenção fixa.

Orbs (blurs radiais fixos), glassmorphism com backdrop-filter, shimmer nos banners, hover-lift e contrail animado do avião.

São os detalhes que separam "documento" de "app premium". Cada efeito é descrito com o suficiente para o Claude recriá-lo.

Orbs · glassmorphism · shimmer · hover-lift · animação de contrail.

Padrões de JS: troca de dia por data-attribute, acordeão de voos com max-height, checklists que salvam em localStorage, theme toggle e barras de progresso automáticas.

Persistir estado (checklist marcada continua marcada) é o detalhe que faz o usuário voltar à página. É o princípio "interativo > estático" na prática.

localStorage · acordeão · data-attribute · progresso automático.