React seo skills

Habilidades de SEO para agentes de codificação

Documentação

Habilidades de SEO para React

Uma habilidade de agente que ensina Cursor, Claude Code e Codex a implementar SEO e GEO (visibilidade em IA) em aplicativos Next.js e React.

Ela cobre o fluxo de trabalho completo — estratégia de palavras-chave, metadados, Open Graph, Schema.org JSON-LD, sitemaps, robots.txt e llms.txt — com padrões adaptados à sua stack: Next.js App Router, Pages Router ou Vite + React.

[!IMPORTANT] Este é um instalador de CLI, não uma dependência de tempo de execução. Execute npx react-seo-skills — não execute npm install react-seo-skills. npm install apenas baixa o pacote; ele nunca copia a habilidade para o diretório do seu agente, então nada parecerá acontecer. Se você o adicionou às suas dependências por engano, remova-o com npm uninstall react-seo-skills e execute npx react-seo-skills em vez disso.

npx react-seo-skills

Como funcionam as habilidades de agente

Este pacote não adiciona uma dependência de tempo de execução ao seu aplicativo. Ele instala um conjunto de arquivos Markdown — uma habilidade de agente — no diretório de habilidades do seu agente de codificação de IA. Quando você faz uma pergunta de SEO ao agente, ele descobre a habilidade a partir do description em SKILL.md e lê os arquivos de referência relevantes sob demanda.

Em resumo, você está instalando conhecimento, não uma biblioteca. Nada é importado para o seu código e nada vai para produção. É por isso também que você o executa com npx (que executa o instalador) em vez de npm install (que apenas baixaria os arquivos sem copiá-los para o lugar certo).

Por que isso existe

A maioria dos conselhos de SEO é genérica e independente de stack. Esta habilidade é construída para como os aplicativos React modernos realmente são entregues:

Ciente do idioma. Detecta JavaScript vs TypeScript e escreve código no idioma correspondente — sem tipos soltos em um projeto JS, sem tipos ausentes em um projeto TS.
Ciente da stack. Detecta Next.js App Router, Pages Router ou Vite + React e aplica as APIs corretas para cada um. Nunca mistura padrões do Next.js em um projeto Vite, ou vice-versa.
Pronto para GEO. Cobre a Otimização de Mecanismos Generativos — tornando seu site legível e citável para ChatGPT, Perplexity, Claude e Google AI Overviews.
Ciente da versão. Informa ao agente que seus dados de treinamento podem estar desatualizados — ele deve verificar as versões instaladas do framework e a documentação atual antes de escrever código, em vez de implementar de memória.
Pergunta, não adivinha. O agente pergunta pelo nome real do seu site, domínio, imagem OG e handles sociais — valores de espaço reservado nunca entram silenciosamente no seu código.
DRY por design. Os metadados são definidos uma única vez — por meio de um componente SEO compartilhado, padrões padrão de nível de layout ou auxiliares de schema — nunca copiados e colados entre páginas.
Honesto com SPA. Instala e configura react-helmet-async para aplicativos renderizados no cliente e avisa claramente sobre os limites de SEO do CSR.
Capaz de auditar. Inclui um fluxo de trabalho estruturado de auditoria de SEO que o agente pode executar em um projeto existente e relatar como Crítico / Sugestão / OK.

Início rápido

Execute a partir da raiz do seu projeto e siga os prompts:

npx react-seo-skills

Por padrão, isso instala a habilidade para todos os três agentes (Cursor, Claude Code e Codex) no projeto atual. Nenhuma configuração extra é necessária — os agentes descobrem a habilidade automaticamente a partir do description em SKILL.md.

Referência da CLI

npx react-seo-skills [options]

Opção	Descrição
(nenhuma)	Instala para todos os agentes no projeto atual
`--all`	Instala para todos os agentes (forma explícita do padrão)
`--cursor`	Instala apenas para Cursor
`--claude`	Instala apenas para Claude Code
`--codex`	Instala apenas para Codex
`--global`	Instala em diretórios de nível de usuário (`~/.cursor`, `~/.claude`, `~/.codex`)
`--force`	Sobrescreve uma instalação existente
`--dry-run`	Mostra o que seria instalado sem gravar nenhum arquivo
`--help`	Mostra informações de uso

Você pode combinar flags. Alguns exemplos comuns:

npx react-seo-skills --global              # available in every project
npx react-seo-skills --cursor --claude     # only these two agents
npx react-seo-skills --codex --force       # reinstall for Codex, overwriting
npx react-seo-skills --dry-run             # preview the changes first

Onde é instalado

Agente	Caminho do projeto	Caminho global (`--global`)
Cursor	`.cursor/skills/react-seo-skills/`	`~/.cursor/skills/react-seo-skills/`
Claude Code	`.claude/skills/react-seo-skills/`	`~/.claude/skills/react-seo-skills/`
Codex	`.agents/skills/react-seo-skills/`	`~/.codex/skills/react-seo-skills/`

Após a instalação, reinicie o Claude Code ou o Codex se a habilidade não aparecer — eles reexaminam seus diretórios de habilidades na inicialização. O Cursor a detecta automaticamente.

Atualização

Para obter a versão mais recente em uma instalação existente, execute novamente com @latest e --force:

npx react-seo-skills@latest --force

Objetivo	Comando
Atualizar uma instalação de projeto	`npx react-seo-skills@latest --force`
Atualizar uma instalação global	`npx react-seo-skills@latest --global --force`

@latest ignora o cache do npx. Um npx react-seo-skills simples pode reexecutar uma cópia antiga em cache sem verificar o registro.
--force sobrescreve os arquivos de habilidade existentes — sem ele, o instalador detecta a instalação atual e pula com "já existe".

Após a atualização, reinicie o Claude Code ou o Codex para que eles reexaminem o diretório de habilidades. O Cursor detecta as alterações automaticamente.

O que o agente aprende

Área	O que cobre
Palavras-chave	Ideação, agrupamento por intenção de busca, validação e verificações de canibalização
Metadados	Título, descrição, canônico, Open Graph, Twitter cards e hreflang
Dados estruturados	Schema.org JSON-LD — Organization, Article, FAQ, LocalBusiness e mais
Sitemap e robots	`sitemap.ts` / `sitemap.xml`, `robots.ts` / `robots.txt` e regras de crawler de IA
GEO	`llms.txt`, `/ai` páginas de conhecimento, schema de entidade e estrutura de citação de IA
Vite / SPA	Configuração do `react-helmet-async`, avisos de CSR e orientação de pré-renderização

Stacks suportadas

Stack	Referência	Status
Next.js App Router	`skill/references/app-router.md`	Disponível
Next.js Pages Router	`skill/references/pages-router.md`	Disponível
Vite + React / CRA	`skill/references/react-vite.md`	Disponível
Astro	—	Planejado (`0.1.0`)
TanStack Start	—	Planejado (`0.2.0`)

Consulte o roteiro para obter detalhes sobre as stacks planejadas.

Exemplos de prompts

Depois que a habilidade estiver instalada, pergunte ao seu agente coisas como:

"Configure os metadados de SEO para o meu aplicativo Next.js."
"Audite o SEO deste projeto e relate o que está faltando."
"Adicione Schema.org JSON-LD às minhas postagens de blog."
"Escreva um llms.txt para que os mecanismos de busca de IA entendam meu site."
"Meu SPA Vite não está ranqueando — o que devo fazer?"
"Configure um sitemap e robots.txt que permitam crawlers de IA."

Estrutura da habilidade

skill/
├── SKILL.md                       Entry point — rules, detection order, audit workflow
└── references/
    ├── language.md                JavaScript vs TypeScript detection
    ├── keywords.md                Keyword clustering and validation
    ├── app-router.md              Next.js App Router patterns
    ├── pages-router.md            Next.js Pages Router patterns
    ├── react-vite.md              Vite / SPA workflow
    ├── react-helmet-async.md      react-helmet-async install and API reference
    ├── structured-data.md         Schema.org JSON-LD templates
    ├── geo.md                     AI visibility (GEO)
    └── validation.md              Post-implementation checklist

SKILL.md permanece intencionalmente pequeno. Ele vincula aos arquivos de referência, que o agente carrega apenas quando são relevantes para a tarefa.

Requisitos

Node.js 18 ou mais recente
Um projeto usando Next.js ou React (Vite ou CRA)

Roteiro

O suporte às próximas stacks é rastreado em CHANGELOG.md:

Versão	Stack	Escopo
`0.1.0`	Astro	`<head>` metadados, coleções de conteúdo, `@astrojs/sitemap`, `robots.txt`, JSON-LD
`0.2.0`	TanStack Start	Metadados `head()` em nível de rota, rotas de servidor para sitemap/robots, JSON-LD

Quer ajudar a construir essas funcionalidades? Consulte CONTRIBUTING.md.

Contribuição

Contribuições são bem-vindas — correções de conteúdo, suporte a novas stacks e melhorias no instalador. Comece com CONTRIBUTING.md e leia o Código de Conduta.

git clone https://github.com/daniel-amekpoagbe/react-seo-skills.git
cd react-seo-skills
npm test

Autor

Daniel Amekpoagbe — Desenvolvedor Full-Stack, Accra, Gana.

Criando aplicativos React e Next.js rápidos e prontos para SEO. Portfólio em amekpoagbe.com.