Agent Skills
› home-assistant/frontend
home-assistant/frontend
GitHub规范 Home Assistant 前端组件（如对话框、按钮、表单、提示）的开发与审查，涵盖交互模式、API 使用及加载状态指导。
安装全部 Skills
npx skills add home-assistant/frontend --all -g -y
集合内 Skills (13)
规范 Home Assistant 前端组件（如对话框、按钮、表单、提示）的开发与审查，涵盖交互模式、API 使用及加载状态指导。
实现或审查 HA 前端 UI 组件
配置 ha-dialog, ha-button, ha-form 等组件
npx skills add home-assistant/frontend --skill ha-frontend-components -g -y
指导Home Assistant前端组件从宽泛的hass对象迁移至细粒度Lit上下文，以优化渲染性能、明确依赖并简化测试。
需要读取Home Assistant状态或注册表数据
优化组件重渲染行为
替换对hass对象的直接访问
npx skills add home-assistant/frontend --skill ha-frontend-contexts -g -y
用于 Home Assistant 前端独立演示环境的开发、配置及验证。支持运行 Mock 后端的全功能 UI，提供 URL 导航、多 Demo 配置切换及共享存根管理，适用于修改 demo/ 目录或运行验证场景。
修改 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/）的开发、构建与验证。涵盖页面生成、TypeScript 演示、侧边栏配置及静态资源构建，确保 UI 模式文档的正确性与可运行性。
修改 gallery/ 目录下的文件
更新画廊 Markdown 或 TypeScript 演示
调整侧边栏条目或模拟数据
执行画廊构建或开发服务器启动
npx skills add home-assistant/frontend --skill ha-frontend-gallery -g -y
规范 Home Assistant 前端 Lit 组件开发，涵盖响应式属性、DOM 查询、生命周期及渲染状态管理，指导实现与审查。
使用 Lit 框架开发前端组件
审查 Lit 组件代码规范
npx skills add home-assistant/frontend --skill ha-frontend-lit -g -y
处理Home Assistant前端URL查询参数，支持状态同步、类型化读写及控制器集成。
实现URL参数状态管理
构建带查询字符串的应用内链接
npx skills add home-assistant/frontend --skill ha-frontend-query-params -g -y
用于 Home Assistant 前端 PR 审查与提交的指南，涵盖代码质量、设计模式及 UI/UX 规范。
审查前端代码变更
准备前端 Pull Request
检查常见审查问题
npx skills add home-assistant/frontend --skill ha-frontend-review -g -y
指导 Home Assistant 前端样式开发，涵盖主题变量、响应式布局、RTL 支持及视图过渡。用于编辑 CSS、组件结构和视觉层级，确保可访问性与移动端适配。
需要修改或编写前端 CSS 样式
调整页面布局与响应式设计
集成主题变量或间距令牌
实现视图过渡动画
npx skills add home-assistant/frontend --skill ha-frontend-styling -g -y
Home Assistant前端测试与验证技能，涵盖单元测试、E2E测试、代码检查及构建流程。指导如何复用测试辅助函数、执行Lint/Vitest/Playwright命令，以及管理生产构建和开发服务器。
添加或更新前端测试用例
运行代码检查和类型校验
执行Vitest或Playwright测试套件
启动开发服务器或构建前端项目
npx skills add home-assistant/frontend --skill ha-frontend-testing -g -y
规范 Home Assistant 前端 TypeScript 类型定义，涵盖数据契约验证、现有类型复用、断言处理及 Lit 生命周期类型使用，确保前后端接口一致性与代码质量。
定义或审查前端 TypeScript 类型
检查数据契约与后端一致性
配置 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 就绪状态。基于前端审查证据，决定是继续前端审查、推荐还是必须 UI/UX 审查，确保用户体验一致性。
评估新卡片或交互模式的用户体验方向
结合 ha-frontend-review 结果进行 UI/UX 路由决策
npx skills add home-assistant/frontend --skill ha-frontend-ux-readiness -g -y
