安装命令
npx skills add https://github.com/a2f0/tearleads --skill preen-split-react-components🇨🇳中文介绍
Preen Split React Components
主动在 monorepo 中搜索过大的 React 组件文件，并将其重构为小型、命名清晰、每个文件一个组件的模块，同时保持清晰的文件夹组织和并置测试。
何时运行
在维护代码质量期间或空闲时间运行此技能。它会在整个代码库中搜索重构机会。
发现阶段
在所有包中搜索可能受益于拆分的大型 TSX 文件：
# 查找超过 300 行的 TSX 文件（很可能是拆分候选）
find . -name "*.tsx" -not -path "*/node_modules/*" -not -path "*/.next/*" -not -path "*/dist/*" | xargs wc -l 2>/dev/null | sort -rn | head -20
# 查找包含多个组件定义的文件
rg -n --glob '*.tsx' '^export function|^export const.*=.*=>' . | cut -d: -f1 | sort | uniq -c | sort -rn | head -10
判断重构是否值得
优先处理至少满足两个信号的文件：
- TSX 文件难以浏览（大约 300 行以上或嵌套过深）
- 一个文件中存在多个逻辑 UI 部分
- 同一文件中出现重复的 JSX 模式
- 文件级别的 props/state/effects 难以理解
- 管理自身状态的自包含 UI 块（如下拉菜单、模态框、设置面板）
不要拆分以下文件：
- 组件间存在紧密耦合的共享状态
- 提取后需要大量属性透传
- 已经组织良好，边界清晰
- 是测试文件或 storybook 文件
- 拆分后会产生仅用于抽象、无法提升可读性的微小组件
如果没有候选文件满足至少两个信号，则报告未找到高价值拆分并停止。
目标结构
- 每个文件一个组件
- 按功能文件夹对相关组件进行分组
- 在每个组件旁边并置测试
- 使用描述角色而非样式的明确组件名称
示例：
🇺🇸English
Preen Split React Components
Proactively search the monorepo for oversized React component files and refactor them into small, named, one-component-per-file modules with clear folder organization and colocated tests.
When to Run
Run this skill when maintaining code quality or during slack time. It searches the entire codebase for refactoring opportunities.
Discovery Phase
Search all packages for large TSX files that may benefit from splitting:
# Find TSX files over 300 lines (high likelihood of split candidates)
find . -name "*.tsx" -not -path "*/node_modules/*" -not -path "*/.next/*" -not -path "*/dist/*" | xargs wc -l 2>/dev/null | sort -rn | head -20
# Find files with multiple component definitions
rg -n --glob '*.tsx' '^export function|^export const.*=.*=>' . | cut -d: -f1 | sort | uniq -c | sort -rn | head -10
Decide If Refactor Is Worth It
Prioritize files that meet at least two signals:
- TSX file is hard to scan (roughly 300+ lines or deep nesting)
- Multiple logical UI sections exist in one file
- Repeated JSX patterns appear in the same file
- File-level props/state/effects are hard to reason about
- Self-contained UI blocks that manage their own state (dropdowns, modals, settings panels)
Do NOT split files that:
- Have tightly coupled state shared across components
- Would require excessive prop drilling after extraction
- Are already well-organized with clear boundaries
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
