用途：在修改 webstatus.dev 的 frontend/ 目录、处理 TypeScript、Lit Web Components、Shoelace 组件或前端测试时，提供架构指导与代码约定。
主要能力与约定：前端使用 TypeScript、Lit 和 Web Components 构建，UI 采用 Shoelace 组件库；状态管理通过 Lit Context 与服务容器模式（<webstatus-services-container>）实现依赖注入；与 Go 后端交互时使用由 OpenAPI 规范生成的 TypeScript 类型（命令 make node-openapi）。
编码规则：新 UI 元素应作为扩展 LitElement 的自定义元素创建，优先复用 Shoelace 组件，不引入 React 或 Vue 等其他 UI 框架，不新增全局状态管理方案。页面组件只负责路由内容，整体布局由 webstatus-app 提供。不要在 shared-css.ts 添加通用类名，改用 Shadow DOM 封装与 slot 组合。应用级服务提供者放在 WebstatusServicesContainer 中；高层组件（如 WebstatusHeader）因插槽或渲染生命周期无法可靠订阅上下文时，使用专门子组件（Context Bridge 模式）。主题方面，使用 Shoelace 语义 CSS 变量（如 --sl-color-neutral-0），但组件样式只使用 _theme-css.ts 中定义的自定义变量（如 --color-background、--table-padding）作为抽象层，不用 --sl- 前缀变量，也不用 :host-context。
测试与检查：单元测试命令为 npm run test -w frontend；代码检查用 make node-lint（ESLint、Prettier）或 make lint-fix，CSS 用 make style-lint。测试 ES 模块导出时（如 Firebase Auth）可用可被 Sinon stub 覆盖的辅助属性；querySelector 应带泛型参数保证类型安全。若前端测试超时或失败，让用户在本地终端运行 npm run test:watch -w frontend，并在浏览器打开提供的 localhost 地址（如 http://localhost:8000/）检查控制台和 DOM，不要随意增大 web-test-runner.config.mjs 的超时。
其他：重大架构变更或引入新状态管理模式时，触发 GEMINI.md 中的 “Updating the Knowledge Base” 提示，更新 docs/ARCHITECTURE.md 及相关技能文件。样式规则不确定时须向用户确认，不臆测。资料未提供收费、平台或效果信息。