### Vibe-First Approach: Context Setup and CLEAR Prompt Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action The Vibe-First Approach starts with a context setup describing the desired feeling and audience, then provides a CLEAR prompt that specifies the component, location, exact change, appearance, and reason. Use this technique when you want to establish the emotional tone before detailing the implementation. ```text I am building a meditation app that should feel calm and zen. Think Headspace meets Apple's design language. Users are stressed professionals who need peace in their day. ``` ```text Create a meditation session player (Component) for the main app screen (Location) with play/pause, progress bar, and ambient background selector (Exact change) using soft gradients, minimal icons, and breathing animations (Appearance) to create a calming experience that helps users disconnect from work stress (Reason). ``` -------------------------------- ### Setting the Scene with Context - Example Prompt Source: https://tempolabsinc.mintlify.app/Basics/Prompting Use this prompt to provide the AI with project context and key features before asking it to design a specific component, such as the project dashboard. ```text I’m working on a collaborative tool to help teams manage their projects. Here are the key features I’d like to include: - User sign-up and authentication - Project dashboards - Task tracking and assignment - Progress reporting Start by designing the project dashboard. ``` -------------------------------- ### Effective Objective Prompt Example Source: https://tempolabsinc.mintlify.app/Best%20Practices/Level%20Up%20Your%20Prompting%20Game An example of a clear, objective prompt that specifies the exact issue (Login Button does nothing), the expected behavior (authenticated and redirected), and the desired outcome. This approach yields better results from Tempo AI. ```text The Login Button does nothing when clicked. When the user clicks on it, they should be authenticated and redirected to the home page. ``` -------------------------------- ### Prompt with Constraints - Task Manager Example Source: https://tempolabsinc.mintlify.app/Basics/Prompting Use this prompt to constrain the AI's output, focusing on a limited set of features to avoid unnecessary complexity. ```text Create a task manager that shows up to three tasks at a time, with options to add, edit, and delete tasks. ``` -------------------------------- ### External image URL prompt Source: https://tempolabsinc.mintlify.app/Basics/images Example prompt for adding an external image to a project. Use the image URL directly in the project prompt. ```text "Add a hero section image using the following URL: https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Pale_Blue_Dot.png/442px-Pale_Blue_Dot.png" ``` -------------------------------- ### CLEAR Prompt for Onboarding Flow Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action Use this prompt to create an onboarding flow for a budgeting app. It follows the CLEAR structure: Component, Location, Exact change, Appearance, and Reason. The example is shown as the 'After' version in the 'Onboarding Flows' scenario. ```text Build a welcome tutorial (Component) for new users opening my budgeting app (Location) with 3 simple steps explaining core features and benefits (Exact change) using friendly illustrations, progress dots, and encouraging copy (Appearance) to get users successfully tracking their first expense within 2 minutes (Reason). ``` -------------------------------- ### Image Prompt - Detailed Visual Prompt Source: https://tempolabsinc.mintlify.app/Basics/Prompting Use this prompt when uploading an image (e.g., a design layout or wireframe) to guide the AI. It includes detailed instructions for building a Kanban board with drag-and-drop. ```text Based on the attached image, build a Kanban board. Include features to add and reorder cards within columns, and move cards between columns. Use drag-and-drop functionality, leveraging libraries like Pangea home-dnd. ``` -------------------------------- ### Incremental Prompting - Sequential Prompts Source: https://tempolabsinc.mintlify.app/Basics/Prompting Break a large task into smaller, sequential prompts to improve accuracy. This example shows a sequence of incremental instructions for building a CRM app. ```text 1. Set up a basic CRM interface 2. Add user authentication features. 3. Enable Google Sheets export functionality. 4. Incorporate data enrichment from an external service ``` -------------------------------- ### CLEAR Prompt for E-commerce Product Page Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action Use this prompt to generate a product showcase page for an e-commerce app. It follows the CLEAR structure: Component, Location, Exact change, Appearance, and Reason. The example is shown as the 'After' version in the 'E-commerce Product Pages' scenario. ```text Design a product showcase page (Component) for my clothing store app (Location) with image carousel, size selector, and add-to-cart button (Exact change) using clean white background, zoom functionality, and color swatches (Appearance) to make online shopping feel as good as trying clothes on in-store (Reason). ``` -------------------------------- ### Prompt to Integrate react-hook-form Source: https://tempolabsinc.mintlify.app/Basics/Using%20npm%20Packages Use this prompt to instruct Tempo AI to install and use the react-hook-form package for creating a contact form with validation for name, email, and message fields. ```text "Integrate the react-hook-form npm package into my project. Use it to create a contact form with validation for name, email, and message fields." ``` -------------------------------- ### CLEAR Prompt for Settings & Preferences Screen Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action Use this prompt to add a settings and preferences screen to an app. It follows the CLEAR structure: Component, Location, Exact change, Appearance, and Reason. The example is shown as the 'After' version in the 'Settings & Preferences' scenario. ```text Create a user preferences screen (Component) in my app's profile section (Location) with notification toggles, theme selector, and account management options (Exact change) using organized sections, clear labels, and iOS-style switches (Appearance) to let users customize their experience without overwhelming them (Reason). ``` -------------------------------- ### Ineffective Emotional Prompt Example Source: https://tempolabsinc.mintlify.app/Best%20Practices/Level%20Up%20Your%20Prompting%20Game An example of an emotional, vague prompt that should be avoided. It uses frustration and general demands ('Solve ALL bugs', 'make my app better') without specific details, which leads to poor AI responses. ```text Why don't you UNDERSTAND what I am saying...uuughhh !! Solve ALL bugs and make my app better NOW ... ``` -------------------------------- ### Avoid Vague Prompts - Specific Form Prompt Source: https://tempolabsinc.mintlify.app/Basics/Prompting Use this specific prompt instead of a vague one like 'Build a form' to get a form with validation and a submit button. ```text Design a form with input fields for name, email, and phone number. Ensure form validation and include a “Submit” button. ``` -------------------------------- ### Like That App Method: Music Discovery Screen Prompt Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action The 'Like That App' Method references a familiar app (Spotify's Browse page) to guide the design of a music discovery screen. Use this technique when you want to leverage existing user familiarity to communicate the desired look and feel. ```text Build a music discovery screen (Component) for my playlist app's main interface (Location) with genre cards and trending songs, similar to Spotify's Browse page (Exact change) using colorful album artwork, smooth scrolling, and play previews (Appearance) to help users find new music they will actually want to save (Reason). ``` -------------------------------- ### Set Stripe Secret Key Environment Variable Source: https://tempolabsinc.mintlify.app/ViteClerkConvexStripe Add the Stripe secret key as an environment variable in Convex. The key starts with `sk_test_` and is obtained from the Stripe Dashboard under Developers → API keys. ```plaintext STRIPE_SECRET_KEY= ``` -------------------------------- ### Correct Supabase client initialization with proper environment variable Source: https://tempolabsinc.mintlify.app/supabase/Troubleshooting Shows the correct way to initialize the Supabase client in an Edge Function, using the existing environment variable 'SUPABASE_SERVICE_ROLE_KEY' for the Supabase key, which resolves the 'supabaseKey is required' error. ```javascript // Inside the Edge Function import { createClient } from '@supabase/supabase-js'; // Correct: Using the environment variable name that exists in Secrets const supabaseUrl = Deno.env.get('SUPABASE_URL') ?? ''; const supabaseKey = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''; // Correct variable name const supabase = createClient(supabaseUrl, supabaseKey); ``` -------------------------------- ### Vague Prompt: Create a login form Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action A vague prompt that lacks specificity, leading to ambiguous AI responses. This is the 'old way' of prompting for a login form. ```text "Create a login form for my React app" ``` -------------------------------- ### Next.js Clerk sign-in and sign-up URL environment variables Source: https://tempolabsinc.mintlify.app/repo-setup/ClerkAuthInTempo Environment variables for Next.js to set the sign-in and sign-up URLs to relative paths, ensuring they use the same domain as the dev server. ```plaintext NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in ``` ```plaintext NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up ``` -------------------------------- ### Correct deno.json Import Configuration Source: https://tempolabsinc.mintlify.app/supabase/Troubleshooting This configuration uses './_shared/' for the @shared/ alias, which resolves the deployment error. ```json { "imports": { "@shared/": "./_shared/" } } ``` -------------------------------- ### Incorrect Supabase client initialization with wrong environment variable Source: https://tempolabsinc.mintlify.app/supabase/Troubleshooting Shows the incorrect way to initialize the Supabase client in an Edge Function, using a non-existent environment variable 'SUPABASE_NON_EXISTENT_SERVICE_KEY' for the Supabase key, which causes the 'supabaseKey is required' error. ```javascript // Inside the Edge Function import { createClient } from '@supabase/supabase-js'; const supabaseUrl = Deno.env.get('SUPABASE_URL') ?? ''; // Incorrect: Using an environment variable that doesn't exist const supabaseKey = Deno.env.get('SUPABASE_NON_EXISTENT_SERVICE_KEY') ?? ''; // Wrong variable name const supabase = createClient(supabaseUrl, supabaseKey); ``` -------------------------------- ### Vague Prompt: Make app modern Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action A vague prompt for a modern look, lacking specific design details. ```text "Make my app look modern and professional" ``` -------------------------------- ### CLEAR Prompt: Login screen Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action A structured prompt using the CLEAR framework to specify the component, location, exact change, appearance, and reason for a login screen. ```text Create a sleek login screen (Component) for my productivity app's main page (Location) with email/password fields, "remember me" checkbox, and social login buttons (Exact change) styled with a modern gradient background, floating labels, and smooth animations (Appearance) to give users a premium first impression and reduce signup friction (Reason). ``` -------------------------------- ### CLEAR Prompt: User profiles Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action Third step of the chained CLEAR approach, creating user profile previews in the feed. ```text Create user profile previews (Component) at the top of each post in the feed (Location) showing profile picture, username, and follow button (Exact change) with clean typography and subtle hover effects (Appearance) to help users discover and connect with other community members (Reason). ``` -------------------------------- ### Vite Clerk sign-in and sign-up URL environment variables Source: https://tempolabsinc.mintlify.app/repo-setup/ClerkAuthInTempo Environment variables for Vite to set the sign-in and sign-up URLs to relative paths, ensuring they use the same domain as the dev server. ```plaintext VITE_CLERK_SIGN_IN_URL ``` ```plaintext VITE_CLERK_SIGN_UP_URL ``` -------------------------------- ### Typical Supabase Functions Structure Source: https://tempolabsinc.mintlify.app/supabase/Troubleshooting Shows the standard directory layout for Supabase Edge Functions, where each function is an independent project with its own deno.json, and shared code resides in a _shared directory. ```text supabase/ ├── functions/ ├── hello_world/ │ ├── index.ts # Main function code │ └── deno.json # Import map configuration ├── user_authentication/ │ ├── index.ts # User authentication function │ └── deno.json # Import map configuration └── _shared/ ├── utils.ts # Shared utility functions ├── cors.ts # Shared CORS functions └── database.types.ts # Shared database types ``` -------------------------------- ### CLEAR Prompt: Social feed layout Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action First step of a chained CLEAR approach for building a social media feed, specifying the feed layout. ```text Create a social media feed (Component) for the home screen of my community app (Location) that displays user posts with images, captions, and engagement buttons (Exact change) using an Instagram-style layout with infinite scroll and pull-to-refresh (Appearance) to keep users engaged and scrolling through community content (Reason). ``` -------------------------------- ### ClerkProvider signInUrl and signUpUrl props Source: https://tempolabsinc.mintlify.app/repo-setup/ClerkAuthInTempo Props for the ClerkProvider to set the sign-in and sign-up URLs to the current origin, ensuring they use the same domain as the dev server. ```jsx signInUrl={`${window.location.origin}/sign-in`} signUpUrl={`${window.location.origin}/sign-up`} ``` -------------------------------- ### CLEAR Prompt: Dashboard redesign Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action A CLEAR prompt for a style upgrade, specifying the component, location, exact change, appearance, and reason. ```text Redesign the main dashboard (Component) of my fitness tracking app (Location) with a clean, card-based layout and progress charts (Exact change) using a dark theme with green accent colors, smooth transitions, and glassmorphism effects (Appearance) to make the app feel premium and increase user retention (Reason). ``` -------------------------------- ### Prompt for Error Resolution with npm Packages Source: https://tempolabsinc.mintlify.app/Basics/Using%20npm%20Packages Use this prompt to ask Tempo AI to resolve dependency conflicts with react-hook-form, either by suggesting an alternative package or updating the configuration. ```text The react-hook-form package is causing errors due to dependency conflicts. Suggest an alternative package or update the configuration to resolve the issue. ``` -------------------------------- ### Set FRONTEND_URL environment variable in Convex Source: https://tempolabsinc.mintlify.app/ViteClerkConvexPolar Add the temporary URL from Tempo as the FRONTEND_URL environment variable in Convex. Ensure there is no trailing slash at the end of the URL. Save the variable after adding it. ```plaintext FRONTEND_URL= ``` -------------------------------- ### Correct Edge Function Invocation Source: https://tempolabsinc.mintlify.app/supabase/Troubleshooting Correct invocation using the full function slug 'supabase-functions-hello-world' to avoid CORS errors. ```javascript const { data, error } = await supabase.functions.invoke("supabase-functions-hello-world", { method: "POST", body: body, }); ``` -------------------------------- ### Fixing Errors with Prompts - Detailed Issue Description Source: https://tempolabsinc.mintlify.app/Basics/Prompting Use this prompt to describe an issue in detail, which helps the AI fix errors more effectively than a vague request like 'The project is broken. Fix it.' ```text The screen went blank after the last edit. It was functional before. Can you investigate and restore the previous state? ``` -------------------------------- ### Typical Edge Function Directory Structure Source: https://tempolabsinc.mintlify.app/supabase/Troubleshooting Shows the typical directory structure for a Tempo AI Edge Function. The function slug is derived from the directory name, prefixed with 'supabase-functions-'. ```text supabase/ ├── functions/ ├── hello-world/ │ ├── index.ts # Main function code │ └── deno.json # Import map configuration ``` -------------------------------- ### CLEAR Prompt: Post interactions Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action Second step of the chained CLEAR approach, adding engagement features to each post. ```text Add engagement features (Component) to each post in the social feed (Location) with like, comment, and share buttons that show real-time counts (Exact change) using heart animations for likes and slide-up comment drawer (Appearance) to encourage community interaction and content sharing (Reason). ``` -------------------------------- ### User Story Integration: Food Delivery Tracking Prompt Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action User Story Integration frames the prompt from the user's perspective, focusing on their needs and emotional state (hangry users). Use this technique to ensure the design addresses real user pain points and motivations. ```text Create a food delivery tracking screen (Component) for after users place an order (Location) showing real-time delivery progress with driver location and ETA (Exact change) using a map view with cute delivery icons and status updates (Appearance) because hangry users need to know exactly when their food arrives (Reason). ``` -------------------------------- ### Incorrect deno.json Import Configuration (Causes Error) Source: https://tempolabsinc.mintlify.app/supabase/Troubleshooting This configuration uses '../_shared/' for the @shared/ alias, which causes the 'Failed to Create Graph' error during deployment. ```json { "imports": { "@shared/": "../_shared/" } } ``` -------------------------------- ### Set Stripe Publishable Key Environment Variable Source: https://tempolabsinc.mintlify.app/ViteClerkConvexStripe Optionally add the Stripe publishable key as an environment variable in Convex. This is only needed if your application requires it. ```plaintext STRIPE_PUBLISHABLE_KEY= ``` -------------------------------- ### Fix Vite HMR configuration for Tempo Source: https://tempolabsinc.mintlify.app/repo-setup/WebsocketError Shows the custom Vite HMR configuration that causes the error, and the corrected version that uses the default HMR settings when running in Tempo by checking import.meta.env.TEMPO. ```javascript server: { hmr: { host: "localhost", port: 3050, clientPort: 3050, }, }, ``` ```javascript server: { hmr: { host: import.meta.env.TEMPO ? undefined : "localhost", port: import.meta.env.TEMPO ? undefined : 3050, clientPort: import.meta.env.TEMPO ? undefined : 3050, }, }, ``` -------------------------------- ### Vague Prompt: Make a social feed Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action A vague prompt for a social feed that lacks details about content, interactions, and layout. ```text "Make a social feed" ``` -------------------------------- ### CLEAR Emergency Prompt: Fix button Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action A CLEAR prompt for emergency fixes, specifying the component, location, exact issue, and desired behavior. ```text Fix the "Join Community" button (Component) on my app's landing page (Location) that should open the signup flow but does nothing when users click it (Exact change) by making it properly navigate to the registration screen (Appearance). ``` -------------------------------- ### Set CLERK_SIGNING_KEY Environment Variable in Convex Source: https://tempolabsinc.mintlify.app/ViteClerkConvexPolar Add this environment variable in the Convex dashboard (Settings → Environment Variables) to enable Clerk authentication. Use the Clerk JWT template's Issuer URL as the value. The variable takes effect on the next deploy. ```plaintext CLERK_SIGNING_KEY= ``` -------------------------------- ### Panic Prompt: App broken Source: https://tempolabsinc.mintlify.app/Best%20Practices/CLEAR%20In%20Action A vague, panicked prompt that confuses the AI and leads to unintended changes. ```text "MY APP IS BROKEN! The buttons don't work! HELP!" ``` -------------------------------- ### Set POLAR_ACCESS_TOKEN in Convex Source: https://tempolabsinc.mintlify.app/ViteClerkConvexPolar Environment variable for the Polar access token. Set this in Convex under Settings → Environment Variables. The token is generated in Polar under Settings → Developers → Access Tokens and cannot be viewed again after creation. ```plaintext POLAR_ACCESS_TOKEN= ``` -------------------------------- ### Prompt to fix Figma plugin design details Source: https://tempolabsinc.mintlify.app/FigmaPlugin Use this prompt in the AI chat to correct design details that the Figma plugin may miss, such as a text field being perceived as a div instead of an input field. ```text The search bar in the component is not an input field - can you ensure all fields work appropriately. ``` -------------------------------- ### Set Stripe Webhook Secret Environment Variable Source: https://tempolabsinc.mintlify.app/ViteClerkConvexStripe Add the Stripe webhook signing secret as an environment variable in Convex. The secret is revealed in the Stripe Dashboard under the webhook's details. ```plaintext STRIPE_WEBHOOK_SECRET= ``` -------------------------------- ### Incorrect Edge Function Invocation (Causes CORS Error) Source: https://tempolabsinc.mintlify.app/supabase/Troubleshooting Incorrect invocation that causes a CORS error because it uses only the directory name 'get-quizzes' instead of the full function slug. ```javascript const { data, error } = await supabase.functions.invoke("get-quizzes", { method: "POST", body: body, }); ``` -------------------------------- ### Set POLAR_ORGANIZATION_ID in Convex Source: https://tempolabsinc.mintlify.app/ViteClerkConvexPolar Environment variable for the Polar organization identifier. Set this in Convex under Settings → Environment Variables. The value is an alphanumeric string copied from Polar's Settings → Organization. ```plaintext POLAR_ORGANIZATION_ID= ``` -------------------------------- ### Set POLAR_WEBHOOK_SECRET in Convex Source: https://tempolabsinc.mintlify.app/ViteClerkConvexPolar Environment variable for the Polar webhook secret. Set this in Convex under Settings → Environment Variables. The secret is generated in Polar when creating a webhook endpoint and is used to verify webhook payloads. ```plaintext POLAR_WEBHOOK_SECRET= ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.