yunpeng944/decision-board

O que decision-board faz?

SKILL.md da Anthropic para quadros de decisão interativos offline — items.json → HTML → usuário escolhe pendente/aceitar/rejeitar → shell heredoc → agente implementa → reprodução de diff. Zero dependências npm, apenas Node 18+.

Funcionamento

1. O agente lê um arquivo items.json contendo uma lista de decisões (cada uma com id, descricao, acao a ser executada, e talvez status inicial).
2. Gera uma página HTML estática usando um template embutido no SKILL.md.
3. O usuário abre o HTML no navegador e interage com os botões "Pendente", "Aceitar" ou "Rejeitar" para cada item.
4. Ao clicar em "Aceitar" ou "Rejeitar", a página gera um bloco de código shell heredoc com um comando específico (ex: aceitar.sh ou rejeitar.sh).
5. O agente detecta a saída e executa o heredoc, implementando as ações associadas.
6. Após a execução, o agente pode gerar um diff para mostrar as mudanças feitas.

Requisitos

• Node.js 18+ instalado.
• Nenhuma dependência npm externa.
• Agente compatível com SKILL.md (ex: Claude Code, Cursor).

Exemplo de items.json

[
  {
    "id": "1",
    "descricao": "Atualizar pacote lodash para v4.17.21",
    "acao": "npm install [email protected] --save",
    "status": "pendente"
  },
  {
    "id": "2",
    "descricao": "Corrigir bug na função de login",
    "acao": "sed -i 's/old_function/new_function/g' src/auth.js",
    "status": "pendente"
  }
]

Template HTML

O agente gera um arquivo HTML com um template como este:

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Quadro de Decisões</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 800px; margin: auto; padding: 20px; }
    .item { border: 1px solid #ddd; padding: 15px; margin: 10px 0; border-radius: 5px; }
    .pendente { background-color: #fff3cd; }
    .aceitar { background-color: #d4edda; }
    .rejeitar { background-color: #f8d7da; }
    button { margin-right: 5px; }
    #saida { white-space: pre-wrap; background: #f4f4f4; padding: 10px; margin-top: 20px; }
  </style>
</head>
<body>
  <h1>Quadro de Decisões</h1>
  <div id="itens"></div>
  <h2>Comandos a executar</h2>
  <pre id="saida">Nenhum comando ainda.</pre>
  <script>
    // Carrega items do JSON (embutido ou lido pelo agente)
    const items = /* items.json embutido aqui */;
    function render() {
      const container = document.getElementById('itens');
      container.innerHTML = '';
      items.forEach(item => {
        const div = document.createElement('div');
        div.className = `item ${item.status}`;
        div.innerHTML = `
          <p><strong>${item.id}</strong>: ${item.descricao}</p>
          <p>Ação: <code>${item.acao}</code></p>
          <button onclick="mudarStatus('${item.id}', 'pendente')">Pendente</button>
          <button onclick="mudarStatus('${item.id}', 'aceitar')">Aceitar</button>
          <button onclick="mudarStatus('${item.id}', 'rejeitar')">Rejeitar</button>
        `;
        container.appendChild(div);
      });
    }
    function mudarStatus(id, novoStatus) {
      const item = items.find(i => i.id === id);
      if (item) {
        item.status = novoStatus;
        render();
        gerarComandos();
      }
    }
    function gerarComandos() {
      const saida = document.getElementById('saida');
      let comandos = '';
      items.forEach(item => {
        if (item.status === 'aceitar') {
          comandos += `cat << 'EOF' | sh\n${item.acao}\nEOF\n`;
        } else if (item.status === 'rejeitar') {
          comandos += `echo "Rejeitado: ${item.id}"\n`;
        }
      });
      saida.textContent = comandos;
    }
    render();
  </script>
</body>
</html>

Fluxo de trabalho

1. O agente cria items.json com base na conversa ou em dados fornecidos.
2. O agente gera o HTML e informa o caminho (file:///...).
3. O usuário abre o HTML e faz suas escolhas.
4. O usuário copia os heredocs gerados e cola no terminal (ou o agente captura).
5. O agente executa os heredocs e aplica as mudanças.
6. O agente mostra um git diff para confirmar.

Dicas

• Use node -e "..." para gerar o HTML dinamicamente, se necessário.
• O nome do arquivo HTML pode ser decision-board.html.
• Os heredocs gerados são seguros para shell, pois usam << 'EOF' (sem expansão de variáveis).

Licença

MIT