Agent Skills
› home-assistant/frontend
home-assistant/frontend
GitHub指导 Home Assistant 前端组件的开发与审查，涵盖对话框、按钮、表单和警报等 UI 元素的实现规范与交互模式。
Install All Skills
npx skills add home-assistant/frontend --all -g -y
Skills in Collection (12)
指导 Home Assistant 前端组件的开发与审查，涵盖对话框、按钮、表单和警报等 UI 元素的实现规范与交互模式。
实现或审查 HA 前端 UI 组件
创建对话框、按钮、表单或警报
npx skills add home-assistant/frontend --skill ha-frontend-components -g -y
指导 Home Assistant 前端组件从宽泛 hass 对象迁移至细粒度上下文，优化渲染性能、依赖可见性及测试可模拟性。
添加或修改组件状态访问逻辑
替换对 hass 对象的直接读取
消费实体或注册表上下文
审查因上下文变更导致的重新渲染行为
npx skills add home-assistant/frontend --skill ha-frontend-contexts -g -y
用于Home Assistant前端演示环境的开发、验证及共享Mock API存根的管理。支持本地运行演示、URL路由配置及跨模块（Gallery）依赖检查。
修改demo/目录下的文件
更改gallery使用的demo/src/stubs/
运行或验证前端演示环境
npx skills add home-assistant/frontend --skill ha-frontend-demo -g -y
指导 Home Assistant 前端事件处理的最佳实践，涵盖 HASSDomEvent 类型使用、fireEvent 分发及事件监听器实现规范。
实现或审查前端事件监听器
定义自定义事件契约
使用 fireEvent 分发事件
npx skills add home-assistant/frontend --skill ha-frontend-events -g -y
用于处理 Home Assistant 前端画廊（gallery/）的开发、构建与验证，涵盖页面生成、演示脚本及静态资源管理。
修改 gallery/ 目录下的文件
运行画廊开发或构建命令
添加新的 UI 组件演示
更新画廊侧边栏或元数据
npx skills add home-assistant/frontend --skill ha-frontend-gallery -g -y
提供 Home Assistant 前端 Lit 组件开发规范，涵盖响应式属性、DOM 查询及渲染状态的最佳实践，指导实现与审查。
使用 Lit 框架开发前端组件
审查 Lit 组件的状态管理与 DOM 访问代码
npx skills add home-assistant/frontend --skill ha-frontend-lit -g -y
指导 Home Assistant 前端代码审查与 PR 准备，涵盖审查范围界定、PR 模板规范及提交前检查清单。
审查前端代码变更
准备 Pull Request
检查常见审查问题
npx skills add home-assistant/frontend --skill ha-frontend-review -g -y
指导 Home Assistant 前端 CSS 样式、主题集成、响应式布局、RTL 及视图过渡的开发规范，涵盖间距令牌使用、组件作用域及无障碍标准。
编辑 CSS 或视觉组件结构
调整布局与响应式设计
实现主题或动画效果
npx skills add home-assistant/frontend --skill ha-frontend-styling -g -y
Home Assistant前端测试与验证工作流，涵盖Lint、TypeScript检查、Vitest单元测试及Playwright E2E测试。指导测试辅助函数复用、生产构建命令及何时添加测试，明确禁止为视觉组件编写渲染测试。
运行前端代码质量检查
执行单元测试或端到端测试
配置前端构建流程
评估是否应为特定功能编写测试
npx skills add home-assistant/frontend --skill ha-frontend-testing -g -y
提供Home Assistant前端TypeScript类型定义规范，涵盖数据契约验证、类型复用策略、断言使用及Lit生命周期类型处理。
定义或审查后端数据契约
创建共享类型或可选模式
检查Lit组件生命周期方法
npx skills add home-assistant/frontend --skill ha-frontend-types -g -y
提供 Home Assistant 前端用户界面文案的编写与审查指南，涵盖本地化规范、美式英语风格、术语定义及操作动词（如删除/移除）的使用场景。
新增或修改 UI 界面文案
审查翻译内容
检查按钮和标签的用词规范性
npx skills add home-assistant/frontend --skill ha-frontend-user-facing-text -g -y
基于前端审查证据，判定 Home Assistant 新组件或交互模式的 UI/UX 方向是否已确定，并路由决定仅需前端审查、推荐 UX 审查或必须 UX 审查。
Home Assistant 新增卡片、徽章、屏幕或交互模式时
需要判断 UI/UX 设计方向是否已由现有证据充分支持
npx skills add home-assistant/frontend --skill ha-frontend-ux-readiness -g -y
