Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub Β· Developer Tools
React
Full React 19 engineering, architecture, Server Components, hooks, Zustand, TanStack Query, forms, performance, testing, production deploy.
skill openclawclawhub Free
Full React 19 engineering, architecture, Server Components, hooks, Zustand, TanStack Query, forms, performance, testing, production deploy.
β¬ 0 downloads β
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md, memory-template.md, setup.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.4
Provenance
- Publisher
- ivangdavila
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
React
Production-grade React engineering. This skill transforms how you build React applications β from component architecture to deployment.
When to Use
Building React components, pages, or features Implementing state management (useState, Context, Zustand, TanStack Query) Working with React 19 (Server Components, use(), Actions) Optimizing performance (memo, lazy, Suspense) Debugging rendering issues, infinite loops, stale closures Setting up project architecture and folder structure
Architecture Decisions
Before writing code, make these decisions: DecisionOptionsDefaultRenderingSPA / SSR / Static / HybridSSR (Next.js)State (server)TanStack Query / SWR / use()TanStack QueryState (client)useState / Zustand / JotaiZustand if sharedStylingTailwind / CSS Modules / styledTailwindFormsReact Hook Form + Zod / nativeRHF + Zod Rule: Server state (API data) and client state (UI state) are DIFFERENT. Never mix them.
Component Rules
// β The correct pattern export function UserCard({ user, onEdit }: UserCardProps) { // 1. Hooks first (always) const [isOpen, setIsOpen] = useState(false) // 2. Derived state (NO useEffect for this) const fullName = `${user.firstName} ${user.lastName}` // 3. Handlers const handleEdit = useCallback(() => onEdit(user.id), [onEdit, user.id]) // 4. Early returns if (!user) return null // 5. JSX (max 50 lines) return (...) } RuleWhyNamed exports onlyRefactoring safety, IDE supportProps interface exportedReusable, documentedMax 50 lines JSXExtract if biggerMax 300 lines fileSplit into componentsHooks at topReact rules + predictable
State Management
Is it from an API? ββ YES β TanStack Query (NOT Redux, NOT Zustand) ββ NO β Is it shared across components? ββ YES β Zustand (simple) or Context (if rarely changes) ββ NO β useState
TanStack Query (Server State)
// Query key factory β prevents key typos export const userKeys = { all: ['users'] as const, detail: (id: string) => [...userKeys.all, id] as const, } export function useUser(id: string) { return useQuery({ queryKey: userKeys.detail(id), queryFn: () => fetchUser(id), staleTime: 5 * 60 * 1000, // 5 min }) }
Zustand (Client State)
// Thin stores, one concern each export const useUIStore = create<UIState>()((set) => ({ sidebarOpen: true, toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })), })) // ALWAYS use selectors β prevents unnecessary rerenders const isOpen = useUIStore((s) => s.sidebarOpen)
Server Components (Default in Next.js App Router)
// Server Component β runs on server, zero JS to client async function ProductList() { const products = await db.products.findMany() // Direct DB access return <ul>{products.map(p => <ProductCard key={p.id} product={p} />)}</ul> } // Client Component β needs 'use client' directive 'use client' function AddToCartButton({ productId }: { productId: string }) { const [loading, setLoading] = useState(false) return <button onClick={() => addToCart(productId)}>Add</button> } Server ComponentClient Componentasync/await β useState β Direct DB β onClick β No bundle sizeAdds to bundleuseState βasync β
use() Hook
// Read promises in render (with Suspense) function Comments({ promise }: { promise: Promise<Comment[]> }) { const comments = use(promise) // Suspends until resolved return <ul>{comments.map(c => <li key={c.id}>{c.text}</li>)}</ul> }
useActionState (Forms)
'use client' async function submitAction(prev: State, formData: FormData) { 'use server' // ... server logic return { success: true } } function Form() { const [state, action, pending] = useActionState(submitAction, {}) return ( <form action={action}> <input name="email" disabled={pending} /> <button disabled={pending}>{pending ? 'Saving...' : 'Save'}</button> {state.error && <p>{state.error}</p>} </form> ) }
Performance
PriorityTechniqueImpactP0Route-based code splittingπ΄ HighP0Image optimization (next/image)π΄ HighP1Virtualize long lists (tanstack-virtual)π‘ MediumP1Debounce expensive operationsπ‘ MediumP2React.memo on expensive componentsπ’ Low-MedP2useMemo for expensive calculationsπ’ Low-Med React Compiler (React 19+): Auto-memoizes. Remove manual memo/useMemo/useCallback.
Rendering Traps
// β Renders "0" when count is 0 {count && <Component />} // β Explicit boolean {count > 0 && <Component />} // β Mutating state β React won't detect array.push(item) setArray(array) // β New reference setArray([...array, item]) // β New key every render β destroys component <Item key={Math.random()} /> // β Stable key <Item key={item.id} />
Hooks Traps
// β useEffect cannot be async useEffect(async () => { ... }, []) // β Define async inside useEffect(() => { async function load() { ... } load() }, []) // β Missing cleanup β memory leak useEffect(() => { const sub = subscribe() }, []) // β Return cleanup useEffect(() => { const sub = subscribe() return () => sub.unsubscribe() }, []) // β Object in deps β triggers every render useEffect(() => { ... }, [{ id: 1 }]) // β Extract primitives or memoize useEffect(() => { ... }, [id])
Data Fetching Traps
// β Sequential fetches β slow const users = await fetchUsers() const orders = await fetchOrders() // β Parallel const [users, orders] = await Promise.all([fetchUsers(), fetchOrders()]) // β Race condition β no abort useEffect(() => { fetch(url).then(setData) }, [url]) // β Abort controller useEffect(() => { const controller = new AbortController() fetch(url, { signal: controller.signal }).then(setData) return () => controller.abort() }, [url])
AI Mistakes to Avoid
Common errors AI assistants make with React: MistakeCorrect PatternuseEffect for derived stateCompute inline: const x = a + bRedux for API dataTanStack Query for server stateDefault exportsNamed exports: export function XIndex as key in dynamic listsStable IDs: key={item.id}Fetching in useEffectTanStack Query or loader patternsGiant components (500+ lines)Split at 50 lines JSX, 300 lines fileNo error boundariesAdd at app, feature, component levelIgnoring TypeScript strictEnable strict: true, fix all errors
Hooks
HookPurposeuseStateLocal stateuseEffectSide effects (subscriptions, DOM)useCallbackStable function referenceuseMemoExpensive calculationuseRefMutable ref, DOM accessuse()Read promise/context (React 19)useActionStateForm action state (React 19)useOptimisticOptimistic UI (React 19)
File Structure
src/ βββ app/ # Routes (Next.js) βββ features/ # Feature modules β βββ auth/ β βββ components/ # Feature components β βββ hooks/ # Feature hooks β βββ api/ # API calls β βββ index.ts # Public exports βββ shared/ # Cross-feature β βββ components/ui/ # Button, Input, etc. β βββ hooks/ # useDebounce, etc. βββ providers/ # Context providers
Setup
See setup.md for first-time configuration. Uses memory-template.md for project tracking.
Core Rules
Server state β client state β API data goes in TanStack Query, UI state in useState/Zustand. Never mix. Named exports only β export function X not export default. Enables safe refactoring. Colocate, then extract β Start with state near usage. Lift only when needed. No useEffect for derived state β Compute inline: const total = items.reduce(...). Effects are for side effects. Stable keys always β Use item.id, never index for dynamic lists. Max 50 lines JSX β If bigger, extract components. Max 300 lines per file. TypeScript strict: true β No any, no implicit nulls. Catch bugs at compile time.
Related Skills
Install with clawhub install <slug> if user confirms: frontend-design-ultimate β Build complete UIs with React + Tailwind typescript β TypeScript patterns and strict configuration nextjs β Next.js App Router and deployment testing β Testing React components with Testing Library
Feedback
If useful: clawhub star react Stay updated: clawhub sync
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
3 Docs
- SKILL.md
- memory-template.md
- setup.md