---
name: HTML Tweaks (HTML)
description: Iterative refinement on an existing HTML artifact — read the file, apply targeted tweaks (copy, palette, motion timing, layout), return a single updated file. The HTML-side counterpart to in-Figma editing.
triggers:
  - tweak html
  - refine html
  - iterate on html
  - adjust html prototype
  - update html deck
cd:
  mode: tweaks
  platform: html-canvas
  scenario: iteration
  preview: html_file
  fidelity: high
  design_system:
    requires: true
    sections: [palette, type, spacing]
  craft:
    requires:
      - typography
      - color
      - anti-ai-slop
  inputs:
    - existing html file path
    - tweak list (one or more concrete asks)
  parameters:
    - preserve_structure (default true)
  outputs:
    primary: html_file
    capabilities_required:
      - write_file
      - read_file
  default_for:
    - html-tweaks
  example_prompt: "On the prototype at ./out/demo.html, swap accent to OKLch warm-amber and slow the hero animation to 600ms"
---

## What tweaks is for

Use this skill when the user already has an HTML artifact (from `html-prototype-html`, `html-deck-html`, `html-motion-html`, or `html-infographic-html`) and wants targeted edits — not a full re-design. If the request is "redo this from scratch", route back to the originating skill.

Read `tweaks-system.md` reference for the canonical tweak vocabulary.

## Workflow

1. **Read** the existing file via `read_file` and identify the structural anchors (root, scenes, sections).
2. **Diff in your head**. State which tweaks touch which anchors before you write.
3. **Preserve everything else.** A tweak is local. Don't refactor adjacent code unless the user asked.
4. **Write back** the full file — single-file rule still applies.

## Tweak vocabulary

- **Copy**: change strings; preserve structure.
- **Palette**: swap a token value (e.g. `--accent`); never introduce a new role unless asked.
- **Motion timing**: adjust durations / easings on existing keyframes; don't add new animations.
- **Layout**: micro-adjustments to spacing / column widths within the existing grid.
- **State coverage**: add a missing empty / loading / error state on demand.

## Anti-patterns

- Rewriting unchanged sections "while you're in there".
- Renaming variables for "consistency" when the user only asked about color.
- Adding new dependencies when none are needed for the requested tweak.

## Quality bar

- The diff (mentally or actually) is the size the tweak deserves.
- `craft_lint` still passes.
- The file still opens cleanly via `file://`.
