guizang-social-card-skill

### 1. Intake Gather only the missing information that changes the output:

Pick one mode per package. **The two systems are not bound to specific content types** — what changes is the visual stance, not which topic you can talk about.

- Editorial Magazine × E-ink → copy `assets/template-editorial-card.html` into the task folder as `index.html`.

Use Playwright or a browser screenshot tool to export each `.poster` or `.cover` node.

Keep `node validate-social-deck.mjs <task-dir>` available for auto-check passes. It checks overflow (R1), footer collision (R2), Swiss bold display (R3), minimum font size (R4), 4-band density (R5), `.h-xl` line caps (R6), browser-default figure margin drift (R7), visual bounds / bottom whitespace (R8), and title-to-content gaps (R9). Exit code 1 on any FAIL — fix before final delivery when auto-check is requested.

Policy: **grab first, disclose after, let the user decide on attribution.**

- Use WebFetch or `curl` to download the image into the task folder's `assets/` directory.

Render the paired MOV at the platform duration: `5s` for Xiaohongshu, `3s` for WeChat Official Account.

**Show user first, validate on request.**

Generated work must live in a task folder, not in the skill root.

## Required References Read these files as needed: - `references/platform-specs.md` for exact ratios, output sizes, and naming. - `references/style-system.md` for Guizang editorial and Swiss visual rules. - `references/theme-presets.md` when choosing electronic-magazine palettes or Swiss accent palettes. - `references/layout-recipes.md` when selecting carousel/social-card/WeChat page structures. - `references/components.md` for the shared component spec: font stacks, type scale, minimum readable sizes, Chinese title length bands, Swiss card-fill mutual-exclusion rule, image-container ratio classes, spacing tokens, and Lucide icon rules. - `references/background-systems.md` when building electronic-magazine WebGL/ink/paper backgrounds. - `references/portrait-fill.md` when adapting layouts to 3:4 and avoiding under-filled vertical space. - `references/content-planning.md` for cover hooks, page breakdown, and copy compression. - `references/production-workflow.md` for HTML/CSS rendering and image handling. - `references/live-photo-production.md` when the user asks for Live Photo / 实况照片 / 三连实况拼图, supplies video assets for a social card, or wants Xiaohongshu / WeChat motion-card delivery. It covers information budget, single vs triple Live Photo, long-video intake, and platform publishing reminders. - `references/image-overlay.md` whenever text sits on top of a photo: photo qualification, localized tint fallback, and face / subject avoidance via multimodal subject mapping. - `references/screenshot-treatment.md` when the user supplies an app / web / code / dashboard screenshot — picks `.frame-shot` over `.frame-img`, sets corners/shadow/bg/inset, decides on `.device-browser` or `.device-phone` chrome. - `references/map-component.md` when the content has spatial relationships (travel route, store locations, walking tour) — real routes default to Mapbox Static or OSM static tiles; schematic SVG is only for conceptual / illustrative maps. Pins are HTML overlays; never use live JS maps. - `references/title-shortener.md` when the task is a WeChat 21:9+1:1 cover pair, or any cross-platform reuse — derives the 1:1 short title from the long one (5-step extraction, 4 patterns, anti-patterns, sizing on `.poster.square`). - `references/category-cookbook.md` to route a user-named Rednote category (旅行 / 职场 / 游戏 / 影视 / 彩妆 / 美食 / 穿搭 / 家居 / 健身 / 情感 / 推荐) to applicable recipes and to confirm scope. - `references/qa-checklist.md` before delivering final images.