Kitchen SinkLearn Claude customizationSource
CourseFull course

LESSON 07 OF 08

Make one change you can explain

Keep a baseline, edit a visible behavior, and compare the result.

In this lesson
  • Use a focused edit/reload loop.
  • Update an assertion when the intended behavior changes.
Lessons in your path0 of 8 complete
Progress settings

Saved only in this browser.

  1. 1

    See the original work.

    In Cowork, run the experiment command with the supplied notes. In Code, open /kitchen and click the counter. Write down what you expect to change.

  2. 2

    Edit one observable detail.

    Change a field name in commands/experiment.md, or change the counter button’s label in hooks/register.js. Repackage Cowork; use --plugin-dir for Code’s edit/reload loop.

  3. 3

    Prove that specific change.

    Invoke the command again or press the button. Run the relevant checks, then record the app surface and version. A host test can validate an element tree; the app still needs a visual check.

Useful local checks

No npm install is needed. Node.js 20+, Python 3.9+, and a recent Claude Code are enough for the full set.

npm test
npm run validate
npm run test:native
npm run site:build
npm run site:check
Keep these boundaries visible. This mod makes no network calls, spawns no processes, and makes no extra model requests. Its saved note uses local plain-text plugin storage. Installed mods can have much broader access: review their code and validator inventory before loading them. Understand mod access ↗

Concrete Code exercise: change the counter label.

  1. From the repository root launch claude --plugin-dir ./plugins/kitchen-sink.
  2. Run /kitchen and click the counter once.
  3. In hooks/register.js, find the button keyed counter. Change only its label to My experiment: ${clicks}.
  4. Save, wait for the reload notice, reopen the pane if needed, and click again.

Expect: the new label appears, the counter increments, and its value starts over after a module reload. The key and callback stay the same.

The native test currently expects the original label. Update that assertion to your intentional new label before running npm run test:native. A behavior test should reflect the change you mean to keep.

Or use the Cowork path.

Rename one experiment-card field, rebuild the ZIP, and re-upload it. That changes workflow instructions rather than a rendering callback. Use the same synthetic notes to make the comparison easier.

YOUR TURN

Try it, then explain it.

  1. Describe your intended before/after result in one sentence.
  2. Change one label or output-field instruction.
  3. Observe the new result and identify the relevant check.
QUICK CHECK · OPTIONAL

After intentionally changing a UI label, what should you do with a test that expects the old label?

Choose one answer

Finish at your own pace.

The next button saves completion and opens the next lesson.