← 返回 Skills 市场

Horse Sticker Maker

Name: Horse Sticker Maker
Author: jiafar

作者 jiafar · GitHub ↗ · v1.0.0

cross-platform ⚠ suspicious

736

总下载

当前安装

版本数

在 OpenClaw 中安装

/install 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-th...

使用说明 (SKILL.md)

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 \x3Cskill_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: [email protected] (loaded at runtime for client-side GIF encoding)

安全使用建议

This skill implements a Next.js project that calls Google generative APIs and produces client-side GIF stickers, but it does not declare the API keys the server code requires. Before installing or deploying: 1) Do not deploy to a public host without setting environment variables — the server files expect GOOGLE_API_KEY and GEMINI_API_KEY at runtime and will fail or error if missing. 2) Confirm which single API key(s) you should provide (the code is inconsistent about key names and endpoints). Prefer setting keys as platform environment variables (e.g., Vercel Dashboard) rather than embedding them in code or in URLs. 3) The code sends keys as query parameters (key=...), which can expose them in logs — consider changing to Authorization headers. 4) Review whether you actually need 'sharp' and 'gif-encoder-2' dependencies; 'sharp' is a native module that requires build tooling and is not clearly used in the provided routes. 5) Audit the included routes for leaking any returned data to third parties; confirm you are comfortable granting Google generative API access (costs, quotas, privacy). 6) If you plan to use this on a shared/production site, update the SKILL.md to document required env vars, and audit/standardize the API endpoints and key usage. If you are not comfortable with these inconsistencies, do not deploy until they are resolved.

功能分析

Type: OpenClaw Skill Name: horse-sticker-maker Version: 1.0.0 The skill bundle is designed to create AI-generated blessings and GIF stickers. It is classified as 'suspicious' due to the potential for prompt injection against the underlying Large Language Models (Google Gemini/Imagen) in `assets/horse-blessing-template/app/api/generate/route.ts` and `assets/horse-blessing-template/app/api/sticker/route.ts`. User input is directly embedded into the prompts, which could allow a sophisticated attacker to manipulate the LLM's output beyond the intended scope. While this is a vulnerability in LLM interaction, there is no clear evidence of intentional malicious behavior by the skill developer, such as data exfiltration, persistence, or unauthorized system access. The use of environment variables for API keys and loading `gif.js` from a CDN are standard practices and not inherently malicious within this context.

能力评估

ℹ Purpose & Capability

The stated purpose (client-side GIF sticker generator + optional AI-generated images/poems) matches the included code: there are Next.js routes that call AI image/text APIs and client pages that render GIFs. However the skill metadata declares no required environment variables or credentials while the server code expects Google API keys (GOOGLE_API_KEY and GEMINI_API_KEY). Also package.json includes native/image-processing dependency 'sharp' and a server-side GIF encoder ('gif-encoder-2') even though the SKILL.md emphasizes client-side gif.js usage — this is disproportionate / inconsistent with the simple client-focused sticker maker description.

⚠ Instruction Scope

SKILL.md's quick start omits any instruction to set API keys or environment variables, yet the two API routes reference process.env.GOOGLE_API_KEY and process.env.GEMINI_API_KEY at top-level. That mismatch means the app can crash or log errors at runtime. The SKILL.md also describes background removal via 'sharp' but none of the server routes call sharp — another mismatch between instructions and code. The runtime instructions do use an external CDN (jsdelivr) for gif.js which is expected for client-side encoding.

ℹ Install Mechanism

There is no install spec (instruction-only install), so nothing is downloaded by the installer. Runtime uses gif.js from jsdelivr CDN (expected for client-side GIF encoding). However package.json includes 'sharp' (a native binary requiring build/install) and 'gif-encoder-2' which are heavier than necessary for a purely client-side generator — these dependencies may cause build friction or imply server-side image processing that the SKILL.md/code does not clearly use.

⚠ Credentials

The code requires at least two environment variables (GOOGLE_API_KEY and GEMINI_API_KEY) though the skill metadata declares none. Both keys appear to be for Google generative APIs but are named differently across routes (inconsistent). Keys are appended as query parameters in fetch calls (key=...), which can leak to logs or proxies. The number and naming of env vars are not explained in SKILL.md, so credential requirements are under-declared and therefore disproportionate to the documentation.

✓ Persistence & Privilege

The skill does not request persistent/always-on privileges (always:false) and does not modify other skills or system settings. Autonomous invocation is allowed (platform default) and is not by itself a concern here.

如何使用

确保已安装 OpenClaw（本地或 Docker 部署）
在对话框中输入安装命令：/install horse-sticker-maker
安装完成后，直接呼叫该 Skill 的名称或使用 /horse-sticker-maker 触发
根据 Skill 的参数说明提供必要输入，即可获得结构化输出

版本历史

v1.0.0

Initial release: 6-frame gold horse animated GIF sticker maker for Chinese New Year 2026

元数据

Slug horse-sticker-maker

版本 1.0.0

许可证 —

累计安装 0

当前安装数 0

历史版本数 1

常见问题