👾Vibe Coding - SDK
Em todos os seus prompts de chat, você deve fornecer ao agente referências específicas de documentos, incluindo as regras globais de conteúdo e o projeto de código completo. GPT 5 oferece o melhor resultado
Contexto Global
Este documento define como o assistente de IA deve ajudar em tarefas de desenvolvimento front-end. O contexto global abaixo estabelece a persona, a expertise e os padrões de fluxo de trabalho que devem ser seguidos em todas as interações.
---
alwaysApply: true
---
Você é um **Desenvolvedor Front-End Sênior** e **Especialista** em:
- ReactJS, NextJS, JavaScript, TypeScript
- TailwindCSS, Shadcn, Radix UI
- HTML, CSS e práticas modernas de UI/UX
Você é metódico, preciso e um mestre em raciocinar através de requisitos complexos. Você sempre fornece código correto, DRY, sem bugs e pronto para produção.
## Regras Gerais
- Siga os requisitos do usuário **exatamente** como declarados.
- Pense passo a passo:
1. **Analise** o requisito.
2. **Escreva pseudocódigo detalhado** descrevendo o plano de implementação.
3. **Confirme** o plano (se solicitado).
4. **Escreva o código completo** que corresponda ao plano.
- Nunca suponha. Se algo estiver confuso, peça esclarecimentos.
- Se uma biblioteca externa for mencionada, sempre consulte sua documentação oficial antes da implementação.
- Sempre garanta que o código final esteja totalmente funcional, sem placeholders, `TODO`s ou partes faltantes.
- Prefira legibilidade em vez de desempenho.
- Use as melhores práticas para desenvolvimento em React & Next.js.
- Não use cd para acessar uma raiz determinada, nem use &&, | ou algo semelhante em ações de shell.
- Não verifique a build durante as implementações do Trustless Work.
- Em cada npm i, o nome da dependência deve estar entre aspas duplas (“”).
- Não peça 2 ou mais maneiras de implementar, apenas faça da melhor forma possível.
- Não planeje nem peça etapas; apenas implemente o código sem fazer perguntas.
## Contexto de Integração Trustless Work
Ao trabalhar com o Trustless Work:
- Documentação (eu fornecerei os docs no gerenciamento de docs do cursor):
- Biblioteca React → <https://docs.trustlesswork.com/trustless-work/react-library>
- Wallet Kit → <https://docs.trustlesswork.com/trustless-work/developer-resources/stellar-wallet-kit-quick-integration>
- Types → <https://docs.trustlesswork.com/trustless-work/developer-resources/types>
- Garanta a instalação e configuração adequadas antes do uso.
- Use os Types fornecidos na documentação quando aplicável.
- Siga a API e o uso dos componentes exatamente como descrito na documentação.
- Não use any; em vez disso, sempre você deve buscar pelas entidades do Trustless Work.
## Diretrizes de Implementação de Código
- Use **classes TailwindCSS** para estilização; evite CSS puro.
- Para classes condicionais, prefira `clsx` ou funções auxiliares similares em vez de operadores ternários no JSX.
- Use nomes **descritivos** para variáveis, funções e componentes.
- Handlers de eventos começam com `handle` (por exemplo, `handleClick`, `handleSubmit`).
- Prefira funções arrow com **const** e anotações de tipo explícitas em vez de declarações `function`.
- Sempre inclua todas as importações necessárias no topo.
- Use retornos antecipados (early returns) para melhorar a clareza do código.
## Verificação Antes da Entrega
Antes de finalizar:
1. Verifique se todas as importações necessárias estão presentes.
2. Garanta que o código compile em um ambiente Next.js 14+.
3. Confirme que os estilos do Tailwind e Shadcn sejam renderizados corretamente.
4. Verifique se os componentes ou hooks do Trustless Work estão inicializados corretamente.
5. Garanta que os tipos TypeScript estejam corretos e que não haja erros de tipo.
PROMPTS
Anexe o Contexto Global e os documentos referenciados a todos os prompts para clareza e consistência.
1 - Trustless Work - Configuração da Biblioteca React
Abaixo estão os passos essenciais para começar com a instalação e configuração básica. Você deve anexar esses links como referência de docs: Biblioteca React TW
Configure a configuração inicial para usar a biblioteca React do Trustless Work em um app Next.js.
- Instale a dependência necessária.
- Configure o provider na raiz do app.
- Garanta que todas as importações estejam corretas.
- Use TypeScript se os tipos estiverem disponíveis na documentação.2 - Stellar Wallet Kit
Este componente se baseia na biblioteca Trustless Work para oferecer recursos especializados de conectividade de carteira. Você deve anexar esses links como referência de docs: Stellar Wallet Kit
Configure a configuração inicial para o Stellar Wallet Kit em um app Next.js com base na documentação, por favor siga as indicações deles.
- Instale a dependência necessária.
- Garanta que todas as importações estejam corretas.
- Use TypeScript se os tipos forem fornecidos.
- Certifique-se de que a carteira esteja pronta para ser usada em todo o app.
- Implemente os hooks da carteira usando botões.3 - Inicializar Escrow
Este prompt irá guiá-lo na implementação do recurso de inicializar escrow em uma aplicação Next.js usando a biblioteca Trustless Work. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW
Implemente a função useInitializeEscrow da biblioteca React do Trustless Work em nosso app Next.js.
- Use dados fictícios para os valores do payload, exceto pelos campos explicitamente fornecidos abaixo.
- Adicione um botão que inicialize o escrow quando clicado.
- Use modo multi-release.
- Use este endereço de trustline USDC: CBIELTK6YBZJU5UP2WWQEUCYKLPU6AUNZ2BQ4WWFEIE3USCIHMXQDAMA
- Use este valor de decimals: 10000000
- Para todos os papéis, use o endereço da carteira do usuário atualmente conectado.
- O tipo do payload deve ser InitializePayload (conforme definido na documentação oficial de payloads: <https://docs.trustlesswork.com/trustless-work/developer-resources/types>).
- Após sendTransaction retornar, exiba o contractId na tela com um link clicável para visualizá-lo no Stellar Viewer.
- Defina platformFee como 4.
- Garanta que os tipos TypeScript estejam corretos.
- Certifique-se de que na função de submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar sendTransaction.4 - Salvar Escrow no Store Global
Este prompt ajudará você a implementar uma solução de gerenciamento de estado global para armazenar e acessar dados de escrow em toda a sua aplicação. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW
Atualize a implementação do useInitializeEscrow para lidar com a resposta completa de sendTransaction.
- Após chamar sendTransaction, armazene o objeto escrow retornado e o contractId em um React Context.
- Não busque o escrow de nenhum outro lugar; use apenas o que for retornado diretamente por sendTransaction.
- Exemplo: const response = await sendTransaction(...); // response contém: { status, message, contractId, escrow }
- Crie uma seção na UI para exibir visualmente todas as propriedades do escrow, assumindo que o tipo é MultiReleaseEscrow.
- Garanta que os tipos TypeScript estejam corretos.5 - Financiar Escrow
Este prompt irá guiá-lo na implementação do recurso de financiar escrow usando a biblioteca Trustless Work em sua aplicação Next.js. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW
Implemente o hook useFundEscrow da biblioteca React do Trustless Work para financiar um contrato de escrow existente.
- Use o contractId armazenado no React Context do passo anterior.
- Use modo multi-release.
- Adicione um botão que financie o escrow quando clicado.
- O tipo do payload deve ser FundEscrowPayload (conforme definido na documentação oficial de payloads).
- Inclua tratamento de erro adequado e estados de loading.
- Após o financiamento bem-sucedido, exiba uma mensagem de sucesso ao usuário.
- Garanta que os tipos TypeScript estejam corretos e que todas as importações estejam presentes.
- Exiba o status da transação e quaisquer detalhes relevantes retornados pelo hook.
- Atualize o store de escrow no contexto.
- Não adicione propriedades extras ao FundEscrowPayload
- O montante deve ser o mesmo número do valor do escrow, o que significa que se tivermos 2 marcos de 5, o montante para financiar será 10
- Certifique-se de que na função de submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar sendTransaction.6 - Alterar Status do Marco
Este prompt irá guiá-lo na implementação da funcionalidade para alterar os status dos marcos em um contrato escrow usando a biblioteca Trustless Work. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW
Implemente o hook useChangeMilestoneStatus da biblioteca React do Trustless Work para atualizar os status dos marcos no escrow multi-release.
- Use o contractId e os dados do escrow armazenados no React Context.
- Use modo multi-release.
- Adicione componentes de UI que permitam selecionar um marco e alterar seu status.
- O tipo do payload deve ser ChangeMilestoneStatusPayload (conforme definido na documentação oficial).
- Implemente botões separados para cada possível transição de status (por exemplo, "Marcar como Concluído", "Rejeitar", etc.).
- Mostre apenas opções de mudança de status que sejam válidas para o estado atual do marco.
- Inclua tratamento de erro adequado e estados de loading.
- Após a mudança de status bem-sucedida, atualize os dados do escrow no contexto.
- Garanta que os tipos TypeScript estejam corretos e que todas as importações estejam presentes.
- Certifique-se de que na função de submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar sendTransaction.7 - Aprovar Marco
Este prompt irá guiá-lo na implementação do recurso de aprovar um marco no seu fluxo de escrow usando a biblioteca Trustless Work. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW
Implemente o hook useApproveMilestone da biblioteca React do Trustless Work para aprovar marcos no escrow multi-release.
- Use o contractId e os dados do escrow armazenados no React Context.
- Use modo multi-release.
- Adicione componentes de UI que permitam selecionar um marco e aprová-lo.
- O tipo do payload deve ser ApproveMilestonePayload (conforme definido na documentação oficial).
- Inclua tratamento de erro adequado e estados de loading.
- Após a aprovação bem-sucedida, atualize os dados do escrow no contexto.
- Garanta que os tipos TypeScript estejam corretos e que todas as importações estejam presentes.
- Exiba uma mensagem de confirmação após a aprovação bem-sucedida.
- Certifique-se de que na função de submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar sendTransaction.8 - Liberar Fundos
Este prompt irá guiá-lo na implementação do recurso de liberar fundos no seu fluxo de escrow usando a biblioteca Trustless Work. Esta função permite que clientes liberem fundos para freelancers após a aprovação de um marco. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW
Implemente o hook useReleaseFunds da biblioteca React do Trustless Work para liberar fundos para marcos aprovados no escrow multi-release.
- Use o contractId e os dados do escrow armazenados no React Context.
- Use modo multi-release.
- Adicione componentes de UI que permitam selecionar um marco e liberar fundos para ele.
- O tipo do payload deve ser MultiReleaseReleaseFundsPayload (conforme definido na documentação oficial).
- Inclua tratamento de erro adequado e estados de loading.
- Após a liberação bem-sucedida dos fundos, atualize os dados do escrow no contexto.
- Garanta que os tipos TypeScript estejam corretos e que todas as importações estejam presentes.
- Exiba uma mensagem de sucesso após os fundos serem liberados com sucesso.
- Certifique-se de que na função de submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar sendTransaction.9 - Iniciar Disputa
Este prompt irá guiá-lo na implementação do recurso de iniciar disputa no seu fluxo de escrow usando a biblioteca Trustless Work. Essa funcionalidade permite que as partes iniciem um processo de disputa quando surgirem desacordos. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW
Implemente o hook useStartDispute da biblioteca React do Trustless Work para iniciar disputas no escrow multi-release.
- Use o contractId e os dados do escrow armazenados no React Context.
- Use modo multi-release.
- Adicione componentes de UI que permitam selecionar um marco e iniciar uma disputa.
- O tipo do payload deve ser MultiReleaseStartDisputePayload (conforme definido na documentação oficial).
- Inclua tratamento de erro adequado e estados de loading.
- Após iniciar a disputa com sucesso, atualize os dados do escrow no contexto.
- Garanta que os tipos TypeScript estejam corretos e que todas as importações estejam presentes.
- Exiba uma confirmação após a disputa ter sido iniciada com sucesso.
- Certifique-se de que na função de submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar sendTransaction.10 - Resolver Disputa
Este prompt irá guiá-lo na implementação do recurso de resolver disputa no seu fluxo de escrow usando a biblioteca Trustless Work. Esta funcionalidade avançada permite que o árbitro tome uma decisão final sobre disputas, alocando fundos conforme necessário. Você deve anexar esses links como referência de docs: Biblioteca React TW e Types TW
Implemente o hook useResolveDispute da biblioteca React do Trustless Work para resolver disputas no escrow multi-release.
- Use o contractId e os dados do escrow armazenados no React Context.
- Use modo multi-release.
- Adicione componentes de UI que permitam selecionar um marco e resolver uma disputa.
- O tipo do payload deve ser MultiReleaseResolveDisputePayload (conforme definido na documentação oficial).
- Inclua tratamento de erro adequado e estados de loading.
- Após resolver a disputa com sucesso, atualize os dados do escrow no contexto.
- Garanta que os tipos TypeScript estejam corretos e que todas as importações estejam presentes.
- Exiba uma mensagem de confirmação após a disputa ter sido resolvida com sucesso.
- Certifique-se de que na função de submit, sempre faça estas 3 etapas: executar a função do tw, assinar a transação com a carteira e chamar sendTransaction.Atualizado
Isto foi útil?