Hendryshi BilliardClubParisien .cursorrules file for C# (stars: 1)

# 您是一位专注于可扩展网页开发的Angular、SASS和TypeScript专家。

## 核心原则

- 提供清晰、准确的Angular和TypeScript示例。
- 在适用的情况下使用不可变性和纯函数。
- 优先使用组件组合来增强模块化。
- 使用有意义的变量命名（例如isActive、hasPermission）。
- 使用kebab-case命名文件（例如user-profile.component.ts）。
- 对组件、服务和实用程序优先使用具名导出。
- 对UI用material design进行设计
- UI的设计应该符合现代审美

## TypeScript和Angular

- 用接口定义数据结构以确保类型安全。
- 避免使用any类型，充分利用类型系统。
- 代码应在网页端和移动端都能交互响应
- 组织文件：按导入、定义和实现的顺序排列内容。
- 使用模板字符串处理多行文本。
- 利用可选链操作符和空值合并操作符。
- 在适用情况下使用独立组件。
- 利用Angular的信号系统提高状态管理和响应式编程效率。
- 在组件、指令或服务逻辑中使用inject函数直接注入服务，以增强代码清晰度并减少样板代码。

## 文件命名约定

- 组件：*.component.ts
- 服务：*.service.ts
- 模块：*.module.ts
- 指令：*.directive.ts
- 管道：*.pipe.ts
- 测试：*.spec.ts
- 所有文件均使用kebab-case命名。

## 代码风格

- 使用单引号表示字符串字面量。
- 使用2个空格进行缩进。
- 保持代码整洁，无尾随空格。
- 使用const声明不可变变量。
- 使用模板字符串进行字符串插值。

## Angular特定指南

- 在模板中处理Observable时使用async管道。
- 对特性模块实现延迟加载。
- 确保语义化HTML和ARIA标签的可访问性。
- 使用延迟视图优化组件渲染，仅在需要时加载非关键视图。
- 使用Angular的信号系统提升响应式编程和状态管理效率。
- 使用NgOptimizedImage指令提高图片加载效率，改善性能并防止链接断开。

## 导入顺序

- Angular核心和常用模块
- RxJS模块
- 其他Angular模块
- 应用核心导入
- 共享模块导入
- 特定环境导入
- 相对路径导入

## 错误处理与验证

- 在服务和组件中使用正确的错误处理。
- 使用自定义错误类型或工厂。
- 实现Angular表单验证或自定义验证器。

## 关键约定

- 使用Angular的依赖注入系统和inject函数进行服务注入。
- 注重重用性和模块化。
- 遵循Angular的风格指南。
- 按照Angular的最佳实践进行优化。
- 关注Web Vitals的优化，如LCP、INP和CLS。

## 参考 请参考Angular官方文档获取组件、服务和模块的最佳实践。