apply-tweaks

Name: apply-tweaks
Author: bluzir

github.com/bluzir设计与 UI10746 次安装27 周前更新

关于 apply-tweaks

这项技能将 YAML 状态文件中排队的设计调整写回源 HTML，适用于由 Claude 编辑文件的工作流。它会按页面的调整架构验证值、记录已应用的更改、清空队列，并提供回退流程。

复制下面的命令，在终端中运行。

$npx skills add https://github.com/bluzir/claude-code-design --skill apply-tweaks

安装后在 Claude Code 中输入/apply-tweaks确认已加载。

通过 Edit 将排队等待的调整变更（在 pending.yaml 中）写回源 HTML。模式借鉴自 claude-pipe：文件是状态，Claude 是写入者。

<html-path> 对应的 session-id = tweaks-{slugify(basename html-path without ext)}-{today YYYYMMDD}。会话目录：artifacts/tweaks/<session-id>/。

如果跳过日期匹配（例如从昨天的会话继续），使用 Bash(ls artifacts/tweaks/)，查找最近的匹配前缀。

读取会话状态：
```
Read artifacts/tweaks/<session-id>/state.yaml
Read artifacts/tweaks/<session-id>/pending.yaml
```
如果 pending.yaml 缺失或为空，则报告“没有待处理的调整”并停止。
读取 HTML + 架构：
- Read 目标 HTML（路径来自 state.yaml 或 $0）
- 提取 __tweak_schema 区块（位于 <script id="__tweak_schema"> 中的 JSON）
验证每个待处理的键：
- pending.yaml 中的每个键都必须存在于架构中
- 值类型必须与架构匹配（颜色 = 十六进制，数字 = 在 [min..max] 范围内，布尔值）
- 如果有任何键无效：报告具体键并停止（不要部分应用）
应用： 对 pending 中的每个键 → 值：
- 首选模式 — :root 上的 CSS 变量： 查找 --tweak-<key>: <old>; 并使用 Edit 替换为新值
- 备选模式 — 标记区块： 查找 ... 并使用 Edit 编辑其中的内容
- 如果两种标记都未找到 → 明确报错（HTML 未使用 /make-tweakable 模式）
通过 Edit 原子写入： 在 Claude Code 中，每次 Edit 都已是原子操作，因此无需临时文件重命名的流程。

追加到日志：

ts=$(date -u +%Y%m%dT%H%M%SZ)
Write artifacts/tweaks/<session-id>/applied/$ts.yaml:
  applied_at: $ts
  changes:
    <copy of pending.yaml>

更新状态：

Edit artifacts/tweaks/<session-id>/state.yaml:
  phase: idle → idle (no-op but bump timestamp)
  last_applied_at: <ts>

验证： /done <html-path> — 确认文件仍可渲染，且预览中显示了新值。
报告： “已应用 N 项调整。已记录到 artifacts/tweaks/<session-id>/applied/<ts>.yaml。待处理项已清空。”

如果用户说“撤销上次的调整”：

支持 Markdown