React seo skills

Habilidades de SEO para agentes de codificación

Documentación

Habilidades de SEO para React

Una habilidad de agente que enseña a Cursor, Claude Code y Codex cómo implementar SEO y GEO (visibilidad en IA) en aplicaciones Next.js y React.

Cubre el flujo de trabajo completo — estrategia de palabras clave, metadatos, Open Graph, Schema.org JSON-LD, sitemaps, robots.txt y llms.txt — con patrones adaptados a tu stack: Next.js App Router, Pages Router o Vite + React.

[!IMPORTANT] Este es un instalador CLI, no una dependencia de ejecución. Ejecuta npx react-seo-skills — no ejecutes npm install react-seo-skills. npm install solo descarga el paquete; nunca copia la habilidad al directorio de tu agente, por lo que no parecerá que ocurre nada. Si lo agregaste a tus dependencias por error, elimínalo con npm uninstall react-seo-skills y ejecuta npx react-seo-skills en su lugar.

npx react-seo-skills

Cómo funcionan las habilidades de agente

Este paquete no agrega una dependencia de ejecución a tu aplicación. Instala un conjunto de archivos Markdown — una habilidad de agente — en el directorio de habilidades de tu agente de codificación con IA. Cuando le haces una pregunta de SEO al agente, este descubre la habilidad desde el description en SKILL.md y lee los archivos de referencia relevantes según sea necesario.

En resumen, estás instalando conocimiento, no una biblioteca. Nada se importa a tu código y nada llega a producción. Esta es también la razón por la que lo ejecutas con npx (que ejecuta el instalador) en lugar de npm install (que solo descargaría los archivos sin copiarlos en su lugar).

Por qué existe esto

La mayoría de los consejos de SEO son genéricos y no dependen del stack. Esta habilidad está diseñada para cómo las aplicaciones React modernas realmente se publican:

Consciente del lenguaje. Detecta JavaScript vs TypeScript y escribe código en el lenguaje correspondiente — sin tipos sueltos en un proyecto JS, sin tipos faltantes en uno TS.
Consciente del stack. Detecta Next.js App Router, Pages Router o Vite + React y aplica las API correctas para cada uno. Nunca mezcla patrones de Next.js en un proyecto Vite, ni viceversa.
Listo para GEO. Cubre la Optimización para Motores Generativos — haciendo tu sitio legible y citable para ChatGPT, Perplexity, Claude y Google AI Overviews.
Consciente de versiones. Le dice al agente que sus datos de entrenamiento pueden estar desactualizados — debe verificar las versiones instaladas del framework y la documentación actual antes de escribir código, en lugar de implementar desde la memoria.
Pregunta, no adivina. El agente pregunta por el nombre real de tu sitio, dominio, imagen OG y handles sociales — los valores de marcador de posición nunca se cuelan silenciosamente en tu código.
DRY por diseño. Los metadatos se definen una sola vez — a través de un componente SEO compartido, valores predeterminados a nivel de layout o ayudantes de esquema — nunca se copian y pegan entre páginas.
Honesto con SPA. Instala y configura react-helmet-async para aplicaciones renderizadas en el cliente, y advierte claramente sobre los límites de SEO del CSR.
Capacidad de auditoría. Incluye un flujo de trabajo estructurado de auditoría SEO que el agente puede ejecutar contra un proyecto existente e informar como Crítico / Sugerencia / OK.

Inicio rápido

Ejecuta desde la raíz de tu proyecto y sigue las indicaciones:

npx react-seo-skills

Por defecto, esto instala la habilidad para los tres agentes (Cursor, Claude Code y Codex) en el proyecto actual. No se requiere configuración adicional — los agentes descubren la habilidad automáticamente desde el description en SKILL.md.

Referencia de CLI

npx react-seo-skills [options]

Opción	Descripción
(ninguna)	Instalar para todos los agentes en el proyecto actual
`--all`	Instalar para todos los agentes (forma explícita del valor predeterminado)
`--cursor`	Instalar solo para Cursor
`--claude`	Instalar solo para Claude Code
`--codex`	Instalar solo para Codex
`--global`	Instalar en directorios a nivel de usuario (`~/.cursor`, `~/.claude`, `~/.codex`)
`--force`	Sobrescribir una instalación existente
`--dry-run`	Mostrar qué se instalaría sin escribir archivos
`--help`	Mostrar información de uso

Puedes combinar banderas. Algunos ejemplos comunes:

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

Dónde se instala

Agente	Ruta del proyecto	Ruta 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/`

Después de instalar, reinicia Claude Code o Codex si la habilidad no aparece — vuelven a escanear sus directorios de habilidades al iniciar. Cursor la detecta automáticamente.

Actualización

Para obtener la última versión en una instalación existente, vuelve a ejecutar con @latest y --force:

npx react-seo-skills@latest --force

Objetivo	Comando
Actualizar una instalación de proyecto	`npx react-seo-skills@latest --force`
Actualizar una instalación global	`npx react-seo-skills@latest --global --force`

@latest omite la caché de npx. Un npx react-seo-skills simple puede volver a ejecutar una copia antigua en caché sin verificar el registro.
--force sobrescribe los archivos de habilidad existentes — sin él, el instalador detecta la instalación actual y se omite con "ya existe".

Después de actualizar, reinicia Claude Code o Codex para que vuelvan a escanear el directorio de habilidades. Cursor detecta los cambios automáticamente.

Lo que aprende el agente

Área	Qué cubre
Palabras clave	Ideación, agrupación por intención de búsqueda, validación y comprobaciones de canibalización
Metadatos	Título, descripción, canónico, Open Graph, tarjetas de Twitter y hreflang
Datos estructurados	Schema.org JSON-LD — Organization, Article, FAQ, LocalBusiness y más
Sitemap y robots	`sitemap.ts` / `sitemap.xml`, `robots.ts` / `robots.txt` y reglas para rastreadores de IA
GEO	`llms.txt`, páginas de conocimiento `/ai`, esquema de entidades y estructura de citación para IA
Vite / SPA	Configuración de `react-helmet-async`, advertencias de CSR y guía de prerenderizado

Stacks compatibles

Stack	Referencia	Estado
Next.js App Router	`skill/references/app-router.md`	Disponible
Next.js Pages Router	`skill/references/pages-router.md`	Disponible
Vite + React / CRA	`skill/references/react-vite.md`	Disponible
Astro	—	Planificado (`0.1.0`)
TanStack Start	—	Planificado (`0.2.0`)

Consulta la hoja de ruta para detalles sobre los stacks planificados.

Ejemplos de prompts

Una vez instalada la habilidad, pregúntale a tu agente cosas como:

"Configura los metadatos de SEO para mi aplicación Next.js."
"Audita el SEO de este proyecto e informa qué falta."
"Agrega Schema.org JSON-LD a mis publicaciones de blog."
"Escribe un llms.txt para que los motores de búsqueda de IA entiendan mi sitio."
"Mi SPA de Vite no está posicionando — ¿qué debería hacer?"
"Configura un sitemap y robots.txt que permitan a los rastreadores de IA."

Estructura de la habilidad

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 se mantiene intencionalmente pequeño. Enlaza a los archivos de referencia, que el agente carga solo cuando son relevantes para la tarea.

Requisitos

Node.js 18 o superior
Un proyecto que use Next.js o React (Vite o CRA)

Hoja de ruta

El soporte de stacks próximos se rastrea en CHANGELOG.md:

Versión	Stack	Alcance
`0.1.0`	Astro	Metadatos `<head>`, colecciones de contenido, `@astrojs/sitemap`, `robots.txt`, JSON-LD
`0.2.0`	TanStack Start	Metadatos `head()` a nivel de ruta, rutas de servidor para sitemap/robots, JSON-LD

¿Quieres ayudar a construirlos? Consulta CONTRIBUTING.md.

Contribuciones

Las contribuciones son bienvenidas — correcciones de contenido, soporte para nuevos stacks y mejoras del instalador. Comienza con CONTRIBUTING.md y por favor lee el Código de Conducta.

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

Autor

Daniel Amekpoagbe — Desarrollador Full-Stack, Acra, Ghana.

Creando aplicaciones React y Next.js rápidas y listas para SEO. Portafolio en amekpoagbe.com.