@dewtech/dare-cli 3.3.0 → 3.4.0

package/templates/ide/antigravity/.agents/skills/dare-frontend-design/SKILL.md

@@ -1,192 +1,192 @@
----
-name: dare-frontend-design
-description: Arquitetura frontend DARE para projetos React e Vue. Detecta componentes grandes (>300 linhas) e chamadas fetch inline em JSX/template. Gera scaffold DARE-compliant com error boundaries, loading states e separação clara de camadas (componente apresentacional, container, hook de dados).
----
-
-# DARE Frontend Design Skill
-
-Você é um arquiteto frontend especialista em React e Vue. Seu papel é garantir que todo projeto frontend DARE tenha **componentes pequenos, sem fetch inline, com error boundaries e loading states explícitos**.
-
-## Quando usar esta skill
-
-- Projeto novo React/Vue sendo iniciado via DARE
-- Componente passou de 300 linhas e está virando god component
-- Tem `fetch()` espalhado em JSX/template
-- Faltam error boundaries
-- Loading state é booleano `isLoading` espalhado em vários lugares
-
-## A arquitetura recomendada (React)
-
-```
-┌────────────────────────────────────────────────┐
-│  Page  (rota, layout)                          │  ← top-level
-└────────────────────────────────────────────────┘
-              ↓ usa
-┌────────────────────────────────────────────────┐
-│  Container  (lógica + estado, sem JSX pesado)  │  ← orquestrador
-└────────────────────────────────────────────────┘
-              ↓ injeta props
-┌────────────────────────────────────────────────┐
-│  Presentational  (puro, recebe props)          │  ← visual
-└────────────────────────────────────────────────┘
-
-┌────────────────────────────────────────────────┐
-│  Hook de dados (useUser, useOrders…)           │  ← fetch + cache
-└────────────────────────────────────────────────┘
-```
-
-## Vue (Composition API)
-
-```
-Page.vue
-  ↓ usa
-useUserData() (composable — fetch + reactive)
-  ↓ injeta props
-UserCard.vue (presentational)
-```
-
-## As 4 regras
-
-### 1. Componente < 300 linhas
-
-Se passar de 300 linhas (TSX/Vue SFC inteiro, incluindo template e script), quebre em:
-- Sub-componentes lógicos
-- Hook/composable para estado
-- Helper para transformações
-
-### 2. Zero `fetch()` direto em JSX/template
-
-```tsx
-// ❌ Errado
-function UserList() {
-  const [users, setUsers] = useState([]);
-  useEffect(() => {
-    fetch('/api/users').then(r => r.json()).then(setUsers);
-  }, []);
-  return <ul>{users.map(...)}</ul>;
-}
-
-// ✅ Certo
-function UserList() {
-  const { data, isLoading, error } = useUsers();
-  if (isLoading) return <Spinner />;
-  if (error) return <ErrorMessage error={error} />;
-  return <ul>{data.map(...)}</ul>;
-}
-
-// Hook isolado, testável
-function useUsers() {
-  return useQuery({ queryKey: ['users'], queryFn: () => api.users.list() });
-}
-```
-
-### 3. Error Boundary em cada Page
-
-React: `<ErrorBoundary fallback={<ErrorPage/>}>` ao redor de cada rota.
-Vue: `onErrorCaptured` em layout/page-level.
-
-### 4. Bundle size monitorado
-
-`vite-bundle-visualizer`, `webpack-bundle-analyzer` ou similar. Configurar limite por chunk (ex: <300KB inicial).
-
-## Métricas obrigatórias
-
-| ID | Métrica | Como medir |
-|---|---|---|
-| M-01 | 100% de componentes < 300 linhas | linter `wc -l` por arquivo |
-| M-02 | 0 `fetch()` direto em JSX/template | grep AST |
-| M-03 | 100% de páginas com error boundary | grep por `ErrorBoundary` |
-| M-04 | Bundle config presente para monitorar tamanho | `test -f vite.config.ts \| webpack.config.js` |
-
-## Antipatterns
-
-| AP | Antipattern | Sinal | Correção |
-|---|---|---|---|
-| AP-01 | God component | >300 linhas | Quebrar em sub-componentes + hooks |
-| AP-02 | Fetch em JSX | `useEffect(() => fetch(...))` no componente | Mover para hook customizado |
-| AP-03 | Booleanos isLoading espalhados | `isLoading`, `isError`, `isSubmitting`, ... | Discriminated union de estados |
-| AP-04 | Sem error boundary | erro derruba a app | Wrap em `<ErrorBoundary>` |
-| AP-05 | Estilo inline pesado | `style={{ color: red, padding: ... }}` | Mover para CSS module / styled |
-| AP-06 | Props drilling profundo | passa prop 5+ níveis | Context API ou estado global (Zustand, Pinia) |
-
-## Como aplicar
-
-### Passo 1: Detectar god components
-
-```bash
-find src/ -name "*.tsx" -o -name "*.vue" | xargs wc -l | sort -rn | head -20
-```
-
-Linha > 300 = candidato a quebrar.
-
-### Passo 2: Detectar fetch inline
-
-```bash
-grep -rn "fetch(\|axios\." src/components/ src/pages/
-```
-
-Toda ocorrência = AP-02. Mover para hook/composable.
-
-### Passo 3: Migrar para hooks de dados
-
-Use React Query / TanStack Query / SWR (React) ou VueQuery / Pinia (Vue). Hooks devolvem `{ data, isLoading, error }`.
-
-### Passo 4: Adicionar error boundaries
-
-React:
-```tsx
-// src/components/ErrorBoundary.tsx
-class ErrorBoundary extends React.Component { ... }
-
-// src/pages/UsersPage.tsx
-<ErrorBoundary fallback={<ErrorPage />}>
-  <UserList />
-</ErrorBoundary>
-```
-
-Vue:
-```vue
-<script setup>
-import { onErrorCaptured } from 'vue';
-onErrorCaptured((err) => { logError(err); return false; });
-</script>
-```
-
-### Passo 5: Configurar bundle analyzer
-
-```typescript
-// vite.config.ts
-import { visualizer } from 'rollup-plugin-visualizer';
-export default {
-  plugins: [visualizer({ open: false, gzipSize: true })],
-  build: { chunkSizeWarningLimit: 300 }
-};
-```
-
-## Boas práticas
-
-1. **Presentational vs Container** — visual puro vs orquestrador
-2. **Hooks pequenos e focados** — um hook = uma responsabilidade
-3. **Estado mínimo** — derive sempre que possível
-4. **Acessibilidade desde o dia 1** — `role`, `aria-*`, contraste
-
-## Stack recomendada
-
-| Camada | React | Vue |
-|---|---|---|
-| Roteamento | React Router / Next | Vue Router / Nuxt |
-| Estado server | TanStack Query | TanStack Vue Query / Pinia Colada |
-| Estado client | Zustand / Jotai | Pinia |
-| Styling | Tailwind / CSS Modules / styled | Tailwind / SCSS / styled |
-| Testes | Vitest + Testing Library | Vitest + Testing Library |
-| Bundler | Vite | Vite |
-
-## Dicas
-
-- **Leia** `docs/design/skills/dare-frontend-design/DESIGN.md`
-- **Combine** com `dare-realtime` se há WebSocket/SSE
-- **Use** `dare-ax` — frontend também tem OpenAPI client gerado
-
----
-
-Esta skill é parte do DARE Method e está sob licença MIT.
+---
+name: dare-frontend-design
+description: Arquitetura frontend DARE para projetos React e Vue. Detecta componentes grandes (>300 linhas) e chamadas fetch inline em JSX/template. Gera scaffold DARE-compliant com error boundaries, loading states e separação clara de camadas (componente apresentacional, container, hook de dados).
+---
+
+# DARE Frontend Design Skill
+
+Você é um arquiteto frontend especialista em React e Vue. Seu papel é garantir que todo projeto frontend DARE tenha **componentes pequenos, sem fetch inline, com error boundaries e loading states explícitos**.
+
+## Quando usar esta skill
+
+- Projeto novo React/Vue sendo iniciado via DARE
+- Componente passou de 300 linhas e está virando god component
+- Tem `fetch()` espalhado em JSX/template
+- Faltam error boundaries
+- Loading state é booleano `isLoading` espalhado em vários lugares
+
+## A arquitetura recomendada (React)
+
+```
+┌────────────────────────────────────────────────┐
+│  Page  (rota, layout)                          │  ← top-level
+└────────────────────────────────────────────────┘
+              ↓ usa
+┌────────────────────────────────────────────────┐
+│  Container  (lógica + estado, sem JSX pesado)  │  ← orquestrador
+└────────────────────────────────────────────────┘
+              ↓ injeta props
+┌────────────────────────────────────────────────┐
+│  Presentational  (puro, recebe props)          │  ← visual
+└────────────────────────────────────────────────┘
+
+┌────────────────────────────────────────────────┐
+│  Hook de dados (useUser, useOrders…)           │  ← fetch + cache
+└────────────────────────────────────────────────┘
+```
+
+## Vue (Composition API)
+
+```
+Page.vue
+  ↓ usa
+useUserData() (composable — fetch + reactive)
+  ↓ injeta props
+UserCard.vue (presentational)
+```
+
+## As 4 regras
+
+### 1. Componente < 300 linhas
+
+Se passar de 300 linhas (TSX/Vue SFC inteiro, incluindo template e script), quebre em:
+- Sub-componentes lógicos
+- Hook/composable para estado
+- Helper para transformações
+
+### 2. Zero `fetch()` direto em JSX/template
+
+```tsx
+// ❌ Errado
+function UserList() {
+  const [users, setUsers] = useState([]);
+  useEffect(() => {
+    fetch('/api/users').then(r => r.json()).then(setUsers);
+  }, []);
+  return <ul>{users.map(...)}</ul>;
+}
+
+// ✅ Certo
+function UserList() {
+  const { data, isLoading, error } = useUsers();
+  if (isLoading) return <Spinner />;
+  if (error) return <ErrorMessage error={error} />;
+  return <ul>{data.map(...)}</ul>;
+}
+
+// Hook isolado, testável
+function useUsers() {
+  return useQuery({ queryKey: ['users'], queryFn: () => api.users.list() });
+}
+```
+
+### 3. Error Boundary em cada Page
+
+React: `<ErrorBoundary fallback={<ErrorPage/>}>` ao redor de cada rota.
+Vue: `onErrorCaptured` em layout/page-level.
+
+### 4. Bundle size monitorado
+
+`vite-bundle-visualizer`, `webpack-bundle-analyzer` ou similar. Configurar limite por chunk (ex: <300KB inicial).
+
+## Métricas obrigatórias
+
+| ID | Métrica | Como medir |
+|---|---|---|
+| M-01 | 100% de componentes < 300 linhas | linter `wc -l` por arquivo |
+| M-02 | 0 `fetch()` direto em JSX/template | grep AST |
+| M-03 | 100% de páginas com error boundary | grep por `ErrorBoundary` |
+| M-04 | Bundle config presente para monitorar tamanho | `test -f vite.config.ts \| webpack.config.js` |
+
+## Antipatterns
+
+| AP | Antipattern | Sinal | Correção |
+|---|---|---|---|
+| AP-01 | God component | >300 linhas | Quebrar em sub-componentes + hooks |
+| AP-02 | Fetch em JSX | `useEffect(() => fetch(...))` no componente | Mover para hook customizado |
+| AP-03 | Booleanos isLoading espalhados | `isLoading`, `isError`, `isSubmitting`, ... | Discriminated union de estados |
+| AP-04 | Sem error boundary | erro derruba a app | Wrap em `<ErrorBoundary>` |
+| AP-05 | Estilo inline pesado | `style={{ color: red, padding: ... }}` | Mover para CSS module / styled |
+| AP-06 | Props drilling profundo | passa prop 5+ níveis | Context API ou estado global (Zustand, Pinia) |
+
+## Como aplicar
+
+### Passo 1: Detectar god components
+
+```bash
+find src/ -name "*.tsx" -o -name "*.vue" | xargs wc -l | sort -rn | head -20
+```
+
+Linha > 300 = candidato a quebrar.
+
+### Passo 2: Detectar fetch inline
+
+```bash
+grep -rn "fetch(\|axios\." src/components/ src/pages/
+```
+
+Toda ocorrência = AP-02. Mover para hook/composable.
+
+### Passo 3: Migrar para hooks de dados
+
+Use React Query / TanStack Query / SWR (React) ou VueQuery / Pinia (Vue). Hooks devolvem `{ data, isLoading, error }`.
+
+### Passo 4: Adicionar error boundaries
+
+React:
+```tsx
+// src/components/ErrorBoundary.tsx
+class ErrorBoundary extends React.Component { ... }
+
+// src/pages/UsersPage.tsx
+<ErrorBoundary fallback={<ErrorPage />}>
+  <UserList />
+</ErrorBoundary>
+```
+
+Vue:
+```vue
+<script setup>
+import { onErrorCaptured } from 'vue';
+onErrorCaptured((err) => { logError(err); return false; });
+</script>
+```
+
+### Passo 5: Configurar bundle analyzer
+
+```typescript
+// vite.config.ts
+import { visualizer } from 'rollup-plugin-visualizer';
+export default {
+  plugins: [visualizer({ open: false, gzipSize: true })],
+  build: { chunkSizeWarningLimit: 300 }
+};
+```
+
+## Boas práticas
+
+1. **Presentational vs Container** — visual puro vs orquestrador
+2. **Hooks pequenos e focados** — um hook = uma responsabilidade
+3. **Estado mínimo** — derive sempre que possível
+4. **Acessibilidade desde o dia 1** — `role`, `aria-*`, contraste
+
+## Stack recomendada
+
+| Camada | React | Vue |
+|---|---|---|
+| Roteamento | React Router / Next | Vue Router / Nuxt |
+| Estado server | TanStack Query | TanStack Vue Query / Pinia Colada |
+| Estado client | Zustand / Jotai | Pinia |
+| Styling | Tailwind / CSS Modules / styled | Tailwind / SCSS / styled |
+| Testes | Vitest + Testing Library | Vitest + Testing Library |
+| Bundler | Vite | Vite |
+
+## Dicas
+
+- **Leia** `docs/design/skills/dare-frontend-design/DESIGN.md`
+- **Combine** com `dare-realtime` se há WebSocket/SSE
+- **Use** `dare-ax` — frontend também tem OpenAPI client gerado
+
+---
+
+Esta skill é parte do DARE Method e está sob licença MIT.

package/templates/ide/antigravity/.agents/skills/dare-graph/SKILL.md

@@ -1,35 +1,35 @@
----
-name: dare-graph
-description: Consulta e visualiza o grafo de conhecimento do projeto (tasks, arquivos, schemas, endpoints, componentes, entidades e suas relações). Mapeia o CLI `dare graph`.
----
-
-# Inspecionar o knowledge graph do DARE
-
-Consulta e visualiza o grafo de conhecimento do projeto (tasks, arquivos, schemas, endpoints, componentes, entidades e suas relações).
-
-> Este comando expõe o CLI `dare graph` na IDE. O agente pode **rodar o comando no terminal** e interpretar a saída.
-
-## Quando usar
-
-- Você quer entender dependências entre tasks/arquivos/entidades.
-- Precisa achar nós relacionados a um termo, ou exportar um diagrama do grafo.
-
-## Como rodar
-
-```bash
-dare graph stats                       # contagem de nós/arestas por tipo
-dare graph query <termo> --limit 10    # busca nós por label/descrição
-dare graph query auth --type endpoint
-dare graph viz --format mermaid -o graph.mmd
-dare graph ingest                      # re-sincroniza o grafo do dare-dag.yaml
-```
-
-## O que fazer
-
-1. Escolha o subcomando conforme a intenção: `stats`, `query <termo>`, `viz`, `ingest`.
-2. Rode o comando e interprete a saída (para `viz`, abra/renderize o diagrama gerado).
-3. Se o grafo parecer desatualizado, rode `dare graph ingest` para re-sincronizar.
-
-## Comandos relacionados
-
-`/dare-dag` · `/dare-execute`
+---
+name: dare-graph
+description: Consulta e visualiza o grafo de conhecimento do projeto (tasks, arquivos, schemas, endpoints, componentes, entidades e suas relações). Mapeia o CLI `dare graph`.
+---
+
+# Inspecionar o knowledge graph do DARE
+
+Consulta e visualiza o grafo de conhecimento do projeto (tasks, arquivos, schemas, endpoints, componentes, entidades e suas relações).
+
+> Este comando expõe o CLI `dare graph` na IDE. O agente pode **rodar o comando no terminal** e interpretar a saída.
+
+## Quando usar
+
+- Você quer entender dependências entre tasks/arquivos/entidades.
+- Precisa achar nós relacionados a um termo, ou exportar um diagrama do grafo.
+
+## Como rodar
+
+```bash
+dare graph stats                       # contagem de nós/arestas por tipo
+dare graph query <termo> --limit 10    # busca nós por label/descrição
+dare graph query auth --type endpoint
+dare graph viz --format mermaid -o graph.mmd
+dare graph ingest                      # re-sincroniza o grafo do dare-dag.yaml
+```
+
+## O que fazer
+
+1. Escolha o subcomando conforme a intenção: `stats`, `query <termo>`, `viz`, `ingest`.
+2. Rode o comando e interprete a saída (para `viz`, abra/renderize o diagrama gerado).
+3. Se o grafo parecer desatualizado, rode `dare graph ingest` para re-sincronizar.
+
+## Comandos relacionados
+
+`/dare-dag` · `/dare-execute`

package/templates/ide/antigravity/.agents/skills/dare-info/SKILL.md

@@ -1,31 +1,31 @@
----
-name: dare-info
-description: Mostra versão do CLI, caminhos relevantes e a integridade da instalação DARE no projeto atual. Mapeia o CLI `dare info`.
----
-
-# Diagnóstico do setup DARE do projeto
-
-Mostra versão do CLI, caminhos relevantes e a integridade da instalação DARE no projeto atual.
-
-> Este comando expõe o CLI `dare info` na IDE. O agente pode **rodar o comando no terminal** e interpretar a saída.
-
-## Quando usar
-
-- Algo parece errado no setup e você quer um diagnóstico rápido.
-- Para confirmar a versão do CLI e os artefatos DARE presentes.
-
-## Como rodar
-
-```bash
-dare info
-```
-
-## O que fazer
-
-1. Rode `dare info`.
-2. Revise versão, caminhos e a checagem de integridade.
-3. Se houver artefatos faltando/desatualizados, rode `/dare-update`.
-
-## Comandos relacionados
-
-`/dare-update` · `/dare-welcome`
+---
+name: dare-info
+description: Mostra versão do CLI, caminhos relevantes e a integridade da instalação DARE no projeto atual. Mapeia o CLI `dare info`.
+---
+
+# Diagnóstico do setup DARE do projeto
+
+Mostra versão do CLI, caminhos relevantes e a integridade da instalação DARE no projeto atual.
+
+> Este comando expõe o CLI `dare info` na IDE. O agente pode **rodar o comando no terminal** e interpretar a saída.
+
+## Quando usar
+
+- Algo parece errado no setup e você quer um diagnóstico rápido.
+- Para confirmar a versão do CLI e os artefatos DARE presentes.
+
+## Como rodar
+
+```bash
+dare info
+```
+
+## O que fazer
+
+1. Rode `dare info`.
+2. Revise versão, caminhos e a checagem de integridade.
+3. Se houver artefatos faltando/desatualizados, rode `/dare-update`.
+
+## Comandos relacionados
+
+`/dare-update` · `/dare-welcome`

package/templates/ide/antigravity/.agents/skills/dare-init/SKILL.md

@@ -1,35 +1,35 @@
----
-name: dare-init
-description: Cria um projeto DARE do zero (greenfield) com setup interativo: escolhe stack backend/frontend, knowledge graph, IDE e gera o scaffolder completo + DNA DARE. Mapeia o CLI `dare init`.
----
-
-# Inicializar um novo projeto DARE
-
-Cria um projeto DARE do zero (greenfield) com setup interativo: escolhe stack backend/frontend, knowledge graph, IDE e gera o scaffolder completo + DNA DARE.
-
-> Este comando expõe o CLI `dare init` na IDE. O agente pode **rodar o comando no terminal** e interpretar a saída.
-
-## Quando usar
-
-- O usuário quer começar um projeto **novo** do zero.
-- Não existe código ainda — é greenfield. Para projeto legado, use `/dare-discover`.
-
-## Como rodar
-
-```bash
-dare init                       # fluxo interativo completo
-dare init minha-api --stack node-nestjs
-dare init meu-mcp --mcp node-ts --transport http
-dare init api --stack go-gin --toolchain docker --non-interactive
-```
-
-## O que fazer
-
-1. Rode `dare init` (ou com `--stack`/`--mcp` se o usuário já decidiu a stack).
-2. Responda aos prompts: nome, stack backend, frontend opcional, knowledge graph (json/sqlite/neo4j), IDE(s).
-3. Ao final, o projeto tem scaffolder + os 7 artefatos de DNA + comandos/skills de IDE instalados.
-4. Próximo passo: descreva a ideia com `/dare-design`.
-
-## Comandos relacionados
-
-`/dare-design` · `/dare-discover` · `/dare-bootstrap`
+---
+name: dare-init
+description: Cria um projeto DARE do zero (greenfield) com setup interativo: escolhe stack backend/frontend, knowledge graph, IDE e gera o scaffolder completo + DNA DARE. Mapeia o CLI `dare init`.
+---
+
+# Inicializar um novo projeto DARE
+
+Cria um projeto DARE do zero (greenfield) com setup interativo: escolhe stack backend/frontend, knowledge graph, IDE e gera o scaffolder completo + DNA DARE.
+
+> Este comando expõe o CLI `dare init` na IDE. O agente pode **rodar o comando no terminal** e interpretar a saída.
+
+## Quando usar
+
+- O usuário quer começar um projeto **novo** do zero.
+- Não existe código ainda — é greenfield. Para projeto legado, use `/dare-discover`.
+
+## Como rodar
+
+```bash
+dare init                       # fluxo interativo completo
+dare init minha-api --stack node-nestjs
+dare init meu-mcp --mcp node-ts --transport http
+dare init api --stack go-gin --toolchain docker --non-interactive
+```
+
+## O que fazer
+
+1. Rode `dare init` (ou com `--stack`/`--mcp` se o usuário já decidiu a stack).
+2. Responda aos prompts: nome, stack backend, frontend opcional, knowledge graph (json/sqlite/neo4j), IDE(s).
+3. Ao final, o projeto tem scaffolder + os 7 artefatos de DNA + comandos/skills de IDE instalados.
+4. Próximo passo: descreva a ideia com `/dare-design`.
+
+## Comandos relacionados
+
+`/dare-design` · `/dare-discover` · `/dare-bootstrap`