# FORMA

> Design-direction kit for React 19 + Tailwind v4 prototypes (Next.js or Vite): tokens, structure, modules and slots, live-tunable in a DialKit panel. Build screens only from kit parts so a direction can restyle them.

Install the kit into a shadcn project (alias "@/*" → src/*), then read src/forma/AGENTS.md:

    npx shadcn@latest add https://forma-lab-bwh.pages.dev/r/forma.json

## Docs

- [AGENTS.md](https://forma-lab-bwh.pages.dev/AGENTS.md): how to build with FORMA — runtime, panel, shell, modules, rules
- [Mit deinem Agenten nutzen](https://forma-lab-bwh.pages.dev/agents/): setup for Claude Code, Codex and Cursor
- [Anleitung](https://forma-lab-bwh.pages.dev/guide/): the three layers, presets, slots

## Registry

- [registry.json](https://forma-lab-bwh.pages.dev/r/registry.json): index of every item
- [forma.json](https://forma-lab-bwh.pages.dev/r/forma.json): the kit (→ src/forma)
- [forma-block-resource-list.json](https://forma-lab-bwh.pages.dev/r/forma-block-resource-list.json): Index screen: saved views, filters, sortable table with selection, bulk bar, row menu, confirm, empty state.
- [forma-block-detail.json](https://forma-lab-bwh.pages.dev/r/forma-block-detail.json): One record: way back, title and status, figures, trend chart, activity, properties.
- [forma-block-settings.json](https://forma-lab-bwh.pages.dev/r/forma-block-settings.json): Section list, form sections (forms module) and the irreversible action with a confirm.
- [forma-block-ai-workspace.json](https://forma-lab-bwh.pages.dev/r/forma-block-ai-workspace.json): Conversation and composer beside the result; the agent asks before it acts.

## Tokens

- [tokens/index.json](https://forma-lab-bwh.pages.dev/tokens/index.json): every preset as a DTCG token file