> For the complete documentation index, see [llms.txt](https://docs.cspr.click/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cspr.click/documentation/ai-agent-skills.md).

# AI Agent Skills

An agent skill is available for the CSPR.click Web SDK. Once installed, your AI coding assistant will automatically know how to integrate CSPR.click into dApps — including wallet connection, transaction signing, event handling, theming, and CSPR.cloud API access — across React (< 19 and 19+), Next.js, and Vanilla JS.

**Skill source:** [`make-software/csprclick-examples › csprclick-skill`](https://github.com/make-software/csprclick-examples/tree/master/csprclick-skill)

***

## Installation

### Option 1 - Ask your agent to install the skill

```
Install this skill: https://cspr.click/SKILL.md
```

### Option 2 — `skills` CLI

The [`skills` CLI](https://github.com/vercel-labs/skills) auto-detects installed coding agents and places the skill in the right location.

```bash
npx skills add https://github.com/make-software/csprclick-examples/tree/master/csprclick-skill
```

The CLI will prompt you to select which agents to install to and whether to install project-wide or globally. To skip prompts:

```bash
# Install globally to all detected agents
npx skills add https://github.com/make-software/csprclick-examples/tree/master/csprclick-skill --global --yes

# Install to a specific agent (e.g. Augment, Claude Code, Cursor …)
npx skills add https://github.com/make-software/csprclick-examples/tree/master/csprclick-skill --agent opencode --yes
```

> Supported agents include Augment, Claude Code, Cursor, Windsurf, GitHub Copilot, Cline, and [many more](https://github.com/vercel-labs/skills?tab=readme-ov-file#supported-agents).

***

### Option 3 — Manual installation

The skill consists of two parts that must be kept together:

| Path in repo                          | Contents                                                |
| ------------------------------------- | ------------------------------------------------------- |
| `csprclick-skill/SKILL.md`            | Skill definition and instructions                       |
| `csprclick-skill/references/llms.txt` | Full API reference, type definitions, and code examples |

**Steps:**

1. Download or clone the examples repository:

   ```bash
   git clone --depth 1 --filter=blob:none --sparse \
     https://github.com/make-software/csprclick-examples.git
   cd csprclick-examples
   git sparse-checkout set csprclick-skill
   ```
2. Copy the `csprclick-skill/` folder into the skills directory for your agent:

   \| Agent | Project scope | Global scope | |----------------|---------------------|-------------------------------------| | Opencode | `.opencode/skills/` | `~/.config/opencode/skills/` | | Claude Code | `.claude/skills/` | `~/.claude/skills/` | | Cursor | `.agents/skills/` | `~/.cursor/skills/` | | Windsurf | `.windsurf/skills/` | `~/.codeium/windsurf/skills/` | | GitHub Copilot | `.agents/skills/` | `~/.copilot/skills/` | | Cline / Warp | `.agents/skills/` | `~/.agents/skills/` |

   Example for Augment (project scope):

   ```bash
   mkdir -p .opencode/skills
   cp -r csprclick-skill .augment/skills/
   ```
3. Verify the layout looks like this:

   ```
   .opencode/skills/
   └── csprclick-skill/
       ├── SKILL.md
       └── references/
           └── llms.txt
   ```

***

## What the skill covers

Once installed, your agent will know how to:

* **Initialize the SDK** — For React, Next.JS and other stacks applications
* **Connect wallets** — `signIn()`, `connect(provider)`, provider detection
* **Handle account events** — sign-in, account switch, sign-out, disconnect
* **Sign and send transactions** — `send()`, `sign()` with `casper-js-sdk` TransactionV1
* **Sign messages** — off-chain authentication flows
* **Customize themes** — `buildTheme`, `DefaultThemes`, light/dark switching (React < 19)
* **Access CSPR.cloud APIs** — REST proxy, WebSocket streaming, Node RPC
* **Show the Buy CSPR widget** — fiat on-ramp integration