Change Plan & Conventional Commits

Create a structured plan for code changes and draft compliant commit messages.

Workflow

1. Analyze the Request

Identify the scope: is it a feature, fix, refactor, or chore? - feat: New functionality. - fix: Bug fix. - refactor: Code change that neither fixes a bug nor adds a feature. - docs: Documentation only. - test: Adding or correcting tests. - chore: Build process, auxiliary tools.

1. Draft the Plan

Break down the task into logical steps. Each step should be verifiable. - Step 1: Create X component. - Step 2: Add tests for X. - Step 3: Integrate X into Y.

1. Identify Risks & Validations

- What could break? - Which tests should run? (e.g., pnpm run test, pnpm run lint)

1. Draft Commit Messages

Propose commit messages for the changes. Use the format: type(scope): description - feat(audio): add new synth engine - fix(ui): resolve button overlapping issue

Detailed Guidelines

• Scope: Optional but recommended (e.g., ui, audio, api).
• Description: Imperative, lowercase, no period at end (e.g., "add feature" not "Added feature.").
• Body: Optional. Explain what and why, not how.

Example

Input: "I need to fix the volume slider not persisting after reload."

Output Plan:

1. Analyze: The VolumeSlider component updates state but doesn't write to localStorage.
2. Plan:

- Modify useAudioSettings to read/write localStorage. - Update VolumeSlider to use the initial value from the hook. - Verify by reloading the page.

1. Commit:

``` fix(audio): persist volume settings to localStorage

The volume slider now saves its value to localStorage and restores it on page load. ```

Skill sync: compatible with React 19.2.8 / Vite 8.2.2 / Tailwind 4.3.3 baseline as of 2026-05-20.