What does the HAP Image Validation skill do?

It validates that HAP character images match the emotional context of the text, checks Cloudinary URLs for errors, and ensures all HTML attributes meet performance and accessibility standards.

Why is emotional mapping important for this skill?

HAP is a learning companion; the skill ensures that images showing confusion appear during difficult sections and celebratory images appear only after major breakthroughs, reinforcing the apprentice learning journey.

Does this skill improve web performance?

Yes, it enforces the use of width/height attributes to prevent layout shifts (CLS) and validates loading/fetchpriority attributes for optimal page speed.

How does it handle image hallucinations?

The skill maintains a definitive list of 24 real image filenames and automatically flags or corrects any filenames that do not exist in the actual repository.

HAP Image Validator

Name: HAP Image Validator
Author: cynthiateeters

bycynthiateeters

0•

内容管理

Validates and optimizes HAP character images for educational content to ensure emotional consistency and technical accuracy.

The HAP Image Validation skill is a specialized tool for static site developers working with the HyBit SSG framework. It ensures that HAP (HyBit A. ProtoBot) mascot images are used correctly by mapping character poses to the emotional context of the surrounding content. Beyond visual storytelling, the skill performs rigorous technical checks on Cloudinary URL structures, prevents the use of hallucinated asset names, and enforces accessibility and performance standards through alt text and HTML attribute validation.

主要功能

01Emotional context mapping for consistent character storytelling

020 GitHub stars

03Hallucination detection against a 24-image verified inventory

04Cloudinary URL pattern and version number verification

05Accessibility-focused alt text validation and suggestions

06Performance optimization via width, height, and loading attribute checks

使用场景

01Auditing educational 'Learning Lab' stations before deployment

02Correcting broken or hallucinated image links during content creation

03Ensuring visual consistency across large-scale static site projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cynthiateeters/hybit-ssg hap-image-validation

For use in Claude.ai and ChatGPT

Download Skill