Skip to main content

​
Introduction

This guide explains how to effectively use our documentation with Large Language Models (LLMs) and AI coding assistants like Claude Code, ChatGPT, GitHub Copilot, and Cursor. We provide two complementary approaches for accessing our documentation with AI:
  1. Claude Code Skills - Offline, comprehensive reference for IDE-integrated AI assistants
  2. Context7 - Live, always-up-to-date documentation for web-based and MCP-enabled AI tools
Both approaches have their strengths, and you can use them together for the best experience. For developers using AI coding assistants in their IDE, we provide a comprehensive Claude Code skill that packages our complete documentation, integration patterns, and best practices into an easily installable format.

​
What is a Claude Code Skill?

A Claude Code skill is a packaged knowledge base that your AI coding assistant can reference while you work. It provides instant access to documentation, code patterns, and troubleshooting guidance without requiring internet access.

​
What Does the Primer Skill Include?

  • Complete Component Reference - All web component APIs, props, events, and methods
  • React Integration Patterns - React 18 & 19 specific guidance with hooks and patterns
  • Critical Best Practices - Common mistakes and how to avoid them (like object reference stability)
  • SSR Support - Server-side rendering with Next.js and SvelteKit
  • CSS Theming Guide - Custom styling and theme customization
  • Troubleshooting - Solutions to common integration issues

​
Installation Instructions

Installation differs by platform. Choose your AI assistant:

​
For Claude Code (claude.ai/code)

Via Marketplace (Recommended): 
# Add Primer marketplace
/plugin marketplace add primer-io/examples

# Install the skill
/plugin install primer-web-components@primer-skills
Restart Claude Code, and the skill activates automatically when working with Primer components. Manual Installation: 
cd ~/.claude/skills
git clone --depth 1 https://github.com/primer-io/examples.git temp
mv temp/claude-code-skills/primer-web-components ./
rm -rf temp
Or download from GitHub and copy to ~/.claude/skills/primer-web-components/

​
For Cursor

Use the same manual installation method as Claude Code, but copy to ~/.cursor/skills/ instead.

​
For Other AI Assistants

Most AI coding assistants support directory-based skills. Check your tool’s documentation for the skills directory location and use the manual installation method above.

​
Verifying Installation

Ask your AI assistant: 
Do you have access to the Primer web components skill?
The assistant should confirm it has loaded the skill documentation.

​
When to Use the Claude Code Skill

  • Working in your IDE with integrated AI assistance
  • Need offline access to documentation
  • Want best practices and common pitfalls highlighted automatically
  • Focused on implementation and debugging
  • Working with React, Next.js, or SvelteKit integrations

​
Option 2: Using Context7 for Live Documentation

We’ve partnered with Context7 to provide LLM-friendly versions of our documentation that are always up-to-date and optimized for AI consumption.

​
What is Context7?

Context7 is a service that pulls up-to-date, version-specific documentation and code examples directly from the source, making it easier for LLMs to provide accurate assistance with our SDK.

​
Benefits of Using Context7 for Our Documentation

  • Always up-to-date: Documentation stays in sync with the latest version of our components
  • No hallucinations: LLMs receive accurate API information, reducing incorrect code suggestions
  • Context-aware: The LLM understands the full context of our component library
  • Improved code examples: Get working code snippets that follow our best practices
  • Reduced token usage: Optimized documentation that focuses on what matters

​
When to Use Context7

  • Using web-based LLMs (ChatGPT, Claude.ai web interface)
  • Need to verify against the absolute latest documentation
  • Researching new features or recent API changes
  • Working with tools that support MCP (Model Context Protocol)
  • Want dynamic documentation fetching during conversations

​
How to Access Context7 Documentation

You can access our Context7 documentation in several ways: You can directly ask an LLM to retrieve and analyze our documentation by providing the Context7 link: 
Please analyze the Primer Checkout documentation at https://context7.com/primer-io/examples/llms.txt

​
Method 2: Copy the Documentation Text

Browse our LLM-friendly documentation versions at: https://context7.com/primer-io/examples Then copy the relevant sections and paste them into your conversation with the LLM.

​
Method 3: Use the Context7 MCP Server

For an even better experience, you can use the Context7 MCP server with compatible AI tools. This allows the AI to automatically pull the latest documentation without you needing to copy/paste anything.
Compatible Applications
  • Cursor
  • Windsurf
  • VS Code (with MCP Support extension)
  • Zed
  • Claude Desktop
  • Claude (claude.ai/code)
  • BoltAI

​
Combining Both Approaches

For the best experience, use both the Claude Code skill and Context7 together:
  • Claude Code skill provides immediate access to patterns and best practices while coding
  • Context7 ensures you’re working with the latest API documentation when needed
The skill documentation is comprehensive but static (updated with new versions), while Context7 is always current but requires an active connection. Together, they provide both convenience and accuracy.

​
Example Prompts

Here are some effective prompt examples for using our documentation with LLMs:

​
With Claude Code Skill (in your IDE)

Using the Primer web components skill, create a React component that implements the checkout flow with PayPal as the primary payment method and CardForm as a fallback.

Show me how to properly handle onCheckoutComplete events in React while avoiding the stable object reference issue mentioned in the skill documentation.

I'm getting a "Cannot read property of undefined" error with primer-checkout. Help me debug this using the troubleshooting section of the Primer skill.

Please visit https://context7.com/primer-io/examples/llms.txt and use the documentation to implement a checkout flow with Primer's components that includes PayPal as the first payment method and CardForm as the second.

​
Using Context7 MCP Server

use context7

Create a basic implementation of Primer's Checkout components using TypeScript. Customize the payment method order to place PayPal on top, CardForm second, and then let the other methods follow.

​
General Documentation Request

Based on Primer's documentation, show me how to implement error handling in the checkout flow. Use context7 to get the most up-to-date information.

​
Combining Both

Using the Primer skill for patterns and Context7 for the latest API, implement a Next.js 14 App Router page with server-side rendering support for Primer Checkout.

​
Installing the Context7 MCP Server

The Context7 MCP server can be integrated with various development environments to provide seamless documentation access.

​
Installation Instructions

The Context7 MCP server is available on GitHub at: https://github.com/upstash/context7 Each client requires slightly different configuration:

​
For Cursor

Add this to your ~/.cursor/mcp.json file: 
{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

​
For Claude Desktop

Add this to your claude_desktop_config.json file: 
{
  "mcpServers": {
    "Context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

​
For Claude.ai/Code

Run this command: 
claude mcp add context7 -- npx -y @upstash/context7-mcp@latest
For installation instructions with other tools and troubleshooting guidance, please refer to the Context7 GitHub repository.

​
Best Practices for Using LLMs with Our Documentation

  1. Be specific: Clearly state which components you want to use and what functionality you need
  2. Provide context: Mention your framework (React, Vue, etc.) and any specific requirements
  3. Ask for step-by-step explanations: Request that the LLM explain how the code works
  4. Validate the output: Always verify generated code against our official documentation
  5. Iterate: If the initial response isn’t quite right, refine your prompt with more details
By following this guide, you can efficiently leverage LLMs to build with our component library while ensuring accuracy and best practices.