FelipeStruchel/landing-page-skills

Usar quando o 01-negocio-e-escopo.md está aprovado e falta escolher o estilo visual de uma landing page, ou quando uma tela interna (agenda, painel) de um cliente precisa de visual. Não usar para levantar dados do negócio (landing-descoberta).

¿Qué es landing-page-skills?

Esta skill define o processo para definir a direção visual de uma landing page ou tela interna de cliente, partindo do perfil da empresa e do perfil do cliente (nunca do gosto pessoal). A skill exige que o agente execute o gate `check-gate.js`, leia os documentos `01` e `inventario-assets.md`, e utilize a sub-skill `frontend-design` para gerar de duas a três direções visuais completas, cada uma contendo nome, ideia, tipografia auto-hospedada, paleta de cores com verificação de contraste via `check-contrast.js`, estrutura de seções, hero, e assets referenciados por ID. Ao final, o agente deve recomendar uma direção e aguardar a escolha do Felipe, registrando a decisão em `direcao-visual.md`. A skill também cobre revisão visual antes da publicação, com checagens de hierarquia, responsividade, contraste, estados de foco/hover/erro, e consistência de componentes. Red Flags como apresentar uma única direção, usar CSS genérico, ou presumir a existência de assets são proibidos. A skill é projetada para ambientes de desenvolvimento de landing pages e dashboards internos, provavelmente integrada a ferramentas como Claude Code ou similares que executam scripts Node.js e leem arquivos do projeto.

Compatible con~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/FelipeStruchel/landing-page-skills/tree/HEAD/skills/landing-direcao-visual

Documentación

Landing: direção visual

O estilo vem do perfil da empresa e do perfil do cliente dela, não do gosto do momento.

Lei de Ferro

NENHUMA CONSTRUÇÃO SEM 2 OU 3 DIREÇÕES APRESENTADAS
E UMA ESCOLHIDA PELO FELIPE.
TODO VISUAL, INTERNO OU EXTERNO, PASSA POR frontend-design.

Primeira ação: node check-gate.js --cliente <nome> --antes-de direcao-visual; ler o 01 e o inventario-assets.md inteiros; node check-assets.js --root <cliente> --fase direcao-visual. Não use a memória da conversa.

Função do Gate

Derive os eixos dos dois perfis (references/perfis-e-estilos.md).
SUB-SKILL OBRIGATÓRIA: Use frontend-design:frontend-design para cada direção.
Cada direção traz: nome, ideia em uma frase, tipografia (display e texto, auto-hospedadas), paleta com hex, estrutura de seções, hero, assets por id (A-nnn) e o que falta, risco.
Para cada paleta, preencha pares-contraste.json e rode node check-contrast.js --css <css> --pairs <pares>; não apresente paleta reprovada.
Recomende uma, ligando a recomendação aos dois perfis.
Espere a escolha do Felipe. Grave direcao-visual.md (frontmatter, escolhida) e aprove.

Landing nova: sem mockup, construa a página (dá o mesmo trabalho). Adição a algo existente: mockup primeiro; depois de aprovado, confira item por item o construído contra o mostrado. Melhoria justificada durante a construção é permitida e vai para o registro de feedback.

Revisão visual (antes do gate de publicação)

Hierarquia e tipografia coerentes · 375 e 1280 px, captura da janela (não fullPage), depois de rolar devagar · contraste (check-contrast) · estados de foco, hover, erro, vazio e carregamento · espaçamento, componentes e cores consistentes · CTA adequada ao negócio · a página implementada, não o mockup · check-page.

Red Flags: pare

Escolher o estilo "que achar melhor" e construir
CSS genérico para tela interna "porque é só para ela"
Apresentar uma direção só
Asset citado sem id ou caminho inventado

Racionalização	Realidade
"Interno não precisa de design"	A tela que o cliente usa todo dia faz parte da marca
"O Felipe falou 'o que achar melhor'"	Isso é delegação da recomendação, não da escolha
"Uma direção é mais rápida"	Duas ou três com recomendação foi mais rápido que discutir por texto
"A foto que eu preciso deve existir"	Registre a necessidade; nunca presuma o arquivo