A specialized toolkit for building interactive, JavaScript-free SVG and CSS animations tailored for WeChat Official Account articles.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install wechat-svg-effects
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install wechat-svg-effects using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is WeChat SVG Effects?
WeChat SVG Effects is a technical framework designed to bypass the strict limitations of the WeChat Official Account platform, which bans JavaScript entirely. By leveraging pure SVG animations and inline CSS, this skill allows developers to create sophisticated interactive experiences such as click-to-reveal layers, multi-stage state machines, and 3D card effects directly within mobile articles.
This Openclaw Skills integration focuses on mobile-optimized rendering, utilizing specific WeChat attributes like the leaf attribute for text and specialized meta-tags to ensure consistent display across the WeChat ecosystem. It provides a structured approach to interactive storytelling without the need for traditional web scripts.
WeChat SVG Effects Use Cases
- Creating interactive 'tap-to-unveil' cover images for WeChat articles
- Designing gamified click-through experiences and step-by-step reveals
- Building 3D card flipping effects and animated decorations for promotional posts
- Implementing multi-layer state machines for interactive educational content
- Developing high-performance, mobile-optimized headers for WeChat Official Accounts
How WeChat SVG Effects Works
- Pattern Selection: Choose from four distinct architecture patterns ranging from simple SVG accents to complex CSS Grid multi-card reveals.
- Layer Construction: Build the SVG structure using bottom-to-top rendering, where the final reveal is placed at the bottom and the initial cover is at the top.
- Event Mapping: Assign interactivity using SVG-native triggers like begin="mousedown" or begin="click" to control animations.
- Animation Logic: Define state changes using SMIL elements like
and with specific restart behaviors. - Style Normalization: Convert all styling to strict inline CSS to comply with WeChat article sanitization rules.
- Finalization: Append the mandatory WeChat-specific rendering tag to enable advanced SVG features in the mobile client.
WeChat SVG Effects Setup
To start building with WeChat SVG Effects, ensure your environment follows the 750px width standard for mobile optimization. No external libraries are required, as it uses native Openclaw Skills workflows.
# Initialize a new WeChat SVG project
# Ensure all CSS is inline and JavaScript is excluded
# Use the terminal UI color palette for consistent branding
Ensure your output includes the mandatory WeChat rendering enabler:
<p style="display:none;"><mp-style-type data-value="10000"/></p>
WeChat SVG Effects Data Schema & Taxonomy
The skill organizes data around SVG structures and specific WeChat-compatible metadata:
| Component | Requirement | Description |
|---|---|---|
| ViewBox | 0 0 750 H | Optimized for WeChat mobile viewport |
| Events | mousedown / click | Primary interaction triggers |
| Attributes | leaf="" | Required for |
| Styles | Inline only | No |