check-refine-trpc
SKILL.md
组件级强制规则:禁止直接使用 trpc
- 目的:在代码库中识别前端组件/页面中直接导入或调用
trpc客户端 或@tanstack/react-query的 hook 的情况。 - 规则:组件层必须使用
refine的 hooks(例如useList、useOne、useCreate、useUpdate)或通过已实现的DataProvider封装后再在组件中使用。禁止在组件或页面中直接使用trpc客户端或其 hooks。
检测方法
- 静态扫描组件/页面文件,查找直接导入或使用以下模式(任意匹配即为违规):
- 导入
trpc客户端(如import { trpc } from/import trpcClient from) - 直接使用
trpc.*.useQuery/trpc.*.useMutation或useQuery/useMutation来自@tanstack/react-query并用于组件渲染 - 直接在组件中调用
trpcClient的方法(如trpcClient.query(...))
- 导入
示例(禁止 / 允许)
-
禁止:在组件中直接使用 trpc hook
-
禁止示例:见 bad-example.ts
-
允许示例:见 good-example.ts
核查清单(强制)
- 目标:定位并列出需要从
trpc/react-query迁移到refine的组件使用点,提供最小可执行修复建议。 - 违规判断(任一成立即违规):
- 文件包含
import .*\btrpc\b/import trpcClient等直接导入 - 使用
trpc\.[A-Za-z0-9_]+\.(useQuery|useMutation) - 在组件中直接使用
useQuery(或useMutation(来自@tanstack/react-query - 在组件中直接调用
trpcClient.*RPC 方法
- 文件包含
- 推荐自动化检测正则(示例):
- 导入检测:
import\s+.*\btrpc\b|import\s+trpcClient - hook 检测:
trpc\.[a-zA-Z0-9_]+\.(useQuery|useMutation) - react-query 检测:
from\s+['\"]@tanstack/react-query['\"]|\buseQuery\s*\(
- 导入检测:
修复建议
- 优先:用
refine的useList/useOne/useCreate/useUpdate替换组件内数据调用。 - 可选:在
DataProvider中封装 trpc 调用并在组件中通过resource+refinehooks 使用。 - 复杂查询:在
DataProvider增加custom,并通过 refine 的自定义 hook 使用,保持行为等价(分页/筛选映射)。
Weekly Installs
6
Repository
forge-town/skillsGitHub Stars
1
First Seen
Feb 26, 2026
Security Audits
Installed on
codex6
amp5
github-copilot5
kimi-cli5
gemini-cli5
cursor5