@dewtech/dare-cli 3.3.0 → 3.4.0

package/templates/ide/claude/.claude/commands/dare-frontend-design.md

@@ -1,149 +1,149 @@
-# /dare-frontend-design
-
-Arquitetura frontend DARE para projetos React e Vue. Detecta god components, fetch inline em JSX/template, e gera scaffold DARE-compliant.
-
-## Como usar
-
-```
-/dare-frontend-design                    # audita projeto atual
-/dare-frontend-design lint               # roda checks AP-01 a AP-06
-/dare-frontend-design scaffold <página>  # gera Page + Container + Hook + Presentational
-```
-
-## Arquitetura
-
-```
-Page  →  Container (lógica)  →  Presentational (puro)
-           ↑
-        Hook (fetch + cache)
-```
-
-## As 4 regras
-
-### 1. Componente < 300 linhas
-
-Se passar de 300, quebrar em sub-componentes, hooks ou helpers.
-
-### 2. Zero `fetch()` em JSX/template
-
-Use TanStack Query (React/Vue), SWR ou similar. Hook devolve `{ data, isLoading, error }`.
-
-### 3. Error Boundary em cada Page
-
-React: `<ErrorBoundary>` wrapping rotas.
-Vue: `onErrorCaptured` em layout/page-level.
-
-### 4. Bundle size monitorado
-
-`rollup-plugin-visualizer`, `webpack-bundle-analyzer`. Limite por chunk (ex: <300KB inicial).
-
-## Métricas obrigatórias
-
-| ID | Métrica |
-|---|---|
-| M-01 | 100% de componentes < 300 linhas |
-| M-02 | 0 `fetch()` direto em JSX/template |
-| M-03 | 100% de páginas com error boundary |
-| M-04 | Bundle config presente |
-
-## Antipatterns
-
-| AP | Antipattern | Correção |
-|---|---|---|
-| AP-01 | God component (>300 linhas) | Quebrar em sub-componentes + hooks |
-| AP-02 | Fetch em JSX | Mover para hook |
-| AP-03 | Booleanos isLoading espalhados | Discriminated union de estados |
-| AP-04 | Sem error boundary | Wrap em `<ErrorBoundary>` |
-| AP-05 | Estilo inline pesado | CSS module/styled |
-| AP-06 | Props drilling profundo | Context/Zustand/Pinia |
-
-## O que fazer
-
-### Passo 1: Detectar god components
-
-```bash
-find src/ -name "*.tsx" -o -name "*.vue" | xargs wc -l | sort -rn | head -20
-```
-
-### Passo 2: Detectar fetch inline
-
-```bash
-grep -rn "fetch(\|axios\." src/components/ src/pages/
-```
-
-### Passo 3: Migrar para hooks de dados
-
-```tsx
-// Antes
-function UserList() {
-  const [users, setUsers] = useState([]);
-  useEffect(() => { fetch('/api/users').then(r => r.json()).then(setUsers); }, []);
-  return <ul>{users.map(...)}</ul>;
-}
-
-// Depois
-function UserList() {
-  const { data, isLoading, error } = useUsers();
-  if (isLoading) return <Spinner />;
-  if (error) return <ErrorMessage error={error} />;
-  return <ul>{data.map(...)}</ul>;
-}
-
-function useUsers() {
-  return useQuery({ queryKey: ['users'], queryFn: () => api.users.list() });
-}
-```
-
-### Passo 4: Error boundaries
-
-```tsx
-// React
-class ErrorBoundary extends React.Component { ... }
-
-<ErrorBoundary fallback={<ErrorPage />}>
-  <UserList />
-</ErrorBoundary>
-```
-
-```vue
-<!-- Vue -->
-<script setup>
-import { onErrorCaptured } from 'vue';
-onErrorCaptured((err) => { logError(err); return false; });
-</script>
-```
-
-### Passo 5: Bundle analyzer
-
-```typescript
-// vite.config.ts
-import { visualizer } from 'rollup-plugin-visualizer';
-export default {
-  plugins: [visualizer({ open: false, gzipSize: true })],
-  build: { chunkSizeWarningLimit: 300 }
-};
-```
-
-## Stack recomendada
-
-| Camada | React | Vue |
-|---|---|---|
-| Roteamento | React Router / Next | Vue Router / Nuxt |
-| Estado server | TanStack Query | TanStack Vue Query |
-| Estado client | Zustand / Jotai | Pinia |
-| Styling | Tailwind / CSS Modules | Tailwind / SCSS |
-| Testes | Vitest + Testing Library | Vitest + Testing Library |
-
-## Saída esperada
-
-Reporte:
-- Top 10 componentes com mais linhas
-- Lista de `fetch()`/`axios` inline em componentes
-- Páginas sem error boundary
-- Configuração de bundle (presente/ausente)
-
-$ARGUMENTS
-
----
-
-Skill MIT — parte do DARE Method.
+# /dare-frontend-design
+
+Arquitetura frontend DARE para projetos React e Vue. Detecta god components, fetch inline em JSX/template, e gera scaffold DARE-compliant.
+
+## Como usar
+
+```
+/dare-frontend-design                    # audita projeto atual
+/dare-frontend-design lint               # roda checks AP-01 a AP-06
+/dare-frontend-design scaffold <página>  # gera Page + Container + Hook + Presentational
+```
+
+## Arquitetura
+
+```
+Page  →  Container (lógica)  →  Presentational (puro)
+           ↑
+        Hook (fetch + cache)
+```
+
+## As 4 regras
+
+### 1. Componente < 300 linhas
+
+Se passar de 300, quebrar em sub-componentes, hooks ou helpers.
+
+### 2. Zero `fetch()` em JSX/template
+
+Use TanStack Query (React/Vue), SWR ou similar. Hook devolve `{ data, isLoading, error }`.
+
+### 3. Error Boundary em cada Page
+
+React: `<ErrorBoundary>` wrapping rotas.
+Vue: `onErrorCaptured` em layout/page-level.
+
+### 4. Bundle size monitorado
+
+`rollup-plugin-visualizer`, `webpack-bundle-analyzer`. Limite por chunk (ex: <300KB inicial).
+
+## Métricas obrigatórias
+
+| ID | Métrica |
+|---|---|
+| M-01 | 100% de componentes < 300 linhas |
+| M-02 | 0 `fetch()` direto em JSX/template |
+| M-03 | 100% de páginas com error boundary |
+| M-04 | Bundle config presente |
+
+## Antipatterns
+
+| AP | Antipattern | Correção |
+|---|---|---|
+| AP-01 | God component (>300 linhas) | Quebrar em sub-componentes + hooks |
+| AP-02 | Fetch em JSX | Mover para hook |
+| AP-03 | Booleanos isLoading espalhados | Discriminated union de estados |
+| AP-04 | Sem error boundary | Wrap em `<ErrorBoundary>` |
+| AP-05 | Estilo inline pesado | CSS module/styled |
+| AP-06 | Props drilling profundo | Context/Zustand/Pinia |
+
+## O que fazer
+
+### Passo 1: Detectar god components
+
+```bash
+find src/ -name "*.tsx" -o -name "*.vue" | xargs wc -l | sort -rn | head -20
+```
+
+### Passo 2: Detectar fetch inline
+
+```bash
+grep -rn "fetch(\|axios\." src/components/ src/pages/
+```
+
+### Passo 3: Migrar para hooks de dados
+
+```tsx
+// Antes
+function UserList() {
+  const [users, setUsers] = useState([]);
+  useEffect(() => { fetch('/api/users').then(r => r.json()).then(setUsers); }, []);
+  return <ul>{users.map(...)}</ul>;
+}
+
+// Depois
+function UserList() {
+  const { data, isLoading, error } = useUsers();
+  if (isLoading) return <Spinner />;
+  if (error) return <ErrorMessage error={error} />;
+  return <ul>{data.map(...)}</ul>;
+}
+
+function useUsers() {
+  return useQuery({ queryKey: ['users'], queryFn: () => api.users.list() });
+}
+```
+
+### Passo 4: Error boundaries
+
+```tsx
+// React
+class ErrorBoundary extends React.Component { ... }
+
+<ErrorBoundary fallback={<ErrorPage />}>
+  <UserList />
+</ErrorBoundary>
+```
+
+```vue
+<!-- Vue -->
+<script setup>
+import { onErrorCaptured } from 'vue';
+onErrorCaptured((err) => { logError(err); return false; });
+</script>
+```
+
+### Passo 5: Bundle analyzer
+
+```typescript
+// vite.config.ts
+import { visualizer } from 'rollup-plugin-visualizer';
+export default {
+  plugins: [visualizer({ open: false, gzipSize: true })],
+  build: { chunkSizeWarningLimit: 300 }
+};
+```
+
+## Stack recomendada
+
+| Camada | React | Vue |
+|---|---|---|
+| Roteamento | React Router / Next | Vue Router / Nuxt |
+| Estado server | TanStack Query | TanStack Vue Query |
+| Estado client | Zustand / Jotai | Pinia |
+| Styling | Tailwind / CSS Modules | Tailwind / SCSS |
+| Testes | Vitest + Testing Library | Vitest + Testing Library |
+
+## Saída esperada
+
+Reporte:
+- Top 10 componentes com mais linhas
+- Lista de `fetch()`/`axios` inline em componentes
+- Páginas sem error boundary
+- Configuração de bundle (presente/ausente)
+
+$ARGUMENTS
+
+---
+
+Skill MIT — parte do DARE Method.

package/templates/ide/claude/.claude/commands/dare-graph.md

@@ -1,30 +1,30 @@
-# /dare-graph
-
-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`
+# /dare-graph
+
+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/claude/.claude/commands/dare-info.md

@@ -1,26 +1,26 @@
-# /dare-info
-
-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`
+# /dare-info
+
+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/claude/.claude/commands/dare-init.md

@@ -1,30 +1,30 @@
-# /dare-init
-
-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`
+# /dare-init
+
+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`