vireum-spec-cli 0.3.1 → 0.4.1

package/dist/commands/setup.js

@@ -158,14 +158,74 @@ async function runSetup() {
             { name: 'redis      — inspecionar cache e filas', value: 'redis', checked: false },
         ],
     });
-    // Context7 sempre presente
     const mcpsFinais = mcpsSelecionados.includes('context7')
         ? mcpsSelecionados
         : ['context7', ...mcpsSelecionados];
+    // ── Design System ──────────────────────────────────────────────────────────
+    console.log(chalk_1.default.hex('#2D7DD2').bold('\n🎨 Design System\n'));
+    const designSystem = await (0, prompts_1.select)({
+        message: 'Design system do projeto:',
+        choices: [
+            { name: 'Shadcn/ui   — componentes com Tailwind e Radix', value: 'shadcn' },
+            { name: 'Tailwind    — utilitários CSS puro', value: 'tailwind' },
+            { name: 'Chakra UI   — componentes React acessíveis', value: 'chakra' },
+            { name: 'Material UI — componentes Google Material', value: 'mui' },
+            { name: 'Custom      — design system próprio', value: 'custom' },
+            { name: 'Nenhum      — sem design system definido', value: 'none' },
+        ],
+    });
+    const design = { system: designSystem, cores: {}, fontes: {}, customizacoes: '', gerarBase: false, baseTailwind: false };
+    if (['shadcn', 'tailwind', 'chakra', 'mui'].includes(designSystem)) {
+        const temCustom = await (0, prompts_1.confirm)({
+            message: 'Tem customizacoes? (cores da marca, fontes especificas?)',
+            default: false,
+        });
+        if (temCustom) {
+            design.cores.primary = await (0, prompts_1.input)({ message: 'Cor primaria (ex: #2D7DD2 ou blue-600):', default: '' });
+            design.cores.secondary = await (0, prompts_1.input)({ message: 'Cor secundaria (ex: #1A3A5C ou slate-800):', default: '' });
+            design.cores.accent = await (0, prompts_1.input)({ message: 'Cor de destaque (ex: #1D9E75 ou green-500):', default: '' });
+            design.fontes.heading = await (0, prompts_1.input)({ message: 'Fonte de titulos (ex: Inter, Geist):', default: '' });
+            design.fontes.body = await (0, prompts_1.input)({ message: 'Fonte de corpo (ex: Inter, Roboto):', default: '' });
+        }
+    }
+    if (designSystem === 'custom') {
+        const preencherAgora = await (0, prompts_1.confirm)({
+            message: 'Quer preencher o design system agora?',
+            default: true,
+        });
+        if (preencherAgora) {
+            design.cores.primary = await (0, prompts_1.input)({ message: 'Cor primaria:', default: '' });
+            design.cores.secondary = await (0, prompts_1.input)({ message: 'Cor secundaria:', default: '' });
+            design.cores.accent = await (0, prompts_1.input)({ message: 'Cor de destaque:', default: '' });
+            design.cores.background = await (0, prompts_1.input)({ message: 'Cor de fundo:', default: '' });
+            design.cores.text = await (0, prompts_1.input)({ message: 'Cor de texto:', default: '' });
+            design.fontes.heading = await (0, prompts_1.input)({ message: 'Fonte de titulos:', default: '' });
+            design.fontes.body = await (0, prompts_1.input)({ message: 'Fonte de corpo:', default: '' });
+            design.customizacoes = await (0, prompts_1.input)({ message: 'Componentes ou convencoes importantes (Enter para pular):', default: '' });
+        }
+    }
+    if (designSystem === 'none') {
+        const criarBase = await (0, prompts_1.confirm)({
+            message: 'Quer criar uma estrutura de design basica para o projeto?',
+            default: true,
+        });
+        if (criarBase) {
+            design.system = 'base';
+            design.gerarBase = true;
+            design.baseTailwind = await (0, prompts_1.confirm)({ message: 'Usar Tailwind CSS como base?', default: true });
+            design.cores.primary = await (0, prompts_1.input)({ message: 'Cor primaria (Enter para #2D7DD2):', default: '#2D7DD2' });
+            design.cores.secondary = await (0, prompts_1.input)({ message: 'Cor secundaria (Enter para #1A3A5C):', default: '#1A3A5C' });
+            design.cores.accent = await (0, prompts_1.input)({ message: 'Cor de destaque (Enter para #1D9E75):', default: '#1D9E75' });
+            design.cores.background = await (0, prompts_1.input)({ message: 'Cor de fundo (Enter para #F4F7FB):', default: '#F4F7FB' });
+            design.cores.text = await (0, prompts_1.input)({ message: 'Cor de texto (Enter para #1A1A2E):', default: '#1A1A2E' });
+            design.fontes.heading = await (0, prompts_1.input)({ message: 'Fonte de titulos (Enter para Inter):', default: 'Inter' });
+            design.fontes.body = await (0, prompts_1.input)({ message: 'Fonte de corpo (Enter para Inter):', default: 'Inter' });
+        }
+    }
     // ── Gerar arquivos ─────────────────────────────────────────────────────────
     console.log('');
     const projeto = extrairProjeto(path.join(specDir, 'INDEX.md'));
-    const dados = { stack, infra, mcps: mcpsFinais, projeto };
+    const dados = { stack, infra, mcps: mcpsFinais, projeto, design };
     for (const dir of [vireumDir, cursorDir]) {
         if (!fs.existsSync(dir))
             fs.mkdirSync(dir, { recursive: true });
@@ -173,6 +233,7 @@ async function runSetup() {
     const arquivos = [
         { path: path.join(specDir, 'architecture.md'), conteudo: gerarArchitecture(dados), msg: 'Atualizando architecture.md...' },
         { path: path.join(specDir, 'mcp-setup.md'), conteudo: gerarMcpSetup(dados), msg: 'Gerando mcp-setup.md...' },
+        { path: path.join(specDir, 'design.md'), conteudo: gerarDesign(dados), msg: 'Gerando design.md...' },
         { path: path.join(vireumDir, 'rules.md'), conteudo: gerarRulesGlobal(), msg: 'Gerando .vireum/rules.md...' },
         { path: path.join(vireumDir, 'mcps.md'), conteudo: gerarMcpsGlobal(dados), msg: 'Gerando .vireum/mcps.md...' },
         { path: path.join(process.cwd(), 'CLAUDE.md'), conteudo: gerarClaudeMd(dados), msg: 'Gerando CLAUDE.md...' },
@@ -281,6 +342,11 @@ function gerarRulesGlobal() {
 - Confirmar o plano com o dev em tasks complexas antes de executar
 - Nunca comecar a escrever codigo sem ter um plano claro
 
+## Regras de Design
+- Sempre consultar .spec/design.md antes de criar ou modificar qualquer componente de UI
+- Nunca hardcodar cores — usar sempre os tokens definidos em design.md
+- Nunca misturar design systems
+
 ## Regras de Spec
 - Nunca marcar task como done sem validar os critérios de aceitação
 - Nunca tomar decisão de arquitetura sem registrar em architecture.md com justificativa
@@ -300,6 +366,7 @@ function gerarRulesGlobal() {
 ## Nunca
 - Implementar sem ler o spec primeiro
 - Implementar sem planejar primeiro
+- Criar componente de UI sem consultar design.md
 - Tomar decisão de lib ou stack sem documentar o porquê
 - Responder dúvida de escopo sem consultar requirements.md
 - Comunicar diretamente com o cliente — isso é papel do dev
@@ -357,11 +424,12 @@ Acionado por: "desenvolve", "implementa", "cria", + nome de task
 1. Leia \`.spec/tasks/active.md\`
 2. Leia \`.spec/requirements.md\` para contexto da feature
 3. Consulte o Context7 para docs atualizadas da lib que vai usar
-4. PLANEJAR: escreva o que sera implementado, quais arquivos serao tocados e riscos identificados
-5. Confirme o plano com o dev antes de executar em tasks complexas
-6. Implemente seguindo os critérios de aceitação da task
-7. Ao concluir: marque como done, mova para \`tasks/done.md\`, atualize \`INDEX.md\`
-8. Se decisão arquitetural tomada: registre em \`architecture.md\`
+4. Se task de UI: leia \`.spec/design.md\` antes de qualquer componente
+5. PLANEJAR: escreva o que sera implementado, quais arquivos serao tocados e riscos identificados
+6. Confirme o plano com o dev antes de executar em tasks complexas
+7. Implemente seguindo os critérios de aceitação da task
+8. Ao concluir: marque como done, mova para \`tasks/done.md\`, atualize \`INDEX.md\`
+9. Se decisão arquitetural tomada: registre em \`architecture.md\`
 
 ### Modo 2 — Bug
 Acionado por: "erro", "bug", "quebrou", "não funciona"
@@ -388,6 +456,15 @@ Sempre que for usar uma lib do projeto, consulte a documentação atualizada via
 Nunca assuma que você conhece a API mais recente — sempre verifique.
 Libs deste projeto: ${libs}
 
+## Arquivos de contexto disponíveis
+- Escopo e features → leia \`.spec/requirements.md\`
+- Decisoes tecnicas → leia \`.spec/architecture.md\`
+- Perfis e permissoes → leia \`.spec/users.md\`
+- Riscos → leia \`.spec/risks.md\`
+- Tarefas ativas → leia \`.spec/tasks/active.md\`
+- Historico → leia \`.spec/changelog.md\`
+- Design e componentes → leia \`.spec/design.md\` antes de qualquer UI
+
 ## Regras globais
 Leia \`.vireum/rules.md\` — aplicam-se a todas as sessões.
 
@@ -407,6 +484,7 @@ ${mcps.map((m) => `- ${m}`).join('\n')}
 - Escopo creep: se a solicitação não está em requirements.md → PARAR e avisar
 - Decisão de lib nova: registrar em architecture.md antes de usar
 - Risco identificado: adicionar em risks.md antes de continuar
+- UI sem consultar design.md → PARAR e consultar primeiro
 `;
 }
 function gerarAgentsMd(d) {
@@ -426,6 +504,9 @@ Antes de qualquer implementacao:
 2. Identifique riscos e dependencias
 3. Confirme com o dev em tasks complexas antes de executar
 
+## Design
+Sempre consultar \`.spec/design.md\` antes de criar ou modificar qualquer componente de UI.
+
 ## Context7
 Sempre consultar docs atualizadas via Context7 antes de usar qualquer lib.
 
@@ -462,12 +543,16 @@ Antes de qualquer implementacao:
 - Identifique riscos e dependencias
 - Confirme com o dev em tasks complexas antes de executar
 
+## Design
+- SEMPRE leia \`.spec/design.md\` antes de criar ou modificar qualquer componente de UI
+- Nunca hardcodar cores — usar tokens do design.md
+
 ## Context7
 - Sempre consultar Context7 antes de usar qualquer lib do projeto
 - Nunca assumir que conhece a API mais recente
 
 ## Modos
-- Implementar → PLANEJAR primeiro, consulte Context7, leia tasks/active.md, siga critérios de aceitação
+- Implementar → PLANEJAR primeiro, consulte Context7, leia tasks/active.md, se UI leia design.md
 - Bug → PLANEJAR investigacao, crie hotfix [H] em active.md, registre causa raiz em changelog.md
 - Nova demanda → crie [PENDING] em backlog.md, aguarde aprovação
 - Dúvida de escopo → consulte requirements.md
@@ -477,6 +562,140 @@ Antes de qualquer implementacao:
 - Ver \`.spec/rules.md\` — regras do projeto
 - Nunca implementar fora do spec sem [PENDING] aprovado
 - Nunca implementar sem planejar primeiro
+- Nunca criar UI sem consultar design.md
 - Nunca marcar done sem critérios validados
 `;
 }
+function gerarDesign(d) {
+    const { design, projeto } = d;
+    const sistemas = {
+        shadcn: {
+            descricao: 'Shadcn/ui com Tailwind CSS e Radix UI',
+            convencoes: [
+                'Usar cn() para mesclar classes Tailwind',
+                'Componentes em src/components/ui/',
+                'Variaveis CSS em globals.css via --primary, --secondary, etc.',
+                'Icones via lucide-react',
+                'Formularios com react-hook-form + zod',
+            ],
+            tokens: 'Tailwind config + CSS variables',
+        },
+        tailwind: {
+            descricao: 'Tailwind CSS puro',
+            convencoes: [
+                'Classes utilitarias diretamente nos componentes',
+                'Cores customizadas em tailwind.config.ts',
+                'Componentes em src/components/',
+                'Nao criar classes CSS customizadas sem necessidade',
+            ],
+            tokens: 'tailwind.config.ts',
+        },
+        chakra: {
+            descricao: 'Chakra UI',
+            convencoes: [
+                'Usar componentes do Chakra sempre que disponivel',
+                'Theme customizado em src/theme/',
+                'Variaveis de cor via useColorModeValue para dark/light mode',
+                'Spacing seguindo escala do Chakra (1 = 4px)',
+            ],
+            tokens: 'ChakraProvider theme',
+        },
+        mui: {
+            descricao: 'Material UI (MUI)',
+            convencoes: [
+                'Usar componentes MUI sempre que disponivel',
+                'Theme customizado em src/theme/index.ts',
+                'Usar sx prop para customizacoes pontuais',
+                'Evitar inline styles — preferir theme tokens',
+            ],
+            tokens: 'createTheme()',
+        },
+        base: {
+            descricao: 'Design system basico gerado pelo Vireum Spec Framework',
+            convencoes: [
+                `Usar ${design.baseTailwind ? 'Tailwind CSS' : 'CSS customizado'} para estilizacao`,
+                'Tokens de cor definidos neste arquivo — nunca hardcodar valores',
+                'Componentes em src/components/',
+                'Tipografia consistente — usar apenas as fontes definidas aqui',
+                'Espacamento em multiplos de 4px',
+                'Bordas arredondadas padrao: 8px',
+            ],
+            tokens: design.baseTailwind ? 'tailwind.config.ts + CSS variables' : 'CSS variables em globals.css',
+        },
+        custom: {
+            descricao: 'Design system proprio',
+            convencoes: ['Ver secao de convencoes abaixo'],
+            tokens: 'Ver secao de tokens abaixo',
+        },
+        none: {
+            descricao: 'Sem design system definido',
+            convencoes: ['A definir'],
+            tokens: 'A definir',
+        },
+    };
+    const ds = sistemas[design.system] || sistemas.none;
+    const coresSection = Object.keys(design.cores).filter(k => design.cores[k]).length
+        ? Object.entries(design.cores)
+            .filter(([, v]) => v)
+            .map(([k, v]) => `- ${k}: ${v}`)
+            .join('\n')
+        : `> Usar tokens padrao do ${ds.descricao}`;
+    const fontesSection = Object.keys(design.fontes).filter(k => design.fontes[k]).length
+        ? Object.entries(design.fontes)
+            .filter(([, v]) => v)
+            .map(([k, v]) => `- ${k}: ${v}`)
+            .join('\n')
+        : '> Usar fonte padrao do sistema';
+    const baseSection = design.system === 'base' ? `
+## Espacamento
+- Base: 4px
+- xs: 4px | sm: 8px | md: 16px | lg: 24px | xl: 32px | 2xl: 48px
+
+## Bordas
+- Radius padrao: 8px
+- Radius pequeno: 4px
+- Radius grande: 16px
+- Radius pill: 9999px
+
+## Sombras
+- sm: 0 1px 2px rgba(0,0,0,0.05)
+- md: 0 4px 6px rgba(0,0,0,0.07)
+- lg: 0 10px 15px rgba(0,0,0,0.10)
+` : '';
+    return `# Design — ${projeto}
+
+> A IA deve consultar este arquivo antes de criar ou modificar qualquer componente de UI.
+> Nunca usar cores, fontes ou espacamentos fora dos tokens definidos aqui.
+
+## Design System
+**${ds.descricao}**
+- Tokens: ${ds.tokens}
+
+## Cores
+${coresSection}
+
+## Fontes
+${fontesSection}
+
+## Convencoes
+${ds.convencoes.map((c) => `- ${c}`).join('\n')}
+${design.customizacoes ? `\n## Convencoes Customizadas\n${design.customizacoes}` : ''}
+${baseSection}
+## Regras para a IA
+- Nunca criar componente sem consultar este arquivo primeiro
+- Nunca hardcodar cores — usar sempre os tokens definidos acima
+- Nunca misturar design systems — usar apenas ${ds.descricao}
+- Novos componentes seguem as convencoes desta secao
+- Em caso de duvida sobre UI, perguntar ao dev antes de implementar
+${design.system === 'shadcn' ? '- Sempre usar cn() para mesclar classes condicionais\n- Preferir componentes do Shadcn antes de criar do zero' : ''}
+${design.system === 'tailwind' ? '- Preferir classes Tailwind a CSS customizado\n- Nao criar novas classes sem necessidade real' : ''}
+${design.system === 'base' ? `- Seguir tokens de espacamento e bordas definidos acima\n- ${design.baseTailwind ? 'Usar classes Tailwind mapeadas para os tokens' : 'Usar CSS variables definidas em globals.css'}` : ''}
+
+## Componentes Existentes
+> A IA deve atualizar esta secao conforme novos componentes sao criados
+
+| Componente | Localizacao | Descricao |
+|------------|-------------|-----------|
+|            |             |           |
+`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vireum-spec-cli",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "Spec Driven Development framework by Vireum Desenvolvimento",
   "main": "dist/index.js",
   "bin": {