docs: add Device Builder Tour page to Starter Kit wiki

[bharvey88]

What does this implement/fix?

Adds a beginner-friendly walkthrough of the new ESPHome Device Builder GUI under Learn the Basics on the Starter Kit wiki. Covers the dashboard, the device info panel, the editor's three-pane layout, publishing changes (Validate / Save / Install), and logs, using the ESPHome Starter Kit as the running example throughout.

Screenshots and GIFs will follow in a separate commit/PR; the page has HTML-commented TODOs marking every placeholder.

Supersedes #835 (rebased onto current dev to resolve the mkdocs.yml conflict with the new Core Components nav entry).

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 comprehensive guide to the ESPHome Device Builder, covering the dashboard, configuration editor, and publishing workflow with step-by-step instructions.

[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: a02d607b-ec40-474f-abee-b3426ee1f19a

📥 Commits

Reviewing files that changed from the base of the PR and between b701e37 and 6578e16.

📒 Files selected for processing (2)

• docs/products/ESPHome-Starter-Kit/learning-the-basics/device-builder-tour.md
• mkdocs.yml

---

Walkthrough

This PR adds a new "Device Builder Tour" documentation page that walks users through the ESPHome Device Builder interface, including dashboard navigation, the device configuration editor with its navigator/form/YAML panes, two-way editing sync, and the publishing workflow. The navigation entry is wired into mkdocs.yml under the ESPHome Starter Kit's "Learn the Basics" section.

Changes

Device Builder Tour Guide

Layer / File(s)	Summary
Device Builder Tour guide and navigation docs/products/ESPHome-Starter-Kit/learning-the-basics/device-builder-tour.md, mkdocs.yml	New Device Builder Tour page documents the Device Builder app dashboard (device cards, menus, filtering), read-only device info panel, three-pane configuration editor (navigator, form, YAML view), two-way sync behavior, Validate/Save/Install workflow (OTA, USB, manual), Logs stream, and navigation to related topics. Navigation entry added to mkdocs.yml under Learn the Basics.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• ApolloAutomation/docs#804: Both PRs add a new tutorial page to the ESPHome Starter Kit and wire it into mkdocs.yml navigation.
• ApolloAutomation/docs#820: Both PRs modify mkdocs.yml navigation entries in the same ESPHome Starter Kit "Learn the Basics" section.
• ApolloAutomation/docs#833: Both PRs follow the same pattern of adding new "Learn the Basics" documentation pages and updating the corresponding mkdocs.yml navigation.

Poem

🐰 A tour through Device Builder's gleaming door,
Where dashboards dance and configs soar,
From Validate to Install's embrace,
The logs flow fast at their steady pace.
New knowledge blooms with YAML and form,
Our little guide keeps learning warm! ✨

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docs/device-builder-tour-rebased

---

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.}