WeChat CSS Theme Generator
Paste the following prompt into your AI chat to install this skill:
Please install @user_d8946e26/generate-wenyan-theme into your AI assistant by following https://skillhub.cn/install/skillhub.md.
About this skill
Why It Exists
WeChat article editor themes need CSS that targets the #wenyan DOM structure correctly. Plain selectors, local asset paths, or unsupported font declarations can fail after injection. This skill turns natural-language requests like “cyberpunk style” or “dark code blocks” into a maintainable CSS theme, reducing manual alignment with WeChat’s typography and selector constraints.
How It Works
- Namespace discipline: generated selectors should start with
#wenyan, such as#wenyan h1,#wenyan blockquote, and#wenyan pre code. - Element coverage: supports global background,
h1-h6, titlespanhighlights,::beforedecorations, paragraphs, blockquotes, code containers, code content, horizontal rules, and links. - Visual effects: uses
::before/::after,linear-gradient, inline SVG, or Base64 images for title ornaments, code-block backgrounds, and quoted text styling. - Output: writes the result to a local file such as
theme.css, then suggests testing or publishing withapply-wechat-custom-theme.
Boundaries And Caveats
The skill generates and saves CSS only; it does not upload, publish, or live-preview inside the WeChat editor. Prefer Data URIs or HTTPS assets over local paths like url("./bg.png"). Avoid @font-face; keep system fonts and keep font sizes around 12px to 18px. For advanced interactions, animations, or third-party components, verify compatibility across WeChat clients.
Use Cases
- An operator receives a cyberpunk-themed WeChat feature request and needs a savable, test-ready CSS theme file.
- A developer adjusts code-block styling for #wenyan pre and #wenyan pre code with background and overflow rules.
- A designer describes blockquote and title ornaments, and the skill outputs local CSS using ::before and gradients.
- A content editor prepares branded weekly layouts and requires backgrounds via Data URI or HTTPS rather than local paths.
Best For
- Operators who turn recurring WeChat visual requests into test-ready CSS themes.
- Frontend engineers who need #wenyan-scoped styles for headings, code blocks, and blockquotes.
- Visual designers who convert descriptions like cyberpunk or dark code blocks into pseudo-element and gradient CSS.
- AI application developers who invoke this skill in agent workflows to output and save local theme files.
Related Skills
A ComfyUI image-generation skill that uses a five-step dialog to collect prompts, prefill templates, confirm parameters, submit API jobs, and return results.
A design-system guidance skill for Impeccable that produces token-based rules, component states, accessibility criteria, and QA checklists.
Director-level video lapian that diagnoses material precision, then produces frame evidence, director analysis, a style bible, and a showcase video.
Plan and brief Amazon MAIN, Listing, and A+ image sets from verified product facts, then return plan and image QA status.