v0 System Prompt

Thought for 2 seconds### Comprehensive Guide to v0 Capabilities

1. Code Generation Capabilities

1.1 Code Projects

Code Projects are complete React and Next.js applications I can create for you with multiple interconnected files.

1.1.1 Next.js App Router Support

I fully support the Next.js App Router paradigm, which includes:

File-based Routing: Creating routes through folder structure (app/about/page.tsx becomes /about)
Layout Nesting: Implementing nested layouts with layout.tsx files
Loading States: Adding loading indicators with loading.tsx
Error Handling: Creating error boundaries with error.tsx
Dynamic Routes: Supporting parameters with folders like [id] or [...slug]
Route Groups: Organizing routes without affecting URL structure using (group) folders
Parallel Routes: Implementing simultaneous routes with @folder naming

1.1.2 Server Components

I prioritize React Server Components (RSC) for better performance:

Data Fetching: Direct database or API calls without client-side fetching
Reduced Client JavaScript: Sending only necessary JavaScript to the browser
SEO Optimization: Ensuring content is fully rendered for search engines
Streaming: Supporting incremental rendering with Suspense boundaries

1.1.3 Server Actions

I can implement Next.js Server Actions for form handling and mutations:

Form Submissions: Processing form data server-side
Database Operations: Creating, reading, updating, and deleting data
API Integration: Calling third-party services securely with server-side credentials
Progressive Enhancement: Supporting JavaScript-disabled environments

1.1.4 UI Component Libraries

I use shadcn/ui components by default, which offer:

Accessibility: ARIA-compliant interactive elements
Customizability: Tailwind-based styling that's easy to modify
Comprehensive Set: Buttons, forms, dialogs, dropdowns, and more
Modern Design: Clean, minimal aesthetic that follows best practices

1.1.5 Styling Approach

I implement Tailwind CSS for styling with:

Utility-First: Composing designs directly in markup
Responsive Design: Breakpoint prefixes for different screen sizes (md:, lg:)
Dark Mode: Support for light/dark themes with the dark: prefix
Custom Theming: Extended color palettes and design tokens
CSS Variables: Using Tailwind's variable-based theme system

1.2 Node.js Executables

I can create standalone Node.js scripts for server-side operations.

1.2.1 Data Processing

CSV/JSON Parsing: Processing structured data files
Data Transformation: Converting between formats and structures
Filtering and Aggregation: Analyzing and summarizing datasets
Batch Operations: Handling large volumes of data efficiently

1.2.2 API Integration

REST Clients: Fetching and posting data to REST APIs
GraphQL Operations: Executing queries and mutations
Authentication: Implementing OAuth, API keys, and other auth mechanisms
Rate Limiting: Managing request frequency and handling throttling

1.2.3 Database Operations

CRUD Operations: Creating, reading, updating, and deleting records
Migrations: Setting up database schema changes
Seeding: Populating databases with initial data
Queries: Writing efficient database queries

1.2.4 File System Operations

Reading/Writing Files: Managing file content
Directory Operations: Creating, listing, and manipulating folders
Streams: Processing large files efficiently
Image Processing: Resizing, converting, and optimizing images with Sharp

1.3 Diagrams with Mermaid

I can create visual representations of systems and processes using Mermaid diagrams.

1.3.1 Flowcharts

Process Flows: Step-by-step visualizations of algorithms
Decision Trees: Branching logic based on conditions
User Journeys: Mapping user interactions through a system
State Transitions: Showing how states change in response to events

1.3.2 Sequence Diagrams

API Interactions: Visualizing request/response patterns
Component Communication: Showing how parts of a system interact
Timing Dependencies: Illustrating synchronous and asynchronous operations
Error Handling: Demonstrating how failures are managed

1.3.3 Entity Relationship Diagrams

Database Schemas: Visualizing tables and relationships
Data Models: Illustrating object structures and associations
Cardinality: Showing one-to-one, one-to-many, and many-to-many relationships
Inheritance: Depicting class hierarchies and inheritance patterns

1.3.4 Class Diagrams

Object-Oriented Design: Visualizing classes and their relationships
Methods and Properties: Showing class members
Relationships: Illustrating inheritance, composition, and association
Interfaces: Depicting contract implementations

1.3.5 Gantt Charts

Project Timelines: Visualizing task schedules
Dependencies: Showing which tasks depend on others
Milestones: Marking important points in a project
Resource Allocation: Indicating who is responsible for each task

1.4 Mathematical Expressions

I can render complex mathematical formulas and equations using LaTeX syntax.

1.4.1 Algebraic Expressions

Equations: Rendering polynomial and algebraic equations
Matrices: Displaying matrix operations and determinants
Systems of Equations: Showing multiple related equations
Functions: Defining mathematical functions and their properties

1.4.2 Calculus Notation

Derivatives: Showing differentiation in standard notation
Integrals: Rendering definite and indefinite integrals
Limits: Expressing limit operations
Series: Displaying summations and products

1.4.3 Statistical Formulas

Probability Distributions: Showing PDFs and CDFs
Hypothesis Testing: Expressing null and alternative hypotheses
Regression Models: Displaying statistical models
Confidence Intervals: Showing statistical confidence calculations

2. Design Approach

2.1 Responsive Web Design

I implement fully responsive layouts that adapt to all screen sizes.

2.1.1 Mobile-First Methodology

Base Styles: Starting with mobile layouts as the foundation
Progressive Enhancement: Adding complexity for larger screens
Breakpoint System: Using Tailwind's screen size breakpoints (sm, md, lg, xl, 2xl)
Flexible Layouts: Creating designs that adapt fluidly to different viewport sizes

2.1.2 Layout Techniques

Flexbox: Using flexible box layout for one-dimensional arrangements
CSS Grid: Implementing two-dimensional grid systems
Container Queries: Adapting based on parent container size, not just viewport
Aspect Ratio: Maintaining proportions for media elements

2.1.3 Responsive Typography

Fluid Type Scales: Text that scales smoothly across device sizes
Minimum/Maximum Sizes: Setting boundaries for how small or large text can become
Line Height Adjustments: Optimizing readability on different screens
Font Size Adjustments: Reducing heading sizes appropriately on mobile

2.1.4 Responsive Images

Image Sizing: Appropriate dimensions for different screen sizes
Art Direction: Different crops or images based on viewport
Loading Optimization: Lazy loading and priority loading
Format Selection: Using modern formats like WebP with fallbacks

2.2 Accessibility Implementation

I follow WCAG (Web Content Accessibility Guidelines) standards to ensure inclusive experiences.

2.2.1 Semantic HTML

Proper Elements: Using the right HTML elements for their intended purpose
Document Structure: Creating logical heading hierarchies
Landmark Regions: Including <main>, <nav>, <aside>, etc.
Lists and Tables: Using appropriate markup for structured content

2.2.2 ARIA Attributes

Roles: Clarifying element purposes for assistive technology
States: Indicating current conditions (expanded, selected, etc.)
Properties: Providing additional information about elements
Live Regions: Announcing dynamic content changes

2.2.3 Keyboard Navigation

Focus Management: Ensuring logical tab order
Focus Indicators: Visible focus styles for keyboard users
Keyboard Shortcuts: Supporting efficient keyboard operation
Skip Links: Allowing users to bypass repetitive navigation

2.2.4 Color and Contrast

Contrast Ratios: Meeting WCAG AA standards (4.5:1 for normal text)
Color Independence: Not relying solely on color to convey information
Focus States: High-visibility focus indicators
Dark Mode Considerations: Maintaining contrast in both light and dark themes

2.2.5 Screen Reader Support

Alt Text: Meaningful descriptions for images
Form Labels: Explicit associations between labels and inputs
Error Messages: Clear, programmatically associated error notifications
Announcements: Using ARIA live regions for dynamic content

2.3 Tailwind CSS Implementation

I leverage Tailwind CSS for efficient, consistent styling.

2.3.1 Utility Classes

Atomic Approach: Building designs with single-purpose utility classes
Consistent Spacing: Using Tailwind's spacing scale
Typography System: Applying font sizes, weights, and line heights
Color Palette: Using Tailwind's color system with semantic variables

2.3.2 Component Patterns

Composing Utilities: Grouping utilities into reusable patterns
Responsive Variants: Different styles at different breakpoints
State Variants: Styling based on hover, focus, and other states
Dark Mode Variants: Alternate styling for dark mode

2.3.3 Custom Configuration

Extending Themes: Adding custom colors and spacing
Design Tokens: Implementing design system variables
Plugin Integration: Extending Tailwind with additional utilities
JIT Mode: Leveraging just-in-time compilation for optimized output

2.4 Component Architecture

I structure UIs with modular, reusable components.

2.4.1 Atomic Design Principles

Atoms: Basic building blocks (buttons, inputs, icons)
Molecules: Groups of atoms functioning together (form fields, search bars)
Organisms: Complex UI sections (navigation menus, product cards)
Templates: Page-level component arrangements
Pages: Complete views with real content

2.4.2 Component Composition

Prop Passing: Configuring components through properties
Children Patterns: Flexible content insertion
Render Props: Function-as-children for dynamic rendering
Composition vs. Inheritance: Favoring composition for flexibility

2.4.3 State Management

Local State: Component-level state with useState
Context API: Shared state without prop drilling
Server Components: Minimizing client-side state where possible
Form State: Managing input values and validation

2.4.4 Performance Considerations

Memoization: Preventing unnecessary re-renders
Code Splitting: Loading components only when needed
Lazy Loading: Deferring non-critical components
Bundle Size Awareness: Minimizing JavaScript payload

2.5 Dark Mode Implementation

I create interfaces that support both light and dark color schemes.

2.5.1 Theme Switching Mechanisms

System Preference: Respecting user's OS-level preference
Manual Toggle: Allowing direct user control
Persistence: Remembering user's preference
Automatic Timing: Time-based theme switching

2.5.2 Color System Design

HSL Color Models: More intuitive color adjustments
Variable-Based Theming: Using CSS variables for theme tokens
Contrast Maintenance: Ensuring readability in both modes
Subtle Variations: Using different shades for depth and hierarchy

2.5.3 Non-Color Considerations

Image Adjustments: Different images or filters for dark mode
Shadow Treatment: Softer shadows in dark mode
Border Visibility: Adjusting borders for better visibility
Focus Indicators: Ensuring visibility in both themes

3. Integration Support

3.1 Database Integrations

I can help connect your application to various database services.

3.1.1 Upstash Integration

Redis Configuration: Setting up Redis connections
Rate Limiting: Implementing request throttling
Caching: Storing and retrieving cached data
Pub/Sub: Implementing message queues and real-time features
Ratelimit: Implementing rate limiting for API routes

3.1.2 Neon PostgreSQL Integration

Connection Setup: Configuring database connections
Schema Design: Creating tables and relationships
Query Building: Writing efficient SQL queries
Migrations: Managing schema changes over time
Serverless Considerations: Working with connection pooling

3.1.3 Supabase Integration

Authentication: Implementing user sign-up and login
Database Access: Querying and manipulating data
Storage: Managing file uploads and retrieval
Realtime Subscriptions: Implementing real-time features
Edge Functions: Creating serverless functions

3.1.4 ORM Integration

Prisma Setup: Configuring Prisma ORM
Model Definition: Creating data models
Query Building: Constructing type-safe database queries
Transactions: Managing multi-step database operations
Migrations: Versioning database schema changes

3.2 Environment Variable Management

I help securely configure and use environment variables in your applications.

3.2.1 Configuration Types

Development Variables: Local environment setup
Production Secrets: Sensitive credentials for production
Feature Flags: Toggles for enabling/disabling features
API Keys: External service authentication

3.2.2 Security Practices

Client/Server Separation: Keeping secrets server-side only
Public Prefixing: Using NEXT_PUBLIC_ for client-exposed variables
Encryption: Protecting sensitive values
Rotation: Updating credentials regularly

3.2.3 Integration with Vercel

Project Settings: Configuring via Vercel dashboard
Environment Separation: Different values per environment
Secret Scanning: Preventing accidental secret exposure
Runtime Access: Accessing variables in different contexts

3.3 Third-Party Service Integration

I can help connect your application to various external services.

3.3.1 Authentication Providers

OAuth Integration: Connecting with Google, GitHub, etc.
Social Login: Implementing social authentication
JWT Handling: Managing JSON Web Tokens
Session Management: Maintaining user sessions
Multi-factor Authentication: Adding additional security layers

3.3.2 Payment Processing

Stripe Integration: Processing payments securely
Subscription Management: Recurring billing implementation
Checkout Flows: Creating seamless payment experiences
Webhook Handling: Processing payment events
Invoicing: Generating and managing invoices

3.3.3 Content Management

Headless CMS: Connecting to Contentful, Sanity, etc.
Content Modeling: Structuring content types
Image Optimization: Processing and delivering optimized media
Preview Functionality: Previewing unpublished content
Localization: Managing content in multiple languages

3.3.4 Analytics and Monitoring

Google Analytics: Tracking user behavior
Error Tracking: Integrating with Sentry or similar services
Performance Monitoring: Measuring and improving page speed
User Feedback: Collecting and processing user input
A/B Testing: Implementing feature experiments

4. AI SDK Implementation

I can help implement AI features using Vercel's AI SDK.

4.1 Text Generation

I can implement text generation capabilities in your applications.

4.1.1 Basic Text Generation

Model Selection: Choosing appropriate OpenAI models
Prompt Engineering: Crafting effective prompts
Response Handling: Processing and displaying generated text
Error Handling: Managing API failures gracefully
Implementation: Using the generateText function from the AI SDK

import { generateText } from 'ai'
import { openai } from '@ai-sdk/openai'

async function generateContent() {
  const { text } = await generateText({
    model: openai('gpt-4o'),
    prompt: 'Write a product description for a smart coffee maker.',
  })
  
  return text
}

4.1.2 Streaming Text Responses

Progressive Rendering: Displaying text as it's generated
Chunk Processing: Handling incremental text updates
UI Feedback: Showing generation status to users
Cancellation: Allowing users to stop generation
Implementation: Using the streamText function from the AI SDK

import { streamText } from 'ai'
import { openai } from '@ai-sdk/openai'

function generateStreamingContent() {
  const response = streamText({
    model: openai('gpt-4o'),
    prompt: 'Write a step-by-step tutorial for making sourdough bread.',
    onChunk: ({ chunk }) => {
      if (chunk.type === 'text-delta') {
        // Update UI with each chunk of text as it arrives
        updateUIWithText(chunk.text)
      }
    },
  })
  
  return response.text // Promise with the full text when complete
}

4.1.3 System Prompts

Context Setting: Providing background information
Personality Definition: Setting the tone and style
Instruction Giving: Directing the model's behavior
Constraint Definition: Limiting the scope of responses
Implementation: Using the system parameter in AI SDK functions

import { generateText } from 'ai'
import { openai } from '@ai-sdk/openai'

async function generateMarketingContent() {
  const { text } = await generateText({
    model: openai('gpt-4o'),
    system: 'You are an expert marketing copywriter. Write in a persuasive, 
             engaging style with short paragraphs and punchy headlines. 
             Focus on benefits rather than features.',
    prompt: 'Write copy for our new wireless headphones with 40-hour battery life.',
  })
  
  return text
}

4.2 Chat Interfaces

I can help build interactive chat experiences with AI.

4.2.1 Message Threading

Conversation History: Maintaining context across messages
Message Formatting: Structuring user and assistant messages
Thread Management: Organizing multiple conversations
Context Window Optimization: Managing token limits

4.2.2 UI Components

Message Bubbles: Visually distinguishing different speakers
Input Areas: Creating accessible text input components
Typing Indicators: Showing when the AI is responding
Message Status: Indicating sent, delivered, and read states

4.2.3 Advanced Features

Message Reactions: Allowing feedback on responses
Suggested Replies: Offering quick response options
File Attachments: Supporting document sharing
Code Highlighting: Properly formatting code in messages

4.3 Structured Output

I can implement AI with structured data responses.

4.3.1 JSON Generation

Schema Definition: Specifying output structure
Type Validation: Ensuring correct data types
Error Handling: Managing malformed outputs
Data Transformation: Converting for frontend use

4.3.2 Form Completion

Field Extraction: Identifying relevant information
Validation Logic: Verifying data accuracy
Default Values: Providing sensible fallbacks
User Confirmation: Allowing review before submission

4.3.3 Data Classification

Category Assignment: Sorting content into predefined groups
Confidence Scores: Indicating classification certainty
Multi-label Classification: Assigning multiple categories
Threshold Setting: Determining minimum confidence levels

4.4 Tool Use and Function Calling

I can implement AI models that use external tools and functions.

4.4.1 Function Definition

Parameter Specification: Defining required inputs
Return Type Declaration: Specifying output formats
Documentation: Describing function purpose and usage
Error States: Handling potential failures

4.4.2 Tool Integration

API Connectors: Linking to external services
Database Queries: Retrieving relevant information
Computational Tools: Performing calculations
Decision Trees: Implementing conditional logic

4.4.3 Multi-step Reasoning

Task Decomposition: Breaking complex requests into steps
Intermediate Results: Storing and using partial outputs
Plan Formation: Creating and following execution plans
Self-correction: Identifying and fixing errors

5. Knowledge Base

I have extensive knowledge about modern web development technologies and practices.

5.1 Next.js Expertise

I stay current with the latest Next.js features and best practices.

5.1.1 Next.js 15 Features

Turbopack Improvements: Faster development experience
Server Actions Enhancements: More powerful form handling
Image Component Updates: Better image optimization
Font Loading Optimizations: Improved font performance
Partial Prerendering: Combining static and dynamic content

5.1.2 App Router Architecture

Route Handlers: API endpoints in the App Router
Metadata API: SEO and social sharing optimization
Intercepting Routes: Advanced routing patterns
Parallel Routes: Multiple simultaneous page sections
Static vs. Dynamic Rendering: Performance optimization strategies

5.1.3 Performance Optimization

React Server Components: Reducing JavaScript bundle size
Streaming: Incrementally rendering content
Edge Runtime: Deploying close to users
Caching Strategies: Balancing freshness and performance
Instrumentation: Measuring and monitoring performance

5.2 React Patterns

I understand modern React development patterns and best practices.

5.2.1 Server Components

Data Fetching: Server-side data access patterns
Component Composition: Mixing client and server components
Progressive Enhancement: Building resilient interfaces
Security Considerations: Keeping secrets server-side
SEO Benefits: Improving search engine visibility

5.2.2 Client Components

Interactivity Patterns: Adding user interactions
State Management: Managing client-side state
Effect Handling: Working with side effects
Event Listeners: Responding to user actions
Performance Optimization: Preventing unnecessary re-renders

5.2.3 React Hooks

Built-in Hooks: useState, useEffect, useContext, etc.
Custom Hooks: Creating reusable stateful logic
Hook Rules: Following best practices
Performance Hooks: useMemo, useCallback, etc.
External State Hooks: Integrating with libraries

5.3 Web Development Best Practices

I stay current with evolving standards in web development.

5.3.1 Performance

Core Web Vitals: Optimizing LCP, FID, and CLS
Bundle Optimization: Reducing JavaScript size
Lazy Loading: Deferring non-critical resources
Image Optimization: Choosing appropriate formats and sizes
Font Loading: Preventing layout shifts and flash of unstyled text

5.3.2 Security

OWASP Guidelines: Following security best practices
Content Security Policy: Preventing XSS attacks
CORS Configuration: Managing cross-origin requests
Authentication Patterns: Implementing secure sign-in
Data Validation: Sanitizing user inputs

5.3.3 SEO and Accessibility

Semantic HTML: Using appropriate elements
ARIA Implementation: Making interactive elements accessible
Keyboard Navigation: Ensuring keyboard usability
Meta Tag Optimization: Improving search visibility
Structured Data: Implementing schema.org markup

5.3.4 Testing Strategies

Unit Testing: Testing individual components
Integration Testing: Testing component interactions
End-to-End Testing: Testing complete user flows
Visual Regression: Ensuring UI consistency
Accessibility Testing: Verifying WCAG compliance

This comprehensive breakdown covers the full range of my capabilities as v0. I can help you implement any of these features or approaches in your projects, providing code, explanations, and best practices tailored to your specific needs.

Is there a particular area from this overview that you'd like me to focus on for your project?

jasonkneen/prompt.md