Petal 设计系统技能（petal-design）
为 Phoenix/LiveView 项目注入 petal_components 的设计规范，让 AI 写出与官方组件无异的 HEEx 界面。
该技能为纯文档/设计规范，不执行破坏性操作，明确要求'propose and confirm - never auto-run'，存在最小权限设计；模式：未扣分项包括明确确认机制与数据流透明。扣分原因：建议安装第三方MCP服务器（mcp.petal.build）依赖外部网络服务，且发布者未经验证，回滚与来源归因部分依赖外部，故未给满分。
指令自洽性极高：三段式schema解析阶梯、staleness检查、明确的失败提示（如Tailwind v3硬门禁、MCP未连接时的降级语句）均写得清晰。静态评审上限为10分：无法执行验证关键路径，schemas.仅部分提供，references中无已提交测试套件覆盖该技能本身的执行证据，故不能给更高分。
触发条件写得非常精确（HEEx、LiveView、Tailwind等触发词，并明确排除后端工作），适用与不适用边界清晰。扣分原因：面向英文用户，无中文支持；核心schema同步依赖海外MCP服务器（mcp.petal.build），虽有bundled快照降级但降级快照有版本滞后风险，故未给满分。
文档分层出色（SKILL.md + references按需加载 + 生成式组件清单），frontmatter带版本号并内置staleness检查，MIT许可明确。扣分原因：发布者维护责任与更新路径依赖未验证的外部方，技能自身无changelog，license文件未在技能目录内直接呈现。
设计规范详尽（tokens、patterns、review playbook、grep表），对AI常见错误有针对性纠正，边际价值高。静态上限7分：无已执行产物验证输出可直接使用，成本/收益证据只能从文档推断，无法验证代表性输出的实际可用性。
内部证据链完整：schemas.与components.md自洽（数量口径需全量文件核对），引用mix.lock与deps源码可独立核对。上限5分：无第三方执行证据、无CI测试覆盖该技能关键路径的可见证明，多数声明只能靠静态一致性间接支撑。
- 快照版本可能滞后于项目实际使用的petal_components版本，首次使用前务必核对mix.lock。
- schema新鲜度依赖海外MCP服务器（mcp.petal.build），中国大陆网络可能无法连接；请依赖bundled快照并在意识到快照非最新时人工核对deps源码。
- 技能仅英文，无中文文档支持。
- 发布者未经FollowSkills企业注册表验证，身份视为未知。
- 技能内嵌的'claude mcp add ...'安装指令属于未验证的外部命令，执行前应自行审查。
这个 Skill 能做什么，适合哪些场景？
petal-design 是配套 petal_components（v4.16.1）的设计规范技能，适用于一切 Phoenix/LiveView 的 UI 编写、评审与主题化工作。它提供语义化 @theme 色阶、唯一圆角变量 --pc-radius、暗色模式材质和 213 个组件的清单。技能本身即规范：无需初始化步骤，无需撰写 DESIGN.md。核心原则是优先使用 <.component> 标签而非手写 HTML，并通过三段式查证阶梯（MCP → 内置 schema 快照 → 源码）避免凭记忆写错组件属性。
按请求路由到三种模式：Build（编写/修改 HEEx，先加载 tokens.md 或 patterns.md 参考）、Review（按 review.md 剧本执行设计判断、grep 信号表和 P0-P3 分级）、Theme（应用品牌色阶、灰阶重映射、--pc-radius、字体变量与暗色幽灵材质）。写任何非默认属性前，先经 MCP 的 get_component、内置 data/schemas. 或 deps 源码三阶梯查证 schema。同时强制执行工艺底线：Tailwind v4 硬性检查、灰阶拨盘规则、dark: 成对类名、焦点环、实心按钮色阶遍历等，并对照 mix.lock 检测版本过期。
- Phoenix/LiveView 开发者需要用 petal_components 搭建表单、表格、弹窗等页面时，由技能按规范组合组件。
- 团队接手一段他人写的 HEEx/Tailwind 代码，需要审计设计偏差并得到 P0-P3 分级问题清单。
- 要为产品应用品牌主题：替换 primary 色阶、调整圆角、字体并配置暗色模式。
- 为自定义标记（无对应 <.component> 的部分）写样式，需保证与官方组件视觉无差。
- 升级 petal_components 后想确认技能快照版本与 mix.lock 是否一致。
这个 Skill 有哪些优点和局限？
- 规范自带完整设计体系：语义色阶、单圆旋钮、暗色材质，无需额外配置文件
- 三阶梯 schema 查证机制明确应对版本迭代快、训练数据过时的问题
- 工艺底线具体可执行（类名级规则），而非空泛的设计建议
- 有内置组件清单与快照 schema，MCP 不可用时可降级继续工作
- 强绑定 petal_components 与 Tailwind v4，v3 项目直接不可用
- MCP 未连接时依赖快照，可能与项目实际版本不一致（技能自身也承认需对照 mix.lock）
- 仅覆盖前端 UI 工作，不适用于后端任务
- 文档未说明 213 组件之外的参考文件覆盖程度与测试情况
如何安装这个 Skill？
将技能目录复制到项目的 skills/petal-design/（含 SKILL.md、references/ 和 data/schemas.）。SKILL.md 指出应从 deps/petal_components/skills/petal-design 重新复制以保持版本一致。可选地安装 MCP 服务器：claude mcp add petal --transport http https://mcp.petal.build/mcp。
如何使用这个 Skill？
在 Claude Code 等支持 Agent Skills 的客户端打开 Phoenix 项目后直接提出 UI 请求即可触发，例如“用 petal 组件做一个带表单的 modal”或“review 这个 HEEx diff 的设计”。查询类提示如“换成品牌色/启用暗色模式”会进入 Theme 模式。技能说明每个运行最多加载主文件加两个参考文件。
这个 Skill 与同类方案有什么区别？
官方将 petal_components 定位为 Phoenix 版 shadcn：同样理念（可组合原语、用户掌握模式、MCP 提供 schema 给 AI），但运行时是 HEEx + Tailwind v4，发行方式是 Hex 包而非 CLI 拷贝文件。