Skill de Claude Code

Presage incluye una skill de Claude Code que le da a tu asistente IA conocimiento completo de la biblioteca — reglas, tracking, madurez, adaptadores. Instalala y Claude generara componentes adaptativos, escribira reglas y conectara el tracking por ti.

Instalacion automatica (Recomendado)

Ejecuta un solo comando en tu proyecto React o Vue:

npx @presage-kit/cli

Esto va a:

• Detectar tu framework (React o Vue) y tu gestor de paquetes
• Instalar @presage-kit/core y el adaptador correspondiente
• Crear el archivo skill .claude/skills/presage.md
• Agregar el contexto de Presage a tu CLAUDE.md

Eso es todo — la skill /presage esta lista para usar.

Instalacion manual

Si prefieres instalar la skill manualmente, crea un archivo .claude/skills/presage.md en la raiz de tu proyecto:

mkdir -p .claude/skills

Luego pega el siguiente contenido:

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

Uso

Una vez que la skill esta en su lugar, invocala en Claude Code:

/presage

Luego pide a Claude que genere componentes adaptativos:

/presage Agrega una pagina de precios adaptativa que muestre
diferentes CTAs segun el plan del usuario y su cantidad de sesiones.

Claude generara las reglas, el componente React/Vue y las llamadas de tracking — siguiendo las convenciones de Presage.

Que cubre la Skill

Capacidad	Detalles
Escritura de reglas	Los 14 operadores, logica booleana, manejo de prioridades
Componentes React	Adaptive, Variant, AdaptiveNav, useAdaptive, useVariant
Composables Vue	useAdaptive, useVariant, AdaptivePlugin
Tracking	identify, track, patron de adaptador personalizado
Madurez	Umbrales de segmentacion automatica y configuracion
Configuracion del cliente	Drivers de persistencia, opciones de config

Proximos pasos

• Inicio rapido — Construye tu primer componente adaptativo
• Motor de reglas — Domina todos los operadores
• Adaptador React — Referencia completa de componentes y hooks