skills.rest
dSchulenburg
dSchulenburgCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

h5p-designer

Analyze and fix sizing, spacing, and encoding issues in H5P files.

3|2|Updated Jan 9, 2026
Search Tags:#accessibility#usability#design optimization#drag and drop#h5p#interactive content
One-click install
npx skills add https://github.com/dSchulenburg/claude-skills --skill h5p-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: h5p-designer
Source: https://github.com/dSchulenburg/claude-skills/tree/main/h5p-designer
Command: npx skills add https://github.com/dSchulenburg/claude-skills --skill h5p-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill addresses usability and design issues in H5P interactive content, ensuring a smoother and more accessible learning experience for users.

Core Features & Use Cases

  • Analyze H5P Files: Identifies common problems like small interactive elements, poor spacing, and encoding errors.
  • Automated Fixing: Applies intelligent adjustments to element sizes, spacing, and character encoding.
  • Layout Optimization: Specifically enhances Drag & Drop interactions for clarity and ease of use.
  • Use Case: You have a Drag & Drop H5P exercise where the draggable items are too small to tap on a mobile device, or the drop zones are too close together. This Skill can automatically resize and reposition these elements for optimal interaction.

Quick Start

Use the h5p-designer skill to analyze and automatically fix the H5P file located at '~/Downloads/my_quiz.h5p'.

Frequently Asked Questions about h5p-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix small interactive elements and poor spacing in H5P drag and drop content?▼

To fix small interactive elements in H5P drag and drop content, you can analyze the file and apply automated layout adjustments. This process resizes draggable items and repositions drop zones to ensure optimal interaction and usability across different devices.

What is the best way to optimize H5P interactive content for better mobile usability?▼

Optimizing H5P interactive content for mobile usability involves analyzing element sizing, spacing, and character encoding. By applying automated fixes to layout configurations, you can enhance accessibility and ensure a smoother learning experience on touch devices.

Can I automatically resolve character encoding errors in an H5P file?▼

Yes, you can automatically resolve character encoding errors in an H5P file. Analyzing the file structure allows automated scripts to detect encoding issues and apply intelligent fixes, ensuring text displays correctly within interactive content types like Multiple Choice and Fill in the Blanks.

Does automated H5P layout optimization work for Multiple Choice and Fill in the Blanks interactions?▼

Automated H5P layout optimization works effectively for Multiple Choice and Fill in the Blanks interactions. The process analyzes the specific layout configurations of these content types, adjusting element spacing and sizes to improve overall design and user experience.

Why does my H5P drag and drop exercise have overlapping drop zones on mobile screens?▼

Overlapping drop zones in H5P drag and drop exercises occur due to poor spacing and element sizing configurations. Analyzing the H5P file helps identify these layout constraints, allowing automated adjustments to reposition drop zones for clear and easy interaction.

Related Skills

Explore More Education & Research Skills→
Generous-CorpGenerous-Corp
13

import-design

Import external design files into the Pulp framework with automated layout parity validation.

Official
Advanced
vishalsachdevvishalsachdev
1

chartjs-generator

Generate interactive Chart.js visualizations as complete MicroSim bundles for iframe embedding.

Community
Intermediate
dSchulenburgdSchulenburg
3

h5p-generator

Generate H5P interactive content files programmatically with Python scripts.

Community
Advanced
kateuszkateusz
13

editor-ui-drawers

Wrap ImGui calls with reusable Drawer components for consistent editor UI.

Community
Basic