name

bemoskill-cards

description

Generate BemoSkill dark/light social card systems for Xiaohongshu/Rednote 3:4 carousels, WeChat official account covers, and X/Twitter headers from article titles, notes, product ideas, or technical content. Use when the user asks for BemoSkill-Cards, 小红书封面/正文卡片, 微信公众号封面, 推特/X 封面, dark/light social cards, ReactGo-style cards, or reusable social cover workflows.

BemoSkill Cards

Create reusable social card and cover packages with deterministic HTML/CSS rendering. The default visual system has two modes:

Dark: black background, white type, sparse grid, technical clarity.
Light: warm paper background, charcoal type, restrained accent, editorial calm.

Prefer local HTML/CSS rendering over image generation when exact Chinese text, logo placement, and platform dimensions matter.

Outputs

Use this skill for:

Xiaohongshu/Rednote portrait card sets: 1080x1440.
WeChat official account covers: 900x383.
X/Twitter headers: 1500x500.
Paired dark/light variants for the same content.
Brand/IP cards that must include a logo, tag, signature, or slogan.

Do not use this skill for pure photo editing, logo design, or long slide decks.

Required References

Load only what is needed:

references/platform-specs.md for dimensions, output naming, and folder conventions.
references/style-system.md for dark/light visual rules.
references/workflow.md for intake, copy planning, rendering, and QA.

Workflow

Intake
- Confirm platforms: Xiaohongshu, WeChat, X/Twitter, or all.
- Confirm style mode: dark, light, or both.
- Collect title/topic, subtitle, tags, logo path, slogan/signature, and hard text.
- If content involves current facts, browse and cite sources.
Plan
- For carousels, make 5-10 pages: cover plus one idea per card.
- For platform covers, make exactly one whole-content cover per style/platform unless the user explicitly asks for variants.
- Do not turn subtopics or carousel card titles into separate WeChat/X covers.
- Remove page numbers from standalone covers.
Build
- Start from templates in assets/templates/.
- Replace copy and logo references. Keep dimensions unchanged.
- Keep all primary text left-aligned.
- Avoid dense decoration. For dark mode, no white ornamental dots in corners. For light mode, keep the paper background quiet.
Render
- Use scripts/render-html-assets.mjs to screenshot .card or .cover-card nodes.
- Use scripts/make-overview.mjs for a contact sheet.
- Save under output/<style>/<platform>/ or a user-requested folder.
Verify
- Check PNG dimensions with file.
- Inspect at least one representative image per style/platform.
- Confirm no text overflow, no accidental page numbers on standalone covers, and no missing logo.

Template Commands

Render the included templates:

npm run render:xhs-dark
npm run render:xhs-light
npm run render:platform
npm run overview:platform

For a custom HTML file:

node scripts/render-html-assets.mjs \
  --html path/to/index.html \
  --out output/custom \
  --selector .cover-card \
  --group-attrs data-style,data-platform \
  --viewport 1600x900

BemoSkill Cards

Create reusable social card and cover packages with deterministic HTML/CSS rendering. The default visual system has two modes:

Dark: black background, white type, sparse grid, technical clarity.

Light: warm paper background, charcoal type, restrained accent, editorial calm.

Prefer local HTML/CSS rendering over image generation when exact Chinese text, logo placement, and platform dimensions matter.

Outputs

Use this skill for:

Xiaohongshu/Rednote portrait card sets: 1080x1440.

WeChat official account covers: 900x383.

X/Twitter headers: 1500x500.

Paired dark/light variants for the same content.

Brand/IP cards that must include a logo, tag, signature, or slogan.

Do not use this skill for pure photo editing, logo design, or long slide decks.

Required References

Load only what is needed:

references/platform-specs.md for dimensions, output naming, and folder conventions.

references/style-system.md for dark/light visual rules.

references/workflow.md for intake, copy planning, rendering, and QA.

Workflow

Intake

Confirm platforms: Xiaohongshu, WeChat, X/Twitter, or all.
Confirm style mode: dark, light, or both.
Collect title/topic, subtitle, tags, logo path, slogan/signature, and hard text.
If content involves current facts, browse and cite sources.

Plan

For carousels, make 5-10 pages: cover plus one idea per card.
For platform covers, make exactly one whole-content cover per style/platform unless the user explicitly asks for variants.
Do not turn subtopics or carousel card titles into separate WeChat/X covers.
Remove page numbers from standalone covers.

Build

Start from templates in assets/templates/.
Replace copy and logo references. Keep dimensions unchanged.
Keep all primary text left-aligned.
Avoid dense decoration. For dark mode, no white ornamental dots in corners. For light mode, keep the paper background quiet.

Render

Use scripts/render-html-assets.mjs to screenshot .card or .cover-card nodes.
Use scripts/make-overview.mjs for a contact sheet.
Save under output/<style>/<platform>/ or a user-requested folder.

Verify

Check PNG dimensions with file.
Inspect at least one representative image per style/platform.
Confirm no text overflow, no accidental page numbers on standalone covers, and no missing logo.

Template Commands

Render the included templates:

npm run render:xhs-dark npm run render:xhs-light npm run render:platform npm run overview:platform

For a custom HTML file:

node scripts/render-html-assets.mjs \ --html path/to/index.html \ --out output/custom \ --selector .cover-card \ --group-attrs data-style,data-platform \ --viewport 1600x900