npx skills add https://github.com/a2f0/tearleads --skill 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
优先处理至少满足两个信号的文件:
不要拆分以下文件:
如果没有候选文件满足至少两个信号,则报告未找到高价值拆分并停止。
示例:
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.
Run this skill when maintaining code quality or during slack time. It searches the entire codebase for refactoring opportunities.
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
Prioritize files that meet at least two signals:
Do NOT split files that:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
src/features/billing/BillingPage.tsx
src/features/billing/BillingHeader.tsx
src/features/billing/PlanCard.tsx
src/features/billing/PlanCard.test.tsx
src/features/billing/index.ts
git checkout -b refactor/split-<component-name>pnpm --filter @tearleads/<package> test:coverage。如果覆盖率阈值未通过,不要继续。/commit-and-push,然后运行 /enter-merge-queue。如果在发现阶段未找到高价值拆分,则不要创建分支或运行提交/合并工作流。
any 或不安全的类型断言使用增量 PR:
在每个 PR 描述中,包含:
发现命令可能返回很多行。始终限制输出:
# 上面已经用 head -20 和 head -10 限制了
# 抑制冗长的验证输出
pnpm lint >/dev/null
pnpm typecheck >/dev/null
pnpm test >/dev/null
git commit -S -m "message" >/dev/null
git push >/dev/null
失败时,重新运行而不抑制输出以查看错误。
每周安装次数
1
仓库
首次出现
1 天前
安全审计
安装于
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
If no candidate meets at least two signals, report that no high-value split was found and stop.
Example:
src/features/billing/BillingPage.tsx
src/features/billing/BillingHeader.tsx
src/features/billing/PlanCard.tsx
src/features/billing/PlanCard.test.tsx
src/features/billing/index.ts
git checkout -b refactor/split-<component-name>pnpm --filter @tearleads/<package> test:coverage for the affected package. DO NOT proceed if coverage thresholds fail./commit-and-push, then /enter-merge-queue.If no high-value split was found during discovery, do not create a branch or run commit/merge workflows.
any or unsafe type assertionsUse incremental PRs:
In each PR description, include:
Discovery commands can return many lines. Always limit output:
# Already limited with head -20 and head -10 above
# Suppress verbose validation output
pnpm lint >/dev/null
pnpm typecheck >/dev/null
pnpm test >/dev/null
git commit -S -m "message" >/dev/null
git push >/dev/null
On failure, re-run without suppression to see errors.
Weekly Installs
1
Repository
First Seen
1 day ago
Security Audits
Installed on
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
通过 LiteLLM 代理让 Claude Code 对接 GitHub Copilot 运行 | 高级变通方案指南
31,600 周安装