Hero Password Meter

SkillWeb & browsing

Lets your agent build an animated password strength meter with color-coded segments for signup pages.

Then ask your AI: use the Hero Password Meter skill

Details

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

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 compiles AI Prompts for generating [cool HTML animated web pages], covering 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-password-meter/SKILL.md and read by Ahel’s review.

A dark auth card grows a masked passphrase while four strength segments light from weak to strong. Function: security / signup strength.

Purpose

  • Account creation, password reset, and security heroes
  • Segmented meter with labeled strength states
  • Warm stone dark chrome

Specs

  • Segments color in order: red → amber → lime → green
  • Field mask length increases with each tier
  • Entry: index.html

Usage

npx hyperframes preview
ui2v motion publish . --version 1.0.0

Notes

Do not animate real password text — keep dots only for privacy-safe demos.

Signals

GitHub stars
1k
Forks
111
Last commit
Oct 2026

Ahel review

  • K5info
    obfuscation (in hyperframes.json)
  • K5info
    obfuscation (in meta.json)
  • K5info
    obfuscation (in package.json)

Automated review, not a security audit. Ruleset v1+k2.

Advanced
Item type
skill
Key
hero-password-meter
Source
github.com/unclecheng-li/ai_animation