Como Eu Construí um Rastreador de Finanças Pessoais com Cursor e Taskmaster AI

Olha, eu quero ser direto: construir coisas com ferramentas de IA como o Cursor é uma aventura. É incrível – até que tudo vira um desastre.

Você começa com grandes sonhos, mas sem um plano, você está apenas cuidando de um robô esquecido.

Arquivos são perdidos, prompts se repetem como uma lista ruim de reprodução, e você está depurando a IA em vez de construir.

Então, eu peguei o Taskmaster AI, juntei com o Cursor e construí um Rastreador de Finanças Pessoais que realmente funciona.

Declaração: Não sou afiliado ao Taskmaster AI + Cursor, e este não é um artigo promocional. Estou apenas compartilhando minhas experiências pessoais com o Taskmaster AI + Cursor.

IA Sem um Plano Desmorona

O Cursor é uma fera. Ele codifica mais rápido do que eu consigo digitar. Mas, se você não lhe der um mapa, é como dar um marcador a uma criança – lindo até que as paredes fiquem arruinadas.

Tentei construir meu rastreador de forma preguiçosa uma vez. Dez minutos depois, ele esqueceu que a página de login existia, sobreescreveu meu painel e eu estava gritando na minha tela.

Projetos reais precisam de contexto, uma lista de tarefas, algo para manter a IA sob controle. Sem isso, você fica preso no purgatório dos prompts.

A Solução: Taskmaster AI + Cursor

Taskmaster AI é como o gerente de projeto rigoroso que eu nunca soube que precisava. Ele leva o Cursor pela mão e diz: “Foque, amigo”.

Você escreve um plano rápido (um PRD, se você for chique), divide em tarefas e deixa o Cursor solto – um passo de cada vez. Sem mais caos. Apenas uma construção limpa. Aqui está o que eu criei com essa dupla.

O Que Eu Construí: Um Rastreador de Finanças Pessoais

Eu fiz um MVP legítimo – nada louco, mas cumpre o que promete:

Login e banco de dados Superbase: Mantém seus dados seguros.

Registro de despesas: Adicione o que você gastou em tacos ou aluguel.

Controle orçamentário: Veja se você está quebrado até o dia 15.

Gráficos Chart.js: Linhas bonitas que gritam, “Pare de comprar café!”

Interface que não machuca: Funciona no seu celular ou laptop sem precisar piscar.

Todo construído no Cursor, com o Taskmaster sincronizando.

Configurando o Taskmaster (Não Pule Esta Parte)

Aqui está tudo que você precisa saber. É fácil, eu prometo.

Passo 1: Instale a Coisa

Abra seu terminal e digite:

# Instale globalmente
npm install -g task-master-ai

# OU instale localmente dentro do seu projeto
npm install task-master-ai

Boom, está no seu computador.

Passo 2: Comece

Vá para a pasta do seu projeto e execute:

# Se instalado globalmente
task-master init

# Se instalado localmente
npx task-master-init

Certifique-se de que seu package.json inclua "type": "module" já que este pacote usa módulos ES.
Assegure-se de usar Anthropic SDK versão 0.39.0 ou superior para compatibilidade.

# Inicialize um novo projeto
task-master init

# Analise um PRD e gere tarefas
task-master parse-prd your-prd.txt

# Liste todas as tarefas
task-master list

# Mostre a próxima tarefa a ser trabalhada
task-master next

# Gere arquivos de tarefa
task-master generate

Ele vai perguntar um nome (eu escolhi “MoneyPit”), uma descrição (“Rastrear meus gastos idiotas”) e uma versão (eu apenas pressionei Enter). Você recebe um arquivo de configuração e algum material inicial.

Passo 3: Chaves de API, Porque IA Não é de Graça

A configuração do script pode ser gerida usando variáveis de ambiente definidas em um arquivo .env localizado na raiz do projeto.

ANTHROPIC_API_KEY=sua_chave_secreta
PERPLEXITY_API_KEY=opcional_mas_legal

A Anthropic é o cérebro; a Perplexity é o Google com esteroides.

Passo 4: Inicie o Cursor

Abra seu projeto no Cursor. O Taskmaster está pronto para começar.

Por favor, use o comando task-master parse-prd para gerar tarefas a partir do meu PRD. O PRD está localizado em scripts/prd.txt.

Como o Cursor Sabe o Que Está Acontecendo

O Cursor não faz isso aleatoriamente. O Taskmaster escreve um README.md com frases-chave como:

• “Vá pelo PRD.md e faça tarefas”
• “Faça as tarefas já”
• “Em que fase estamos?”

Eu digitei “Vá pelo PRD.md e faça tarefas” e o Taskmaster transformou meus devaneios em uma lista de verificação. Mágica.

O PRD: Meu Esboço Bagunçado

Antes de tocar no código, eu rabisquei um PRD em PRD.md. Aqui está o resumo:

# PRD do Rastreador de Finanças

## Coisas que Faz
- Login com Supabase (sem senhas suspeitas)
- Adicionar despesas (tacos, $5, hoje)
- Rastrear orçamentos (não gaste $500 em jogos)
- Gráficos (desenhos bonitinhos)

## Quem Usa
- Eu: Todas as coisas
- Estranhos: Olhar, mas sem tocar

## Ferramentas
- Next.js (porque sou básico)
- Supabase (é meio gratuito)
- Chart.js (gráficos são a vida)

Eu disse ao Cursor: “Quebre isso em tarefas, cara.” O Taskmaster produziu uma lista: configuração de autenticação, formulário de despesas, lógica de orçamento. Dependências incluídas. Sem stress.

Construindo Sem Perder a Cabeça

Cada tarefa é um pequeno sandbox. Pegue o formulário de despesas. O Cursor vai:

• “A tarefa 2 está boa para você?”
• “Vou adicionar um formulário em /components/ExpenseForm.js.”
• “Veja isto:”

import { useState } from 'react';

export default function ExpenseForm({ onSubmit }) {
  const [amount, setAmount] = useState('');
  const [category, setCategory] = useState('');
  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Validação básica
    if (!amount || !category) return;
    if (Number(amount) <= 0) return;
    onSubmit({ 
      amount: Number(amount), 
      category: category.trim() 
    });
    
    setAmount('');
    setCategory('');
  };
  return (

  );
}

Eu assinto, ele salva. Feito. Sem sobrescritas aleatórias. Sem “Espere, o que eu estava fazendo?”.

Mudando Planos? Sem Problemas

No meio do caminho, decidi que queria alertas orçamentários. Editei o PRD.md, digitei “Regenerar tarefas” e o Taskmaster reorganizou tudo. Nova tarefa: adicionar isso:

export function checkBudgetAlert(expenses, budget) {
  if (!Array.isArray(expenses) || expenses.some(exp => typeof exp.amount !== 'number')) {
    throw new Error('As despesas devem ser um array de objetos com valores numéricos');
  }
  if (typeof budget !== 'number' || isNaN(budget)) {
    throw new Error('O orçamento deve ser um número válido');
  }
  const total = expenses.reduce((sum, exp) => sum + exp.amount, 0);
  if (total > budget) {
    return `Yo, você ultrapassou ${budget}!`;
  }
  return null;
}

O Cursor pegou isso como se nada tivesse acontecido. Sem reconfigurar todo o projeto.

Este não era um projeto de brinquedo. O app incluía:

• Segurança em nível de linha do Supabase (RLS)
• Páginas protegidas
• Filtragem inteligente
• Cache para análises

Como Você Pode Fazer Isso

1. Instale o Taskmaster: npm install -g taskmaster-ai
2. Adicione suas chaves de API ao .env
3. Rabisque um PRD
4. Conte ao Cursor o que está acontecendo
5. Veja o Taskmaster dar as ordens

Aqui está o repositório do GitHub

Agora vá construir algo. Ou não. Eu não sou sua mãe.