Arena

Arena: el lenguaje del sistema de diseño Arena, servido a un agente como recursos y herramientas MCP, en React o Angular, según lo que el proyecto tenga instalado.

GitHub
2
Prueba este MCPPatrocinado

Documentación

Arena by Dravensoft

Un sistema de diseño, en React y en Angular, desde un único contrato.

npm react npm angular downloads license build

Licencia MIT · Sistema de diseño basado en tokens para React, Angular y Tailwind.

One ArenaButton drawn under three style plugins, with the API and behaviour contracts pointing at it and an agent reading the whole thing

Lo que obtienes

Componentes con una API contratada. Los mismos componentes bajo ambos nombres de framework, renderizando los mismos píxeles, sobre una capa compartida de Tailwind. Cómo se llama un miembro, qué acepta, cuál es su valor predeterminado y qué significa están escritos en contracts/api/, y los tipos y tablas de cada capa se generan desde ahí, de modo que las dos capas no pueden divergir silenciosamente. Cada valor que un componente dibuja se resuelve a través de un token de diseño, por lo que ningún hex ni píxel suelto se encuentra dentro de uno.

Accesibilidad vinculada por componente en lugar de auditada por versión. Cada componente declara qué patrón implementa, la mayoría de ellos de las Prácticas de Autoría WAI-ARIA: los roles que porta, las teclas a las que responde, dónde aterriza el foco, qué lo descarta. Un requisito que aún no cumple se registra junto a él con su motivo, y bun run check:behaviour falla el día en que un componente deja de responder al patrón que nombró.

Un núcleo de estilo, que es a lo que un proyecto responde para verse a sí mismo. Las preguntas sobre forma, espacio, peso y profundidad son de Arena; las respuestas son un plugin de estilo que el proyecto escribe, y la apariencia con la que Arena se instala es uno de esos plugins en lugar de un piso debajo de ellos. Las paletas y las fuentes residen en un arena.config.json, que el comando arena-to-prod que cada paquete incluye convierte en la única hoja de estilo que un paquete no puede portar: Arena lleva el lenguaje y nunca la piel, y ninguno de sus propios colores llega a tu compilación.

Metadatos para un producto que debe ser encontrado, que la mayoría de los productos no lo son. La capa de Angular escribe el documento <head> a partir de las rutas que recibe, en @dravensoft/arena-angular/metadata: composición de títulos, una descripción, un canónico y el par og:*, sin que ninguna ruta sea indexada hasta que lo diga. Esa ruta de importación es un segundo punto de entrada, por lo que un proyecto que nunca solicita metadatos nunca instala el enrutador detrás de él. React no escribe ningún <head> en absoluto, y ambas capas publican la ruta de navegación que dibujan en términos de schema.org.

Ocho productos, dibujados dos veces

Los bancos de pruebas son un conjunto de plantillas que implementan Arena: Calendly, ClickUp, Duolingo, Etsy, Grafana, Instagram, Notion y Superhuman, cada uno simulado dos veces, una en React y otra en Angular, desde un único directorio arena.config.json y uno design/ por par. Cada mitad instala Arena desde npm y responde a un plugin de estilo propio, por lo que lo que un par muestra es la apariencia de un proyecto en lugar de la de Arena, y las dos mitades de un par son la misma pantalla bajo ambos nombres de framework. Esa dirección es donde se ejecutan, y dravensoft-dev/arena-web-benches es donde están escritos.

Por qué un agente puede operarlo

Una API es un archivo de contrato en lugar de un párrafo, y también lo es el patrón que un componente vincula y el rol al que un plugin de estilo responde; una puerta de control mantiene el código, la documentación y los paquetes publicados sujetos a ellos. Un agente al que se le entrega este repositorio no adivina sobre Arena: lee el contrato que gobierna lo que está a punto de escribir, y la puerta de control le dice cuándo se equivocó.

Eso es también lo que hace que las reglas sean exigibles en lugar de aspiracionales. Cada una de estas se decide en contracts/design/AGENTS.md y se entrega a un constructor mediante skills/design/SKILL.md, que las enuncia cada una en su totalidad y dice cuáles de ellas la puerta de control lee de tus propias fuentes.

  • Los tokens son la única capa de estilo.
  • No pongas ninguna clase propia en un componente de Arena.
  • El peligro es contorno, nunca relleno.
  • Un acento primario por vista.
  • Sin degradados, en ninguna superficie.
  • Sin emojis, ni en el producto ni en el texto.
  • Los iconos son cadenas de nombres de clase de Phosphor, nunca elementos ni SVG.
  • Nunca envuelvas un componente de Arena en el enlace propio de tu enrutador.
  • Un ancla que Arena dibuja divide sus activaciones.
  • Una pulsación que comienza en un control permanece en ese control.
  • Dos temas, oscuro primero.
  • Una gráfica lleva identidad o significado, nunca ambos.
  • El texto es formal y directo, en el idioma del producto.
  • Un miembro requerido ausente es un error del llamador.
  • Ningún renderizado se deriva de si vinculaste un listener o llenaste un slot.
  • Algunos componentes responden con un método en lugar de un miembro.

Instalación

bun add @dravensoft/arena-react     # or @dravensoft/arena-angular

Esa es toda la instalación. Phosphor es un peer en lugar de un segundo comando, porque Arena renderiza nombres de clase de iconos y nunca SVG; la página de capas a continuación dice qué peers declara cada paquete.

Luego escribe arena.config.json, ejecuta npx arena-to-prod (o bunx, o pnpm exec), e importa lo que escribe. frameworks/react/PACKAGE.md y frameworks/angular/PACKAGE.md son todo ello, y son las páginas que npm muestra.

A través de MCP

{
  "mcpServers": {
    "arena": { "command": "npx", "args": ["-y", "@dravensoft/arena-mcp"] }
  }
}

@dravensoft/arena-mcp es donde viaja el lenguaje. Sirve el enrutador, las referencias y cada documento de componente a un agente que habla el Protocolo de Contexto de Modelo, como recursos y como herramientas, y la capa que sirve es la que tu proyecto instaló. Los paquetes de componentes portan el código, las hojas de estilo y los contratos a los que tu propio marcado responde, y ninguno de la prosa.

Un corpus y los componentes que describe son dos paquetes y dos números de versión, por lo que pueden discrepar. arena_start lee la versión del paquete de Arena en tu proyecto, la compara con la del servidor y lo dice cuando los dos difieren. Cuando lo hacen, los componentes tienen razón y el texto está desactualizado.

Como plugin de Claude Code

/plugin marketplace add dravensoft-dev/arena
/plugin install arena@dravensoft
/reload-plugins

Actualización

/plugin marketplace update dravensoft   # refresh the catalog: learns a new version exists
/plugin update arena@dravensoft         # update the plugin you actually have
/reload-plugins                         # apply it to the running session

Una versión significa un commit. Cada versión se sirve desde su etiqueta git, con la entrada del marketplace fijando source.ref a vX.Y.Z.

Como Skill de Agente independiente

Entrega a cualquier agente skills/design/SKILL.md. Es el enrutador, y responde cada pregunta con un archivo. Enruta sobre este árbol, por lo que un agente al que se le entrega solo el archivo tiene las preguntas y llega a las respuestas por URL; uno al que se le entrega el clon o el plugin llega a ellas por ruta.

Un paquete de componentes es código, y el lenguaje llega a un agente por una de las tres rutas anteriores. Instala el servidor MCP, instala el plugin o entrega el skill, y el agente obtiene las pautas, los contratos y el documento de uso de cada componente, que es lo que convierte "integrar Arena" en una tarea que termina por sí sola.

Verlo

arena.dravensoft.org lleva las pautas de diseño, el kitchen sink y una página de playground para cada componente, sin clon y sin nada que instalar.

Las mismas páginas aparecen localmente con bun run demos, desde la misma lista, y scripts/build/AGENTS.md dice lo que un clon nuevo tiene que construir antes de que signifiquen algo.

Un agente lee llms.txt primero, que enruta a las reglas del lenguaje y luego a un corpus por framework, React y Angular. Están separados a propósito: cada componente se envía bajo ambos nombres y los dos documentos no son intercambiables.

Dependencias

  • Las fuentes están autoalojadas y no se realiza ninguna solicitud a CDN. Arena envía los binarios .woff2 de Archivo / Familjen Grotesk / Spline Sans Mono en assets/fonts/, y contracts/design-generated/fonts.generated.css los declara con @font-face, por lo que se cargan desde el mismo origen que la página que los lee. Un consumidor de paquetes nombra sus propias tres familias en arena.config.json, donde src es una URL de hoja de estilo o un binario que ellos alojan.
  • Los iconos son Phosphor Icons (MIT) y no están incluidos. Instala el paquete oficial por defecto, ya sea @phosphor-icons/web (webfont) o @phosphor-icons/react, para peso completo y flexibilidad de tree-shaking. El CDN es una conveniencia solo para prototipos, no el valor predeterminado. Consulta Iconografía.

Qué versión estoy obteniendo

Los dos paquetes y el plugin no siempre llevan el mismo número, porque un paquete publica solo cuando algo que envía cambió. .github/workflows/AGENTS.md explica qué significa eso para una actualización.

Artefactos recientes del proyecto

A dónde ir después

¿Cuál es este trabajo? Las dos audiencias leen conjuntos casi disjuntos de estos archivos, y comenzar en la rama equivocada es cómo una pregunta corta se convierte en una lectura larga.

Construyendo algo con Arena. skills/design/SKILL.md es el enrutador. Desde él: frameworks/INDEX.md es cada componente en una sola lectura y frameworks/<layer>/INDEX.md es la misma lista bajo los nombres de tu propio framework, el .prompt.md de cada componente es cómo usar ese, y frameworks/react/PACKAGE.md o frameworks/angular/PACKAGE.md es cómo instalarlo.

Trabajando en Arena mismo. AGENTS.md es la raíz de esa rama, y todo lo que está debajo se alcanza a través de ella.

  • scripts/build/AGENTS.md: compila Arena por primera vez, es decir, qué debe tener ya una máquina, qué debe construir un clon nuevo antes de que bun run demos o bun run check signifiquen algo, y por qué algunos archivos generados se rastrean y otros no. Linux y macOS son las dos plataformas compatibles; en Windows, la ruta compatible es WSL2, con el clon en el sistema de archivos de Linux.
  • frameworks/PACKAGING.md: el canal npm, es decir, cómo se ensamblan los dos paquetes desde el árbol en su lugar, por qué un Arena publicado no lleva piel y qué declara el consumidor en su lugar.
  • contracts/AGENTS.md: los tres niveles de contrato de Arena y un mapa de todo en este repositorio.
  • contracts/design/AGENTS.md: la especificación de diseño normativa, que cubre voz, tipografía, color, espaciado, movimiento, la convención de peligro, iconografía y tematización. contracts/design/TokenTypes.md junto a él lleva el mapa de tipos de token DTCG, para quien sea autor de un token.
  • frameworks/react/AGENTS.md: la capa de React.
  • frameworks/angular/AGENTS.md: la capa de Angular, cuya propia última sección entrega la adopción a la página del paquete anterior.
  • frameworks/tailwind/AGENTS.md: la capa compartida de Tailwind.
  • frameworks/demos/AGENTS.md: el fixture detrás de la página de playground de cada componente, que es la única parte de esa página que alguien escribe.
  • DOUBTS.md: qué cuenta como deuda en Arena y dónde viven los registros.

Contribución y seguridad

Arena acepta pull requests de cualquiera. CONTRIBUTING.md dice qué cambios van directo a uno y cuáles comienzan como propuesta, y qué no se le permite romper a un cambio. SECURITY.md es a dónde va una vulnerabilidad, y CODE_OF_CONDUCT.md es el Pacto de Colaborador al que este proyecto se adhiere.

Acerca de

Arena es el lenguaje de interfaz único bajo el cual se construye cada producto de software de Dravensoft, publicado bajo la Licencia MIT para que cualquier otra persona también pueda construir bajo él.