# Wechat Theme Extractor

> Use when extracting visual styles from a WeChat article and generating a markdown-wechat-converter theme.

- **Type:** Skill
- **Install:** `agentstack add skill-yangsonhung-awesome-agent-skills-wechat-theme-extractor`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [YangsonHung](https://agentstack.voostack.com/s/yangsonhung)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [YangsonHung](https://github.com/YangsonHung)
- **Source:** https://github.com/YangsonHung/awesome-agent-skills/tree/main/skills/en/wechat-theme-extractor

## Install

```sh
agentstack add skill-yangsonhung-awesome-agent-skills-wechat-theme-extractor
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# WeChat Theme Extractor

## Overview

Extract layout and style signals from a WeChat Official Account article, then generate a reusable theme for `markdown-wechat-converter`. The workflow derives typography, colors, spacing, and block styles from the article, writes the generated theme into `markdown-to-wechat.html`, and supports previewing the result.

## When to Use

Use this skill when the user:
- Provides a `mp.weixin.qq.com` article URL
- Wants to extract typography, color, spacing, and block styles from a WeChat article
- Wants a new theme generated for `markdown-wechat-converter`
- Wants the theme written into `markdown-to-wechat.html` and previewed

## Do not use

Do not use this skill when:
- The URL is not a WeChat Official Account article
- The user only wants article text extraction without theme analysis
- The target project does not contain `markdown-wechat-converter` or `markdown-to-wechat.html`

## Instructions

1. Run `scripts/extract.py` to fetch the article HTML and extract the title and `js_content`.
2. Read `.extracted_content.html` and analyze style traits directly from the HTML.
3. Generate a theme object compatible with `markdown-wechat-converter`.
4. Locate `markdown-to-wechat.html` in the current workspace and inject the new theme without breaking existing theme definitions.
5. Re-open the file and verify the theme entry was actually written.
6. If verification succeeds, open `markdown-to-wechat.html` in the browser for preview.

## Workflow

```text
User provides URL
  -> run extractor script
  -> produce .extracted_content.html
  -> analyze styles
  -> generate theme config
  -> write into markdown-to-wechat.html
  -> verify write result
  -> open preview
```

## Run the script

```bash
python3 scripts/extract.py "https://mp.weixin.qq.com/s/xxxxx"
```

## Script responsibilities

The Python script only:
- Fetches article HTML
- Extracts the article title
- Extracts the `js_content` body fragment
- Saves the result to `.extracted_content.html`

The AI handles:
- Style analysis
- Theme generation
- Config injection
- Post-write verification
- Preview opening

## Injection rules for `markdown-to-wechat.html`

When updating `markdown-to-wechat.html`, follow these rules:

1. Find the real theme source first.
   - Search for theme-related objects, arrays, maps, or `const` assignments before editing.
   - Do not assume a fixed variable name unless it exists in the file.

2. Preserve the existing structure.
   - Match the file's current object style, quote style, indentation, and trailing comma convention.
   - Do not reformat unrelated sections.

3. Add, do not overwrite blindly.
   - If the new theme name does not exist, append a new entry in the existing theme collection.
   - If the same theme name already exists, update only that entry instead of duplicating it.

4. Keep the change scoped.
   - Only touch the theme definition block and any minimal registration hook required to make the theme selectable.
   - Do not modify renderer logic, event handlers, or unrelated UI code unless the file structure requires a minimal wiring change.

5. Verify after writing.
   - Re-read the edited section and confirm the theme key, title, and core style properties are present.
   - If the theme block cannot be located safely, stop and report that the target file structure needs manual confirmation.

## Example theme snippet

Generate a theme object that matches the target file's existing structure. Use this as a minimal reference shape:

```js
{
  id: "wechat-clean-blue",
  name: "WeChat Clean Blue",
  styles: {
    body: {
      fontFamily: "\"PingFang SC\", \"Helvetica Neue\", sans-serif",
      fontSize: "16px",
      color: "#2b2b2b",
      lineHeight: "1.75",
      backgroundColor: "#ffffff"
    },
    h1: {
      fontSize: "24px",
      fontWeight: "700",
      textAlign: "center",
      color: "#1f3a5f"
    },
    h2: {
      fontSize: "20px",
      fontWeight: "700",
      color: "#1f3a5f",
      borderBottom: "2px solid #9ec1ff"
    },
    blockquote: {
      color: "#4a5568",
      backgroundColor: "#f7fbff",
      borderLeft: "4px solid #7fb3ff",
      padding: "12px 16px"
    }
  }
}
```

When writing:
- Match the real field names used in `markdown-to-wechat.html`
- Convert this shape if the target file uses arrays, maps, or nested registration
- Include at minimum the theme key, display name, and core typography styles

## Output file

- `scripts/.extracted_content.html`: extracted article body HTML with title and source URL comments at the top

## Validation checklist

- The article HTML was fetched successfully
- `.extracted_content.html` exists and is not empty
- The title and `js_content` were extracted
- The new theme entry exists in `markdown-to-wechat.html`
- The preview page opens successfully

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [YangsonHung](https://github.com/YangsonHung)
- **Source:** [YangsonHung/awesome-agent-skills](https://github.com/YangsonHung/awesome-agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-yangsonhung-awesome-agent-skills-wechat-theme-extractor
- Seller: https://agentstack.voostack.com/s/yangsonhung
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.