diff --git a/.agent b/.agent index 26c9b8e..9317f9d 100644 --- a/.agent +++ b/.agent @@ -188,6 +188,18 @@ Sempre que uma mudança for relevante para desenvolvedores/usuários/IA, **atual - README da raiz (se impactar o projeto) - README do componente (se impactar API/uso/comportamento) +### Documentação para IAs consumidoras (IA.md) + +O arquivo **`IA.md`** (na raiz) é um guia para **IAs que vão consumir/importar** o pacote `eli-vue`. + +Sempre que houver mudanças relevantes de consumo, **`IA.md` deve ser atualizado** — por exemplo: + +- instalação / comandos recomendados (pnpm/npm/yarn) +- peerDependencies (Vue/Vuetify) e requisitos mínimos +- forma de uso do plugin (`import EliVue from "eli-vue"`) e registro +- caminho/nome do CSS publicado em `dist/` (ex.: `eli-vue/dist/eli-vue.css`) +- exports públicos (componentes adicionados/removidos/renomeados) + --- ## Postura do agente ao gerar código diff --git a/IA.md b/IA.md new file mode 100644 index 0000000..8afb668 --- /dev/null +++ b/IA.md @@ -0,0 +1,152 @@ +# IA.md — Guia para IAs (consumidoras) do pacote `eli-vue` + +Este arquivo existe para **IAs e automações** que precisam **importar e usar** o pacote `eli-vue` em projetos Vue 3. + +> Fonte da verdade das regras internas do repositório: **`.agent`**. +> Este `IA.md` é focado no **uso do pacote como dependência** (projeto consumidor). + +--- + +## O que é o `eli-vue` + +Biblioteca (Design System) de componentes para **Vue 3** com **TypeScript** e integração com **Vuetify 3**. + +### Premissas importantes + +- O `eli-vue` **não cria** nem configura Vuetify no seu projeto. +- `vue` e `vuetify` são **peerDependencies**: o projeto consumidor precisa ter ambos instalados. + +--- + +## Instalação (projeto consumidor) + +> Preferência do repo: `pnpm`. + +```bash +pnpm add eli-vue +``` + +Se o projeto ainda não tiver as peer dependencies, instale também: + +```bash +pnpm add vue vuetify +``` + +--- + +## Uso recomendado + +### 1) Registro global via plugin (recomendado) + +```ts +import { createApp } from "vue"; +import App from "./App.vue"; + +// Vuetify +import "vuetify/styles"; +import { createVuetify } from "vuetify"; + +// eli-vue +import EliVue from "eli-vue"; +import "eli-vue/dist/eli-vue.css"; + +const vuetify = createVuetify({}); + +createApp(App) + .use(vuetify) + .use(EliVue) + .mount("#app"); +``` + +### 2) Importação direta (quando não quiser plugin) + +```ts +import { EliBotao, EliInput, EliBadge, EliCartao } from "eli-vue"; +``` + +> Observação: ainda pode ser necessário importar o CSS do pacote: + +```ts +import "eli-vue/dist/eli-vue.css"; +``` + +--- + +## Exemplos mínimos + +### Botão + +```vue + +``` + +### Input com v-model + +```vue + + + +``` + +--- + +## Troubleshooting (para IAs) + +### 1) “Failed to resolve component” + +Provável causa: componente não foi registrado. + +- Se estiver usando plugin: confirme `app.use(EliVue)` +- Se estiver importando direto: registre localmente no componente + +### 2) Estilos não aplicam + +Confirme que o projeto importou: + +- `vuetify/styles` +- `eli-vue/dist/eli-vue.css` + +### 3) Ícones não aparecem + +Alguns exemplos usam `` (MDI). O `eli-vue` **não instala** ícones automaticamente no projeto consumidor. + +--- + +## Como a IA deve agir ao modificar um projeto consumidor + +Quando for integrar `eli-vue` num projeto existente: + +1) Verifique se **Vue 3** e **Vuetify 3** já estão configurados. +2) Prefira usar o **plugin** do `eli-vue` (simplifica registro). +3) Garanta o import do CSS do pacote (`eli-vue/dist/eli-vue.css`). +4) Ao ver erros de tipos, valide se o projeto está usando TypeScript e se o build está resolvendo `types` corretamente. + +--- + +## Quando este arquivo deve ser atualizado + +Atualize este `IA.md` quando houver mudanças em qualquer um destes pontos: + +- caminho/nome do CSS em `dist/` +- forma de instalação e/ou peerDependencies +- forma de uso do plugin/export principal +- lista de exports públicos (novos componentes, renomes, remoções) +- mudanças de comportamento relevantes para consumo +