Add Light Effects tutorial under ESPHome Starter Kit > Tutorials

[bharvey88]

What does this implement/fix?

Adds a new Light Effects tutorial under ESPHome Starter Kit > Tutorials, alongside Using Secrets and Connect to Home Assistant. The page walks readers through adding two built-in ESPHome light effects (addressable_rainbow and addressable_color_wipe) by pasting YAML into the Effects field on their RGB light component.

The tutorial covers:

• Opening Device Builder, navigating to the RGB light component
• Toggling on Show advanced settings and pasting the effects YAML
• Collapsible callout pointing to the full ESPHome effects library and explaining the addressable_* requirement for the starter kit RGB
• Save → Install → On the Network
• Trying the effects from the local web server (with a one-liner pointing readers who have done Connect to Home Assistant to the same dropdown on the HA entity card)
• Closing success admonition framing it as the reader's first YAML edit

Also adds a #### Next Steps H4 (not in sidebar) at the bottom of Button Controlled LEDs with an ESPHome-styled md-button pointing to Light Effects, so the GUI automation reader has a natural follow-up.

Types of changes

• Typo / wording fix
• Content update (correcting outdated info, adding missing steps, clarifications)
• New page or new product section
• Page move / rename (redirect added in mkdocs.yml)
• Image / screenshot update
• Nav / structure change
• Site config or theme change
• CI / workflows / dependencies — Does not publish

Checklist:

• This PR targets the dev branch (not main)
• Changes previewed locally with mkdocs serve
• If pages were moved or renamed, redirects were added to mkdocs.yml
• If new pages were added, nav was updated in mkdocs.yml

Summary by CodeRabbit

Documentation

• Added a new tutorial page explaining how to add built-in addressable light effects to RGB modules, including step-by-step instructions for pasting effect definitions and verifying effects via the device web UI and Home Assistant.
• Updated an existing tutorial with a "Next Steps" section that provides navigation to the new light effects tutorial.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fa3637a8-f654-4031-ad0c-10c1f8b5cfe0

📥 Commits

Reviewing files that changed from the base of the PR and between d3e17f8 and d6553a6.

📒 Files selected for processing (3)

• docs/products/ESPHome-Starter-Kit/automations/button-controlled-leds.md
• docs/products/ESPHome-Starter-Kit/tutorials/light-effects.md
• mkdocs.yml

---

Walkthrough

This PR introduces a new "Light Effects" tutorial page to the ESPHome Starter Kit documentation, adds it to the site navigation in mkdocs.yml, and updates the existing "Button Controlled LEDs" tutorial with a next-step link to guide users through the progression.

Changes

Light Effects Tutorial and Navigation

Layer / File(s)	Summary
Light Effects tutorial and navigation integration docs/products/ESPHome-Starter-Kit/tutorials/light-effects.md, docs/products/ESPHome-Starter-Kit/automations/button-controlled-leds.md, mkdocs.yml	New tutorial walks users through enabling advanced settings, adding addressable light effect YAML entries (rainbow and color wipe), compiling and flashing firmware, and verifying effects via the device web UI or Home Assistant. Tutorial is registered in mkdocs navigation and linked from the Button Controlled LEDs page via a "Next Steps" call-to-action button.

Possibly related PRs

• ApolloAutomation/docs#852: Introduces the Button Controlled LEDs tutorial that now references this new Light Effects tutorial via the cross-linked Next Steps section.
• ApolloAutomation/docs#778: Also modifies mkdocs.yml navigation structure for the ESPHome Starter Kit section.
• ApolloAutomation/docs#820: Updates ESPHome Starter Kit navigation in mkdocs.yml by adding tutorial entries.

Poem

🐰 A light effects lesson hops into the fold,
Rainbow and color wipe, a story told,
From buttons that blink to effects that glow,
Next steps guide users through the show!

🎯 1 (Trivial) | ⏱️ ~5 minutes

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docs-light-effects-tutorial

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}