anticaos
Visão geralFundamentosComponentesPara agentes

Design system

Tokens, componentes e regras que agentes consultam, usam e pelas quais são verificados. Base visual do Resense, vidro do coisas.space.

O que é

O anticaos é o design system dos side projects do Iverson, feito para agentes (Claude Code, Cursor, Zorro) usarem sem inventar. Cada token diz quando usar; cada componente diz quando usar, quando evitar e o que usar no lugar. Um checador aponta qualquer valor solto.

Fundamentos

Cores, tipo, forma, vidro, movimento

25 componentes

Com playground e regras de uso

Para agentes

Regras, template de pedido, checagem

Fluxo

Do token à entrega: o agente consulta as regras, gera a interface e o checador devolve qualquer valor solto antes de chegar ao usuário.

  1. 01Tokens

    tokens.json, fonte única

  2. 02Build

    theme.css + meta.json

  3. 03Agente consulta

    Quando usar, evitar, trocar

  4. 04Gera UI

    Só tokens e componentes

  5. 05Checador

    check-tokens.mjs

Violação encontrada → volta ao agente com o token certo, até passar limpo.

Princípios

  1. 01Um job por tela.
  2. 02Se precisa de tooltip, não está pronto.
  3. 03Não remova cliques, remova pensamento.
  4. 04Estados de vazio, erro e carregamento para tudo.
  5. 05Simplicidade e potência não são opostos.

Como usar num projeto

Enquanto o registry não existe, o projeto recebe uma cópia do tema gerado. Tailwind v4 já importado no projeto:

globals.css
@import "tailwindcss";
@import "./styles/anticaos/theme.css"; /* cópia de anticaos-ui/src/tokens/theme.css */

Para um trecho mais denso (chat, painel, barra de ferramentas), marque o elemento com a densidade compacta:

<aside data-density="compact">…</aside>

Verificar antes de entregar

O checador acusa hex, cor crua do Tailwind, rgba, text-[Npx], z-index numérico, raio, sombra e blur soltos — e diz qual token usar.

node ../anticaos-ui/scripts/check-tokens.mjs src