Skip to content
Presage

Claude Code Skill

Presage ships a Claude Code skill that gives your AI assistant full knowledge of the library — rules, tracking, maturity, adapters. Install it and Claude will scaffold adaptive components, write rules, and wire tracking for you.

Section titled “Automatic Setup (Recommended)”

Run a single command in your React or Vue project:

Terminal window
npx @presage-kit/cli

This will:

  • Detect your framework (React or Vue) and package manager
  • Install @presage-kit/core and the right adapter
  • Create the .claude/skills/presage.md skill file
  • Add Presage context to your CLAUDE.md

That’s it — the /presage skill is ready to use.

Manual Setup

Section titled “Manual Setup”

If you prefer to install the skill manually, create a file at .claude/skills/presage.md in your project root:

Terminal window
mkdir -p .claude/skills

Then paste the following content:

---
name: presage
description: Scaffold adaptive UIs with Presage — rules, tracking, maturity, React/Vue adapters
---


# Presage Skill


You are an expert in the Presage adaptive UI library (@presage-kit/core, @presage-kit/react, @presage-kit/vue).


## Architecture


Presage adapts UI based on three pillars:
1. **UserTraits** — static properties (role, plan, company, signupDate, custom)
2. **BehavioralSignals** — auto-computed from tracked events (sessionCount, totalEvents, featureUsage, clickMap, daysSinceSignup)
3. **Maturity** — auto-segmented: `'new' | 'onboarding' | 'active' | 'power' | 'dormant'`


Flow: Track Event → Recompute Signals → Evaluate Rules → Render Matching Variant


## Rules Engine


Rules are declarative JSON. Each rule targets an `adaptationId`, has a `priority` (highest wins), `conditions`, and an `action`.


```ts
interface AdaptationRule {
  id: string
  adaptationId: string
  priority: number
  conditions: ConditionGroup // { all: [...] } | { any: [...] } | { not: ... }
  action: AdaptationAction
}
```


### Condition Fields


Access user context via dot notation:
- `traits.role`, `traits.plan`, `traits.company`, `traits.custom.<key>`
- `signals.sessionCount`, `signals.totalEvents`, `signals.daysSinceSignup`
- `signals.featureUsage.<featureId>`, `signals.clickMap.<elementId>`
- `maturity` (direct, no prefix)


### 14 Operators


`eq`, `neq`, `gt`, `gte`, `lt`, `lte`, `between`, `in`, `notIn`, `contains`, `notContains`, `exists`, `notExists`, `matches` (regex)


### Actions


- `{ type: 'show', variantId: string }` — select a variant
- `{ type: 'hide' }` — hide the adaptation point
- `{ type: 'reorder', order: string[] }` — reorder navigation items
- `{ type: 'modify', props: Record<string, unknown> }` — pass custom props


### Boolean Logic


Nest `all` (AND), `any` (OR), `not` (negate):


```ts
conditions: {
  all: [
    { field: 'traits.plan', operator: 'eq', value: 'enterprise' },
    { any: [
      { field: 'maturity', operator: 'eq', value: 'active' },
      { field: 'maturity', operator: 'eq', value: 'power' },
    ]},
  ],
}
```


## Client Setup


```ts
import { createAdaptiveClient, createLocalStorageDriver } from '@presage-kit/core'


const client = createAdaptiveClient({
  rules: [ /* AdaptationRule[] */ ],
  persistence: { driver: createLocalStorageDriver('my-app') },
  // Optional: maturity thresholds
  maturity: {
    newMaxSessions: 3,
    onboardingMaxSessions: 10,
    powerMinFeatures: 5,
    dormantDaysInactive: 14,
  },
})
```


## React Adapter


```tsx
import { AdaptiveProvider, Adaptive, Variant } from '@presage-kit/react'


// Wrap app
<AdaptiveProvider client={client}>
  <App />
</AdaptiveProvider>


// Declarative component
<Adaptive id="onboarding" defaultVariant="standard">
  <Variant id="guided-tour"><GuidedTour /></Variant>
  <Variant id="standard"><StandardWelcome /></Variant>
</Adaptive>


// Hook (type-safe)
const { selectedVariant, track } = useAdaptive('dashboard', {
  variants: ['simple', 'advanced'] as const,
  defaultVariant: 'simple',
})


// Lightweight hook (variant string only)
const variant = useVariant('dashboard', {
  variants: ['simple', 'advanced'] as const,
  defaultVariant: 'simple',
})
```


## Vue Adapter


```ts
import { AdaptivePlugin } from '@presage-kit/vue'
app.use(AdaptivePlugin, { client })


// In setup()
const { selectedVariant, track } = useAdaptive('dashboard', {
  variants: ['simple', 'advanced'] as const,
  defaultVariant: 'simple',
})
```


## Tracking


```ts
client.identify('user-123', { role: 'admin', plan: 'pro', signupDate: '2025-01-15' })
client.track('feature_used', { featureId: 'export' })
client.track('click', { elementId: 'settings-btn' })
```


## Guidelines


- Keep rules declarative — never put adaptation logic in components
- Use `priority` to handle rule conflicts (highest wins, first match)
- One `adaptationId` per UI decision point
- Track meaningful events only — avoid tracking every click
- Use maturity for coarse segmentation, rules for fine-grained control
- Functions and components should be under 40 lines

Usage

Section titled “Usage”

Once the skill is in place, invoke it in Claude Code:

/presage

Then ask Claude to scaffold adaptive components:

/presage Add an adaptive pricing page that shows different CTAs
based on the user's plan and session count.

Claude will generate the rules, the React/Vue component, and the tracking calls — following Presage conventions.

What the Skill Covers

Section titled “What the Skill Covers”
CapabilityDetails
Rules authoringAll 14 operators, boolean logic, priority handling
React componentsAdaptive, Variant, AdaptiveNav, useAdaptive, useVariant
Vue composablesuseAdaptive, useVariant, AdaptivePlugin
Trackingidentify, track, custom adapter pattern
MaturityAuto-segmentation thresholds and overrides
Client setupPersistence drivers, config options

Next Steps

Section titled “Next Steps”