用途：这是一套严格的前端代码质量指南，适用于编写或审查前端组件、composables 或页面时遵循，目标是让代码清晰、可维护，强调清晰性优先于技巧性。
主要能力与规则：
- 组件简洁：保持单一职责；文件聚焦单一关注点，内聚模块可超过 200 行（至约 400 行），仅在存在多个无关关注点时才拆分；将复杂逻辑抽到自定义 hook 或工具函数；避免 JSX 中的嵌套三元与复杂条件，改用提前返回。
- 状态管理清晰：状态尽量靠近使用处；仅当多组件共享时才提升；谨慎使用 context（仅认证、主题、全局配置）；避免超过 2-3 层的 prop drilling，改用组合或 context。
- 类型安全：为组件接口定义显式类型；避免 any，真正未知用 unknown；变体组件用可辨识联合；显式标注事件处理函数类型。
- 数据获取：将数据获取与展示分离，用自定义 hook；显式处理 loading、error、empty 状态；避免在 render 中获取数据；使用数据获取库时缓存并去重请求。
- 命名约定：组件 PascalCase（UserProfile.tsx）；hook 用 camelCase 加 use 前缀（useUserData.ts）；工具 camelCase（formatDate.ts）；常量 UPPER_SNAKE_CASE（API_BASE_URL）；布尔用 is、has、should 前缀；事件处理用 onSubmit、onChange、onValidate 等。
- 文件组织：按类型而非功能组织，如 components/（含 ui/）、hooks/、lib/、types/、queries/；将高度相关文件放入子目录；共享代码放 lib/ 或 utils/；业务逻辑与 UI 逻辑分离。
使用方式：在编写或审查前端代码时按上述规则执行；若开发者纠正了本技能本应避免的行为，建议对该技能提出具体修订以防再次发生。
限制：资料未提供具体安装命令、依赖、平台或收费信息；规则以 React/TypeScript 示例为主，其他框架的适配暂未提供。