Stats
Actions
Tags
From hxgdzyuyi-skills
把文章/草稿/主题整理成微信公众号编辑器可直接粘贴的兼容富文本（全内联样式 HTML）。当用户要"公众号排版/微信富文本/公众号样式"，或要把 markdown 转成公众号文章时使用。也可手动调用（/mp-rich-html）。
How this skill is triggered — by the user, by Claude, or both
Slash command
/hxgdzyuyi-skills:mp-rich-htmlThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
生成可直接粘贴进**微信公众号编辑器**的富文本 HTML。产物是一个自包含的 `.html` 文件：用浏览器打开即所见即所得，全选复制后粘到公众号后台即保留排版。
生成可直接粘贴进微信公众号编辑器的富文本 HTML。产物是一个自包含的 .html 文件：用浏览器打开即所见即所得，全选复制后粘到公众号后台即保留排版。
实测真实推文正文（.rich_media_content）后，归纳出以下硬约束——公众号真会过滤，违反就丢样式。
<style>、<link>、<script>，也不支持 @media、@font-face、@keyframes 等 at-rule（没有样式表环境）。所有要保留的样式必须写成元素上的内联 style。id 会被直接删除；class 会保留但因无 CSS 环境而完全无效——不要把任何视觉效果寄托在 class 上。<iframe>、<form>、<input>、<object>、<embed> 会被过滤，不要使用。<div>——公众号编辑器会把粘贴进来的 <div> 统一替换成 <section>，过程中可能丢失或改写其上的内联样式。需要块级容器一律直接写 <section>（或 <p>）。src 必须是 HTTPS 绝对 URL（公众号素材库 URL / 可公开访问的外链 / data:image/...;base64, 内联），不得编造。粘贴后公众号会重新处理 <img>（换成自家 CDN、补 data-ratio 等），外链/base64 图多半不显示，需手动上传素材库。实测补充：除以上几项外，公众号会保留大量内联 CSS，但保存后会二次清洗/序列化，复杂布局属性不一定稳定。
transform、float、position、grid、background-image、box-shadow、opacity在真实推文里常见；display:flex可用，但只能按下面的有限规则使用。
公众号文章里的 display:flex 适合做简单的一行内对齐，不适合做让编辑器重新计算的响应式网格。粘贴时正常、保存后变形，常见原因是微信保留了父级 display:flex，但删掉了子项上的 flex 计算规则，导致卡片按内容宽度收缩。
display:-webkit-flex;display:flex;justify-content:center|space-between;align-items:center|stretch;width:48%;max-width:48%;box-sizing:border-box;，父级一行只放两个子项。flex:1、flex:1 1 ...、flex-basis、flex-wrap、gap、calc() 参与列宽计算。flex-wrap 容器；改成多行容器，每行一个 flex 父级，每行两个固定宽度子块。text-align:center、display:inline-block、固定 padding。两列卡片推荐写法：
<section style="display:-webkit-flex;display:flex;justify-content:space-between;align-items:stretch;margin:0 0 12px;">
<section style="display:block;width:48%;max-width:48%;box-sizing:border-box;margin:0;padding:14px;border:1px solid #d5ddc7;border-radius:12px;background-color:#ffffff;">
<p style="margin:0;color:#0b5425;font-size:18px;line-height:1.4;font-weight:900;">左卡片</p>
</section>
<section style="display:block;width:48%;max-width:48%;box-sizing:border-box;margin:0;padding:14px;border:1px solid #d5ddc7;border-radius:12px;background-color:#ffffff;">
<p style="margin:0;color:#0b5425;font-size:18px;line-height:1.4;font-weight:900;">右卡片</p>
</section>
</section>
实测一篇真实「SVG 动效推文」（正文含 85 个 <svg>、63 个 <foreignObject>）后明确：
<svg>——「SVG 动效/互动长图」推文就是这么实现的。实测可用：<foreignObject>（在 SVG 内嵌 HTML）、<g>/<text>/<tspan>、viewBox、preserveAspectRatio、百分比 width（可 >100%，配合外层 overflow-x:scroll 的 <section> 实现横向滚动）。<animate>、<animateTransform>、<set>，支持 begin="click" 点击触发、dur、fill="freeze"、restart="never"。这是公众号里唯一能做动画/交互的途径（CSS @keyframes 因 <style> 被丢弃而无效）。<svg> 的 background-image:url(公众号图床地址)，并非 <img>。<svg>/<foreignObject>、手工调校的动画 values，且图片须先上传到公众号图床——只能用秀米/135 等专门 SVG 工具制作，无法用「写 HTML → 浏览器复制粘贴」这套流程稳定手写。<svg>（图标、装饰形状）粘贴可保留，但非必要不引入。用户没特别要求时，用这套「干净极简」风格；用户给了品牌色/偏好就替换对应值：
| 变量 | 默认值 | 用途 |
|---|---|---|
| 正文字号 | 15px | <p> 等正文 |
| 行高 | 1.75 | 正文 line-height |
| 字间距 | 0.5px | letter-spacing |
| 正文色 | #3f3f3f | 正文文字 |
| 标题色 | #1a1a1a | 标题/重点 |
| 次要色 | #999 | 图注、署名、副标题 |
| 主色 | #07c160 | 标题色条、强调、提示框 |
| 分隔线色 | #ebebeb | 分隔/边框 |
采用默认风格变量。如用户给了品牌色或排版偏好（字号、是否要色块标题等），相应调整。
<section> 设基础排版（font-size、line-height、color、letter-spacing、word-break:break-word）。margin 拉开间距，不要用空 <p> 撑空白。display:block;width:100%;max-width:100%;height:auto;box-sizing:border-box;。flex-wrap/gap/flex:.../calc() 组合。写到 ./wechat-output/{slug}.html（{slug} 由标题生成，纯英文/数字/连字符；目录不存在就创建）。
文件结构如下——<body> 内只放那段可粘贴的 <section>，<head> 不放任何会影响正文的样式：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{文章标题}</title>
</head>
<body style="margin:0;padding:24px 12px;background-color:#f2f2f2;">
<section style="max-width:677px;margin:0 auto;background-color:#ffffff;padding:24px 18px;font-size:15px;line-height:1.75;color:#3f3f3f;letter-spacing:0.5px;word-break:break-word;">
<!-- 文章正文：标题、段落、图片等组件 -->
</section>
</body>
</html>
<body>的灰底只是浏览器预览效果，复制时不会带入；真正粘贴的内容是那段<section>。
把文件路径告诉用户，并附上操作步骤：
.html 预览效果。Cmd/Ctrl+A）→ Cmd/Ctrl+C。src。<style>、<script>、<div>、class=、id=style= 内联属性里<img src> 都是 https:// 或 data:，且有 display:block;max-width:100%;height:auto;flex:、flex-wrap、gap、calc()；子卡片用显式 width/max-widthpxborder-collapse:collapse，单元格都有 border 和 paddingmargin，没有靠空段落撑高span）的 background-color 偶尔会被裁剪；重要底色尽量放在 section/p 上更稳。display:flex 只用于简单行内对齐。flex-wrap + gap + flex:1 1 calc(...) 这类网格粘贴时可能正常，保存后会被微信删掉子项 flex，造成间距和宽度错乱。margin 折叠；相邻块各自显式给 margin。<a> 指向 mp.weixin.qq.com 的公众号文章链接可用（会渲染成卡片）；指向其他站点的外链在正文里通常不可点击，<a> 多作展示用途。<img>、给元素补 white-space/box-sizing 等属性，预览与最终效果可能有细微差异，以公众号后台预览为准。Searches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.
npx claudepluginhub hxgdzyuyi/skills --plugin nova-dynasty-game