How do I install the Horse Sticker Maker skill?

Run npx skillmds@latest add modbender/horse-sticker-maker in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Horse Sticker Maker safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: executes scripts, makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Horse Sticker Maker?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Horse Sticker Maker free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Horse Sticker Maker?

modbender (@modbender) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Horse Sticker Maker by modbender — Agent Skill

Name: Horse Sticker Maker
Rating: 4.666666666666667 (3 reviews)
Author: modbender

Horse Sticker Maker

Create and deploy a festive Chinese New Year (Year of the Horse 2026) animated GIF sticker maker web app. Use when the user wants to generate custom horse-themed blessing stickers, deploy a sticker generator H5 page, or create WeChat-compatible animated GIF stickers with gold horse animation on red background. Supports custom text input, 6-frame gold horse galloping animation, Canvas-based client-side GIF rendering via gif.js, and Vercel deployment.

modbender Updated Sep 9, 2026 12 repo stars

File contents

Horse Sticker Maker

Generate a web app that creates custom animated GIF stickers for Chinese New Year (Year of the Horse 2026).

What It Does

Users input custom blessing text (1-8 chars)
Client-side Canvas renders a 240px animated GIF with:
- Red gradient background with gold sparkle particles
- 6-frame gold horse galloping animation (transparent PNG)
- User's custom text in gold calligraphy at top
- "立马加薪" bottom text with color-cycling effect
Output is WeChat sticker compatible (≤500KB, 240px)

Quick Start

Copy the template project:

cp -r <skill_dir>/assets/horse-blessing-template ./horse-blessing
cd horse-blessing
npm install

Run locally:

npm run dev
# Open http://localhost:3000/sticker

Deploy to Vercel:
```
vercel --prod --yes
```

Project Structure

horse-blessing/
├── app/
│   ├── page.tsx          # Main page (AI-generated blessing with poem)
│   ├── sticker/page.tsx  # Sticker maker (Canvas GIF generator)
│   ├── api/generate/     # AI poem + image generation API
│   ├── api/sticker/      # Sticker API
│   └── layout.tsx        # Root layout (red theme)
├── public/
│   ├── horse-frame-[1-6].png  # 6-frame transparent gold horse
│   ├── horse-transparent.png  # Static horse fallback
│   └── gif.worker.js          # gif.js web worker
├── package.json
└── tailwind.config.ts

Key Technical Details

GIF Generation (Client-Side)

Uses gif.js loaded via CDN (Script from next/script)
18 frames (6 horse frames × 3 cycles), 85ms delay per frame
Canvas size: 240×240px for WeChat sticker compatibility
Horse frames loaded as Image elements, drawn via drawImage

Horse Frame Assets

6 transparent PNG frames in public/horse-frame-[1-6].png
Generated via AI image model, backgrounds removed with sharp
Removal technique: pixels with R>210, G>210, B>210 → alpha=0

Customization Points

Bottom text: Edit '立马加薪' in sticker/page.tsx
GIF size: Change const size = 240 (keep ≤240 for WeChat)
Frame count: Change const frames = 18
Horse images: Replace public/horse-frame-*.png
Background: Modify the radial gradient colors
Sparkle count: Adjust sparkle array size (default 30)

WeChat Sticker Compatibility

Max 500KB file size
Max 240px recommended dimension
GIF format required
Save → WeChat chat → emoji panel → "+" → select from gallery

Dependencies

{
  "next": "^14.0.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "sharp": "latest",
  "gif-encoder-2": "^1.0.5",
  "html2canvas-pro": "^1.6.7"
}

External CDN: gif.js@0.2.0 (loaded at runtime for client-side GIF encoding)

---name: horse-sticker-makerdescription: Create and deploy a festive Chinese New Year (Year of the Horse 2026) animated GIF sticker maker web app. Use when the user wants to generate custom horse-themed blessing stickers, deploy a sticker generator H5 page, or create WeChat-compatible animated GIF stickers with gold horse animation on red background. Supports custom text input, 6-frame gold horse galloping animation, Canvas-based client-side GIF rendering via gif.js, and Vercel deployment.--- # Horse Sticker Maker Generate a web app that creates custom animated GIF stickers for Chinese New Year (Year of the Horse 2026). ## What It Does - Users input custom blessing text (1-8 chars) - Client-side Canvas renders a 240px animated GIF with: - Red gradient background with gold sparkle particles - 6-frame gold horse galloping animation (transparent PNG) - User's custom text in gold calligraphy at top - "立马加薪" bottom text with color-cycling effect - Output is WeChat sticker compatible (≤500KB, 240px) ## Quick Start 1. Copy the template project: ```bash cp -r <skill_dir>/assets/horse-blessing-template ./horse-blessing cd horse-blessing npm install ``` 2. Run locally: ```bash npm run dev # Open http://localhost:3000/sticker ``` 3. Deploy to Vercel: ```bash vercel --prod --yes ``` ## Project Structure ``` horse-blessing/ ├── app/ │ ├── page.tsx # Main page (AI-generated blessing with poem) │ ├── sticker/page.tsx # Sticker maker (Canvas GIF generator) │ ├── api/generate/ # AI poem + image generation API │ ├── api/sticker/ # Sticker API │ └── layout.tsx # Root layout (red theme) ├── public/ │ ├── horse-frame-[1-6].png # 6-frame transparent gold horse │ ├── horse-transparent.png # Static horse fallback │ └── gif.worker.js # gif.js web worker ├── package.json └── tailwind.config.ts ``` ## Key Technical Details ### GIF Generation (Client-Side) - Uses `gif.js` loaded via CDN (`Script` from next/script) - 18 frames (6 horse frames × 3 cycles), 85ms delay per frame - Canvas size: 240×240px for WeChat sticker compatibility - Horse frames loaded as `Image` elements, drawn via `drawImage` ### Horse Frame Assets - 6 transparent PNG frames in `public/horse-frame-[1-6].png` - Generated via AI image model, backgrounds removed with `sharp` - Removal technique: pixels with R>210, G>210, B>210 → alpha=0 ### Customization Points - **Bottom text**: Edit `'立马加薪'` in `sticker/page.tsx` - **GIF size**: Change `const size = 240` (keep ≤240 for WeChat) - **Frame count**: Change `const frames = 18` - **Horse images**: Replace `public/horse-frame-*.png` - **Background**: Modify the radial gradient colors - **Sparkle count**: Adjust sparkle array size (default 30) ### WeChat Sticker Compatibility - Max 500KB file size - Max 240px recommended dimension - GIF format required - Save → WeChat chat → emoji panel → "+" → select from gallery ## Dependencies ```json { "next": "^14.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "sharp": "latest", "gif-encoder-2": "^1.0.5", "html2canvas-pro": "^1.6.7" } ``` External CDN: `gif.js@0.2.0` (loaded at runtime for client-side GIF encoding)

Frequently asked questions

Horse Sticker Maker

File contents

Horse Sticker Maker

What It Does

Quick Start

Project Structure

Key Technical Details

GIF Generation (Client-Side)

Horse Frame Assets

Customization Points

WeChat Sticker Compatibility

Dependencies

Related skills

Frequently asked questions

How do I install the Horse Sticker Maker skill?

What does the Horse Sticker Maker skill do?

Is Horse Sticker Maker safe to use?

Which AI agents work with Horse Sticker Maker?

Is Horse Sticker Maker free to use?

Who published Horse Sticker Maker?