# Overview - agent guide

> Normative extract of the EchoSistema template for the showcase index (`/componentes`). Copy it verbatim: tag names, props, events and classes
> are contract.
>
> Full guide (rules, tokens and every family): `/agents/echosistema-ui.md`

## Rules that apply before any line of code

- Colour only through tokens (`text-fg1`, `bg-panel`, `border-line`, `.es-i--*`); never a hex, never a Tailwind colour.
- Two axes: the intent gives the colour, the variant consumes it. Never combine them by hand.
- Visible text through `t()`; tag names, props and classes stay literal.
- A component does not fetch: it takes props and emits events.
- An icon alone inside a button needs an `aria-label`.

The showcase is an index: every component family has a page, and every page has
its own version of this guide in `/agents/<file>.md`.

Groups and pages (`app/data/showcaseNav.ts`), with the route slug first and the
spec file second:

- **Actions** - `botoes` (buttons), `rotulos` (labels)
- **Forms** - `campos` (fields), `opcoes` (options), `formularios` (forms)
- **Navigation** - `navegacao` (navigation), `navbars`, `rodapes` (footers), `sidebars`, `seletores` (switchers)
- **Authentication** - `auth-modais` (auth-modals), `auth-paginas` (auth-pages)
- **Feedback** - `feedback`
- **Content** - `conteudo` (content), `dados` (data-media), `calendario` (calendar)

The slugs are Portuguese because they are URLs a visitor reads; the spec files
are English because they are written for an agent and live beside the code,
which is commented in English.

A new family goes into that list and shows up in the menu, in the overview cards
and on the page: `to` is the route suffix (and the file name) and `key` is the
i18n namespace.

---

Source: `app/data/showcaseNav.ts`