GenerateBlocks Fähigkeiten
LLM-optimierte Fähigkeitsdokumentation und Entwicklungsressourcen für das GenerateBlocks WordPress-Plugin.
Quellgeprüft gegen GenerateBlocks Free 2.3 und GB Pro 2.6 (Juni 2026). Jedes Block-Schema, jede Attribut-Reihenfolge und jeder Dynamic-Tag in diesen Fähigkeiten wurde gegen den Plugin-Quellcode in diesem Repository geprüft – nicht aus Trainingsdaten abgerufen.
Was die Fähigkeiten erstellen können
- Statische Abschnitte – Hero, Preise, Karten, FAQs, CTAs, vollständige Landing Pages
- Dynamische Inhalte – Query Loops (Blog Grids, Related Posts, Archive), 27 Dynamic Tags mit exakter Syntax
- Benutzerdefinierte Felder – ACF Text/Bild/Link/Gruppen-Felder, Repeater Loops, Optionsseiten, Meta Queries
- Animationen – Hover-Mikrointeraktionen, Keyframe-Einblendungen, CSS Scroll-gesteuerte Enthüllungen, Reduced-Motion-Schutz
- Bedingungen – GB Pro Block/Menü-Bedingungen, Formularfeld-Bedingungen, Alternativen für kostenlose Plugins
- GB Pro Blöcke – Akkordeon, Tabs, Karussell, Navigation, Site Header, Overlays/Mega-Menüs, das 2.6 Formularsystem
- Vollständige Site-Vorlagen – GeneratePress Elements (Schleifenvorlagen, Seiten-Hero, Hooks, Anzeigeregeln), FSE Block Themes
Schnellinstallation
Installieren Sie Fähigkeiten für Ihren KI-Coding-Assistenten mit einem Befehl:
git clone https://github.com/wpgaurav/generateblocks-skills.git
cd generateblocks-skills
chmod +x install.sh
./install.sh
Dies startet einen interaktiven Installer, der Fähigkeiten für Ihre bevorzugten Tools einrichtet.
Unterstützte Tools
| Tool | Installationsort | Format |
|---|---|---|
| Claude Code | ~/.claude/skills/ | Fähigkeitsverzeichnisse |
| Cursor | ~/.cursor/skills/ | Fähigkeitsverzeichnisse |
| Windsurf | ~/.windsurf/rules/ | Kombiniertes Markdown |
| OpenAI Codex CLI | ~/.codex/instructions.md | Kombiniertes Markdown |
| Gemini CLI | GEMINI.md (Projektstamm) | Kombiniertes Markdown |
| GitHub Copilot | .github/copilot-instructions.md | Kombiniertes Markdown |
| Cline / Roo Code | .clinerules (Projektstamm) | Kombiniertes Markdown |
| Aider | CONVENTIONS.md (Projektstamm) | Kombiniertes Markdown |
Installationsoptionen
./install.sh # Interaktiver Modus (Tools wählen)
./install.sh --all # Für alle Tools installieren
./install.sh claude # Nur für Claude Code
./install.sh cursor codex # Für mehrere Tools gleichzeitig
./install.sh --help # Hilfe anzeigen
Alternative Manuelle Einrichtung
Wenn Sie den Installer nicht verwenden möchten, haben Sie zwei Optionen:
Option A: Skill-Datei hochladen
Laden Sie eine .skill-Datei herunter und laden Sie sie zu Beginn eines neuen Chats in Claude.ai, ChatGPT, Gemini oder einem anderen KI-Assistenten hoch.
| Fähigkeit | Download |
|---|---|
| GenerateBlocks Layouts | .skill |
| HTML zu GenerateBlocks | .skill |
| Elementor zu GenerateBlocks | .skill |
| Figma zu GenerateBlocks | .skill |
Option B: KI auf die Skill-Datei verweisen
Mit Claude Code, Cursor oder Windsurf können Sie direkt auf die Fähigkeit verweisen:
Lesen Sie skills/generateblocks-layouts/SKILL.md und erstellen Sie einen Testimonial-Slider mit 3 Karten
Direkte Links zu Skill-Dateien:
skills/generateblocks-layouts/SKILL.mdskills/html-to-generateblocks/SKILL.mdskills/elementor-to-generateblocks/SKILL.mdskills/figma-to-generateblocks/SKILL.md
Copy-Paste Beispiele
Durchsuchen Sie den Ordner examples/ nach 38 gebrauchsfertigen Vorlagen in 14 Abschnittstypen:
| Abschnitt | Beschreibung |
|---|---|
| Hero-Abschnitt | Statistikleiste, duale CTAs (5 Varianten) |
| Preistabelle | 3-stufig mit "Beliebt"-Abzeichen |
| Kartenraster | Blogbeiträge, Portfolio |
| Funktionsliste | 6 Funktionen mit Icons |
| FAQ-Abschnitt | Nummeriertes Q&A, zwei Spalten |
| Testimonials | Zitate, Avatare, Sterne |
| Sticky CTA | Dunkles Banner, duale Buttons |
| Beitraster | Hervorgehoben + kleine Beiträge |
| Statistik-Abschnitt | 4 Metriken auf dunklem Hintergrund |
| Dienstleistungsraster | Bento-Layout |
| Logo-Karussell | Kunden-/Partnerlogos |
| Team-Raster | Team-Mitgliedskarten |
| Zeitstrahl | Vertikaler Zeitstrahl |
| Vergleichstabelle | Funktionsvergleich |
Jeder Ordner enthält mehrere Varianten plus die Eingabeaufforderung, die sie generiert hat. Ein vollständig dynamischer Query-Loop-Blog-Raster befindet sich unter skills/generateblocks-layouts/examples/layouts/query-blog-grid.html.
Bonus: Sehen Sie sich examples/from-gauravtiwari-org/ für reale Abschnitte aus Produktionsseiten an.
Beispiele verwenden
- Öffnen Sie einen beliebigen
examples/Ordner - Kopieren Sie den Inhalt einer beliebigen
output-*.html-Datei - Öffnen Sie in WordPress Ihre Seite/Beitrag
- Wechseln Sie zum Code-Editor (Drei-Punkte-Menü > Code-Editor)
- Fügen Sie die Blöcke ein
- Wechseln Sie zurück zum visuellen Editor
Was enthalten ist
generateblocks-skills/
├── install.sh # Multi-Tool Skill Installer
├── CLAUDE.md # Claude Code Projektanweisungen
├── AGENTS.md # Universelle LLM-Anweisungen
├── skills/ # Skill-Quelldateien
│ ├── generateblocks-layouts/
│ │ ├── SKILL.md # Haupteinstiegspunkt (schlank – Details in references/)
│ │ ├── references/ # 23 Referenzdateien (siehe Karte unten)
│ │ └── examples/ # Basis-, zusammengesetzte, Layout-, SVG-Beispiele
│ ├── html-to-generateblocks/
│ ├── elementor-to-generateblocks/
│ └── figma-to-generateblocks/
├── importable/ # .skill- und .zip-Dateien zum Hochladen
├── examples/ # 58 goldene Beispiele in 14 Abschnitten
├── generateblocks/ # Plugin-Quellcode (2.3.0-rc) zur Referenz
└── generateblocks-pro/ # Pro Plugin-Quellcode (2.6.0-rc) zur Referenz
Fähigkeiten
| Fähigkeit | Zweck |
|---|---|
| GenerateBlocks Layouts | Alles mit GB V2 bauen: statische Abschnitte, Query Loops, Dynamic Tags, ACF-Daten, Animationen, Bedingungen, Pro Formulare/interaktive Blöcke, vollständige Site-Vorlagen |
| HTML zu GenerateBlocks | HTML/CSS in GenerateBlocks Block-Markup konvertieren |
| Elementor zu GenerateBlocks | Elementor-Layouts zu sauberen GB-Blöcken migrieren |
| Figma zu GenerateBlocks | Figma-Designs in GB-Blöcke konvertieren |
Referenzkarte (generateblocks-layouts/references/)
| Datei | Deckt ab |
|---|---|
_index.md | Aufgaben-Router – welche Datei für welchen Job geladen wird |
recovery-rules.md | Jede bekannte Ursache von "Attempt Recovery"-Fehlern + genaue Lösungen |
field-notes.md | Echtkonvertierungslektionen: Escaping-Workflow, Validierungsskripte |
block-types.md | Element/Text/Media/Shape überprüfte Attribut-Schemas |
dynamic-tags.md | Kanonischer Katalog aller 27 Dynamic Tags + exakte Syntax |
query-block.md | Query/Looper/Loop-Item + Pro Query-Erweiterungen |
acf-and-custom-fields.md | ACF-Felder, Repeater Loops, Optionsseiten, Meta Box |
conditions.md | Pro Block/Menü/Formular-Bedingungen + kostenlose Alternativen |
template-authoring.md | Vollständige Sites: GeneratePress Elements, FSE, Archivvorlagen |
animations.md | Hover, Keyframes, Scroll-gesteuerte Animation, reduzierte Bewegung |
gb-pro.md | Pro Funktionsübersicht (28 Blöcke, globale Klassen, Versionszeitplan) |
pro-forms.md | Pro 2.6 Formulare: Felder, Validierung, ESP-Integrationen, Turnstile |
pro-interactive.md | Akkordeon, Tabs, Karussell, Navigation, Site Header, Overlays |
css-patterns.md · svg-icons.md · responsive.md | Styling-Muster |
global-styles.md · patterns.md · performance.md · migrations.md · troubleshooting.md | Unterstützende Leitfäden |
Importierbare Formate
Der Ordner importable/ enthält zwei Formate für jede Fähigkeit:
.skill– In jeden KI-Chat hochladbar (Claude.ai, ChatGPT, Gemini).zip– Komprimierte Fähigkeit mit enthaltenen Referenzen
GenerateBlocks V2 Kurzreferenz
Vier Kernblöcke plus die Query-Familie:
generateblocks/element → Container (div, section, nav, figure, a, ul/ol/li, dl/dt/dd)
generateblocks/text → Text (h1-h6, p, span, div, a, button, figcaption, li)
generateblocks/media → Bilder (nur img – statisch und dynamisch)
generateblocks/shape → SVG-Icons
generateblocks/query → Dynamische Listen (+ looper, loop-item, query-no-results, query-page-numbers)
Die wichtigsten Regeln:
- Verwenden Sie
generateblocks/element(NICHT/container),generateblocks/text(NICHT/headlineoder/button) htmlAttributesist ein einfaches Objekt ({"href":"https://example.com/about/"}) – niemals ein Array- Links: Element
<a>umschließt ein Textspan-Kind. Text<a>entfernt sein href beim Speichern; Element<a>mit rohem Text löst Recovery aus - Die JSON-Attributreihenfolge folgt der
block.json-Deklarationsreihenfolge jedes Blocks,classNamezuletzt - Der
css-String ist einzeilig, minimiert, alphabetisch sortiert – Hover-Zustände leben imstyles-Objekt
Blockformat (Option A – das Plugin fügt automatisch die id-class ein):
<!-- wp:generateblocks/element {"uniqueId":"hero001","tagName":"section","styles":{...},"css":"...","className":"gb-element"} -->
<section class="gb-element-hero001 gb-element">
<!-- Inhalt -->
</section>
<!-- /wp:generateblocks/element -->
Dynamic Tags – Leerzeichen nach dem Tag-Namen, pipe-getrennte Optionen, keine Anführungszeichen:
{{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}} und jede key="quoted"-Form existieren nicht – sie werden gespeichert und als wörtlicher Text gerendert. Der vollständige Katalog befindet sich in references/dynamic-tags.md.
Beispiel-Eingabeaufforderungen
"Erstellen Sie einen Hero-Abschnitt mit Überschrift, Unterüberschrift, zwei CTA-Buttons und einer 4-Statistik-Leiste"
"Bauen Sie eine 3-spaltige Preistabelle mit einer hervorgehobenen mittleren Stufe"
"Erstellen Sie einen Bereich 'Ähnliche Beiträge': 3 Beiträge aus derselben Kategorie, aktueller Beitrag ausgeschlossen"
"Schleifen Sie meinen ACF-Repeater team_members in ein 3-spaltiges Team-Raster"
"Bauen Sie eine Archiv-Schleifenvorlage für GeneratePress Elements, die die Abfrage erbt"
"Fügen Sie diesem Abschnitt eine Scroll-Reveal-Animation mit einem Reduced-Motion-Fallback hinzu"
"Konvertieren Sie dieses HTML zu GenerateBlocks: [HTML einfügen]"
Einschränkungen
- Keine externen URLs – Geben Sie HTML, Screenshots oder Beschreibungen an
- Kein benutzerdefiniertes JavaScript – Interaktionen erfolgen nur über CSS, plus GB Pros integrierte JS-Blöcke (Akkordeon, Tabs, Karussell, Overlays, sofortige Paginierung)
- Platzhalter-Bilder – Ersetzen Sie diese nach der Generierung durch echte Bilder
- Hover-Interpolation – Interaktive Zustände werden aus statischen Designs abgeleitet
- UI-verwaltete Einstellungen – Bedingungsregeln, Formularaktionen, Overlay-Trigger und Anzeigeregeln werden in wp-admin konfiguriert, nicht im Block-Markup; die Fähigkeiten listen diese als manuelle Schritte auf
- Pro 2.6 / Free 2.3 Funktionen (Formulare, CSS-Modus) sind ab Juni 2026 Beta – Seiten mit stabilen Versionen haben sie noch nicht
Entwicklung
cd generateblocks
npm run build # Produktions-Build
npm run start # Watch-Modus
npm run test:unit # Jest Unit-Tests
npm run test:e2e # Playwright E2E
npm run wp-env:start # Lokales WordPress
Andere LLMs
Für Nicht-Claude-Assistenten (GPT, Gemini usw.) lesen Sie AGENTS.md für universelle Anweisungen – oder führen Sie einfach ./install.sh aus, um Ihr Tool automatisch einzurichten.
Lizenz
- Plugin-Quellcode: GPL-2.0-or-later
- Fähigkeitsdokumentation: MIT