👾Vibe Coding - SDK
En todos tus prompts de chat, debes proporcionar al agente referencias de documentos específicas, incluyendo las reglas de contenido global y el proyecto completo de código. GPT 5 da el mejor resultado
Contexto Global
Este documento define cómo el asistente de IA debe ayudar con tareas de desarrollo front-end. El contexto global a continuación establece la persona, la experiencia y los patrones de flujo de trabajo que deben seguirse en todas las interacciones.
---
alwaysApply: true
---
Eres un **Desarrollador Front-End Senior** y **Experto** en:
- ReactJS, NextJS, JavaScript, TypeScript
- TailwindCSS, Shadcn, Radix UI
- HTML, CSS y las mejores prácticas modernas de UI/UX
Eres metódico, preciso y un maestro en razonamiento sobre requisitos complejos. Siempre proporcionas código correcto, DRY, sin errores y listo para producción.
## Reglas Generales
- Sigue los requisitos del usuario **exactamente** como se indican.
- Piensa paso a paso:
1. **Analiza** el requisito.
2. **Escribe pseudocódigo detallado** describiendo el plan de implementación.
3. **Confirma** el plan (si se solicita).
4. **Escribe código completo** que coincida con el plan.
- Nunca adivines. Si algo no está claro, pide aclaraciones.
- Si se menciona una biblioteca externa, siempre refiérete a su documentación oficial antes de la implementación.
- Asegúrate siempre de que el código final sea totalmente funcional, sin marcadores de posición, `TODO`s ni partes faltantes.
- Prefiere la legibilidad sobre el rendimiento.
- Usa las mejores prácticas para el desarrollo con React y Next.js.
- No uses cd para acceder a una raíz determinada, ni uses &&, | o algo similar en acciones de shell.
- No verifiques la compilación durante las implementaciones de Trustless Work.
- En cada npm i, el nombre de la dependencia debe estar entre comillas dobles (“”).
- No pidas 2 o más formas de implementar, simplemente hazlo de la mejor manera posible.
- No planees ni pidas pasos; simplemente implementa el código sin hacer preguntas.
## Contexto de Integración de Trustless Work
Al trabajar con Trustless Work:
- Documentación (te proporcionaré los docs en la gestión de docs del 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>
- Tipos → <https://docs.trustlesswork.com/trustless-work/developer-resources/types>
- Asegura la instalación y configuración adecuadas antes de su uso.
- Usa los Types proporcionados en la documentación cuando sea aplicable.
- Sigue la API y el uso de componentes exactamente como se describe en los docs.
- No uses any, en su lugar siempre debes buscar las entidades de Trustless Work.
## Directrices de Implementación de Código
- Usa **clases de TailwindCSS** para el estilo; evita CSS simple.
- Para clases condicionales, prefiere `clsx` u funciones auxiliares similares en lugar de operadores ternarios en JSX.
- Usa nombres **descriptivos** para variables, funciones y componentes.
- Los manejadores de eventos comienzan con `handle` (p. ej., `handleClick`, `handleSubmit`).
- Prefiere funciones arrow con **const** y anotaciones de tipo explícitas sobre declaraciones `function`.
- Incluye siempre todas las importaciones necesarias en la parte superior.
- Usa retornos tempranos para mejorar la claridad del código.
## Verificación Antes de la Entrega
Antes de finalizar:
1. Comprueba que todas las importaciones requeridas estén presentes.
2. Asegura que el código compile en un entorno Next.js 14+.
3. Confirma que los estilos de Tailwind y Shadcn se rendericen correctamente.
4. Verifica que los componentes o hooks de Trustless Work estén inicializados correctamente.
5. Asegura que los tipos de TypeScript sean correctos y que no haya errores de tipo.
PROMPTS
Adjunta el Contexto Global y los documentos referenciados a todos los prompts para mayor claridad y coherencia.
1 - Trustless Work - Configuración de la Biblioteca React
A continuación están los pasos esenciales para empezar con la instalación y configuración básica. Debes adjuntar estos enlaces como referencia de docs: Biblioteca React TW
Configura la configuración inicial para usar la biblioteca React de Trustless Work en una app Next.js.
- Instala la dependencia requerida.
- Configura el provider en la raíz de la app.
- Asegura que todas las importaciones sean correctas.
- Usa TypeScript si los tipos están disponibles en la documentación.2 - Stellar Wallet Kit
Este componente se basa en la biblioteca base de Trustless Work para ofrecer funcionalidades especializadas de conectividad de wallets. Debes adjuntar estos enlaces como referencia de docs: Stellar Wallet Kit
Configura la instalación inicial para el Stellar Wallet Kit en una app Next.js según la documentación, por favor sigue sus indicaciones.
- Instala la dependencia requerida.
- Asegura que todas las importaciones sean correctas.
- Usa TypeScript si los tipos están proporcionados.
- Asegúrate de que la wallet esté lista para usarse en toda la app.
- Implementa los hooks de la wallet usando botones.3 - Inicializar Escrow
Este prompt te guiará para implementar la funcionalidad de inicializar escrow en una aplicación Next.js usando la biblioteca Trustless Work. Debes adjuntar estos enlaces como referencia de docs: Biblioteca React TW y Types TW
Implementa la función useInitializeEscrow de la biblioteca React de Trustless Work en nuestra app Next.js.
- Usa datos mock para los valores del payload, excepto por los campos proporcionados explícitamente a continuación.
- Añade un botón que inicialice el escrow al hacer clic.
- Usa el modo multi-release.
- Usa esta dirección de trustline USDC: CBIELTK6YBZJU5UP2WWQEUCYKLPU6AUNZ2BQ4WWFEIE3USCIHMXQDAMA
- Usa este valor de decimales: 10000000
- Para todos los roles, usa la dirección de la wallet del usuario actualmente conectado.
- El tipo de payload debe ser InitializePayload (según se define en la documentación oficial de payloads: <https://docs.trustlesswork.com/trustless-work/developer-resources/types>).
- Después de que sendTransaction devuelva, muestra el contractId en pantalla con un enlace clicable para verlo en Stellar Viewer.
- Establece platformFee en 4.
- Asegura que los tipos de TypeScript sean correctos.
- Asegúrate de que en la función de envío siempre se realicen estos 3 pasos: ejecutar la función desde tw, firmar la transacción con la wallet y sendTransaction.4 - Guardar Escrow en el Store Global
Este prompt te ayudará a implementar una solución de gestión de estado global para almacenar y acceder a los datos de escrow en toda tu aplicación. Debes adjuntar estos enlaces como referencia de docs: Biblioteca React TW y Types TW
Actualiza la implementación de useInitializeEscrow para manejar la respuesta completa de sendTransaction.
- Después de llamar a sendTransaction, almacena el objeto escrow devuelto y el contractId en un React Context.
- No obtengas el escrow desde ningún otro lugar; usa únicamente el devuelto directamente por sendTransaction.
- Ejemplo: const response = await sendTransaction(...); // response contiene: { status, message, contractId, escrow }
- Crea una sección en la UI para mostrar visualmente todas las propiedades del escrow, asumiendo que el tipo es MultiReleaseEscrow.
- Asegura que los tipos de TypeScript sean correctos.5 - Financiar Escrow
Este prompt te guiará para implementar la funcionalidad de financiar el escrow usando la biblioteca Trustless Work en tu aplicación Next.js. Debes adjuntar estos enlaces como referencia de docs: Biblioteca React TW y Types TW
Implementa el hook useFundEscrow de la biblioteca React de Trustless Work para financiar un contrato de escrow existente.
- Usa el contractId almacenado en el React Context del paso anterior.
- Usa el modo multi-release.
- Añade un botón que financie el escrow al hacer clic.
- El tipo de payload debe ser FundEscrowPayload (según se define en la documentación oficial de payloads).
- Incluye un manejo de errores adecuado y estados de carga.
- Después de un financiamiento exitoso, muestra un mensaje de éxito al usuario.
- Asegura que los tipos de TypeScript sean correctos y que todas las importaciones estén presentes.
- Muestra el estado de la transacción y cualquier detalle relevante devuelto por el hook.
- Actualiza el store de escrow en el contexto.
- No añadas propiedades extra al FundEscrowPayload
- La cantidad debe ser el mismo número del monto del escrow, lo que significa que si tenemos 2 hitos de 5, la cantidad para financiar será 10
- Asegúrate de que en la función de envío siempre se realicen estos 3 pasos: ejecutar la función desde tw, firmar la transacción con la wallet y sendTransaction.6 - Cambiar Estado del Hito
Este prompt te guiará para implementar la funcionalidad de cambiar estados de hitos en un contrato escrow usando la biblioteca Trustless Work. Debes adjuntar estos enlaces como referencia de docs: Biblioteca React TW y Types TW
Implementa el hook useChangeMilestoneStatus de la biblioteca React de Trustless Work para actualizar los estados de hitos en el escrow multi-release.
- Usa el contractId y los datos del escrow almacenados en el React Context.
- Usa el modo multi-release.
- Añade componentes de UI que permitan seleccionar un hito y cambiar su estado.
- El tipo de payload debe ser ChangeMilestoneStatusPayload (según se define en la documentación oficial).
- Implementa botones separados para cada posible transición de estado (por ejemplo, "Marcar como Completado", "Rechazar", etc.).
- Sólo muestra opciones de cambio de estado que sean válidas para el estado actual del hito.
- Incluye un manejo de errores adecuado y estados de carga.
- Después de un cambio de estado exitoso, actualiza los datos del escrow en el contexto.
- Asegura que los tipos de TypeScript sean correctos y que todas las importaciones estén presentes.
- Asegúrate de que en la función de envío siempre se realicen estos 3 pasos: ejecutar la función desde tw, firmar la transacción con la wallet y sendTransaction.7 - Aprobar Hito
Este prompt te guiará para implementar la funcionalidad de aprobar un hito en tu flujo de trabajo de escrow usando la biblioteca Trustless Work. Debes adjuntar estos enlaces como referencia de docs: Biblioteca React TW y Types TW
Implementa el hook useApproveMilestone de la biblioteca React de Trustless Work para aprobar hitos en el escrow multi-release.
- Usa el contractId y los datos del escrow almacenados en el React Context.
- Usa el modo multi-release.
- Añade componentes de UI que permitan seleccionar un hito y aprobarlo.
- El tipo de payload debe ser ApproveMilestonePayload (según se define en la documentación oficial).
- Incluye un manejo de errores adecuado y estados de carga.
- Después de una aprobación exitosa, actualiza los datos del escrow en el contexto.
- Asegura que los tipos de TypeScript sean correctos y que todas las importaciones estén presentes.
- Muestra un mensaje de confirmación después de una aprobación exitosa.
- Asegúrate de que en la función de envío siempre se realicen estos 3 pasos: ejecutar la función desde tw, firmar la transacción con la wallet y sendTransaction.8 - Liberar Fondos
Este prompt te guiará para implementar la funcionalidad de liberar fondos en tu flujo de trabajo de escrow usando la biblioteca Trustless Work. Esta función permite a los clientes liberar fondos a los freelancers después de la aprobación de un hito. Debes adjuntar estos enlaces como referencia de docs: Biblioteca React TW y Types TW
Implementa el hook useReleaseFunds de la biblioteca React de Trustless Work para liberar fondos de hitos aprobados en el escrow multi-release.
- Usa el contractId y los datos del escrow almacenados en el React Context.
- Usa el modo multi-release.
- Añade componentes de UI que permitan seleccionar un hito y liberar fondos para el mismo.
- El tipo de payload debe ser MultiReleaseReleaseFundsPayload (según se define en la documentación oficial).
- Incluye un manejo de errores adecuado y estados de carga.
- Después de una liberación de fondos exitosa, actualiza los datos del escrow en el contexto.
- Asegura que los tipos de TypeScript sean correctos y que todas las importaciones estén presentes.
- Muestra un mensaje de éxito después de que los fondos se liberen correctamente.
- Asegúrate de que en la función de envío siempre se realicen estos 3 pasos: ejecutar la función desde tw, firmar la transacción con la wallet y sendTransaction.9 - Iniciar Disputa
Este prompt te guiará para implementar la funcionalidad de iniciar una disputa en tu flujo de trabajo de escrow usando la biblioteca Trustless Work. Esta funcionalidad permite a las partes iniciar un proceso de disputa cuando surgen desacuerdos. Debes adjuntar estos enlaces como referencia de docs: Biblioteca React TW y Types TW
Implementa el hook useStartDispute de la biblioteca React de Trustless Work para iniciar disputas en el escrow multi-release.
- Usa el contractId y los datos del escrow almacenados en el React Context.
- Usa el modo multi-release.
- Añade componentes de UI que permitan seleccionar un hito e iniciar una disputa.
- El tipo de payload debe ser MultiReleaseStartDisputePayload (según se define en la documentación oficial).
- Incluye un manejo de errores adecuado y estados de carga.
- Después de iniciar correctamente una disputa, actualiza los datos del escrow en el contexto.
- Asegura que los tipos de TypeScript sean correctos y que todas las importaciones estén presentes.
- Muestra una confirmación después de que la disputa haya sido iniciada con éxito.
- Asegúrate de que en la función de envío siempre se realicen estos 3 pasos: ejecutar la función desde tw, firmar la transacción con la wallet y sendTransaction.10 - Resolver Disputa
Este prompt te guiará para implementar la funcionalidad de resolver una disputa en tu flujo de trabajo de escrow usando la biblioteca Trustless Work. Esta funcionalidad avanzada permite al árbitro tomar una decisión final sobre las disputas, asignando fondos en consecuencia. Debes adjuntar estos enlaces como referencia de docs: Biblioteca React TW y Types TW
Implementa el hook useResolveDispute de la biblioteca React de Trustless Work para resolver disputas en el escrow multi-release.
- Usa el contractId y los datos del escrow almacenados en el React Context.
- Usa el modo multi-release.
- Añade componentes de UI que permitan seleccionar un hito y resolver una disputa.
- El tipo de payload debe ser MultiReleaseResolveDisputePayload (según se define en la documentación oficial).
- Incluye un manejo de errores adecuado y estados de carga.
- Después de resolver correctamente una disputa, actualiza los datos del escrow en el contexto.
- Asegura que los tipos de TypeScript sean correctos y que todas las importaciones estén presentes.
- Muestra un mensaje de confirmación después de que la disputa haya sido resuelta con éxito.
- Asegúrate de que en la función de envío siempre se realicen estos 3 pasos: ejecutar la función desde tw, firmar la transacción con la wallet y sendTransaction.Última actualización
¿Te fue útil?