Empezar

Configurar el editor

Alea ships what an editor needs: types for every prop, the tokens as CSS data, readable sources, and the docs in a form AI assistants can read.

TypeScript

Cada paquete trae sus propios tipos, así que el editor completa las props, las explica y detecta un valor incorrecto. Nada que instalar. Dos opciones del compilador hacen que los imports se resuelvan como se publican los paquetes:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "strict": true
  }
}

Los tipos de las props se exportan junto a cada componente; las rutas de los tokens son un tipo unión, así que una errata en el nombre de un token es un error:

import type { ButtonProps, SelectProps } from '@alea/ui';
import { tokens, type TokenPath } from '@alea/tokens';

const path: TokenPath = 'color.accent.default';
tokens[path].css; // 'var(--alea-accent)'

Variables CSS en el editor

El paquete de tokens incluye un archivo de datos CSS personalizados: cada variable --alea-* con su descripción y sus valores en oscuro y claro. Apunta el editor a él y las variables se completan en cualquier archivo CSS, con los valores al pasar el cursor.

1
Dile al editor dónde está el archivo
Visual Studio Code y los editores basados en él leen css.customData de la configuración del espacio de trabajo.
.vscode/settings.json
```
{
  "css.customData": ["./node_modules/@alea/tokens/dist/alea.css-data.json"]
}
```

Usa un token

Escribe var(--alea- y elige de la lista. La descripción dice para qué sirve el token y a qué resuelve en cada tema.

src/card.css

.card {
  background: var(--alea-surface);
  border: 1px solid var(--alea-border);
  border-radius: var(--alea-radius-lg);
  padding: var(--alea-space-4);
}

Fuentes legibles

Con la CLI los componentes viven en tu proyecto (src/components/ui por defecto), así que "ir a la definición" abre la fuente real y puedes cambiarla. Con el paquete de npm, los archivos publicados conservan sus nombres y comentarios, y los source maps apuntan al TypeScript.

npx @alea/cli add button select
npx @alea/cli list

Asistentes de IA

Toda la documentación se publica también como texto plano para asistentes de IA, una línea por página con su resumen, y cada página tiene una versión en texto. Dale el índice a tu asistente y podrá responder con las props y los tokens reales.

https://alea.alevasquez.dev/llms.txt

Formato y linting

Alea no tiene reglas de formato propias: los paquetes son módulos ES normales y los componentes renderizan elementos nativos con los roles correctos, así que tu formateador y tus reglas de lint de accesibilidad se aplican tal cual.