# AI Skill

> An agent skill that installs and wires the Orwel SDK into any project, correctly, the first time.

Orwel ships an **agent skill**, a set of instructions your AI assistant (Claude Code) loads to install and wire the SDK correctly into any project: a key read from the environment, a wrapper module, a single init, and the full API of SDK `^1.7.1`.

## Install

Add the skill once; your assistant picks it up automatically.

```bash
npx skills add hyperlabs-ai/hyper-skills/orwel
```

<Note>
  The skill is open source in [hyperlabs-ai/hyper-skills](https://github.com/hyperlabs-ai/hyper-skills/blob/main/orwel/SKILL.md). Once installed it lives in your skills directory and triggers automatically on Orwel-related requests.
</Note>

## Use it

Just ask. The skill handles the whole install (package, env var, wrapper and the init call):

```text Prompt
"Add Orwel tracking to this project. Key: orwel_pk_xxxxxxxxxxxxxxxx"
```

## What it guarantees

<Steps>
  <Step title="Detects your framework">
    Identifies the stack and installs the `orwel` package.
  </Step>
  <Step title="Creates a wrapper module">
    A small module that reads the key from the environment and re-exports the SDK.
  </Step>
  <Step title="Initializes once">
    Client side, before any tracking call, and never twice.
  </Step>
  <Step title="Knows the full API">
    Methods and validation rules, so calls are correct from the start, including an awaited `conversion()` with an email.
  </Step>
  <Step title="Instruments your business events">
    Proposes a catalog of event codes from your service layer, instruments them where each action succeeds, and tells you which custom codes to register in [Journeys and features setup](/docs/guides/journeys-and-features).
  </Step>
  <Step title="Verifies with Dev mode">
    Uses the development key and [Dev mode](/docs/guides/dev-mode) to check every request before you go live.
  </Step>
</Steps>

<Tip>
  You can also paste the **Agent prompt** from Journeys and features setup into Claude Code or Cursor. It lists every code of your configured journeys and features, when to fire each one, and how to verify it.
</Tip>

## Rule 0: key in env, never hardcoded

The skill always reads the key from an environment variable (it never pastes a literal key into code), using the right name per framework:

| Framework | Env variable |
| --- | --- |
| Vite (React, Vue, Svelte) | `VITE_ORWEL_KEY` |
| Next.js | `NEXT_PUBLIC_ORWEL_KEY` |
| SvelteKit, Astro | `PUBLIC_ORWEL_KEY` |
| Nuxt 3 | `NUXT_PUBLIC_ORWEL_KEY` |
| Create React App | `REACT_APP_ORWEL_KEY` |

<Warning>
  The SDK key is the production API key (it can send events, not read data), so it's safe in the browser bundle. Still, read it from an environment variable so each environment can use its own key: the development key locally, the production API key in production.
</Warning>