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

0•

Learning & Documentation

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

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.

Key Features

01HTML performance audit for width, height, and loading attributes

02Comprehensive validation reporting for station-wide emotional balance

03Emotional context mapping to ensure visual storytelling alignment

04Automated Cloudinary URL validation and optimization auditing

05Detection and prevention of hallucinated image filenames

060 GitHub stars

Use Cases

01Ensuring emotional consistency in mascot-led learning journeys

02Batch correcting broken or unoptimized Cloudinary image links

03Reviewing educational HTML stations before deployment to production

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cynthiateeters/hap-learning-lab-template hap-image-validation

For use in Claude.ai and ChatGPT

Download Skill