├── README.md ├── farcaster-miniapp.md └── celo-composer-kit-mcp.md /README.md: -------------------------------------------------------------------------------- 1 | # Vibe Code Prompts 2 | 3 | Prompts for vibe coding onchain apps on Celo. 4 | -------------------------------------------------------------------------------- /farcaster-miniapp.md: -------------------------------------------------------------------------------- 1 | # Vibe Coding Mini App Prompts 2 | 3 | ### Tools Used 4 | 1. Claude --> Design your app and generate a prompt 5 | 2. V0 --> Create the front end 6 | 3. Cursor --> Build the final app 7 | 4. Farcaster --> Get users and testing 8 | 9 | ## Prompts 10 | 11 | ### Designing the App using Claude 12 | 13 | Past the following prompt into Claude: 14 | 15 | NOTE: make this mobile compatible and responsive. 16 | 17 | `I want you to create a lightweight IQ quiz contest. the quiz should be timed and only be 10 questions. At the end it will have a button that says 'see score' and it will generate your IQ quiz score. For the UI, I want you to use a clean UI that mirrors that of other IQ tests. Don't ask IQ questions with images. After the quiz is completed, I want you to have a button that prompts the user to see which answers they got wrong, which one is the right answer, and then explain how the score was calculated. I want you to create a prompt for v0 with an in depth explanation for what I want to build. No need to code the app, just create a detailed prompt. ` 18 | 19 | ### Creating the Front End 20 | 21 | Prompt Claude generated: 22 | 23 | I want you to create a lightweight IQ quiz contest. the quiz should be timed and only be 10 questions. At the end it will have a button that says 'see score' and it will generate your IQ quiz score. For the UI, I want you to use a clean UI that mirrors that of other IQ tests. Don't ask IQ questions with images. After the quiz is completed, I want you to have a button that prompts the user to see which answers they got wrong, which one is the right answer, and then explain how the score was calculated. 24 | 25 | ### Creating Onchain Interactions 26 | 27 | 1. Open the [Farcaster docs](https://miniapps.farcaster.xyz/docs/getting-started). In the top right, click on `Ask with ChatGPT` 28 | 29 | Prompt for ChatGPT: 30 | 31 | I want you to create a prompt to Cursor Claude 3.5 to explain to it how to setup a wagmi connector and add the react hook into my IQ quiz contest app. The desired goal I have is that once the user completes the test and hits 'See Score' it requires users to pay 0.1 CELO to me to see their IQ score. 32 | 33 | Output: 34 | 35 | I'm developing an IQ quiz contest app as a Farcaster Mini App. After users complete the quiz and click 'See Score', they should be prompted to pay 0.1 CELO to access their results. Please provide a step-by-step guide to: 36 | - Ensure Farcaster Mini App Compatibility: 37 | - Set up the Farcaster SDK in my React project. 38 | - Create and configure the farcaster.json file with necessary metadata, including accountAssociation and frame details. 39 | - Ensure the app adheres to Farcaster's Mini App specifications. 40 | 41 | - Integrate Wallet Connection and CELO Payment: 42 | - Implement a function that, upon clicking 'See Score', checks if the user's wallet is connected. 43 | - If not connected, prompt the user to connect their wallet. 44 | - Once connected, initiate a transaction requesting 0.1 CELO from the user's wallet to my address. 45 | - Ensure the transaction is confirmed before displaying the IQ score. 46 | 47 | Provide code snippets and explanations for each step, ensuring the solution aligns with best practices for React, Wagmi, and Farcaster Mini Apps integration 48 | -------------------------------------------------------------------------------- /celo-composer-kit-mcp.md: -------------------------------------------------------------------------------- 1 | # Vibe Coding an App on Celo 2 | 3 | ## Setup 4 | 5 | 1. Go to Celo Docs --> Celo MCP [here](https://docs.celo.org/build/mcp/composer-mcp) 6 | 2. Follow instructions to install MCP server in Cursor 7 | 3. Use Claude-4-Sonnet inside of Cursor 8 | 4. [Add testnet tokens](https://faucet.celo.org/alfajores) to your wallet on Celo Alfajores 9 | 10 | ## Prompts 11 | 12 | **1. Create app in Cursor to allow users to mint an ERC20** 13 | 14 | ``` 15 | Build a Celo dApp using the Celo Composer starter and the Composer Kit component library. 16 | 17 | The app should use Hardhat for smart contract development, deploy an example ERC-20 contract on Celo Alfajores, and include a simple front end that connects a wallet and lets users mint 1 token and view their token balance. 18 | 19 | Use @celo/react-components (Composer Kit) to design the UI. Make sure the UI is mobile-friendly. 20 | 21 | Use the following layout: 22 | 23 | A ConnectWallet button using Composer Kit 24 | 25 | An input to specify that they want to mint one token. 26 | 27 | A button to mint the token (calls contract function) 28 | 29 | A display of current token balance 30 | 31 | Integrate everything using Wagmi (for React hooks), Viem (for client), and Hardhat for contracts. 32 | 33 | Make the folder structure compatible with the Celo Composer layout. 34 | ``` 35 | 36 | This will create an app using Celo Composer templates with Composer Kit UI components. It will create a sample .env file for you, but you will need to update it with your wallet addresses private key and Celoscan API key (optional). Make sure your wallet address has some testnet CELO to deploy your contract. 37 | 38 | **Use Cases:** 39 | 40 | 1. **Faucet dApp:** Let users mint a small number of test tokens to try out your system (common in testnets and dev environments). 41 | - Example: You're running a hackathon — devs mint test tokens to simulate real-world use. 42 | 43 | 2. **Reward / Reputation System:** Mint tokens to users for actions they take (e.g., filling out a form, completing onboarding). 44 | - Example: A learning dApp where users mint tokens for completing lessons, and balance reflects progress. 45 | 46 | 3. **Game or Loyalty Points:** Users mint tokens as game rewards or loyalty points — balance shows their standing or power level. 47 | - Example: You mint XP tokens after users win a game round. 48 | 49 | 4. **Token Airdrop / Claim Portal:** Let users mint tokens once after verifying eligibility (e.g., based on Self verification or allowlist). 50 | - Example: You mint 100 tokens to early users when they connect their wallet. 51 | 52 | **2. Using Self Protocol to check for unique humans** 53 | 54 | Add [Self Protocol docs](https://docs.self.xyz/) to Cursor context by clicking @ --> Docs --> Add new doc --> then pasting the link to the documentation. 55 | ``` 56 | I want to use Self Protocol so that the user has to prove they are human before they can claim the token. 57 | 58 | Frontend Requirements: 59 | 60 | Replace existing claim button with "Verify Humanity to Claim 10 Tokens" 61 | Follow the Self documentation quickstart guide to implement that QRCodeGenerator react component 62 | On button click, display Self Protocol QR code for verification request 63 | Poll for verification status or handle verification response 64 | Update button to "Claim 10 Tokens" once verification succeeds 65 | Update composer-kit identity UI component to show valid human checkmark on identity card 66 | 67 | Backend Requirements: 68 | 69 | Implement Self Protocol backend SDK integration (following their quickstart pattern) 70 | The verification logic to only require isValidProof to be true 71 | Create endpoint to initiate verification request 72 | Create endpoint to verify submitted proofs 73 | Return verification status to frontend 74 | Ensure proof validation before allowing token claims 75 | 76 | Technical Specifications: 77 | 78 | Use Self Protocol's QR code generation for verification requests 79 | Implement proper error handling for failed verifications 80 | Maintain existing token claim logic, but gate it behind successful human verification 81 | Update UI state management to track verification status 82 | Ensure verification state persists appropriately for user session 83 | 84 | Expected Flow: 85 | User clicks verify button → QR code displayed → User scans with Self app → Backend validates proof → UI updates to show verified status → User can claim tokens 86 | Please implement this integration while maintaining the existing app architecture and user experience patterns. 87 | ``` 88 | 89 | ``` 90 | I want to use Self Protocol so that the user has to prove they are human before they can claim the token. 91 | Frontend Requirements: 92 | Replace existing claim button with "Verify Humanity to Claim 10 Tokens" 93 | Follow the Self documentation quickstart guide to implement QRCodeGenerator react component 94 | CRITICAL: Use default import for QRCodeGenerator: import QRCodeGenerator from '@selfxyz/qrcode'; 95 | CRITICAL: Use shorter scope name (max ~10 characters) like 'my-app' to avoid BigInt size errors 96 | CRITICAL: Use shorter RPC endpoint like 'https://forno.celo.org' instead of long URLs 97 | On button click, display Self Protocol QR code for verification request 98 | Poll for verification status or handle verification response 99 | Update button to "Claim 10 Tokens" once verification succeeds 100 | Update composer-kit identity UI component to show valid human checkmark on identity card 101 | Backend Requirements: 102 | Implement Self Protocol backend SDK integration (following their quickstart pattern) 103 | CRITICAL: The verification logic should only require result.isValidDetails.isValidProof to be true, NOT result.isValid 104 | CRITICAL: Use direct 3-letter ISO country codes like "IRN" and "PRK" instead of countryCodes.IRN constants 105 | CRITICAL: Use the same shorter scope name as frontend (e.g., 'my-app') to ensure consistency 106 | CRITICAL: Use the same shorter RPC endpoint as frontend (e.g., 'https://forno.celo.org') 107 | Create endpoint to initiate verification request 108 | Create endpoint to verify submitted proofs 109 | Return verification status to frontend 110 | Ensure proof validation before allowing token claims 111 | Technical Specifications: 112 | Use Self Protocol's QR code generation for verification requests 113 | CRITICAL: Ensure both frontend and backend use identical scope names and RPC endpoints 114 | CRITICAL: Keep scope names short (under 10 characters) to prevent "BigInt exceeds maximum size of 31 bytes" errors 115 | Implement proper error handling for failed verifications 116 | Maintain existing token claim logic, but gate it behind successful human verification 117 | Update UI state management to track verification status 118 | Ensure verification state persists appropriately for user session 119 | Expected Flow: 120 | User clicks verify button → QR code displayed → User scans with Self app → Backend validates proof (only checking cryptographic validity) → UI updates to show verified status → User can claim tokens 121 | Key Implementation Notes: 122 | BigInt Error Prevention: Use short scope names and RPC URLs to avoid internal hashing limits 123 | Country Code Format: Use 3-letter ISO codes directly as strings, not SDK constants 124 | Verification Logic: Only validate isValidProof field, ignore scope/attestation/nationality validation failures 125 | Import Format: Use default imports for QRCodeGenerator component 126 | Configuration Consistency: Ensure frontend and backend use identical configuration values 127 | Please implement this integration while maintaining the existing app architecture and user experience patterns. 128 | ``` 129 | --------------------------------------------------------------------------------