Update frontend documentation to clarify development commands and add lifecycle management details

[timmo001]

Proposed change

Updates to the new development lifecycle scripts and workflows. Added a e2e testing section. Also cleans up some duplicated terminology

Related frontend PRs:

• Add dev scripts and background support for agents frontend#52948
• Add test:e2e:app:dev to not need to build for every test run frontend#52865
• Add Playwright e2e tests (local Chromium) frontend#51929

Type of change

• Document existing features within Home Assistant
• Document new or changing features for which there is an existing pull request elsewhere
• Spelling or grammatical corrections, or rewording for improved clarity
• Editing or restructuring documentation guidelines
• Changes to the backend of this documentation
• Remove stale or deprecated documentation

Checklist

• I have read and followed the documentation guidelines.
• I have verified that my changes render correctly in the documentation.

Additional information

• This PR fixes or closes issue: fixes #
• Link to relevant existing code or pull request:

Summary by CodeRabbit

• Documentation
  • Clarified frontend development and design setup instructions.
  • Updated local run commands, port details, and background server options.
  • Added testing guidance for linting, type checks, unit tests, and end-to-end tests.
  • Improved build instructions and browser setup notes.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c9bbfc1a-802a-48b1-9c88-6baa5f9dbfa4

📥 Commits

Reviewing files that changed from the base of the PR and between be0cbf9 and e0a1c59.

📒 Files selected for processing (1)

• docs/frontend/development.md

🚧 Files skipped from review as they are similar to previous changes (1)

• docs/frontend/development.md

---

📝 Walkthrough

Walkthrough

Frontend documentation now uses yarn-based commands for gallery development, dev-server management, testing, and builds, while adding background lifecycle guidance, port mappings, and a new testing section.

Changes

Frontend documentation updates

Layer / File(s)	Summary
Gallery command note docs/frontend/design.md	Clarifies the “design” vs “gallery” naming and adds the recommended gallery dev command, wrapper script, local server URL, and background lifecycle flag support.
Dev server commands and lifecycle docs/frontend/development.md	Replaces older dev-server script references with yarn dev and yarn dev:serve, documents -c and -p, expands background lifecycle management, and adjusts browser guidance wording.
Testing and build guidance docs/frontend/development.md	Adds a Testing section for linting, formatting, type checks, unit tests, and Playwright suites, then updates the frontend build command to yarn build.

Estimated code review effort: 1 (Trivial) | ~5 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the frontend docs update for development commands and lifecycle management.
Description check	✅ Passed	The description is mostly complete and follows the template, though the issue and link fields remain placeholders.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch frontend-e2e-and-agents-update

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/frontend/development.md`:
- Around line 113-118: The frontend development docs mention changing the served
port via yarn dev:serve -p, but they do not say that Home Assistant’s
cors_allowed_origins must also include the matching origin when using a custom
port. Update the development.md guidance near the port example to tell readers
to add the frontend origin with the chosen port to cors_allowed_origins, and
reference the yarn dev:serve -p example so it’s clear the CORS setting must
match that port.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ccf97311-c26d-48fb-aaf2-8f2f1da76054

📥 Commits

Reviewing files that changed from the base of the PR and between 151f4d9 and be0cbf9.

📒 Files selected for processing (2)

• docs/frontend/design.md
• docs/frontend/development.md