Clarify companion skill selection before frontend review (#54067)

.agents/skills/ha-frontend-review/SKILL.md

@@ -7,6 +7,12 @@ description: Home Assistant frontend PR and review guidance, including implement
 
 Use this skill when reviewing Home Assistant frontend changes or preparing a pull request.
 
+## Review Preparation
+
+1. Establish the review scope from the diff and the behavior changed by it.
+2. Before identifying findings, use the [project skill catalogue](../../../AGENTS.md#project-skills) to load every matching companion's `SKILL.md`. Follow applicable companion references in those skills as well; this review skill supplies the workflow, and companions supply the domain-specific criteria.
+3. Apply all loaded guidance within that scope. Report only problems introduced or worsened by the changeset, anchored to changed lines. Read surrounding code to understand affected behavior, not to generate unrelated cleanup or migration requests.
+
 ## Pull Request Body
 
 When creating a pull request, use `.github/PULL_REQUEST_TEMPLATE.md` as the body.
@@ -116,4 +122,3 @@ For user-facing changes, establish the existing design context as part of fronte
 - Record the applicable UI/UX evidence for user-facing changes, whether or not further input is needed.
 - Keep style-only comments secondary unless they affect maintainability or user experience.
 - Prefer small, direct fixes over large refactors during review follow-up.
-- Load the matching `ha-frontend-*` skill when a finding falls within its area.

AGENTS.md

@@ -37,7 +37,7 @@ Never run `tsc` or `yarn lint:types` with file arguments. When `tsc` receives fi
 
 ## Project Skills
 
-Detailed guidance lives in project skills under `.agents/skills/`. Load the matching skill before detailed implementation or review:
+Detailed guidance lives in `.agents/skills/<name>/SKILL.md`. Load every matching skill before detailed implementation or review. For reviews, load `ha-frontend-review` alongside all companions that apply to the changed code or behavior:
 
 - `ha-frontend-contexts`: Lit contexts, `hass` migration, and rerender-sensitive state access.
 - `ha-frontend-components`: dialogs, forms, alerts, shortcuts, tooltips, panels, and Lovelace cards.

src/dialogs/more-info/controls/more-info-update.ts

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/skeleton/skeleton";
 import { consume } from "@lit/context";
 import type { HassConfig } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
@@ -11,7 +10,6 @@ import { transform } from "../../../common/decorators/transform";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import { sanitizeHttpUrl } from "../../../common/url/sanitize-http-url";
-import "../../../components/animation/ha-fade-in";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
@@ -93,12 +91,8 @@ class MoreInfoUpdate extends LitElement {
 
   @state() private _markdownLoading = true;
 
-  @state() private _backupConfigLoading = true;
-
   @state() private _backupConfig?: BackupConfig;
 
-  @state() private _createBackupLoading = true;
-
   @state() private _createBackup = false;
 
   @state() private _entitySources?: EntitySources;
@@ -111,8 +105,6 @@ class MoreInfoUpdate extends LitElement {
       // ignore error, because user will get a manual backup option
       // eslint-disable-next-line no-console
       console.error(err);
-    } finally {
-      this._backupConfigLoading = false;
     }
   }
 
@@ -123,7 +115,6 @@ class MoreInfoUpdate extends LitElement {
       // for home assistant and OS updates
       if (this._isHaOrOsUpdate(type)) {
         this._createBackup = config.core_backup_before_update;
-        this._createBackupLoading = false;
         return;
       }
 
@@ -134,9 +125,6 @@ class MoreInfoUpdate extends LitElement {
       // ignore error, because user can still set the config
       // eslint-disable-next-line no-console
       console.error(err);
-      this._createBackup = false;
-    } finally {
-      this._createBackupLoading = false;
     }
   }
 
@@ -165,10 +153,6 @@ class MoreInfoUpdate extends LitElement {
       : "generic";
 
     if (this._isHaOrOsUpdate(updateType)) {
-      if (this._backupConfigLoading) {
-        return undefined;
-      }
-
       const isBackupConfigValid =
         !!this._backupConfig &&
         !!this._backupConfig.automatic_backups_configured &&
@@ -348,34 +332,25 @@ class MoreInfoUpdate extends LitElement {
       </div>
       <div class="footer">
         ${
-          createBackupTexts || this._backupConfigLoading
+          createBackupTexts
             ? html`
-                <ha-row-item
-                  .headline=${createBackupTexts ? createBackupTexts.title : undefined}
-                  .supportingText=${createBackupTexts ? createBackupTexts.description : undefined}
-                >
+                <ha-row-item>
+                  <span slot="headline">${createBackupTexts.title}</span>
                   ${
-                    !createBackupTexts
-                      ? html`<ha-fade-in slot="headline" .delay=${500}
-                          ><wa-skeleton effect="sheen"></wa-skeleton
-                        ></ha-fade-in>`
+                    createBackupTexts.description
+                      ? html`
+                          <span slot="supporting-text">
+                            ${createBackupTexts.description}
+                          </span>
+                        `
                       : nothing
                   }
-                  ${
-                    this._createBackupLoading
-                      ? html`<ha-fade-in
-                          class="skeleton-end"
-                          slot="end"
-                          .delay=${500}
-                          ><wa-skeleton effect="sheen"></wa-skeleton
-                        ></ha-fade-in>`
-                      : html`<ha-switch
-                          slot="end"
-                          .checked=${this._createBackup}
-                          @change=${this._createBackupChanged}
-                          .disabled=${updateIsInstalling(this.stateObj)}
-                        ></ha-switch>`
-                  }
+                  <ha-switch
+                    slot="end"
+                    .checked=${this._createBackup}
+                    @change=${this._createBackupChanged}
+                    .disabled=${updateIsInstalling(this.stateObj)}
+                  ></ha-switch>
                 </ha-row-item>
               `
             : nothing
@@ -612,11 +587,6 @@ class MoreInfoUpdate extends LitElement {
       box-sizing: border-box;
       padding-bottom: var(--ha-space-4);
     }
-    .skeleton-end {
-      width: 48px;
-      height: 24px;
-      display: block;
-    }
   `;
 }