Hero Badge Earn

SkillWeb & browsing

Lets your agent generate an animated gold-medal achievement badge as an HTML page.

Then ask your AI: use the Hero Badge Earn skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.

No other account needed.

Add it as a step in a pipeline you build on Ahel, or connect Ahel to Claude, ChatGPT, Cursor, Claude Code or Codex and ask your AI to use it.

About this skill

This project curates AI Prompts for generating [cool HTML animated web pages], covering multiple categories such as animation effects, 3D visualization, PPT-style presentations, and UI beautification.

What this skill tells your AI

The instructions your AI receives, as published by unclecheng-li/ai_animation in skills/ui2v-motions/01_动效库/itelmn/hero-badge-earn/SKILL.md and read by Ahel’s review.

A gold medal pops in with red ribbons and a dashed celebration ring. Function: achievement unlock for gamified or milestone moments.

Purpose

Rewards, onboarding completion, ship celebrations
Back.out medal impact
Warm gold against dark slate

Specs

Medal scales past 1.0 then settles
Ribbons drop after the medal lands
Entry: index.html

Usage

npx hyperframes preview
ui2v motion publish . --version 1.0.0

Notes

Keep medal copy to two short words. Longer phrases wrap awkwardly inside the circle.

Signals

GitHub stars: 1k
Forks: 111
Last commit: Oct 2026

Advanced

Item type: skill
Key: hero-badge-earn
Source: github.com/unclecheng-li/ai_animation

github.com/unclecheng-li/ai_animation