Compilado de recursos e prompts prontos para uso com IA e ferramentas…

INEMA

promptadvisers.notion.site ↗

youtube.com/live/1bDdnXiNOig ↗

m tratamento de erros, estados de carregamento e instruções claras de configuração.

Segurança⌗

mento

Verifique status consultando:
- [TABELA/CAMPO_DE_STATUS]
- Pedidos/assinaturas concluídas no banco
- Liberar recursos somente com confirmação via webhook

URLs de Sucesso/Cancelamento

URL de sucesso: [SEU_CAMINHO_DE_SUCESSO]
URL de cancelamento: [SEU_CAMINHO_DE_CANCELAMENTO]

Importante:⌗

Use mode: 'payment' para pagamentos únicos ou mode: 'subscription' para recorrentes
Sempre verifique pagamento via webhook, nunca confie no lado cliente
Use supabase.functions.invoke() para chamar funções edge
Inclua cabeçalhos CORS adequados nas funções
Armazene IDs de cliente do Stripe para uso futuro

Autenticação com Google⌗

Preciso implementar login com Google usando Supabase em React. Criar sistema completo de autenticação conforme especificações: ### ESTRUTURA DO PROJETO: #### Configuração de Ambiente * Criar `.env.local` na raiz * Adicionar `VITE_SUPABASE_URL` e `VITE_SUPABASE_ANON_KEY` * Garantir `.env.local` no `.gitignore` * Exibir erro claro se variáveis estiverem ausentes #### Configuração do Cliente Supabase * Criar `src/lib/supabase.ts` com leitura de variáveis do ambiente * Validar se credenciais existem, exibir mensagens de erro úteis #### Implementação do Contexto de Autenticação * Criar `AuthContext` completo com TypeScript * Métodos: login Google, email/senha, cadastro e logout * Manter estado da sessão entre atualizações da página * Redirecionar após login para `window.location.origin` * Supabase deve tratar callback do OAuth automaticamente * Mostrar estados de carregamento durante verificação #### Sistema de Verificação de Setup * Criar componente exclusivo de desenvolvimento que: * Mostra status de conexão com Supabase * Aponta erros de configuração * Exibe checklist com passos obrigatórios #### Guia de Primeira Execução * Criar guia que aparece na primeira vez (dispensável) com: * Passo a passo para: * Configurar provedores no Supabase * Criar OAuth do Google no Google Cloud Console * URLs exigidas para origens JavaScript autorizadas * URLs exigidas para redirecionamento autorizado * Configurações de URL no Supabase * Armazenar estado de exibição no localStorage * Exibir exemplo de formato das variáveis de ambiente ### CONFIGURAÇÃO DE GOOGLE OAUTH: **Origens JavaScript autorizadas:** * URL do projeto Supabase * localhost:5173 ↗ (desenvolvimento) * URL final da aplicação (ex: Netlify) **URIs de redirecionamento autorizados:** * `/auth/v1/callback` do Supabase * localhost:5173 ↗ * URL final (sem /auth/callback) ### CONFIGURAÇÃO NO SUPABASE: * Habilitar provedor Google em Supabase * Definir URL do site como a URL final * Adicionar URL de redirecionamento * Copiar URL do projeto e anon key para `.env.local` ### CONFIGURAÇÃO DE DEPLOYMENT: * Criar arquivo de configuração para Netlify com: * Comando de build * Roteamento SPA (todas rotas para `index.html`) * Versão do Node.js 18 ### EXPERIÊNCIA DO USUÁRIO E TRATAMENTO DE ERROS: * Exibir estado de carregamento durante login * Exibir erros de autenticação com clareza * Redirecionar usuários autenticados automaticamente * Limpar parâmetros da URL após callback OAuth * Adicionar logs no console para debug ### NOTAS IMPORTANTES: * NÃO criar rota personalizada `/auth/callback` * Usar variáveis de ambiente para todas configurações sensíveis * Redirecionamento do OAuth deve ir para a página inicial * Usar TypeScript corretamente em todos métodos de auth * Garantir que `AuthContext` envolva todo o app * Tratar condição de corrida entre callback OAuth e sessão ### CHECKLIST DE VALIDAÇÃO: Criar componente ou documento com lembrete de: 1. Criar e configurar `.env.local` 2. Configurar OAuth Google com todas URLs exigidas 3. Configurar autenticação do Supabase 4. Testar localmente antes do deploy 5. Atualizar URLs do Google OAuth após deploy 6. Verificar se todas URLs coincidem exatamente (sem barras extras) Implementação deve estar pronta para produção, com bo Paga Resumo da Entrevista do Mark com Bolt.new ## Folha de Cola de Prompting ## Configuração de Design de UX ## Prompts Relacionados ao Supabase **Criação de Arquivo de Ambiente Supabase** **Criação de Tabela no Supabase** **Configuração de Consulta em Tempo Real** **Correção de Erros Persistentes** ## Prompts Relacionados ao Stripe **Integração Stripe** **Integração Stripe (Detalhada)**

Quero integrar o Stripe Checkout para um \[PAGAMENTO ÚNICO / ASSINATURA] de \[PREÇO]. Quando os usuários clicarem no botão "\[TEXTO\_DO\_BOTÃO]", devem ser redirecionados para a página de checkout do Stripe. ### Requisitos: 1. **Configuração de Ambiente** * Crie `.env.local` com: * `VITE_STRIPE_PUBLISHABLE_KEY` * `STRIPE_SECRET_KEY` (para funções edge) * `STRIPE_WEBHOOK_SECRET` (para webhooks) * Mostre mensagens de erro claras se variáveis estiverem ausentes 2. **Fluxo de Pagamento** * Use o checkout hospedado do Stripe (NÃO formulários personalizados) * Crie função edge `stripe-checkout` que: * Cria sessão de checkout em modo `[pagamento/assinatura]` * Aceita ID do produto como parâmetro * Retorna URL do checkout * Usa `STRIPE_SECRET_KEY` do ambiente * Ao clicar no botão, chamar função edge e redirecionar 3. **Manipulador de Webhook** * Crie função edge `stripe-webhook` que: * Verifica assinatura do webhook usando `STRIPE_WEBHOOK_SECRET` * Atualiza status de pagamento do usuário ao receber evento `checkout.session.completed` * Atualiza campos relevantes no banco de dados: \[ESPECIFICAR] * Trata pagamentos únicos e assinaturas 4. Status de ## Guia de Técnicas de Criação de Prompts para IA ### 1. Defina um Papel Específico para a IA Atribuir um papel claro à IA ajuda a moldar suas respostas de forma mais precisa.([LinkedIn][1]) * **Exemplo:** "Você é um nutricionista com 10 anos de experiência especializado em dietas veganas. Avalie minha alimentação atual e sugira melhorias."([[superside.com](superside.com ↗)][2]) ### 2. Forneça Contexto Detalhado Incluir informações relevantes no prompt permite que a IA compreenda melhor a situação e forneça respostas mais adequadas.([[superhuman.ai](superhuman.ai ↗)][3]) * **Exemplo:** "Estou preparando uma apresentação para estudantes do ensino médio sobre energias renováveis. Explique os principais tipos de energias renováveis de forma simples e envolvente."([[superside.com](superside.com ↗)][2]) ### 3. Utilize Exemplos (Few-Shot Prompting) Apresentar exemplos no prompt pode orientar a IA a seguir um padrão desejado.([LinkedIn][1]) * **Exemplo:** "Aqui está um exemplo de resumo de artigo: \[exemplo]. Agora, resuma o seguinte artigo mantendo o mesmo estilo." ### 4. Especifique o Formato de Saída Desejado Indicar claramente o formato esperado da resposta ajuda a IA a estruturar sua saída conforme suas necessidades. * **Exemplo:** "Liste os prós e contras de trabalhar remotamente em formato de tabela." ### 5. Divida Tarefas Complexas em Etapas Para tarefas complexas, solicitar que a IA aborde o problema passo a passo pode melhorar a clareza e a precisão das respostas. * **Exemplo:** "Explique o processo de fotossíntese passo a passo, começando pela absorção de luz solar." ### 6. Solicite Perguntas Clarificadoras Se o prompt inicial for amplo, peça à IA que faça perguntas para refinar a compreensão antes de responder. * **Exemplo:** "Antes de fornecer uma estratégia de marketing para minha empresa, que informações adicionais você precisa?" ### 7. Adote um Tom ou Estilo Específico Indicar o tom ou estilo desejado pode alinhar a resposta da IA ao público-alvo ou à finalidade do conteúdo. * **Exemplo:** "Escreva um artigo sobre economia circular com um tom otimista e inspirador." ### 8. Imponha Restrições ou Limitações Estabelecer limites pode ajudar a IA a focar em aspectos específicos do tópico. * **Exemplo:** "Forneça uma análise SWOT da empresa X, focando apenas nos aspectos internos." --- **Dicas Adicionais:** * **Iteração:** Não hesite em refinar seus prompts com base nas respostas recebidas para obter resultados mais precisos.([LinkedIn][1]) * **Clareza:** Seja claro e específico em seus pedidos para evitar ambiguidades.([[superhuman.ai](superhuman.ai ↗)][3]) * **Feedback:** Forneça feedback à IA sobre suas respostas para melhorar interações futuras. 1