Apply Tweaks

Name: Apply Tweaks
Author: bluzir

bluzir/claude-code-design

40 installs
98 repo stars
Updated April 20, 2026
bluzir/claude-code-design

apply-tweaks is a Claude Code skill that persists buffered tweaks from pending.yaml back into a source HTML file with validation and logging.

About

This skill persists queued visual tweaks stored in pending.yaml back into a source HTML file. It reads session state, validates each pending key against the file's __tweak_schema, applies changes to CSS variables on :root or marker blocks, logs applied changes, clears the pending buffer, and supports reverting the last tweaks. A developer uses it to save panel-adjusted design values into the HTML.

Persists buffered tweaks from pending.yaml back into source HTML
Validates each key against the __tweak_schema before applying
Includes a revert path and an applied-changes log

Apply Tweaks by the numbers

40 all-time installs (skills.sh)
Ranked #1,142 of 2,715 Automation & Workflows skills by installs in the Skillselion catalog
Data as of Aug 1, 2026 (Skillselion catalog sync)

At a glance

apply-tweaks capabilities & compatibility

Capabilities: ui design · frontend
Use cases: ui design · frontend

From the docs

What apply-tweaks says it does

Persist queued tweak changes (in `pending.yaml`) back to the source HTML via `Edit`.

SKILL.md

If any key invalid: report which + stop (do not partially apply)

SKILL.md

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

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/bluzir/claude-code-design/apply-tweaks.svg)](https://skillselion.com/skills/bluzir/claude-code-design/apply-tweaks)

Installs	40
repo stars	★ 98
Last updated	April 20, 2026
Repository	bluzir/claude-code-design ↗

What it does

Persist buffered UI tweaks from pending.yaml back into the source HTML with validation and a revert path.

Who is it for?

Developers saving panel-adjusted tweak values (colors, numbers, booleans) into an HTML file.

Skip if: HTML that does not use the /make-tweakable pattern with a __tweak_schema and CSS-variable or marker blocks.

When should I use this skill?

When the user says save tweaks, apply tweaks, persist panel changes, or runs /apply-tweaks.

What you get

Validated tweak values persisted into the HTML, logged, with the pending buffer cleared.

Updated source HTML
Applied-changes log
Cleared pending buffer

By the numbers

Documents a 10-step apply pipeline
Defines a separate revert path

Files

SKILL.mdMarkdownGitHub ↗

Apply Tweaks

Persist queued tweak changes (in pending.yaml) back to the source HTML via Edit. Pattern from claude-pipe: files are state, Claude is the writer.

Session lookup

session-id for <html-path> = tweaks-{slugify(basename html-path without ext)}-{today YYYYMMDD}. Session dir: artifacts/tweaks/<session-id>/.

If skipping date match (e.g. resume from yesterday), Bash(ls artifacts/tweaks/) and find the most recent matching prefix.

Pipeline

1. Read session state:

   Read artifacts/tweaks/<session-id>/state.yaml
   Read artifacts/tweaks/<session-id>/pending.yaml

If pending.yaml is missing or empty — report "no pending tweaks" and stop.

2. Read HTML + schema:

Read the target HTML (path from state.yaml or $0)
Extract the __tweak_schema block (JSON inside <script id="__tweak_schema">)

3. Validate each pending key:

Every key in pending.yaml must exist in schema
Value type must match schema (color = hex, number = in [min..max], boolean)
If any key invalid: report which + stop (do not partially apply)

4. Apply: for each key → value in pending:

Primary pattern — CSS var on `:root`: find --tweak-<key>: <old>; and Edit to new value
Secondary pattern — marker block: find ... and Edit the content inside
If neither marker found → fail loudly (HTML didn't use /make-tweakable pattern)

5. Atomic write via Edit: each Edit is already atomic in Claude Code, so no tmp-rename dance needed.

6. Append to log:

   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>

7. Clear pending: Write artifacts/tweaks/<session-id>/pending.yaml with empty content (or {})

8. Update state:

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

9. Verify: /done <html-path> — confirms file still renders, new values visible in preview.

10. Report: "Applied N tweaks. Logged to artifacts/tweaks/<session-id>/applied/<ts>.yaml. Pending cleared."

Revert path

If user says "revert last tweaks": 1. Bash(ls -t artifacts/tweaks/<session-id>/applied/) — get most recent 2. Read that file — get the delta 3. Reverse each change (find current value in HTML, restore previous) 4. Append a new applied entry with type: revert and reference to reverted file 5. /done