메뉴
Analysiere, debugge und optimiere H5P-Dateien für bessere Benutzerfreundlichkeit und Design.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Überarbeitet einen fertigen Text vor der Veröffentlichung so, dass er beim Publikum ankommt — Denke vom Markt/Leser her, nicht Verschleierung. Typische KI-Schreibspuren (Floskeln, Metronom-Rhythmus, hohle Verstärker, Zwangs-Fazit) raus, Dirks eigene Stimme und Substanz rein, damit der Text als kompetent und eigenständig gelesen und nicht reflexhaft als "bloß KI" abgetan wird. Use when Dirk is about to publish a blog post, LinkedIn post, business email, or any public text and wants it de-slopped / voice-restored. NICHT zum Recherchieren (dafür recherche-workflow) und NICHT zum Neuschreiben — nur minimal-invasive Überarbeitung eines vorhandenen Textes.
Complete workflow for creating and publishing blog articles to cannabis-kultur.online (EduGrow WordPress) with Claude AI and WordPress MCP integration. Use when creating educational blog posts, tutorial articles, or documentation that needs to be published to WordPress.
Generate H5P interactive content files (.h5p) programmatically using Python. Supports 16 content types, 4 container types, visual verification, and BS:WI branding. Use for quizzes, flashcards, drag-and-drop, interactive books, course presentations, essays, branching scenarios, and interactive videos.
Compose and send emails via SMTP through the IMAP MCP server. Supports drafting, review, and sending with templates for common email types. Use when the user wants to write or send an email.
Process incoming emails and convert them to actionable items - calendar events, todos, or archive decisions. Analyzes email content to determine the appropriate action. Use when reviewing inbox or processing emails.
Erstellt professionelle Slide-Präsentationen auf HedgeDoc (reveal.js) im persönlichen Branding-Design. Hintergrundbild von Pexels, BS:WI-Logo als Wasserzeichen, dunkler Overlay mit transparenten Rändern. Nutze diesen Skill wenn der User eine Präsentation, Slides, einen Vortrag oder ein Blitzlicht erstellen möchte.
| name | h5p-designer |
| description | Analysiere, debugge und optimiere H5P-Dateien für bessere Benutzerfreundlichkeit und Design. |
| license | MIT |
Analysiere, debugge und optimiere H5P-Dateien für bessere Benutzerfreundlichkeit und Design.
1. ANALYZE → H5P-Datei analysieren, Issues identifizieren
2. DIAGNOSE → Probleme kategorisieren (Größe, Spacing, Encoding)
3. FIX → Auto-Fixes anwenden + Layout optimieren
4. VERIFY → Optimierte Datei prüfen
5. (OPTIONAL) → In WordPress hochladen + Browser-Screenshot
# H5P analysieren
python scripts/h5p_designer.py pfad/zur/datei.h5p
# H5P analysieren UND automatisch fixen
python scripts/h5p_designer.py pfad/zur/datei.h5p --fix
# Mit spezifischem Output-Pfad
python scripts/h5p_designer.py pfad/zur/datei.h5p --fix --output neue-datei.h5p
| Typ | Analyse | Auto-Fix | Layout-Optimierung |
|---|---|---|---|
| H5P.DragQuestion (Drag & Drop) | ✅ | ✅ | ✅ |
| H5P.MultiChoice | ✅ | Teilweise | - |
| H5P.Blanks (Lückentext) | Basis | - | - |
| H5P.TrueFalse | Basis | - | - |
| H5P.DialogCards | Basis | - | - |
============================================================
H5P Analysis: Scrum-Rollen zuordnen
Type: DragQuestion
============================================================
Found 8 issues:
- Errors: 0
- Warnings: 8
- Auto-fixable: 2
Details:
1. [WARN] [encoding] Draggable 6: "schaetzt" should be "schätzt" [FIX]
2. [WARN] [spacing] Elements 1 and 2 are too close (2.0%)
3. [WARN] [spacing] Elements 2 and 3 are too close (2.0%)
...
Das Script wendet folgende Optimierungen an:
from h5p_designer import H5PDesigner, analyze_h5p, optimize_h5p
# Einfache Analyse
analysis = analyze_h5p("meine-uebung.h5p")
print(analysis.summary())
for issue in analysis.issues:
print(f"{issue.severity}: {issue.message}")
# Optimieren und speichern
saved_path, results = optimize_h5p("meine-uebung.h5p")
print(f"Optimierte Datei: {saved_path}")
# Detaillierte Kontrolle
designer = H5PDesigner("meine-uebung.h5p")
analysis = designer.analyze()
# Nur bestimmte Fixes anwenden
designer.apply_fixes([i for i in analysis.issues if i.category == 'encoding'])
# Eigene Werte setzen
designer.set_content_value('question.settings.size.width', 800)
# Speichern
designer.save("custom-output.h5p")
| Element | Minimum | Empfohlen | Maximum |
|---|---|---|---|
| Canvas Breite | 600px | 700-800px | 1000px |
| Canvas Höhe | 400px | 500-600px | 800px |
| Draggable Breite | 12% | 18-22% | 30% |
| Draggable Höhe | 8% | 10-14% | 20% |
| Dropzone Breite | 15% | 20-30% | 40% |
| Dropzone Höhe | 20% | 25-35% | 50% |
| Element-Abstand | 3% | 5% | - |
<!-- Gut: Kurz und lesbar -->
<p style='margin:0;font-size:12px;'>Kurzer Text</p>
<!-- Schlecht: Zu viel Text -->
<p style='margin:0;font-size:10px;'>Dieser sehr lange Text wird abgeschnitten und ist unleserlich</p>
Nach der Optimierung kann die H5P-Datei hochgeladen werden:
# 1. H5P optimieren
saved_path, _ = optimize_h5p("original.h5p")
# 2. Zu WordPress hochladen (via wp-mcp)
# wp_upload_h5p(saved_path)
# 3. In Moodle einbetten
# moodle_add_h5p_activity(course_id, saved_path)
h5p-designer/
├── SKILL.md # Diese Dokumentation
└── scripts/
└── h5p_designer.py # Hauptscript
| Version | Datum | Änderungen |
|---|---|---|
| 1.0.0 | 2026-01-19 | Initial: DragQuestion Analyzer, Auto-Fix, Layout-Optimierung |
| 1.0.1 | 2026-03-12 | Hinweis auf h5p-generator v3 Overlap |
Der h5p-generator Skill (v3.0+) hat eine eigene verify_h5p() Funktion mit Puppeteer-basierter visueller Verifikation. Dieser h5p-designer Skill ist spezialisiert auf nachtraegliche Analyse und Reparatur bestehender H5P-Dateien (insbesondere DragQuestion), waehrend h5p-generator sich auf die Erstellung konzentriert.
Wann welchen Skill:
h5p-generatorh5p-designer