Habilidades de GenerateBlocks
Documentación de habilidades optimizada para LLM y recursos de desarrollo para el plugin de WordPress GenerateBlocks.
Verificado contra el código fuente de GenerateBlocks free 2.3 y GB Pro 2.6 (junio de 2026). Cada esquema de bloque, orden de atributos y etiqueta dinámica en estas habilidades se verificó contra el código fuente del plugin en este repositorio, no se recordó de datos de entrenamiento.
Lo que las habilidades pueden construir
- Secciones estáticas — héroes, precios, tarjetas, preguntas frecuentes, llamadas a la acción, páginas de aterrizaje completas
- Contenido dinámico — bucles de consulta (cuadrículas de blog, artículos relacionados, archivos), 27 etiquetas dinámicas con sintaxis exacta
- Campos personalizados — campos de texto/imagen/enlace/grupo de ACF, bucles de repetidor, páginas de opciones, consultas de metadatos
- Animaciones — microinteracciones al pasar el ratón, entradas con fotogramas clave, revelaciones con desplazamiento CSS, protecciones de movimiento reducido
- Condiciones — condiciones de bloques/menús de GB Pro, condiciones de campos de formulario, alternativas del plugin gratuito
- Bloques de GB Pro — acordeón, pestañas, carrusel, navegación, encabezado de sitio, superposiciones/menús mega, el sistema de Formularios 2.6
- Plantillas de sitio completo — Elementos de GeneratePress (plantillas de bucle, héroes de página, hooks, reglas de visualización), temas de bloque FSE
Instalación Rápida
Instala las habilidades para tu asistente de codificación de IA con un solo comando:
git clone https://github.com/wpgaurav/generateblocks-skills.git
cd generateblocks-skills
chmod +x install.sh
./install.sh
Esto inicia un instalador interactivo que configura las habilidades para tus herramientas preferidas.
Herramientas Compatibles
| Herramienta | Ubicación de Instalación | Formato |
|---|---|---|
| Claude Code | ~/.claude/skills/ | Directorios de habilidades |
| Cursor | ~/.cursor/skills/ | Directorios de habilidades |
| Windsurf | ~/.windsurf/rules/ | Markdown combinado |
| OpenAI Codex CLI | ~/.codex/instructions.md | Markdown combinado |
| Gemini CLI | GEMINI.md (raíz del proyecto) | Markdown combinado |
| GitHub Copilot | .github/copilot-instructions.md | Markdown combinado |
| Cline / Roo Code | .clinerules (raíz del proyecto) | Markdown combinado |
| Aider | CONVENTIONS.md (raíz del proyecto) | Markdown combinado |
Opciones de Instalación
./install.sh # Modo interactivo (elige herramientas)
./install.sh --all # Instalar para todas las herramientas
./install.sh claude # Solo Claude Code
./install.sh cursor codex # Varias herramientas a la vez
./install.sh --help # Mostrar ayuda
Alternativa: Configuración Manual
Si prefieres no usar el instalador, tienes dos opciones:
Opción A: Subir un Archivo de Habilidad
Descarga un archivo .skill y súbelo al inicio de un nuevo chat en Claude.ai, ChatGPT, Gemini o cualquier asistente de IA.
| Habilidad | Descargar |
|---|---|
| Diseños de GenerateBlocks | .skill |
| HTML a GenerateBlocks | .skill |
| Elementor a GenerateBlocks | .skill |
| Figma a GenerateBlocks | .skill |
Opción B: Apunta tu IA al Archivo de Habilidad
Con Claude Code, Cursor o Windsurf, solo referencia la habilidad directamente:
Lee skills/generateblocks-layouts/SKILL.md y crea un carrusel de testimonios con 3 tarjetas
Enlaces directos a los archivos de habilidad:
skills/generateblocks-layouts/SKILL.mdskills/html-to-generateblocks/SKILL.mdskills/elementor-to-generateblocks/SKILL.mdskills/figma-to-generateblocks/SKILL.md
Ejemplos de Copiar y Pegar
Explora la carpeta examples/ para 38 plantillas listas para usar en 14 tipos de sección:
| Sección | Descripción |
|---|---|
| Sección de Héroe | Barra de estadísticas, dos CTAs (5 variaciones) |
| Tabla de Precios | 3 niveles con insignia "Popular" |
| Cuadrícula de Tarjetas | Entradas de blog, portafolio |
| Lista de Características | 6 características con iconos |
| Sección de Preguntas Frecuentes | Preguntas y respuestas numeradas, dos columnas |
| Testimonios | Citas, avatares, estrellas |
| CTA Fijo | Banner oscuro, botones duales |
| Cuadrícula de Entradas | Entrada destacada + entradas pequeñas |
| Sección de Estadísticas | 4 métricas sobre fondo oscuro |
| Cuadrícula de Servicios | Diseño Bento |
| Carrusel de Logos | Logos de clientes/socios |
| Cuadrícula de Equipo | Tarjetas de miembros del equipo |
| Línea de Tiempo | Línea de tiempo vertical |
| Tabla Comparativa | Comparación de características |
Cada carpeta contiene múltiples variaciones más el prompt que las generó. Una cuadrícula de blog con bucle de consulta totalmente dinámica está en skills/generateblocks-layouts/examples/layouts/query-blog-grid.html.
Extra: Revisa examples/from-gauravtiwari-org/ para secciones del mundo real exportadas de sitios en producción.
Uso de Ejemplos
- Abre cualquier carpeta de
examples/ - Copia el contenido de cualquier archivo
output-*.html - En WordPress, abre tu página/entrada
- Cambia al Editor de Código (menú de tres puntos > Editor de Código)
- Pega los bloques
- Vuelve al Editor Visual
Lo que se Incluye
generateblocks-skills/
├── install.sh # Instalador de habilidades multi-herramienta
├── CLAUDE.md # Instrucciones de proyecto para Claude Code
├── AGENTS.md # Instrucciones universales para LLM
├── skills/ # Archivos fuente de habilidades
│ ├── generateblocks-layouts/
│ │ ├── SKILL.md # Punto de entrada principal (ligero — profundidad en references/)
│ │ ├── references/ # 23 archivos de referencia (ver mapa abajo)
│ │ └── examples/ # Ejemplos básicos, compuestos, diseños, SVG
│ ├── html-to-generateblocks/
│ ├── elementor-to-generateblocks/
│ └── figma-to-generateblocks/
├── importable/ # Archivos .skill y .zip para subir
├── examples/ # 38 ejemplos dorados en 14 secciones
├── generateblocks/ # Código fuente del plugin (2.3.0-rc) para referencia
└── generateblocks-pro/ # Código fuente del plugin Pro (2.6.0-rc) para referencia
Habilidades
| Habilidad | Propósito |
|---|---|
| Diseños de GenerateBlocks | Construye cualquier cosa con GB V2: secciones estáticas, bucles de consulta, etiquetas dinámicas, datos ACF, animaciones, condiciones, formularios Pro/bloques interactivos, plantillas de sitio completo |
| HTML a GenerateBlocks | Convierte HTML/CSS a marcado de bloques de GenerateBlocks |
| Elementor a GenerateBlocks | Migra diseños de Elementor a bloques GB limpios |
| Figma a GenerateBlocks | Convierte diseños de Figma a bloques GB |
Mapa de referencia (generateblocks-layouts/references/)
| Archivo | Cubre |
|---|---|
_index.md | Enrutador de tareas — qué archivo cargar para qué trabajo |
recovery-rules.md | Cada causa conocida de errores "Attempt Recovery" + correcciones exactas |
field-notes.md | Lecciones de conversión real: flujo de escape, scripts de validación |
block-types.md | Esquemas de atributos verificados de Elemento/Texto/Medio/Forma |
dynamic-tags.md | Catálogo canónico de las 27 etiquetas dinámicas + sintaxis exacta |
query-block.md | Consulta/Bucle/Elemento-de-bucle + extensiones de consulta Pro |
acf-and-custom-fields.md | Campos ACF, bucles de repetidor, páginas de opciones, Meta Box |
conditions.md | Condiciones de bloques/menús/formularios Pro + alternativas gratuitas |
template-authoring.md | Sitios completos: Elementos GeneratePress, FSE, plantillas de archivo |
animations.md | Pasada de ratón, fotogramas clave, animación por desplazamiento, movimiento reducido |
gb-pro.md | Mapa de características Pro (28 bloques, clases globales, línea de tiempo de versiones) |
pro-forms.md | Formularios Pro 2.6: campos, validación, integraciones ESP, Turnstile |
pro-interactive.md | Acordeón, Pestañas, Carrusel, Navegación, Encabezado de sitio, Superposiciones |
css-patterns.md · svg-icons.md · responsive.md | Patrones de estilo |
global-styles.md · patterns.md · performance.md · migrations.md · troubleshooting.md | Guías de apoyo |
Formatos Importables
La carpeta importable/ contiene dos formatos para cada habilidad:
.skill— Subir a cualquier chat de IA (Claude.ai, ChatGPT, Gemini).zip— Habilidad comprimida con referencias incluidas
Referencia Rápida de GenerateBlocks V2
Cuatro bloques principales más la familia de consulta:
generateblocks/element → Contenedores (div, section, nav, figure, a, ul/ol/li, dl/dt/dd)
generateblocks/text → Texto (h1-h6, p, span, div, a, button, figcaption, li)
generateblocks/media → Imágenes (solo img — estáticas y dinámicas)
generateblocks/shape → Iconos SVG
generateblocks/query → Listas dinámicas (+ bucle, elemento-de-bucle, consulta-sin-resultados, números-de-página-de-consulta)
Las reglas que más importan:
- Usa
generateblocks/element(NO/container),generateblocks/text(NO/headlineni/button) htmlAttributeses un objeto plano ({"href":"https://example.com/about/"}) — nunca un array- Enlaces: elemento
<a>envolviendo un hijospande texto.<a>de texto elimina su href al guardar; elemento<a>con texto sin formato desencadena recuperación - El orden de los atributos JSON sigue el orden de declaración
block.jsonde cada bloque,classNameal final - La cadena
csses de una sola línea, minimizada, alfabetizada — los estados al pasar el ratón viven en el objetostyles
Formato de bloque (Opción A — el plugin inyecta automáticamente el id-clase):
<!-- wp:generateblocks/element {"uniqueId":"hero001","tagName":"section","styles":{...},"css":"...","className":"gb-element"} -->
<section class="gb-element-hero001 gb-element">
<!-- contenido -->
</section>
<!-- /wp:generateblocks/element -->
Etiquetas dinámicas — espacio después del nombre de la etiqueta, opciones separadas por tubería, sin comillas:
{{post_title link:post}}
{{post_permalink}}
{{featured_image size:large}}
{{post_excerpt length:25}}
{{post_date dateFormat:M j, Y}}
{{term_list tax:category|sep:, }}
{{post_meta key:my_acf_field}}
{{post_meta key:repeater.0.subfield}}
{{post_url}}, {{featured_image_url}}, {{post_terms}}, {{acf}}, y cualquier forma key="quoted" no existen — se guardan bien pero se renderizan como texto literal. El catálogo completo está en references/dynamic-tags.md.
Ejemplos de Prompts
"Crea una sección de héroe con título, subtítulo, dos botones CTA y una barra de 4 estadísticas"
"Construye una tabla de precios de 3 columnas con un nivel medio destacado"
"Construye una sección de artículos relacionados: 3 entradas de la misma categoría, excluyendo la entrada actual"
"Recorre mi repetidor de ACF team_members en una cuadrícula de equipo de 3 columnas"
"Construye una plantilla de bucle de archivo para GeneratePress Elements que herede la consulta"
"Añade una animación de revelación por desplazamiento a esta sección con un respaldo de movimiento reducido"
"Convierte este HTML a GenerateBlocks: [pegar HTML]"
Limitaciones
- Sin URLs externas — Proporciona HTML, capturas de pantalla o descripciones
- Sin JavaScript personalizado — las interacciones son solo CSS, más los bloques JS integrados de GB Pro (acordeón, pestañas, carrusel, superposiciones, paginación instantánea)
- Imágenes de marcador de posición — Reemplázalas con imágenes reales después de la generación
- Inferencia de interacciones — Los estados interactivos se infieren de diseños estáticos
- Configuraciones gestionadas por la interfaz — las reglas de condición, acciones de formulario, disparadores de superposición y reglas de visualización se configuran en el panel de administración, no en el marcado del bloque; las habilidades enumeran estos como pasos manuales
- Características de Pro 2.6 / free 2.3 (Formularios, Modo CSS) están en beta a partir de junio de 2026 — los sitios con versiones estables aún no las tendrán
Desarrollo
cd generateblocks
npm run build # Compilación de producción
npm run start # Modo de observación
npm run test:unit # Pruebas unitarias de Jest
npm run test:e2e # Pruebas E2E de Playwright
npm run wp-env:start # WordPress local
Otros LLMs
Para asistentes que no sean Claude (GPT, Gemini, etc.), consulta AGENTS.md para instrucciones universales — o simplemente ejecuta ./install.sh para configurar tu herramienta automáticamente.
Licencia
- Código fuente del plugin: GPL-2.0-or-later
- Documentación de la habilidad: MIT