# 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 — `skills` CLI (recommended)

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 2 — 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