Hero Chat Bubbles

SkillWeb & browsing

Lets your agent generate an animated chat-bubble hero section as a ready-to-use HTML page.

Then ask your AI: use the Hero Chat Bubbles 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 curates AI Prompts for generating [cool animated HTML 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-chat-bubbles/SKILL.md and read by Ahel’s review.

A light messaging thread fills with alternating incoming and outgoing bubbles. Function: conversation UI reveal for collaboration products.

Purpose

  • Chat, support, and collab heroes
  • Soft cyan paper background
  • Left/right bubble hierarchy

Specs

  • Four bubbles stagger in with slight scale
  • Outgoing bubbles use brand cyan fill
  • Entry: index.html

Usage

npx hyperframes preview
ui2v motion publish . --version 1.0.0

Notes

Keep each bubble to one or two short lines so the thread stays readable in a carousel thumbnail.

Signals

GitHub stars
1k
Forks
111
Last commit
Oct 2026
Advanced
Item type
skill
Key
hero-chat-bubbles
Source
github.com/unclecheng-li/ai_animation