Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Developer Tools
CopilotKit React Best Practices
CopilotKit React best practices for agentic applications. Use when writing, reviewing, or refactoring React code that uses CopilotKit hooks (useAgent, useFro...
skill openclawclawhub Free
CopilotKit React best practices for agentic applications. Use when writing, reviewing, or refactoring React code that uses CopilotKit hooks (useAgent, useFro...
โฌ 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
- metadata.json, README.md, SKILL.md, rules/suggestions-configure.md, rules/agent-use-agent-updates.md, rules/agent-agent-id.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. Then review README.md for any prerequisites, environment setup, or post-install checks. 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. Then review README.md for any prerequisites, environment setup, or post-install checks. 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.1
Provenance
- Publisher
- GeneralJerel
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
CopilotKit React Patterns
Best practices for building agentic React applications with CopilotKit. Contains 25 rules across 6 categories, prioritized by impact to guide code generation and refactoring. Covers both v1 (@copilotkit/react-core) and v2 (@copilotkit/react-core/v2) APIs.
When to Apply
Reference these guidelines when: Setting up CopilotKit provider in a React application Using agent hooks (useAgent, useFrontendTool, useCopilotAction) Rendering tool calls or custom messages from agents Managing shared state between UI and agents via useCopilotReadable or useCoAgent Building chat interfaces with CopilotChat, CopilotSidebar, or CopilotPopup Configuring suggestions for proactive agent assistance
Rule Categories by Priority
PriorityCategoryImpactPrefix1Provider SetupCRITICALprovider-2Agent HooksHIGHagent-3Tool RenderingHIGHtool-4Context & StateMEDIUMstate-5Chat UIMEDIUMui-6SuggestionsLOWsuggestions-
1. Provider Setup (CRITICAL)
provider-runtime-url - Always configure runtimeUrl to connect to your agent backend provider-single-endpoint - Configure the agent prop for CoAgent routing provider-nested-providers - Scope agent configurations with nested CopilotKit providers provider-tool-registration - Register tools via hooks inside provider, not as props when possible
2. Agent Hooks (HIGH)
agent-use-agent-updates - Specify update subscriptions to avoid unnecessary re-renders agent-agent-id - Always pass agentId when running multiple agents agent-context-description - Write descriptive context values for useCopilotReadable agent-frontend-tool-deps - Declare dependency arrays for useFrontendTool agent-stable-tool-handlers - Use useCallback for tool handler functions
3. Tool Rendering (HIGH)
tool-typed-args - Define Zod schemas for useRenderTool parameters (v2) tool-status-handling - Handle all three tool call statuses (inProgress, executing, complete) tool-wildcard-fallback - Register a wildcard renderer as fallback for unknown tools tool-render-vs-frontend - Use useRenderTool for display-only, useFrontendTool for side effects tool-component-hook - Use useFrontendTool render prop for simple component rendering
4. Context & State (MEDIUM)
state-minimal-context - Provide only relevant context to agents, not entire app state state-structured-values - Use structured objects in useCopilotReadable, not serialized strings state-context-granularity - Split context into multiple useCopilotReadable calls by domain state-avoid-stale-closures - Use functional state updates in tool handlers
5. Chat UI (MEDIUM)
ui-chat-layout - Choose CopilotSidebar for persistent chat, CopilotPopup for on-demand ui-custom-labels - Always customize labels for your domain instead of defaults ui-welcome-screen - Provide a welcome screen with suggested prompts ui-input-mode - Use appropriate inputMode for your use case
6. Suggestions (LOW)
suggestions-configure - Use useConfigureSuggestions (v2) or useCopilotChatSuggestions (v1) suggestions-context-driven - Provide rich context so suggestions are relevant suggestions-loading-state - Handle suggestion loading states via useSuggestions (v2)
How to Use
Read individual rule files for detailed explanations and code examples: rules/provider-runtime-url.md rules/agent-use-agent-updates.md rules/tool-typed-args.md Each rule file contains: Brief explanation of why it matters Incorrect code example with explanation Correct code example with explanation Additional context and references
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md
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
5 Docs1 Config
- SKILL.md
- README.md
- rules/agent-agent-id.md
- rules/agent-use-agent-updates.md
- rules/suggestions-configure.md
- metadata.json