heavenchenggong/3d-filament-tracker

O que 3d-filament-tracker faz?

Habilidade Claude Code: converta capturas de tela de pedidos de filamento para impressora 3D em um rastreador de inventário HTML interativo com duplo stepper (em uso / consumido).

Como usar

1. Forneça uma ou mais capturas de tela de pedidos de filamento (ex.: e-mail de confirmação, página de carrinho, nota fiscal).
2. A habilidade extrairá os dados relevantes: tipo de filamento (PLA, PETG, ABS, etc.), cor, quantidade (kg ou rolos) e fornecedor.
3. Será gerado um arquivo HTML auto-contido (tracker.html) que você pode abrir no navegador.
4. Na interface, cada filamento aparece com dois botões de stepper:
   • Em Uso: Incrementa o contador de filamento atualmente carregado na impressora.
   • Consumido: Incrementa o contador de filamento já utilizado em impressões.

Exemplo de saída

<!DOCTYPE html>
<html>
<head>
  <title>Rastreador de Filamento 3D</title>
  <style>
    body { font-family: Arial; padding: 20px; }
    .item { margin-bottom: 15px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
    .stepper { display: flex; gap: 10px; }
    .stepper button { width: 30px; height: 30px; font-size: 18px; }
  </style>
</head>
<body>
  <h1>Inventário de Filamento</h1>
  <div class="item">
    <div><strong>PLA - Vermelho</strong> (Fabricante X)</div>
    <div>Quantidade: 1 kg</div>
    <div class="stepper">
      <div>Em Uso: <span id="use-0">0</span> <button onclick="updateCount('use', 0, 1)">+</button><button onclick="updateCount('use', 0, -1)">-</button></div>
      <div>Consumido: <span id="cons-0">0</span> <button onclick="updateCount('cons', 0, 1)">+</button><button onclick="updateCount('cons', 0, -1)">-</button></div>
    </div>
  </div>
  <script>
    function updateCount(type, idx, delta) {
      const el = document.getElementById(type + '-' + idx);
      el.textContent = Math.max(0, parseInt(el.textContent) + delta);
    }
  </script>
</body>
</html>

Compatibilidade

• Agentes: Claude Code, Cursor, Codex, ou qualquer agente com suporte a skills no formato .md.
• Plataformas: Navegador moderno (Chrome, Firefox, Edge) para visualizar o HTML gerado.
• Formato de entrada: PNG, JPG, JPEG, ou PDF com capturas de tela.

Personalização

Você pode solicitar alterações como:

• "Adicione uma coluna de data de compra"
• "Mude as cores dos botões para verde e vermelho"
• "Inclua um totalizador de filamento em uso vs. consumido"