跳到正文
cccskills
免费在 GitHub 公开

optimize-loader

Optimize slow React Router loaders by eliminating redundant DB queries, creating slim query variants, and parallelizing independent fetches. Use proactively when writing or reviewing loader code that calls domain operations services (e.g. CourseOperationsService, VideoOperationsService), or when triaging a slow page load.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(1)

  • SKILL.md3.0 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Optimize Loader

Anti-patterns to catch

1. Re-fetching data the caller already has

If a loader fetches a record (e.g. getVideoWithClipsById) and then passes just the ID to a downstream function that re-fetches the same record internally — change the downstream function's signature to accept the already-fetched object.

// BAD — getNextVideoId internally calls getVideoWithClipsById again
const video = yield * db.getVideoWithClipsById(videoId);
const nextId = yield * db.getNextVideoId(videoId);

// GOOD — pass the already-fetched video
const video = yield * db.getVideoWithClipsById(videoId);
const nextId = yield * db.getNextVideoId(video);

When refactoring signatures, type the parameter as the minimal shape needed, not the full return type:

// Accept only what the function actually reads
function* (currentVideo: {
  id: string;
  lesson: {
    id: string;
    videos: Array<{ id: string; path: string }>;
    section: { repoVersion: { repo: { id: string } } };
  } | null;
})

2. Over-fetching nested relations

If a function only needs IDs and paths for navigation but loads full nested trees including clips, transcripts, etc. — create a slim query variant.

// BAD — loads clips, chapters, thumbnails etc. just to get video IDs
const course = yield * getCourseWithSectionsById(repoId);

// GOOD — dedicated lightweight query
const course = yield * getCourseNavigationData(repoId);

Slim query checklist:

  • columns: { id: true, path: true } — only select needed columns on leaf relations
  • limit: 1 on relations like versions where you only need the latest
  • Omit with: for relations you don't traverse (clips, chapters, thumbnails)
  • Keep where: filters (e.g. archived = false) and orderBy intact

3. Sequential independent queries

If a loader runs multiple independent DB calls sequentially, parallelize with Effect.all:

// BAD — sequential, total time = sum of both
const nextVideoId = yield * db.getNextVideoId(video);
const previousVideoId = yield * db.getPreviousVideoId(video);

// GOOD — parallel, total time = max of both
const [nextVideoId, previousVideoId] =
  yield * Effect.all([db.getNextVideoId(video), db.getPreviousVideoId(video)]);

Dependency injection pattern

When adding a new query (like getCourseNavigationData) that lives in course operations but is used by video operations:

  1. Add the query to db-course-operations.server.ts and export it
  2. Declare the cross-domain dependency in VideoOperationsService's effect block via yield* CourseOperationsService
  3. The Effect Layer system resolves cross-domain dependencies automatically

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Ship a Drizzle schema change end to end — generate the migration, merge, hand Matt the migrate command, redeploy apps/remote, confirm it is green. Use whenever a change adds or edits a file under packages/core/db/migrations/ or changes packages/core/db/schema.ts, or when an apps/remote deploy failed with "production has not applied".

中文简介正在准备中。当前显示原文说明。

mattpocock/course-video-manager8322026年10月20日 更新

do-work

免费

End-to-end implementation workflow. Use when user wants to implement a feature, fix a bug, or make changes and have everything validated and committed.

中文简介正在准备中。当前显示原文说明。

mattpocock/course-video-manager8322026年10月20日 更新

Generate or update documentation for the AI Hero API by reading the source code at ~/repos/ai/course-builder. Use when user wants to document, update docs for, or understand the AI Hero API endpoints.

中文简介正在准备中。当前显示原文说明。

mattpocock/course-video-manager8322026年10月20日 更新

Survey the codebase, pick ONE high-leverage deepening opportunity (filtering out anything already proposed), and publish it as a PRD-shaped GitHub issue via /to-prd-project. Designed to run unattended in the daily architecture-review workflow.

中文简介正在准备中。当前显示原文说明。

mattpocock/course-video-manager8322026年10月20日 更新

Install @effect/* packages safely. Use whenever adding a new Effect ecosystem dependency.

中文简介正在准备中。当前显示原文说明。

mattpocock/course-video-manager8322026年10月20日 更新

Break a PRD into native GitHub sub-issues attached to the parent PRD. Project-local variant of /to-issues, adapted for this repo's PRD-as-parent + native sub-issues + agent:implement multi-session workflow. Argument is the parent PRD issue number.

中文简介正在准备中。当前显示原文说明。

mattpocock/course-video-manager8322026年10月20日 更新

查看 mattpocock 的全部技能

报告此技能的问题