Skill Claude Code

Presage fournit une skill Claude Code qui donne a votre assistant IA une connaissance complete de la bibliotheque — regles, tracking, maturite, adaptateurs. Installez-la et Claude generera des composants adaptatifs, ecrira des regles et connectera le tracking pour vous.

Installation automatique (Recommande)

Lancez une seule commande dans votre projet React ou Vue :

npx @presage-kit/cli

Cela va :

• Detecter votre framework (React ou Vue) et votre gestionnaire de paquets
• Installer @presage-kit/core et le bon adaptateur
• Creer le fichier skill .claude/skills/presage.md
• Ajouter le contexte Presage a votre CLAUDE.md

C’est tout — la skill /presage est prete a l’emploi.

Installation manuelle

Si vous preferez installer la skill manuellement, creez un fichier .claude/skills/presage.md a la racine de votre projet :

mkdir -p .claude/skills

Puis collez le contenu suivant :

---
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') },
  maturity: {
    newMaxSessions: 3,
    onboardingMaxSessions: 10,
    powerMinFeatures: 5,
    dormantDaysInactive: 14,
  },
})
```

## React Adapter

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

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

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

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

## Vue Adapter

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

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

Utilisation

Une fois la skill en place, invoquez-la dans Claude Code :

/presage

Puis demandez a Claude de generer des composants adaptatifs :

/presage Ajoute une page de pricing adaptative qui affiche
differents CTAs selon le plan de l'utilisateur et son nombre de sessions.

Claude generera les regles, le composant React/Vue et les appels de tracking — en suivant les conventions de Presage.

Ce que la Skill couvre

Capacite	Details
Ecriture de regles	Les 14 operateurs, logique booleenne, gestion des priorites
Composants React	Adaptive, Variant, AdaptiveNav, useAdaptive, useVariant
Composables Vue	useAdaptive, useVariant, AdaptivePlugin
Tracking	identify, track, pattern d’adaptateur custom
Maturite	Seuils de segmentation automatique et surcharges
Configuration client	Drivers de persistance, options de config

Prochaines etapes

• Demarrage rapide — Construisez votre premier composant adaptatif
• Moteur de regles — Maitrisez tous les operateurs
• Adaptateur React — Reference complete des composants et hooks