What is HAP image validation?

It is a specialized skill for Claude Code that checks if HAP character images match the emotional context of the learning material and follow technical best practices.

Can it detect missing HTML attributes?

Yes, it verifies that width, height, decoding, and loading attributes are present to prevent layout shifts and improve Core Web Vitals.

Why are Cloudinary URL patterns checked?

To ensure images are correctly optimized using f_auto and q_auto parameters, reducing page load times and bandwidth usage.

How does it handle emotional context?

The skill maps specific HAP poses, such as 'confused' for struggle points or 'brain-explodes' for breakthroughs, to the surrounding educational narrative for consistency.

HAP Image & Emotional Validation

Name: HAP Image & Emotional Validation
Author: cynthiateeters

bycynthiateeters

Aprendizaje y Documentación

Validates HAP character images for emotional context, Cloudinary URL accuracy, and web performance standards in educational content.

Acerca de

This skill ensures visual consistency and technical accuracy for the HAP learning mascot across educational platforms. It automatically scans HTML files to verify that images match the emotional tone of the content, detects 'hallucinated' image filenames, ensures optimized Cloudinary URL parameters are used, and audits HTML attributes like width, height, and lazy loading for better performance and accessibility. It is essential for maintaining a high-quality, mascot-led learning journey that remains pedagogically sound and technically optimized.

Características Principales

HTML performance audit for width, height, and loading attributes
Comprehensive validation reporting for station-wide emotional balance
Emotional context mapping to ensure visual storytelling alignment
Automated Cloudinary URL validation and optimization auditing
Detection and prevention of hallucinated image filenames
0 GitHub stars

Casos de Uso

Ensuring emotional consistency in mascot-led learning journeys
Batch correcting broken or unoptimized Cloudinary image links
Reviewing educational HTML stations before deployment to production

Acerca de

Características Principales

HTML performance audit for width, height, and loading attributes
Comprehensive validation reporting for station-wide emotional balance
Emotional context mapping to ensure visual storytelling alignment
Automated Cloudinary URL validation and optimization auditing
Detection and prevention of hallucinated image filenames
0 GitHub stars

Casos de Uso

Ensuring emotional consistency in mascot-led learning journeys
Batch correcting broken or unoptimized Cloudinary image links
Reviewing educational HTML stations before deployment to production