CopilotKit Skills

February 21, 2026 · View on GitHub

A collection of skills for AI coding agents building with CopilotKit. Skills are packaged instructions and rules that extend agent capabilities when writing, reviewing, or refactoring CopilotKit code.

Skills follow the Agent Skills format.

Available Skills

copilotkit-react-patterns

CopilotKit React best practices for agentic applications. Contains 25 rules across 6 categories, prioritized by impact.

Use when:

  • Setting up CopilotKitProvider in a React application
  • Using agent hooks (useAgent, useFrontendTool, useHumanInTheLoop)
  • Rendering tool calls or custom messages from agents
  • Managing shared state between UI and agents
  • Building chat interfaces with CopilotChat, CopilotSidebar, or CopilotPopup

Categories covered:

  • Provider Setup (Critical)
  • Agent Hooks (High)
  • Tool Rendering (High)
  • Context & State (Medium)
  • Chat UI (Medium)
  • Suggestions (Low)

copilotkit-agent-patterns

Architecture and implementation patterns for building AI agents that integrate with CopilotKit. Contains 20 rules across 5 categories.

Use when:

  • Designing agent architecture for CopilotKit integration
  • Implementing AG-UI protocol event streaming
  • Managing state synchronization between agent and frontend
  • Adding human-in-the-loop checkpoints to agent workflows
  • Emitting tool calls that render generative UI in the frontend

Categories covered:

  • Agent Architecture (Critical)
  • AG-UI Protocol (High)
  • State Management (High)
  • Human-in-the-Loop (Medium)
  • Generative UI Emission (Medium)

copilotkit-runtime-patterns

Server-side runtime configuration patterns for CopilotKit. Contains 15 rules across 5 categories.

Use when:

  • Setting up CopilotKit runtime endpoints (Express, Hono, Next.js)
  • Choosing between InMemory and SQLite agent runners
  • Adding middleware for logging, auth, or request modification
  • Securing the runtime (CORS, auth, rate limiting)

Categories covered:

  • Endpoint Setup (Critical)
  • Agent Runners (High)
  • Middleware (Medium)
  • Security (High)
  • Performance (Medium)

copilotkit-python-patterns

Python SDK patterns for building CopilotKit agents. Contains 20 rules across 5 categories.

Use when:

  • Setting up CopilotKitRemoteEndpoint with FastAPI
  • Creating LangGraph agents (LangGraphAgent, LangGraphAGUIAgent)
  • Integrating CrewAI crews with CopilotKit
  • Defining actions with parameters for frontend invocation

Categories covered:

  • SDK Setup (Critical)
  • LangGraph (High)
  • CrewAI (High)
  • Actions (Medium)
  • State (Medium)

copilotkit-generative-ui

Generative UI patterns for CopilotKit applications. Contains 20 rules across 5 categories.

Use when:

  • Choosing between static, declarative, and open-ended generative UI
  • Implementing tool call renderers (useRenderTool, useComponent)
  • Designing streaming-aware UI components
  • Selecting application surfaces (chat-based, sidebar, chatless)

Categories covered:

  • Static UI (Critical)
  • Declarative UI (High)
  • Open-Ended UI (Medium)
  • Surfaces (Medium)
  • Styling (Low)

copilotkit-production

Production deployment patterns for CopilotKit. Contains 15 rules across 5 categories.

Use when:

  • Preparing a CopilotKit application for production deployment
  • Implementing safety guardrails (input filtering, output sanitization)
  • Adding observability (logging, metrics, cost tracking)
  • Hardening security for production

Categories covered:

  • Guardrails (Critical)
  • Observability (High)
  • Deployment (High)
  • Security (Critical)
  • Performance (Medium)

Installation

npx skills add GeneralJerel/copilotkit-skills

Install individual skills:

npx skills add GeneralJerel/copilotkit-skills --path skills/copilotkit-react-patterns

Or clone the full repository:

git clone https://github.com/GeneralJerel/copilotkit-skills.git

Usage

Skills are automatically available once installed. The agent will use them when relevant tasks are detected.

Examples:

Set up CopilotKitProvider for my React app

Review this agent for AG-UI protocol compliance

Help me add human-in-the-loop to my LangGraph agent

Development

pnpm install
pnpm build       # Compile rules → AGENTS.md
pnpm validate    # Validate rule format

Skill Structure

Each skill contains:

  • SKILL.md - Instructions for the agent (trigger conditions, categories, quick reference)
  • AGENTS.md - Compiled document with all rules expanded (auto-generated)
  • rules/ - Individual rule files with incorrect/correct code examples
  • metadata.json - Version, references, and abstract

Contributing

License

MIT