# Xhs Trending Cards

> Generate XiaoHongShu / social ranking cards with HTML preview and PNG export. Supports Style A-H: Dark Tech, Apple Minimal, White Editorial, Pastel, Magazine, Dark Cinematic, macOS Skill Card, Compact macOS Card. Use for ranking infographics, GitHub/NPM/AI tool trends, knowledge cards, social carousels, and publish-ready copywriting.

- **Type:** Skill
- **Install:** `agentstack add skill-leefrane-creator-xhs-trending-cards-xhs-trending-cards`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [leefrane-creator](https://agentstack.voostack.com/s/leefrane-creator)
- **Installs:** 0
- **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [leefrane-creator](https://github.com/leefrane-creator)
- **Source:** https://github.com/leefrane-creator/xhs-trending-cards
- **Website:** https://github.com/leefrane-creator/xhs-trending-cards

## Install

```sh
agentstack add skill-leefrane-creator-xhs-trending-cards-xhs-trending-cards
```

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

## About

# XiaoHongShu Trending Cards Generator

Use this skill when the user asks to create 小红书卡片, 排行榜卡片, 知识卡片,
GitHub/NPM/AI 工具榜单图, social carousel cards, or batch downloadable PNG cards.

## Source of truth

- Style registry: `assets/styles.json`
- Shared A/C/D/E/F template: `assets/card_template.html`
- Apple template: `assets/style_b_apple.html`
- macOS large template: `assets/style_g_macos_skill.html`
- macOS compact template: `assets/style_h_compact_macos.html`
- All-style preview script: `scripts/preview_all_styles.js`
- Copywriting guide: `references/copywriting_guide.md`

## Quick commands

Generate preview images for all styles:

```bash
node scripts/preview_all_styles.js
```

Custom output directory:

```bash
node scripts/preview_all_styles.js ./tmp/style-previews
```

If Playwright browsers are missing:

```bash
npx playwright install chromium
```

## Styles

Read `assets/styles.json` before generating cards. It defines each style's id,
slug, size, template, wrapper class, background, accent color, and use cases.

- Style A: Dark Tech, default for technical rankings and AI tool lists.
- Style B: Apple Minimal, pure black high-impact product launch poster.
- Style C: White Editorial, clean white editorial/tutorial card.
- Style D: Pastel Card, warm lifestyle/light science card.
- Style E: Magazine, paper-toned long-form/report style.
- Style F: Dark Cinematic, dramatic reveal/frontier tech style.
- Style G: macOS Skill Card, 1080x1440 developer/project scoring card.
- Style H: Compact macOS Card, 420px compact embed/share card.

## Required data format

Use structured data. Minimum fields:

```json
[
  {
    "name": "Project Name",
    "desc": "One-line description",
    "stars": "351K",
    "url": "github.com/org/repo",
    "tags": ["TypeScript", "AI"],
    "rank": 1
  }
]
```

For Style G/H, include evidence-backed scores:

```json
{
  "scores": {
    "starGrowth": 92,
    "heat": 88,
    "innovation": 90,
    "monetization": 82,
    "influence": 95
  },
  "scoreEvidence": [
    "7-day star growth was +860",
    "Clear developer-tool subscription path"
  ]
}
```

Do not invent Style G/H scores without a short evidence note.

## Workflow

1. Collect data from user input, GitHub Trending, NPM, web search, or another
   relevant source. Use web search when freshness matters.
2. Choose a style. If the user does not specify one, default to Style A for
   technical rankings, Style C for educational/editorial content, and Style G
   for developer/project scorecards.
3. Render one cover card plus one detail card per item unless the user requests
   cover-only output.
4. Use the template listed in `assets/styles.json`.
5. Preview in a browser and export PNGs.
6. Verify that PNGs are non-empty, correctly sized, and not visibly clipped.
7. Ask the copywriting follow-up.

## Rendering notes

- A/C/D/E/F use `assets/card_template.html`; set the wrapper class from
  `styles.json` for C-F.
- B/G/H use their standalone templates. They are intentionally separate because
  their layout rules differ from the shared 1242x1660 card template.
- Keep text short. Prefer concise names, one-line descriptions, and 3-5 tags.
- Use Playwright screenshots for precise PNG export when html2canvas clips or
  introduces black edges.

## Style G/H scoring standard

Scores are 0-100. Use the same five dimensions in both radar charts:

1. Star growth: recent growth rate; daily +1% can be treated as 100.
2. Project heat: recent absolute star growth; +500 stars can be treated as 100.
3. Innovation: new technology, new scenario, or novel combination.
4. Monetization potential: market demand, distribution path, and pricing path.
5. Influence: developer background, community heat, and adoption signals.

Always list the evidence used for subjective scores.

## Copywriting follow-up

After cards are generated and previewed, ask:

> 卡片已经生成完毕，需要我帮你写一版配套文案吗？
> A. 小红书文案（标题选项 + 正文 + 20 个标签）
> B. 微头条文案（严格 150 个中文字符）
> C. 不需要

If the user chooses A, follow `references/copywriting_guide.md`.
If the user chooses B, deliver plain text only and count exactly 150 Chinese
characters including punctuation.

## Source & license

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

- **Author:** [leefrane-creator](https://github.com/leefrane-creator)
- **Source:** [leefrane-creator/xhs-trending-cards](https://github.com/leefrane-creator/xhs-trending-cards)
- **License:** MIT
- **Homepage:** https://github.com/leefrane-creator/xhs-trending-cards

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-leefrane-creator-xhs-trending-cards-xhs-trending-cards
- Seller: https://agentstack.voostack.com/s/leefrane-creator
- 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%.