Mk react patterns

Skill ngocsangyem/MeowKit/packages/mewkit/src/migrate/modules/codex/root/.agents/skills/mk-react-patterns

Production ready. AI Agent Workflow System for Claude Code

Install

npx -y skills add ngocsangyem/MeowKit --skill mk-react-patterns

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

15 stars15 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

React/Next.js authoring, review, and optimization: components, routes, bundle size, re-renders, performance. Auto-activates on .tsx/.jsx files alongside mk:typescript in React projects.

SKILL.md

2.5 KB, 461 tokens by cl100k_base, as published. Nobody here has run it

React Patterns

React and Next.js performance optimization — curated rules across priority categories drawn from framework docs and production practice.

Complements mk:typescript (type safety) and mk:vue (Vue patterns). This skill covers React-specific performance patterns.

When to Use

Writing or reviewing React/Next.js components
Optimizing bundle size or render performance
Fixing re-render issues
Server vs client component decisions
Data fetching patterns

Rule Categories (by priority)

Load the relevant reference when working in that area:

Priority	Category	Reference	Key rules
CRITICAL	Eliminating waterfalls	`references/async-patterns.md`	Defer await, parallel promises, Suspense boundaries
CRITICAL	Bundle size	`references/bundle-optimization.md`	No barrel imports, dynamic imports, defer third-party
HIGH	Server performance	`references/server-patterns.md`	React.cache(), LRU cache, parallel fetching, after()
MEDIUM	Re-render optimization	`references/rerender-optimization.md`	Derived state, functional setState, memo, transitions
MEDIUM	Rendering perf	`references/rendering-patterns.md`	content-visibility, hoist JSX, conditional render

Process

Identify the performance concern (waterfall? bundle? re-render? server?)
Load the matching reference file
Apply rules — each rule has: problem, solution, code example
Verify improvement (Lighthouse, bundle analyzer, React DevTools)

Gotchas

Premature optimization: optimizing re-renders before measuring → measure first with React DevTools Profiler
Over-memoizing: wrapping everything in useMemo/React.memo → memo only when profiler shows expensive re-renders
Barrel file trap: importing from index.ts pulls entire module → always import directly from source file

Workflow Integration

Auto-activates during Phase 3 (Build) when React/Next.js project detected. Loaded by developer agent alongside mk:typescript.

What ships with it: 5 files

8.4 KB alongside SKILL.md

references/

Gives 0 of the 12 instructions most performance cost skills give in 461 tokens

Counted across 803 of the 1,058 authors here whose files we hold, read 2026-08-07

Keep skill files under 500 lines or tokensin 82 of 803, across 16 files
Use imperative form in instructionsin 80 of 803, across 9 files
Draft assertions while test runs are in progressin 75 of 803, across 9 files
Create two to three realistic test promptsin 74 of 803, across 9 files
Write skill descriptions to be pushyin 72 of 803, across 7 files
Save test cases to evals JSONin 72 of 803, across 6 files
Ask questions about edge cases and input formatsin 72 of 803, across 7 files
Save timing data immediately when runs completein 70 of 803, across 5 files
Include all trigger conditions in the skill descriptionin 69 of 803, across 3 files
Launch all test runs in a single turn or simultaneouslyin 69 of 803, across 3 files
Capture intent before writing a skillin 67 of 803, across 1 file
Import directly instead of barrel filesin 52 of 803, across 15 files

Said here and by no other author read

Defer await and use parallel promises
Use React.cache and LRU cache
Hoist JSX and conditionally render elements
Identify the performance concern
Apply the rules from the reference
Memoize only when profiler shows expensive renders

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.