---
name: fkit-ui
description: 使用 FlutterKit 设计系统、TDesign Flutter、Widget 与动画扩展实现或重构页面和组件，覆盖主题语义、响应式布局、安全区、深浅色和预览。用户要求编写 UI、修改布局、统一样式、实现组件或适配多尺寸屏幕时使用。
---

# FKit UI

## 必读资料

先阅读 `AGENTS.md`，再依次读取：

1. `lib/core/design_system/README.md`
2. `lib/core/design_system/extensions/extensions.dart`
3. `docs/tdesign-flutter/README.md` 与目标组件页面
4. `docs/flutter-kit/框架核心/design-system.md`
5. `docs/flutter-kit/框架核心/widget-extensions.md`

按需读取 `docs/flutter-kit/框架核心/theme.md`、`docs/flutter-kit/框架核心/dark-mode.md`、`docs/flutter-kit/框架核心/animated-extensions.md`，以及 `docs/flutter-kit/扩展/` 下的屏幕适配、安全区与预览专题。检查扩展方法时打开 `lib/core/design_system/extensions/widget/` 或 `lib/core/design_system/extensions/animated/` 中的真实声明，不猜签名。

## 固定检查顺序

1. 分析页面信息层级、交互状态、屏幕方向和断点需求。
2. 在 TDesign 组件索引中查找已有组件，优先组合 `TD*` 组件。
3. 在完整布局规范和扩展统一入口中查找已有布局、间距、装饰、裁剪、滚动、手势、文本、变换和动画能力。
4. 使用 `AppTheme`、语义尺寸、Shape、Shadow、`Space` 和现有扩展实现布局。
5. 将 `Obx` 缩到实际读取 Rx 的最小区域，保持静态布局不重复重建。
6. 处理深浅色、安全区、横竖屏、手机、平板与折叠屏。
7. 为完整页面添加响应式 Preview，为模块组件添加 Widget Preview。

## 禁止事项

- 不硬编码颜色、间距、圆角、阴影或重复 `EdgeInsets`。
- 不按 TDesign Web、Vue、React 或旧版本文档推测 Dart 参数。
- 不在全局或静态字段缓存依赖主题上下文的 getter。
- 不忽略链式扩展包装顺序；背景、裁剪、点击和滚动的先后顺序必须符合目标 Widget 树。
- 不为单次样式需求新增跨项目通用扩展。

## 验证

运行相关 Widget/Preview 测试并检查无 overflow。至少验证浅色、深色和任务涉及的关键尺寸；涉及主导航时验证手机横竖屏状态一致性。执行相关分析与 `git diff --check`。