React Component Performance

What it does

When your agent uses it

• Asked to profile
• Improve a React component
• Reduce re-renders
• Speed up UI updates in React apps

Example prompts

• “/react-component-performance”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

1. 1Reproduce or describe the slowdown.
2. 2Identify what triggers re-renders (state updates, props churn, effects).
3. 3Isolate fast-changing state from heavy subtrees.
4. 4Stabilize props and handlers; memoize where it pays off.
5. 5Reduce expensive work (computation, DOM size, list length).
6. 6Validate: open React DevTools Profiler → record the interaction → inspect the Flamegraph for components rendering longer than ~16 ms →…

What it can do on your machine

Read from SKILL.md and the folder at commit 05ba982. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React Component Performance loads about 1.2k tokens when it runs, and up to ~1.8k if it reads all its reference files. Until then it costs about 67 tokens; SKILL.md has 328 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~67

When it runs · the whole SKILL.md, loaded when a task matches

~1.2k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Dimillian/Skills at commit 05ba982, republished under its MIT licence (© Dimillian). 328 words, ~1,166 tokens.

name

react-component-performance

description

Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations). Use when asked to profile or improve a React component, reduce re-renders, or speed up UI updates in React apps.

// ❌ Before – entire parent (and list) re-renders every second
function Dashboard({ items }: { items: Item[] }) {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <>
      <Clock tick={tick} />
      <ExpensiveList items={items} /> {/* re-renders every second */}
    </>
  );
}

// ✅ After – only <Clock> re-renders; list is untouched
function Clock() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <span>{tick}s</span>;
}

function Dashboard({ items }: { items: Item[] }) {
  return (
    <>
      <Clock />
      <ExpensiveList items={items} />
    </>
  );
}

// ❌ Before – new handler reference on every render busts Row memo
function List({ items }: { items: Item[] }) {
  const handleClick = (id: string) => console.log(id); // new ref each render
  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}

// ✅ After – stable handler; Row only re-renders when its own item changes
const Row = memo(({ item, onClick }: RowProps) => (
  <li onClick={() => onClick(item.id)}>{item.name}</li>
));

function List({ items }: { items: Item[] }) {
  const handleClick = useCallback((id: string) => console.log(id), []);
  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}

// ❌ Before – recomputes on every render
function Summary({ orders }: { orders: Order[] }) {
  const total = orders.reduce((sum, o) => sum + o.amount, 0); // runs every render
  return <p>Total: {total}</p>;
}

// ✅ After – recomputes only when orders changes
function Summary({ orders }: { orders: Order[] }) {
  const total = useMemo(() => orders.reduce((sum, o) => sum + o.amount, 0), [orders]);
  return <p>Total: {total}</p>;
}

© Dimillian, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in react-component-performance of Dimillian/Skills.

• SKILL.md
• agents/openai.yaml
• references/examples.md

Open the folder on GitHubat commit 05ba982

Used in 5 other repositories

We found 14 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 5 other GitHub owners. This page covers the copy in Dimillian/Skills, which our catalogue first saw on October 7, 2026.

• AFK-surf/OpenBridge.agents/skills/react-component-performance
• davila7/claude-code-templatescli-tool/components/skills/web-development/react-component-performance
• sickn33/agentic-awesome-skillsskills/react-component-performanceplugins/agentic-awesome-skills/skills/react-component-performance+1 more
• lingxling/awesome-skills-cnantigravity-awesome-skills/skills/react-component-performanceantigravity-awesome-skills/plugins/agentic-awesome-skills/skills/react-component-performance+1 more
• henryalouf/ruflow.agents/skills/react-component-performance.agents/skills/antigravity-awesome-skills/skills/react-component-performance+4 more