Habilidades GenerateBlocks

Documentação de habilidades e recursos de desenvolvimento otimizados para LLM para o plugin WordPress GenerateBlocks.

Verificado contra o código-fonte do GenerateBlocks gratuito 2.3 e GB Pro 2.6 (junho de 2026). Cada esquema de bloco, ordem de atributos e tag dinâmica nestas habilidades foi verificado contra o código-fonte do plugin neste repositório — não recuperado de dados de treinamento.

O que as habilidades podem construir

Seções estáticas — heróis, preços, cards, FAQs, CTAs, páginas de destino completas
Conteúdo dinâmico — loops de consulta (grades de blog, posts relacionados, arquivos), 27 tags dinâmicas com sintaxe exata
Campos personalizados — campos ACF texto/imagem/link/grupo, loops repetidores, páginas de opções, consultas de metadados
Animações — micro-interações de hover, entradas com keyframes, revelações com rolagem CSS, proteções de movimento reduzido
Condições — condições de bloco/menu do GB Pro, condições de campos de formulário, alternativas do plugin gratuito
Blocos GB Pro — acordeão, abas, carrossel, navegação, cabeçalho do site, sobreposições/menu mega, sistema de Formulários 2.6
Modelos de site completo — Elementos GeneratePress (modelos de loop, heróis de página, hooks, regras de exibição), temas de bloco FSE

Instalação Rápida

Instale as habilidades para seu assistente de codificação de IA com um comando:

git clone https://github.com/wpgaurav/generateblocks-skills.git
cd generateblocks-skills
chmod +x install.sh
./install.sh

Isso inicia um instalador interativo que configura as habilidades para suas ferramentas preferidas.

Ferramentas Suportadas

Ferramenta	Local de Instalação	Formato
Claude Code	`~/.claude/skills/`	Diretórios de habilidade
Cursor	`~/.cursor/skills/`	Diretórios de habilidade
Windsurf	`~/.windsurf/rules/`	Markdown combinado
OpenAI Codex CLI	`~/.codex/instructions.md`	Markdown combinado
Gemini CLI	`GEMINI.md` (raiz do projeto)	Markdown combinado
GitHub Copilot	`.github/copilot-instructions.md`	Markdown combinado
Cline / Roo Code	`.clinerules` (raiz do projeto)	Markdown combinado
Aider	`CONVENTIONS.md` (raiz do projeto)	Markdown combinado

Opções de Instalação

./install.sh              # Modo interativo (escolha as ferramentas)
./install.sh --all        # Instalar para todas as ferramentas
./install.sh claude       # Apenas Claude Code
./install.sh cursor codex # Várias ferramentas de uma vez
./install.sh --help       # Mostrar ajuda

Alternativa: Configuração Manual

Se você preferir não usar o instalador, tem duas opções:

Opção A: Carregar um Arquivo de Habilidade

Baixe um arquivo .skill e carregue-o no início de um novo chat no Claude.ai, ChatGPT, Gemini ou qualquer assistente de IA.

Habilidade	Download
GenerateBlocks Layouts	.skill
HTML para GenerateBlocks	.skill
Elementor para GenerateBlocks	.skill
Figma para GenerateBlocks	.skill

Opção B: Aponte sua IA para o Arquivo de Habilidade

Com Claude Code, Cursor ou Windsurf, basta referenciar a habilidade diretamente:

Leia skills/generateblocks-layouts/SKILL.md e crie um slider de depoimentos com 3 cards

Links diretos para arquivos de habilidade:

Exemplos para Copiar e Colar

Navegue pela pasta examples/ para 38 modelos prontos para uso em 14 tipos de seção:

Seção	Descrição
Seção Hero	Barra de estatísticas, CTAs duais (5 variações)
Tabela de Preços	3 níveis com selo "Popular"
Grade de Cards	Posts de blog, portfólio
Lista de Recursos	6 recursos com ícones
Seção FAQ	Perguntas e respostas numeradas, duas colunas
Depoimentos	Citações, avatares, estrelas
CTA Fixo	Banner escuro, botões duais
Grade de Posts	Post em destaque + posts pequenos
Seção de Estatísticas	4 métricas em fundo escuro
Grade de Serviços	Layout Bento
Carrossel de Logos	Logos de clientes/parceiros
Grade de Equipe	Cards de membros da equipe
Linha do Tempo	Linha do tempo vertical
Tabela de Comparação	Comparação de recursos

Cada pasta contém múltiplas variações mais o prompt que as gerou. Uma grade de blog com loop de consulta totalmente dinâmica está em skills/generateblocks-layouts/examples/layouts/query-blog-grid.html.

Bônus: Confira examples/from-gauravtiwari-org/ para seções do mundo real exportadas de sites de produção.

Usando Exemplos

Abra qualquer pasta examples/
Copie o conteúdo de qualquer arquivo output-*.html
No WordPress, abra sua página/post
Mude para o Editor de Código (menu de três pontos > Editor de Código)
Cole os blocos
Volte para o Editor Visual

O que Está Incluído

generateblocks-skills/
├── install.sh                 # Instalador de habilidades multi-ferramenta
├── CLAUDE.md                  # Instruções de projeto para Claude Code
├── AGENTS.md                  # Instruções universais para LLM
├── skills/                    # Arquivos fonte das habilidades
│   ├── generateblocks-layouts/
│   │   ├── SKILL.md           # Ponto de entrada principal (enxuto — profundidade em references/)
│   │   ├── references/        # 23 arquivos de referência (veja mapa abaixo)
│   │   └── examples/          # Exemplos básicos, compostos, layouts, SVG
│   ├── html-to-generateblocks/
│   ├── elementor-to-generateblocks/
│   └── figma-to-generateblocks/
├── importable/                # Arquivos .skill e .zip para upload
├── examples/                  # 38 exemplos dourados em 14 seções
├── generateblocks/            # Código-fonte do plugin (2.3.0-rc) para referência
└── generateblocks-pro/        # Código-fonte do plugin Pro (2.6.0-rc) para referência

Habilidades

Habilidade	Propósito
GenerateBlocks Layouts	Construa qualquer coisa com GB V2: seções estáticas, loops de consulta, tags dinâmicas, dados ACF, animações, condições, formulários Pro/blocos interativos, modelos de site completo
HTML para GenerateBlocks	Converta HTML/CSS em marcação de blocos GenerateBlocks
Elementor para GenerateBlocks	Migre layouts Elementor para blocos GB limpos
Figma para GenerateBlocks	Converta designs Figma em blocos GB

Mapa de referência (generateblocks-layouts/references/)

Arquivo	Aborda
`_index.md`	Roteador de tarefas — qual arquivo carregar para qual trabalho
`recovery-rules.md`	Toda causa conhecida de erros "Tentativa de Recuperação" + correções exatas
`field-notes.md`	Lições de conversão real: workflow de escape, scripts de validação
`block-types.md`	Esquemas de atributos verificados de Elemento/Texto/Mídia/Forma
`dynamic-tags.md`	Catálogo canônico de todas as 27 tags dinâmicas + sintaxe exata
`query-block.md`	Bloco de Consulta/Looper/Item de Loop + extensões de consulta Pro
`acf-and-custom-fields.md`	Campos ACF, loops repetidores, páginas de opções, Meta Box
`conditions.md`	Condições de bloco/menu/formulário Pro + alternativas gratuitas
`template-authoring.md`	Sites completos: Elementos GeneratePress, FSE, modelos de arquivo
`animations.md`	Hover, keyframes, animação com rolagem, movimento reduzido
`gb-pro.md`	Mapa de recursos Pro (28 blocos, classes globais, linha do tempo de versões)
`pro-forms.md`	Formulários Pro 2.6: campos, validação, integrações ESP, Turnstile
`pro-interactive.md`	Acordeão, Abas, Carrossel, Navegação, Cabeçalho do Site, Sobreposições
`css-patterns.md` · `svg-icons.md` · `responsive.md`	Padrões de estilo
`global-styles.md` · `patterns.md` · `performance.md` · `migrations.md` · `troubleshooting.md`	Guias de suporte

Formatos Importáveis

A pasta importable/ contém dois formatos para cada habilidade:

.skill — Upload para qualquer chat de IA (Claude.ai, ChatGPT, Gemini)
.zip — Habilidade compactada com referências incluídas

Referência Rápida GenerateBlocks V2

Quatro blocos principais mais a família de consulta:

generateblocks/element    → Contêineres (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      → Imagens (apenas img — estáticas e dinâmicas)
generateblocks/shape      → Ícones SVG
generateblocks/query      → Listas dinâmicas (+ looper, loop-item, query-no-results, query-page-numbers)

As regras que mais importam:

Use generateblocks/element (NÃO /container), generateblocks/text (NÃO /headline ou /button)
htmlAttributes é um objeto simples ({"href":"https://example.com/about/"}) — nunca um array
Links: elemento <a> envolvendo um filho span de texto. Texto <a> remove seu href ao salvar; elemento <a> com texto bruto desencadeia recuperação
A ordem dos atributos JSON segue a ordem de declaração block.json de cada bloco, className por último
A string css é de linha única, minificada, em ordem alfabética — estados de hover residem no objeto styles

Formato do bloco (Opção A — o plugin injeta automaticamente o id-class):

<!-- wp:generateblocks/element {"uniqueId":"hero001","tagName":"section","styles":{...},"css":"...","className":"gb-element"} -->
<section class="gb-element-hero001 gb-element">
    <!-- conteúdo -->
</section>
<!-- /wp:generateblocks/element -->

Tags dinâmicas — espaço após o nome da tag, opções separadas por pipe, sem aspas:

{{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}} e qualquer forma key="quoted" não existem — elas são salvas corretamente e renderizadas como texto literal. O catálogo completo está em references/dynamic-tags.md.

Exemplos de Prompts

"Crie uma seção hero com título, subtítulo, dois botões de CTA e uma barra de 4 estatísticas"

"Construa uma tabela de preços de 3 colunas com um nível intermediário destacado"

"Construa uma seção de posts relacionados: 3 posts da mesma categoria, excluindo o post atual"

"Faça um loop no meu repetidor ACF team_members em uma grade de equipe de 3 colunas"

"Construa um modelo de loop de arquivo para Elementos GeneratePress que herde a consulta"

"Adicione uma animação de revelação com rolagem a esta seção com uma alternativa de movimento reduzido"

"Converta este HTML para GenerateBlocks: [cole o HTML]"

Limitações

Sem URLs externas — Forneça HTML, capturas de tela ou descrições
Sem JavaScript personalizado — interações são apenas CSS, mais os blocos JS embutidos do GB Pro (acordeão, abas, carrossel, sobreposições, paginação instantânea)
Imagens placeholder — Substitua por imagens reais após a geração
Inferência de hover — Estados interativos inferidos a partir de designs estáticos
Configurações gerenciadas pela UI — regras de condição, ações de formulário, gatilhos de sobreposição, e regras de exibição são configuradas no wp-admin, não na marcação do bloco; as habilidades listam estas como etapas manuais
Recursos Pro 2.6 / gratuito 2.3 (Formulários, Modo CSS) são beta em junho de 2026 — sites em versões estáveis ainda não os terão

Desenvolvimento

cd generateblocks

npm run build          # Build de produção
npm run start          # Modo de observação
npm run test:unit      # Testes unitários Jest
npm run test:e2e       # Testes E2E Playwright
npm run wp-env:start   # WordPress local

Outros LLMs

Para assistentes não-Claude (GPT, Gemini, etc.), veja AGENTS.md para instruções universais — ou apenas execute ./install.sh para configurar sua ferramenta automaticamente.

Licença

Código-fonte do plugin: GPL-2.0-or-later
Documentação da habilidade: MIT

wpgaurav/generateblocks-skills

O que é generateblocks-skills?

Perguntar na sua IA favorita

Documentação