Guizang social card skill: 28 layouts, 10 presets, one HTML file

Three canvas classes pick the platform before the layout does

Three canvas classes decide where a card ends up, and that choice comes before any layout. `.poster.xhs` is 1080 by 1440, the Xiaohongshu 3:4 carousel. `.poster.wide` is 2100 by 900, the WeChat 21:9 header. `.poster.square` is 1080 by 1080, the WeChat share card. The shared job is the WeChat cover pair: one piece of content rendered twice, once per class, so the header image and the share image stay visually consistent instead of being designed as two separate artifacts.

Dynamic cards carry a second platform split, and it is not cosmetic. Xiaohongshu clips run 5s, WeChat in-article Live Photos run 3s. Three seconds fits a single action or one state change, five seconds fits a small process, and a three-shot collage suits three parallel results rather than a story that has to be read in order.

Install lands in ~/.claude/skills/ and updates with a plain git pull

Installation has three documented routes, and none of them require a build. The one line route goes through the skills CLI:

npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

The second route hands a paragraph to an agent with shell access, which clones the repository and then verifies that SKILL.md, assets/, and references/ exist. The manual route is the clone itself:

git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill

Updating is a git pull inside that directory followed by a request for the current commit, which matters because the repository publishes no GitHub releases. There is no tag to pin and no release note to diff, and package.json still reads version 1.0.0. The runtime dependencies are playwright at ^1.60.0 and subset-font at ^2.9.0.

The workflow refuses to pick a layout before intake is finished

The skill is a structured workflow, not a prompt template, and the agent walks seven steps. Intake captures four things: target platform, style, source content, and the images you already have. With no user images it offers one A/B/C choice between shooting your own, generating with AI, or pulling from image sources, and it is told not to argue a second time. Style and Theme then picks Editorial or Swiss plus one preset, and custom hex values are not allowed. Layout Selection chooses from the 28 skeletons, Asset Prep fetches images and writes SOURCES.md, and Compose and Render copies a seed template, replaces the `<!-- POSTERS_HERE -->` marker, and runs:

node scripts/render.mjs

The marker is the handoff point between steps, so a seed template that keeps it is a template the workflow can drive.

Twenty-eight skeletons and ten presets, and the hex value is not yours

The layout catalogue is where the opinion sits. Editorial supplies 16 skeletons, M01 through M16, including Image-Led Cover, Pipeline, and Before/After. Swiss supplies 12, S01 through S12, including KPI Tower, H-Bar Chart, and Matrix plus Hero. Themes stop at ten presets: six Editorial sets, among them Ink Classic, Indigo Porcelain, Forest Ink, Kraft, Dune, and the dark Midnight Ink, plus four Swiss anchor colors, IKB Klein Blue, Lemon Yellow, Lemon Green, and Safety Orange.

Arbitrary hex values are refused at step two; per the README, brand colors instead go through constrained generation. Nine WebP backgrounds ship alongside the presets, five Editorial and four Swiss, for the .frame-shot, .device-browser, and .device-phone wrappers.

Images climb a fixed ladder and every download lands in SOURCES.md

Image acquisition follows a fixed priority order. Your own pictures come first. With none supplied, the ladder is Unsplash, then Pexels, then Flickr CC, then Wallhaven, then a direct search. Whatever is chosen is copied locally, the workflow writes a SOURCES.md, and it asks whether you want attribution printed on the card.

That credit question is a prompt, not a default, and only the Flickr CC rung carries a license label in the list, so provenance for the other rungs stays a manual decision you have to make each time. Wallhaven is the rung named for game artwork on full bleed covers. Maps are a separate component built on MapLibre with OpenStreetMap tiles, supporting multiple pins and connecting lines for travel guides.

validate-social-deck.mjs measures the real DOM for four specific failures

Output is checked by measurement rather than by eye. validate-social-deck.mjs drives Playwright against the rendered DOM and reports four specific failures: text overflowing its box, a font size above the ceiling, density across the four horizontal bands, and a footer collision.

That script is also one of the stated reasons for the single file HTML approach. HTML and CSS are text an agent can write, read, edit, and verify; CSS Grid gives tighter control over type and grid than Markdown can; images can come from any network source; and the result lands as PNG files under output/ with no deployment and no export tool. The one heavy piece is the WebGL ink flow background on Editorial hero pages, which can be switched off on low performance machines or when a screenshot is all that matters.

Four kinds of work the skill refuses, and the categories it declines up front

The skill states its own limits, which is worth reading closely. It is not for horizontal page flip decks: those belong to guizang-ppt-skill, a sister project that shares the aesthetic language but is maintained separately. It is not for long form video editing, for pure photo retouching, or for plain text editing with no layout requirement.

The Live Photo branch is narrower still. It places a video you supplied into a card layout, and it is explicitly not a way to hunt public clips and not a way to cut a long video into a finished piece. Long clips get a sparse frame contact sheet instead, so you can choose the segment. Eleven Xiaohongshu categories are sorted by capability, and OOTD real shoot flows, dreamcore imagery, film simulation grading, and real skin tone makeup tests are marked outside the circle and turned down rather than forced.

The repository license and the package license do not agree

Two licensing statements sit next to each other and they differ. The repository is published under AGPL-3.0, while package.json declares ISC as the package license. A COMMERCIAL_LICENSING.md sits at the top level alongside LICENSE, README.md, README.en.md, PRODUCT.md, HANDOFF.md, AGENT.md, and SKILL.md, plus the agents/, assets/, references/, and scripts/ directories.

For a team shipping this output from its own product, that gap is the first thing to settle, and the commercial licensing file is the second, because either one can govern how the templates are reused. The last push to main landed on 2026-10-30.

Editorial conclusion

Take this skill if you publish Xiaohongshu or WeChat regularly, can supply your own photographs, and are willing to work inside ten fixed palettes and twenty-eight layouts. Skip it if you need horizontal slide decks, or if you want long form video editing. Before you install, read both LICENSE and COMMERCIAL_LICENSING.md, since the manifest declares ISC while the repository is published under AGPL-3.0, and pin a commit rather than a version, because no GitHub releases exist.

Frequently asked questions

Official sources

1. Issues
2. License: AGPL-3.0
3. op7418/guizang-social-card-skill on GitHub
4. Project website
5. README