{ "markdown": "# Arena by Dravensoft\n\n**One design system, in React and in Angular, from one contract.**\n\n[![npm react](https://img.shields.io/npm/v/@dravensoft/arena-react?style=flat-square&color=c5a059&label=arena-react)](https://www.npmjs.com/package/@dravensoft/arena-react)\n[![npm angular](https://img.shields.io/npm/v/@dravensoft/arena-angular?style=flat-square&color=c5a059&label=arena-angular)](https://www.npmjs.com/package/@dravensoft/arena-angular)\n[![downloads](https://img.shields.io/npm/dm/@dravensoft/arena-react?style=flat-square&color=c5a059&label=downloads)](https://www.npmjs.com/package/@dravensoft/arena-react)\n[![license](https://img.shields.io/npm/l/@dravensoft/arena-react?style=flat-square&color=c5a059)](./LICENSE)\n[![build](https://img.shields.io/github/actions/workflow/status/dravensoft-dev/arena/main.yml?branch=main&style=flat-square&color=c5a059&label=build)](https://github.com/dravensoft-dev/arena/actions/workflows/main.yml)\n\nMIT License · Token-driven design system for React, Angular and Tailwind.\n\n![One ArenaButton drawn under three style plugins, with the API and behaviour contracts pointing at it and an agent reading the whole thing](https://arena.dravensoft.org/hero.png)\n\n## What you get\n\n**Components with a contracted API.** The same components under both framework\nnames, rendering the same pixels, over one shared Tailwind layer. What a member\nis called, what it takes, what it defaults to and what it means are written in\n[`contracts/api/`](./contracts/api/AGENTS.md), and each layer's types and tables\nare generated from there, so the two layers cannot drift apart quietly. Every\nvalue a component draws resolves through a design token, so no hex and no bare\npixel sits anywhere inside one.\n\n**Accessibility bound per component instead of audited per release.** Each\ncomponent declares which pattern it implements, most of them from the\n[WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/): the\nroles it carries, the keys it answers, where focus lands, what dismisses it. A\nrequirement it does not meet yet is recorded beside it with its reason, and\n`bun run check:behaviour` fails on the day a component stops answering the\npattern it named.\n\n**A style kernel, which is what a project answers to look like itself.** The\nquestions about shape, space, weight and depth are Arena's; the answers are a\nstyle plugin the project writes, and the appearance Arena installs with is one\nsuch plugin rather than a floor under them. Palettes and fonts sit in an\n`arena.config.json`, which the `arena-to-prod` command each package ships turns\ninto the one stylesheet a package cannot carry: **Arena carries the language and\nnever the skin**, and none of its own colours reach your build.\n\n**Metadata for a product that has to be found, which most products do not.** The\nAngular layer writes the document `` from the routes it is handed, at\n`@dravensoft/arena-angular/metadata`: title composition, a description, a\ncanonical and the `og:*` pair, with no route indexed until it says so. That\nimport path is a second entry point, so a project that never asks for metadata\nnever installs the router behind it. React writes no `` at all, and both\nlayers publish the breadcrumb trail they draw in `schema.org` terms.\n\n## Eight products, drawn twice\n\n[The benches](https://arena.dravensoft.org/web-benches/) are a set of templates that implement\nArena: Calendly, ClickUp, Duolingo, Etsy, Grafana, Instagram, Notion and Superhuman, each mocked\ntwice, once in React and once in Angular, from one `arena.config.json` and one `design/` directory\nper pair. Every half installs Arena from npm and answers a style plugin of its own, so what a pair\nshows is a project's appearance rather than Arena's, and the two halves of a pair are the same\nscreen under both framework names. That address is where they run, and\n[`dravensoft-dev/arena-web-benches`](https://github.com/dravensoft-dev/arena-web-benches) is where\nthey are written.\n\n## Why an agent can operate it\n\nAn API is a contract file rather than a paragraph, and so is the pattern a\ncomponent binds and the role a style plugin answers; a gate holds the code, the\ndocumentation and the published packages to them. An agent handed this\nrepository does not guess at Arena: it reads the contract that governs what it is\nabout to write, and the gate tells it when it got it wrong.\n\nThat is also what makes the rules enforceable rather than aspirational. Each of\nthese is decided in [`contracts/design/AGENTS.md`](./contracts/design/AGENTS.md)\nand handed to a builder by\n[`skills/design/SKILL.md`](./skills/design/SKILL.md), which states each one in\nfull and says which of them a gate reads your own sources for.\n\n\n\n- Tokens are the only styling layer.\n- Put no class of your own on an Arena component.\n- Danger is outline, never filled.\n- One primary accent per view.\n- No gradients, on any surface.\n- No emoji, in product or in copy.\n- Icons are Phosphor class-name strings, never elements and never SVG.\n- Never wrap an Arena component in your router's own link.\n- An anchor Arena draws splits its activations.\n- A press that starts on a control keeps to that control.\n- Two themes, dark first.\n- A chart carries identity or meaning, never both.\n- Copy is English, formal and direct.\n- A required member absent is a caller bug.\n- No render follows from whether you bound a listener or filled a slot.\n- A few components answer with a method rather than a member.\n\n\n\n## Install\n\n```bash\nbun add @dravensoft/arena-react # or @dravensoft/arena-angular\n```\n\n**That is the whole install.** Phosphor is a peer rather than a second\ncommand, because Arena renders icon class names and never SVG; the layer page\nbelow says which peers each package declares.\n\nThen write `arena.config.json`, run `npx arena-to-prod` (or `bunx`, or\n`pnpm exec`), and import what it writes. [`frameworks/react/PACKAGE.md`](./frameworks/react/PACKAGE.md) and\n[`frameworks/angular/PACKAGE.md`](./frameworks/angular/PACKAGE.md) are the whole\nof it, and they are the pages npm shows.\n\n### Over MCP\n\n```json\n{\n \"mcpServers\": {\n \"arena\": { \"command\": \"npx\", \"args\": [\"-y\", \"@dravensoft/arena-mcp\"] }\n }\n}\n```\n\n`@dravensoft/arena-mcp` is where the language travels. It serves the router, the\nreferences and every component document to an agent that speaks the Model\nContext Protocol, as resources and as tools, and the layer it serves is the one\nyour project installed. The component packages carry the code, the stylesheets\nand the contracts your own markup answers to, and none of the prose.\n\n**A corpus and the components it describes are two packages and two version\nnumbers**, so they can disagree. `arena_start` reads the version of the Arena\npackage in your project, compares it with the server's, and says so when the two\ndiffer. Where they do, the components are right and the text is old.\n\n### As a Claude Code plugin\n\n```\n/plugin marketplace add dravensoft-dev/arena\n/plugin install arena@dravensoft\n/reload-plugins\n```\n\n**Update**\n\n```\n/plugin marketplace update dravensoft # refresh the catalog: learns a new version exists\n/plugin update arena@dravensoft # update the plugin you actually have\n/reload-plugins # apply it to the running session\n```\n\n**A version means one commit.** Each release is served from its git tag, with\nthe marketplace entry pinning `source.ref` to `vX.Y.Z`.\n\n### As a standalone Agent Skill\n\nHand any agent [`skills/design/SKILL.md`](./skills/design/SKILL.md). It is the\nrouter, and it answers each question with one file. **It routes over this tree**,\nso an agent handed the file alone has the questions and reaches the answers by\nURL; one handed the clone or the plugin reaches them by path.\n\n**A component package is code, and the language reaches an agent by one of the\nthree routes above.** Install the MCP server, install the plugin, or hand over\nthe skill, and the agent gets the guidelines, the contracts and every component's\nusage document, which is what turns \"integrate Arena\" into a task it finishes on\nits own.\n\n## See it\n\n**[arena.dravensoft.org](https://arena.dravensoft.org)** carries the design\nguidelines, the kitchen sink, and a playground page for every component, with no\nclone and nothing to install.\n\nThe same pages come up locally with `bun run demos`, from the same list, and\n[`scripts/build/AGENTS.md`](./scripts/build/AGENTS.md) says what a fresh clone\nhas to build before they mean anything.\n\n**An agent reads [`llms.txt`](https://arena.dravensoft.org/llms.txt) first**, which\nroutes to the rules of the language and then to one corpus per framework,\n[React](https://arena.dravensoft.org/llms-react.txt) and\n[Angular](https://arena.dravensoft.org/llms-angular.txt). They are separate on purpose: every\ncomponent ships under both names and the two documents are not interchangeable.\n\n## Dependencies\n\n- **Fonts are self-hosted, and no CDN request is made.** Arena ships the Archivo\n / Familjen Grotesk / Spline Sans Mono `.woff2` binaries in `assets/fonts/`, and\n `contracts/design-generated/fonts.generated.css` declares them with\n `@font-face`, so they load from the same origin as the page that reads them. A\n package consumer names their own three families in `arena.config.json`, where\n `src` is either a stylesheet URL or a binary they host.\n- **Icons are [Phosphor Icons](https://phosphoricons.com) (MIT)**, and are not\n bundled. **Install the official package by default**, either\n `@phosphor-icons/web` (webfont) or `@phosphor-icons/react`, for full weight and\n tree-shaking flexibility. The CDN is a prototype-only convenience, not the\n default. See [Iconography](./contracts/design/AGENTS.md#iconography).\n\n## Which version am I getting\n\nThe two packages and the plugin do not always carry the same number, because a\npackage publishes only when something it ships changed.\n[`.github/workflows/AGENTS.md`](./.github/workflows/AGENTS.md) explains what\nthat means for an upgrade.\n\n## Latest project artifacts\n- **Repo/Claude Code plugin**: 11.0.2\n- [npm React package](https://www.npmjs.com/package/@dravensoft/arena-react?activeTab=versions)\n- [npm Angular package](https://www.npmjs.com/package/@dravensoft/arena-angular?activeTab=versions)\n- [npm contracts package](https://www.npmjs.com/package/@dravensoft/arena-contracts?activeTab=versions)\n\n## Where to go next\n\n**Which job is this?** The two audiences read almost disjoint sets of these\nfiles, and starting on the wrong branch is how a short question turns into a\nlong read.\n\n**Building something with Arena.** [`skills/design/SKILL.md`](./skills/design/SKILL.md) is the\nrouter. From\nit: [`frameworks/INDEX.md`](./frameworks/INDEX.md) is every component in one\nread and `frameworks//INDEX.md` is the same list under your own\nframework's names, each component's `.prompt.md` is how to use that one, and\n[`frameworks/react/PACKAGE.md`](./frameworks/react/PACKAGE.md) or\n[`frameworks/angular/PACKAGE.md`](./frameworks/angular/PACKAGE.md) is how to\ninstall it.\n\n**Working on Arena itself.** [`AGENTS.md`](./AGENTS.md) is the root of that\nbranch, and everything below is reached through it.\n\n- [`scripts/build/AGENTS.md`](./scripts/build/AGENTS.md): **compile Arena for the\n first time**, meaning what a machine has to already carry, what a fresh clone\n must build before `bun run demos` or `bun run check` mean anything, and why\n some generated files are tracked and some are not. Linux and macOS are the two\n supported platforms; on Windows the supported path is WSL2, with the clone in\n the Linux filesystem.\n- [`frameworks/PACKAGING.md`](./frameworks/PACKAGING.md): the npm channel,\n meaning how the two packages are assembled from the tree in place, why a\n published Arena carries no skin, and what the consumer declares instead.\n- [`contracts/AGENTS.md`](./contracts/AGENTS.md): Arena's three contract levels,\n and a map of everything in this repository.\n- [`contracts/design/AGENTS.md`](./contracts/design/AGENTS.md): **the normative\n design specification**, covering voice, type, color, spacing, motion, the\n danger convention, iconography and theming.\n [`contracts/design/TokenTypes.md`](./contracts/design/TokenTypes.md) beside it\n carries the DTCG token type map, for whoever authors a token.\n- [`frameworks/react/AGENTS.md`](./frameworks/react/AGENTS.md): the React layer.\n- [`frameworks/angular/AGENTS.md`](./frameworks/angular/AGENTS.md): the Angular\n layer, whose own last section hands adoption to the package page above.\n- [`frameworks/tailwind/AGENTS.md`](./frameworks/tailwind/AGENTS.md): the shared\n Tailwind layer.\n- [`frameworks/demos/AGENTS.md`](./frameworks/demos/AGENTS.md): the fixture\n behind every component's playground page, which is the one part of that page\n anybody writes.\n- [`DOUBTS.md`](./DOUBTS.md): what counts as a debt in Arena, and where the\n records live.\n\n## Contributing and security\n\nArena takes pull requests from anyone. [`CONTRIBUTING.md`](./CONTRIBUTING.md) says\nwhich changes go straight to one and which start as a proposal, and what a change\nis not allowed to break. [`SECURITY.md`](./SECURITY.md) is where a vulnerability\ngoes, and [`CODE_OF_CONDUCT.md`](./CODE_OF_CONDUCT.md) is the Contributor Covenant\nthis project holds to.\n\n## About\n\nArena is the single interface language under which every Dravensoft software\nproduct is built, published under the MIT License so that anyone else can build\nunder it too.\n", "bytes": 13559, "sha": "e572d52998e6f1dcc033a5378a94c5fae83b60990a98936f0787f627d689d509", "repo_slug": "dravensoft-dev/arena", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/mcp_io_github_dravensoft_dev_arena_93246bae/readme" }