Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add Pixel-Process-UG/superkit-agents --skill react-best-practicesgit clone --depth 1 https://github.com/Pixel-Process-UG/superkit-agentsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/pixel-process-ug/superkit-agents/react-best-practices)<a href="https://agentmods.dev/skills/pixel-process-ug/superkit-agents/react-best-practices"><img src="https://agentmods.dev/badge/skills/pixel-process-ug/superkit-agents/react-best-practices/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/pixel-process-ug/superkit-agents/react-best-practices"><img src="https://agentmods.dev/badge/skills/pixel-process-ug/superkit-agents/react-best-practices.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00058 | $0.02659 |
| Opus 5.5 | $0.00023 | $0.01064 |
| Sonnet 5.5 | $0.00012 | $0.00532 |
| Haiku 4.5 | $0.00006 | $0.00266 |
Grade A, and why
react-best-practices scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
const res = await fetch(url, { signal: controller.signal }); How it starts
The opening of the file, as written. The whole thing — 364 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React Best Practices
Overview
Apply modern React patterns to build maintainable, performant, and testable applications. This skill covers React 18/19 features including Server Components, hooks best practices, component composition, error boundaries, Suspense, context optimization, and rendering performance. It complements the senior-frontend skill with React-specific depth.
Announce at start: "I'm using the react-best-practices skill for React-specific patterns."
Phase 1: Analyze Component Requirements
Goal: Understand the component's responsibility and data requirements before coding.
Actions
- Identify the component's single responsibility
- Determine data requirements (server vs client data)
- Choose Server Component (default) or Client Component
- Identify state management needs
- Plan error and loading states
Server vs Client Decision Table
| Need | Component Type | Reason |
|---|---|---|
| Direct data fetching (DB, API) | Server (default) | No client JS, faster |
| Event handlers (onClick, onChange) | Client ('use client') |
Needs browser interactivity |
| useState / useReducer | Client | State requires client runtime |
| useEffect / useLayoutEffect | Client | Side effects require client |
| Browser APIs (window, localStorage) | Client | Server has no browser |
| Third-party libs using client features | Client | Library requires client |
| No interactivity needed | Server (default) | Smaller bundle, faster |
STOP — Do NOT proceed to Phase 2 until:
- Component responsibility is defined (single purpose)
- Server vs Client decision is made with rationale
- Data requirements are mapped
Phase 2: Implement with Appropriate Patterns
Goal: Apply the correct React patterns for the component's needs.
Actions
- Apply appropriate composition pattern
- Implement hooks correctly
- Add error boundaries and Suspense
- Optimize rendering where profiling shows need
- Write tests that verify behavior
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 364 lines · 58 tokens per session scan A ac5fe0b049c4
react-best-practices is a skill published in the GitHub repository Pixel-Process-UG/superkit-agents (3 stars, last pushed 7mo ago), licensed MIT. It adds 58 tokens to every session and 2,659 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
chakraui
Expert Chakra UI assistance covering accessible React components, theme tokens, style props, and dark mode. Use when building modular, accessible React component libraries and dashboards.
materialui
Expert Material UI (MUI) assistance covering Emotion styled components, theme customization, DataGrid, and accessible icons. Use when building React enterprise dashboards with Google's Material Design.
shadcnui
Expert shadcn/ui assistance covering Radix UI primitives, Tailwind CSS styling, copy-paste architecture, and accessibility. Use when building modern React component systems and accessible design systems.
gatsby
Expert Gatsby assistance covering static site generation, GraphQL data layer, Head API, and Gatsby Cloud. Use when building performant marketing sites and content blogs with React.
remix
Expert Remix (React Router v7) assistance covering Loaders, Actions, nested routing, optimistic UI, and Web Fetch standards. Use when developing resilient, full-stack React web applications.
sanity
Expert Sanity.io headless CMS assistance covering GROQ queries, Content Lake, schema definitions, and Sanity Studio. Use when building structured content platforms and headless digital experiences.