Melhores skills de design web para Claude na customização de temas Ghost

Esta pesquisa responde a uma necessidade específica: usar Claude Code para transformar um tema Ghost existente em um site visualmente autoral, bem diagramado e tecnicamente correto. O foco não é juntar o maior número possível de prompts de “UI bonita”, mas identificar skills que realmente ajudem em direção de arte, layout editorial, tipografia, responsividade, acabamento, acessibilidade, desempenho e validação no navegador, sem fazer o Claude esquecer que Ghost usa Handlebars, helpers próprios, contextos, Portal, Koenig cards e GScan.

Resumo executivo

A melhor configuração para um tema Ghost tradicional não é uma única skill. É uma pequena equipe de especialidades:

ghost-theme, de Alonso Skills: melhor conhecimento específico de Ghost encontrado, cobrindo templates, helpers, membros, routes.yaml, @custom, imagens responsivas e classes .kg-*.
Anthropic frontend-design: melhor diretora de arte geral para produzir uma identidade própria em HTML, CSS e JavaScript.
Impeccable: melhor sistema para diagnosticar e polir um tema que já existe, com comandos próprios para tipografia, layout, adaptação, auditoria e acabamento.
redesign-existing-projects: melhor para redesenhar sem apagar estrutura, conteúdo, URLs e funcionalidades existentes.
Wondel web-typography: extremamente valiosa em Ghost, porque páginas editoriais vivem ou morrem pela qualidade da leitura.
Addy Osmani web-quality-audit e accessibility: melhores guardas de qualidade para desempenho, SEO técnico, Core Web Vitals e WCAG.
Anthropic webapp-testing: dá ao Claude olhos no navegador por meio do Playwright; código CSS plausível não basta sem renderização real.

Minha recomendação direta: instale por projeto ghost-theme, frontend-design, Impeccable, web-typography, web-quality-audit e webapp-testing. Acrescente redesign-existing-projects quando a intenção for preservar a identidade atual ou design-taste-frontend quando o problema principal for o visual genérico de IA.

Para Ghost tradicional, evite começar por skills de React, Next.js, shadcn/ui e componentes Vercel. Elas são ótimas em um frontend headless, mas um tema Ghost comum é renderizado com Handlebars + HTML + CSS + JavaScript. Forçar React sobre esse contexto tende a criar arquitetura desnecessária ou código impossível de usar no tema.

Metodologia e critérios

A seleção partiu da pesquisa anterior sobre 30 skills de webdesign e foi refeita para o caso de uso Ghost. Foram consultados os arquivos SKILL.md, repositórios dos autores, documentação atual do Claude Code, documentação oficial do Ghost, temas oficiais e ferramentas de validação.

Os critérios principais foram:

compatibilidade com HTML, CSS, JavaScript e Handlebars, sem depender de React;
capacidade de melhorar um projeto existente em vez de apenas gerar uma landing page do zero;
qualidade de layout, hierarquia, tipografia e direção visual;
atenção a mobile, teclado, contraste, redução de movimento e desempenho;
inspeção da página renderizada, não apenas leitura do código;
manutenção e clareza do repositório de origem;
comandos de instalação verificáveis;
adequação às particularidades do Ghost e à validação com GScan;
superfície de risco: scripts, hooks, buscas remotas e dependências instaladas.

As notas abaixo são editoriais e representam adequação à customização de um tema Ghost tradicional, não uma medição científica universal.

Antes das skills: o que o Claude precisa entender sobre Ghost

Um tema Ghost não é um site estático qualquer. Segundo a documentação de estrutura de temas, ele combina templates Handlebars e CSS, normalmente com default.hbs, index.hbs, home.hbs, post.hbs, page.hbs, tag.hbs, author.hbs, partials/, assets/ e package.json.

Há oito limites que qualquer skill visual precisa respeitar:

{{ghost_head}} e {{ghost_foot}} precisam permanecer no template-base, pois injetam metadados, integrações, estilos e scripts essenciais.
URLs de assets devem passar por {{asset}}; imagens editoriais devem aproveitar {{img_url}}, srcset e os tamanhos declarados no package.json.
{{body_class}} e {{post_class}} transportam contexto útil para o CSS e não devem ser apagados casualmente.
Home, índices, posts, páginas, tags, autores e erros possuem contextos e hierarquia de templates diferentes.
Configurações editáveis no Admin são declaradas em config.custom e acessadas por @custom. A documentação oficial informa cinco tipos e um limite total de 20 configurações.
Posts usam os blocos do editor Koenig. Um redesign que só estiliza p, h2 e img deixará galerias, bookmarks, callouts, toggles, vídeos, headers e signup cards quebrados ou visualmente abandonados.
routes.yaml controla coleções e rotas, mas vive em content/settings/routes.yaml e é administrado separadamente do ZIP do tema.
O tema precisa passar no GScan, que detecta erros fatais, recursos depreciados e incompatibilidades.

Essa é a razão para combinar uma skill específica de Ghost com uma skill de design: a primeira protege o CMS; a segunda evita que o resultado pareça apenas uma variação cosmética do tema original.

Ranking principal para customizar Ghost

Posição	Skill	Nota para Ghost	Papel principal	Veredito
1	Alonso `ghost-theme`	97/100	Especialista no domínio Ghost	Instalação essencial para mudanças estruturais
2	Anthropic `frontend-design`	96/100	Direção de arte e implementação	Melhor criadora visual geral
3	Impeccable	95/100	Auditoria, redesign e polimento	Melhor para tema existente
4	`redesign-existing-projects`	93/100	Redesign preservando o projeto	Excelente para customizações controladas
5	Wondel `web-typography`	92/100	Tipografia editorial	Quase obrigatória para blog e revista
6	Addy `frontend-ui-engineering`	91/100	Engenharia de interface	Impede que beleza destrua robustez
7	Addy `accessibility`	91/100	WCAG, teclado e semântica	Auditoria especializada essencial
8	Addy `web-quality-audit`	90/100	Performance, SEO e qualidade	Portão antes da publicação
9	Vercel `web-design-guidelines`	89/100	Revisão objetiva de UI	Ótima revisora, não diretora de arte
10	Anthropic `webapp-testing`	89/100	Navegador, screenshots e interações	Prova que o tema realmente funciona

As melhores skills, em detalhes

1. Alonso Ghost Theme: a especialista que faltava

Links: página e arquivos da skill, documentação de instalação do Tessl

# Depois de instalar o Tessl CLI e dentro da pasta do tema:
tessl init --agent claude-code
tessl install alonso-skills/ghost-theme

É a skill mais diretamente alinhada ao pedido. Ela não fala apenas “use Handlebars”: possui referências separadas para hierarquia de templates, arquivos obrigatórios, helpers, dados estruturados, heróis, membros e assinaturas, configurações personalizadas, build, imagens responsivas, rotas, internacionalização, aparência, pesquisa e uso do conteúdo do Ghost como dados de interface. A versão consultada também possui uma referência dedicada aos cards Koenig e suas classes .kg-*.

Para um tema já existente, a própria skill orienta o agente a ler primeiro templates, package.json e pipeline de build. Isso é decisivo: você quer que o Claude trabalhe com o tema, não que substitua Gulp por Vite, pnpm por npm ou CSS existente por Tailwind sem necessidade.

Pontos fortes: profundidade específica, progressive disclosure, proteção dos helpers, membros, rotas, imagens, configurações e conteúdo editorial.

Limites e cautelas: é comunitária, não oficial do Ghost. O pacote também traz template-base, Docker Compose, scripts, Bun, GitHub Actions e integração MCP. Para customizar um tema existente, não copie essa infraestrutura automaticamente. Leia os arquivos antes de executar scripts. Na consulta, o Tessl mostrava qualidade 80, conformidade de boas práticas e varredura Snyk aprovada, mas ainda não exibia cenários públicos de avaliação de impacto.

2. Anthropic Frontend Design: a melhor diretora de arte

Links: SKILL.md oficial, repositório Anthropic Skills

npx -y skills add anthropics/skills --skill frontend-design --agent claude-code

A skill oficial da Anthropic continua sendo a melhor escolha geral para criar uma direção visual própria. Ela funciona com HTML/CSS/JavaScript e orienta o agente a escolher uma estética coerente com assunto, público e conteúdo, evitando a aparência genérica produzida por combinações automáticas de cards, gradientes e tipografia indiferente.

No Ghost, use-a para definir composição da home, grade editorial, cartões de posts, cabeçalho, navegação, destaque de matérias, páginas especiais e linguagem visual. A skill deve receber o domínio técnico da ghost-theme e não ter liberdade para remover helpers ou reconstruir o projeto em outro framework.

Melhor uso: criar uma direção visual antes de mexer no código ou desenvolver uma seção nova depois que as restrições do Ghost estiverem claras.

3. Impeccable: o melhor sistema de redesign e acabamento

Links: repositório e instalação oficial, documentação

# Na raiz do tema, instalação local para Claude Code:
npx impeccable install --providers=claude --scope=project

Depois, dentro do Claude Code:

/impeccable init
/impeccable document
/impeccable critique blog
/impeccable typeset post pages
/impeccable layout homepage
/impeccable adapt theme
/impeccable audit
/impeccable polish

O Impeccable evoluiu para uma skill única com 23 operações e dezenas de detectores determinísticos. document extrai o sistema visual existente; shape planeja antes do código; typeset corrige tipografia; layout corrige ritmo e composição; adapt trabalha responsividade; harden procura conteúdo longo e casos extremos; audit verifica qualidade; polish prepara a entrega.

Para Ghost, seu maior valor está em não redesenhar no escuro. Rode document e gere DESIGN.md antes de pedir mudanças. Depois imponha que os comandos preservem helpers Ghost, URLs, estrutura editorial, configurações do Admin e funcionalidades de membros.

Cuidado: o instalador pode acrescentar um hook nativo em .claude/settings.local.json que executa o detector após edições de UI. Isso é útil, mas deve ser lido e autorizado conscientemente. O próprio projeto documenta --no-hooks para quem deseja instalar sem o hook.

4. Redesign Existing Projects: a melhor para preservar o que existe

Links: repositório Taste Skill, changelog

npx -y skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects --agent claude-code

Essa é uma escolha muito boa quando você comprou ou baixou um tema e quer mudar sua personalidade sem desmontá-lo. Ela começa pela auditoria do projeto e separa três modos: preservar, modernizar ou reformular. A versão atual explicita elementos que não devem mudar silenciosamente, como URLs, navegação, textos legais e marca.

No briefing, acrescente também: não trocar package manager, build, templates, helpers, rotas, nomes de configurações @custom e contratos de membros sem aprovação.

5. Wondel Web Typography: a especialidade mais importante em publicação

Links: repositório Wondel Skills

npx -y skills add wondelai/skills/web-typography --agent claude-code

Ghost é uma plataforma editorial. Logo, largura da coluna, tamanho, altura de linha, contraste, escala de títulos, notas, legendas, blockquotes, listas e rhythm vertical importam mais do que efeitos vistosos. Essa skill trabalha escolha e combinação de fontes, leitura em tela, medidas de linha, hierarquia, tipografia responsiva e carregamento de web fonts.

Ela também combina bem com as fontes personalizadas do Ghost. Quando o tema suporta essa função, {{ghost_head}} injeta --gh-font-heading e --gh-font-body; o CSS deve usá-las com fallbacks, conforme a documentação de custom settings.

6. Addy Osmani Frontend UI Engineering

Links: SKILL.md, repositório

npx -y skills add addyosmani/agent-skills --skill frontend-ui-engineering --agent claude-code

É menos uma diretora de arte e mais uma engenheira sênior de interface. Trabalha estados, design systems, responsividade e WCAG. É útil quando a skill criativa produz algo bonito, mas não considera navegação por teclado, conteúdo variável, componentes reutilizáveis e manutenção.

Em Ghost, peça que aplique os princípios a partials Handlebars e CSS existente, sem inventar uma camada de componentes React.

7. Addy Osmani Accessibility

Links: repositório Web Quality Skills, SKILL.md de acessibilidade

npx -y skills add addyosmani/web-quality-skills --skill accessibility --agent claude-code

Audita WCAG 2.2, semântica, teclado, foco, leitores de tela, contraste, formulários e componentes interativos. Em um tema Ghost, deve conferir ao menos navegação, menu móvel, busca, Portal, formulários de assinatura, links de cards, paginação, imagens, tabelas, callouts e ordem dos títulos.

8. Addy Osmani Web Quality Audit

Links: repositório e documentação

npx -y skills add addyosmani/web-quality-skills --skill web-quality-audit --agent claude-code

Reúne performance, Core Web Vitals, acessibilidade, SEO e boas práticas. É especialmente útil depois que o visual estiver pronto, pois detecta o custo de fontes, imagens hero grandes, JavaScript de carrossel, animações, layout shifts e metadados duplicados.

Ghost já fornece muita infraestrutura de SEO por {{ghost_head}}. A skill deve primeiro verificar o que o CMS gera e só depois sugerir dados adicionais; adicionar meta tags e JSON-LD redundantes pode ser pior do que não adicionar nada.

9. Vercel Web Design Guidelines

Links: SKILL.md, repositório oficial, diretrizes utilizadas

npx -y skills add vercel-labs/agent-skills --skill web-design-guidelines --agent claude-code

É uma revisora objetiva de mais de cem regras de UX, acessibilidade, foco, formulários, movimento, tipografia, imagens, navegação, temas, toque e internacionalização. O resultado tende a ser curto e baseado em arquivo:linha, bom para uma rodada independente depois do redesign.

Cuidado: a skill busca a versão mais recente das diretrizes remotamente a cada revisão. Isso mantém o conteúdo atual, mas torna a auditoria mutável. Para uma revisão reprodutível, registre o commit ou salve a versão utilizada.

10. Anthropic Webapp Testing

Links: SKILL.md oficial, repositório

npx -y skills add anthropics/skills --skill webapp-testing --agent claude-code

Usa Playwright para abrir a aplicação local, capturar screenshots, inspecionar o DOM renderizado, testar cliques e registrar console. Para Ghost, deve visitar home, post, page, tag, author e erro 404 em múltiplas larguras. Também deve abrir menu, busca, Portal e qualquer interação adicionada pelo tema.

Essa skill não tem gosto visual. Sua função é impedir que o Claude declare vitória porque o CSS “parece correto” quando a página real possui sobreposição, salto de layout ou botões inacessíveis.

Outras skills muito boas

11. Design Taste Frontend

npx -y skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend --agent claude-code

Repositório. É um antídoto agressivo contra páginas com aparência automática: heróis previsíveis, três cards idênticos, glassmorphism, gradientes roxos e densidade incoerente. Funciona muito bem em homepages editoriais e páginas institucionais. A v2 atual é experimental; use apenas uma diretora de arte por rodada para não gerar conflito com frontend-design.

12. Responsive Design

npx -y skills add wshobson/agents --skill responsive-design --agent claude-code

Catálogo do repositório. Especialista em Grid, Flexbox, container queries e layouts fluidos. Boa quando o tema só “empilha” tudo no celular ou quebra em larguras intermediárias. Em Ghost, teste conteúdo com títulos longos, imagens ausentes, navegação extensa e cards com resumos de tamanhos diferentes.

13. Wondel Refactoring UI

npx -y skills add wondelai/skills/refactoring-ui --agent claude-code

Repositório. Melhora hierarquia, espaçamento, cor, profundidade e consistência sem exigir uma estética cinematográfica. É uma boa alternativa mais contida ao Impeccable para ajustes graduais.

14. Wondel UX Heuristics

npx -y skills add wondelai/skills/ux-heuristics --agent claude-code

Repositório. Revisa clareza, feedback, consistência, prevenção de erro e carga cognitiva. Útil para navegação, pesquisa, assinatura, filtros e páginas de arquivo.

15. Extract Design System

npx -y skills add arvindrk/extract-design-system --skill extract-design-system --agent claude-code

Repositório. Extrai cores, fontes, espaçamento, raios e sombras de uma referência pública usando navegador e gera tokens iniciais. Serve para estudar uma linguagem visual, não para copiar marca, conteúdo, imagens ou composição proprietária. Exige revisão de scripts e dependências.

16. Emil Design Engineering e Review Animations

npx -y skills add emilkowalski/skills --skill emil-design-eng --agent claude-code
npx -y skills add emilkowalski/skills --skill review-animations --agent claude-code

Repositório. Boas para microinterações, easing, continuidade e refinamento de movimento. Em um blog, use com parcimônia: transições de navegação, menu, busca e feedback de controles podem melhorar; animações permanentes em texto e posts geralmente atrapalham a leitura.

17. Fixing Motion Performance

npx -y skills add ibelick/ui-skills --skill fixing-motion-performance --agent claude-code

Repositório. Corrige animações que causam layout thrashing, filtros pesados e engasgos. É complemento, não motivo para adicionar motion.

18. High-End Visual Design

npx -y skills add https://github.com/Leonxlnx/taste-skill --skill high-end-visual-design --agent claude-code

Repositório. Muito opinativa, indicada quando você quer deliberadamente uma publicação de arte, moda, cultura ou portfólio com tipografia dominante, composição incomum e motion. Pode trocar o clichê “site de IA” pelo clichê “agência premium”; use como experimento controlado, não como padrão.

19. Mindrally Ghost: alternativa simples sem Tessl

npx -y skills add mindrally/skills --skill ghost --agent claude-code

Links: skill e código exibido, repositório

É uma skill Ghost de arquivo único, com exemplos de templates, helpers, imagens, membros, Tailwind e Alpine.js. É mais simples de instalar que a Alonso, mas também menos profunda e mais prescritiva sobre tecnologias que talvez seu tema não use. Alguns exemplos são didáticos e precisam ser confrontados com a documentação atual. Eu a trataria como alternativa leve, não como fonte final.

20. UI/UX Pro Max: biblioteca de referências, não autoridade Ghost

npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max --agent claude-code

Repositório. Possui uma base enorme de estilos, paletas, tipografia, UX e stacks. Ajuda na exploração visual, mas pode induzir o Claude a escolher um estilo de catálogo sem compreender a publicação. Use para gerar opções e nunca para controlar a implementação Ghost.

O pacote que eu instalaria no seu tema

Pacote essencial, equilibrado

# 1. Conhecimento específico de Ghost, usando Tessl
tessl init --agent claude-code
tessl install alonso-skills/ghost-theme

# 2. Direção de arte
npx -y skills add anthropics/skills --skill frontend-design --agent claude-code

# 3. Redesign, documentação visual e polimento
npx impeccable install --providers=claude --scope=project

# 4. Tipografia editorial
npx -y skills add wondelai/skills/web-typography --agent claude-code

# 5. Qualidade final
npx -y skills add addyosmani/web-quality-skills --skill web-quality-audit --agent claude-code

# 6. Testes no navegador
npx -y skills add anthropics/skills --skill webapp-testing --agent claude-code

Se não quiser instalar Tessl

Substitua a primeira etapa por:

npx -y skills add mindrally/skills --skill ghost --agent claude-code

Nesse caso, peça explicitamente que a documentação oficial do Ghost tenha precedência sobre qualquer exemplo comunitário.

Pacote completo, sem exagero

Acrescente ao conjunto essencial:

npx -y skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects --agent claude-code
npx -y skills add addyosmani/web-quality-skills --skill accessibility --agent claude-code
npx -y skills add vercel-labs/agent-skills --skill web-design-guidelines --agent claude-code
npx -y skills add wshobson/agents --skill responsive-design --agent claude-code

Não instale as 20 globalmente. Skills têm corpo carregado sob demanda, mas nome e descrição ainda participam da descoberta. Muitas skills com gatilhos parecidos competem entre si e podem produzir instruções contraditórias. Para este projeto, oito a dez skills bem escolhidas são melhores que uma coleção indiscriminada.

Como instalar e confirmar no Claude Code

O Claude Code carrega skills de .claude/skills/<nome>/SKILL.md no projeto e de ~/.claude/skills/<nome>/SKILL.md no escopo pessoal. Para um tema Ghost, prefira instalação local no projeto: as regras de publicação não precisam aparecer quando você estiver programando outra coisa.

Depois da instalação:

Confirme que existe .claude/skills/ na raiz do tema.
Abra /skills no Claude Code e verifique os nomes instalados.
Se a pasta .claude/skills/ não existia quando a sessão começou, reinicie o Claude Code.
Use /nome-da-skill quando quiser invocação explícita; caso contrário, a descrição decide quando ela é carregada.
Registre as skills no Git se quiser que o projeto e outros computadores recebam a mesma configuração.

Para listar o conteúdo de um repositório antes de instalar:

npx -y skills add OWNER/REPO --list

Para atualizar skills instaladas pelo CLI skills:

npx -y skills update -p

A configuração oficial do Ghost já ajuda o Claude

O Ghost Starter atual inclui AGENTS.md, e seu CLAUDE.md aponta para esse arquivo. As instruções oficiais dizem ao agente para usar pnpm, manter mudanças focadas no tema, sincronizar assets compilados, não versionar node_modules, conteúdo local, ZIPs ou secrets e executar os testes antes da entrega.

Se seu tema não possui instruções próprias, vale adaptar esse pequeno conjunto de regras para um CLAUDE.md na raiz. Ele não substitui uma skill, mas impede erros cotidianos. O Starter oficial também é a melhor base para um tema novo: possui live reload, Rollup/PostCSS, build, ZIP e teste com GScan. O Source, tema padrão atual, é uma referência melhor quando você quer estudar uma implementação editorial completa.

Fluxo recomendado para customizar seu tema

Etapa 1: faça uma cópia versionada

Baixe o tema pelo Ghost Admin ou obtenha seu repositório original. Nunca trabalhe sobre o único ZIP existente nem diretamente na cópia ativa em produção.

git init
git add .
git commit -m "Tema original antes da customizacao"
git switch -c redesign-ghost

Se for um tema comercial, confirme a licença antes de publicar o código em repositório público.

Etapa 2: mande o Claude mapear antes de editar

Use ghost-theme e peça um inventário de:

templates e hierarquia;
partials reutilizados;
pipeline de CSS e JavaScript;
scripts de package.json;
configurações config.custom e image_sizes;
classes e tokens existentes;
integrações de membros, Portal, busca e comentários;
suporte a Koenig cards;
arquivos gerados que precisam acompanhar o fonte;
comando real de build, teste e ZIP.

Prompt recomendado:

Use a skill ghost-theme. Analise este tema existente antes de editar.
Leia package.json, todos os templates .hbs, partials, CSS fonte, JavaScript,
scripts de build e configuracoes customizadas. Produza um mapa da arquitetura,
identifique os contratos do Ghost que nao podem ser quebrados e diga qual e o
comando real de build, GScan e empacotamento. Nao altere arquivos nesta etapa.

Etapa 3: documente a identidade atual

Rode /impeccable init e /impeccable document. Registre em DESIGN.md:

público e propósito da publicação;
adjetivos desejados e indesejados;
referências e anti-referências;
paleta, tipografia, escala, grid e espaçamento;
linguagem de imagens e ícones;
densidade da home;
comportamento mobile;
limite de movimento;
elementos que precisam permanecer reconhecíveis.

Etapa 4: peça três direções, não três implementações

Use frontend-design para propor três conceitos de direção de arte em texto. Escolha um antes do código. Isso é muito mais eficiente do que gerar três versões completas do tema.

Use frontend-design, mas respeite integralmente o mapa Ghost e o DESIGN.md.
Proponha tres direcoes visuais realmente diferentes para esta publicacao.
Para cada uma, descreva composicao da home, tipografia, grade editorial,
cartoes de post, cor, imagem, navegacao e mobile. Nao escreva codigo ainda.
Nao transforme o projeto em React, Next ou Tailwind.

Etapa 5: implemente em fatias pequenas

Uma ordem segura:

tokens, fontes e base tipográfica;
default.hbs, cabeçalho, navegação e rodapé;
post card e feed da home;
página de post e todos os .kg-*;
páginas, tags, autores, erro e busca;
membros, Portal e CTAs;
custom settings no Admin;
responsividade e motion;
performance e acessibilidade.

Depois de cada fatia, execute build e abra a página real. Isso limita o tamanho do diff e facilita localizar regressões.

Etapa 6: teste conteúdo editorial hostil

Não use só posts perfeitos. Verifique:

título com duas ou três linhas;
post sem imagem e com imagem vertical, horizontal e muito grande;
autor com nome longo;
muitos itens na navegação;
post com galeria, bookmark, vídeo, áudio, tabela, código, callout, toggle e signup card;
conteúdo wide e full;
página curta e artigo muito longo;
membro deslogado, gratuito e pago;
idioma com palavras compridas;
zoom de 200%;
prefers-reduced-motion.

Etapa 7: valide tecnicamente

O GScan oficial pode ser instalado e executado assim:

npm install -g gscan
gscan .

No Ghost Starter atual, os scripts também oferecem build, ZIP e teste:

pnpm install --frozen-lockfile
pnpm build
pnpm test
pnpm zip

Os nomes podem variar em temas de terceiros. O package.json do tema é a autoridade. O AGENTS.md atual do Starter também referencia pnpm test:ci; use o script realmente presente no projeto.

Etapa 8: inspeção visual real

Com webapp-testing, peça screenshots em pelo menos 360, 390, 768, 1024 e 1440 pixels. Verifique home, post, page, tag, author e 404. O teste deve procurar:

sobreposição e conteúdo cortado;
saltos de layout;
menu móvel e foco;
contraste e hover/focus;
imagens distorcidas;
linhas de texto largas demais;
botões e CTAs quebrados;
console com erros;
movimento ignorando preferências do usuário.

Etapa 9: empacote e publique

O ZIP precisa abrir com package.json e templates na raiz, não dentro de uma pasta extra. O Ghost verifica o arquivo com GScan durante o upload e bloqueia erros fatais. A documentação de instalação indica Settings → Site → Theme, seguido de Upload theme para temas personalizados.

Mantenha o tema customizado como um fork próprio. A documentação de atualização alerta que atualizar um tema oficial modificado pelo fluxo automático pode sobrescrever suas alterações.

Prompt completo para entregar ao Claude

Quero customizar este tema Ghost existente sem trocar sua stack.

Use ghost-theme como autoridade de dominio, frontend-design para direcao de
arte, web-typography para leitura editorial e Impeccable apenas para critica e
polimento. A documentacao oficial do Ghost tem precedencia sobre skills de
terceiros.

Primeiro:
1. leia package.json, templates, partials, assets e scripts;
2. mapeie a hierarquia e os contratos do Ghost;
3. identifique ghost_head, ghost_foot, body_class, post_class, asset, img_url,
   config.custom, image_sizes, membros, Portal, busca e cards Koenig;
4. descubra os comandos reais de build, teste, GScan e ZIP;
5. nao altere nada ate apresentar o diagnostico e uma proposta visual.

Depois de eu aprovar a direcao:
- implemente em fatias pequenas e preserve URLs, conteudo e funcionalidades;
- nao converta para React, Next, shadcn ou Tailwind sem pedido explicito;
- use conteudo real e teste textos longos, imagens ausentes e cards .kg-*;
- mantenha HTML semantico, foco visivel e prefers-reduced-motion;
- valide no navegador em 360, 390, 768, 1024 e 1440 px;
- execute build e GScan no fim de cada etapa importante;
- so considere pronto com GScan sem erro fatal, console limpo e screenshots
  revisadas da home, post, page, tag, author e 404.

O que não instalar para este caso

Skills React/Next/shadcn

Não são ruins; apenas não pertencem ao caminho padrão de um tema Ghost Handlebars. Instale-as somente se você estiver construindo um frontend headless que consome a Content API do Ghost.

Três diretoras de arte simultâneas

frontend-design, design-taste-frontend, high-end-visual-design e top-design possuem opiniões fortes. Escolha uma por rodada. Misturá-las tende a gerar um compromisso visual incoerente.

Coleções gigantes instaladas globalmente

Instale skills individuais por projeto. Isso reduz gatilhos concorrentes e facilita auditoria, atualização e remoção.

Automação direta em produção

Não entregue credenciais do Ghost Admin ao agente durante exploração visual. Faça build, teste e ZIP localmente; use secrets protegidos apenas em um fluxo de deploy revisado.

Segurança e manutenção das skills

Skills não são apenas textos inocentes: podem incluir scripts, hooks, downloads e comandos. Antes de instalar:

leia SKILL.md e todos os arquivos em scripts/, hooks/ e configurações;
verifique se a skill busca instruções remotas durante o uso;
instale em branch limpa e confira o diff da pasta .claude/;
não forneça tokens, chaves do Admin ou secrets de deploy;
limite permissões e revise comandos destrutivos;
fixe versões ou commits quando reprodutibilidade for importante;
reexecute GScan e testes depois de atualizar uma skill;
remova skills que não participam mais do projeto.

Cuidados específicos desta lista:

Impeccable: pode instalar hook de edição; use --no-hooks se não quiser essa automação.
Vercel Guidelines: busca regras remotas; o conjunto pode mudar entre auditorias.
Alonso Ghost Theme: inclui scripts, template, Docker e MCP; para tema existente, use a parte de conhecimento e não copie infraestrutura sem análise.
Extract Design System: usa navegador e dependências auxiliares; respeite direitos autorais e termos do site de referência.
Taste Skill v2: é experimental e pode mudar mais rapidamente.

Recomendações práticas

Se você quiser instalar apenas uma skill, escolha ghost-theme se o risco principal for quebrar o CMS; escolha frontend-design se você já domina Ghost e só precisa elevar o visual.

Se quiser instalar três, use:

ghost-theme;
frontend-design;
Impeccable.

Para o melhor conjunto realista, acrescente web-typography, web-quality-audit e webapp-testing. Essa combinação cobre domínio, criação, leitura, polimento, qualidade e prova visual.

Comece pela cópia do tema atual, não pelo Ghost Starter, se a intenção é preservar um tema comprado ou já configurado. Use o Starter como referência e ponto de partida apenas para um tema novo. Crie DESIGN.md, escolha uma direção visual, implemente em etapas e trate GScan mais screenshots como critérios de aceite.

Conclusão

A skill de design mais forte para Claude continua sendo Anthropic frontend-design, mas ela não é suficiente sozinha para Ghost. Para o seu caso, a descoberta mais importante é a Alonso ghost-theme, porque ela dá ao agente o conhecimento estrutural que impede um redesign bonito de quebrar templates, membros, configurações, imagens ou conteúdo do editor.

O melhor fluxo é usar ghost-theme como especialista do CMS, frontend-design como diretora de arte, Impeccable como revisora e web-typography como especialista editorial. web-quality-audit, accessibility e webapp-testing fecham a entrega com critérios verificáveis.

Em resumo: não peça “deixe meu Ghost bonito”. Dê ao Claude uma arquitetura protegida, uma identidade documentada, conteúdo real, uma diretora visual por vez e obrigação de provar o resultado no navegador. É isso que transforma uma skill interessante em um tema realmente bom.

Fontes consultadas

Nota sobre atualidade

Pesquisa concluída em 2 de agosto de 2026. Skills, repositórios, comandos, versões do Ghost, telas do Admin, dependências e resultados de auditoria mudam rapidamente. Confirme o SKILL.md, o README, a documentação oficial e os scripts atuais antes de instalar ou atualizar qualquer pacote em um tema importante.

Related documents