Project & Global Prompts 🎯

Claude 3.7 Sonnet introduces powerful project-wide and global prompting capabilities that help maintain consistency and context across your entire development process.

Understanding Prompt Types

1. Project Prompts

• Specific to your current project
• Maintain project context
• Define architectural patterns
• Set coding standards

2. Global Prompts

• Apply across all projects
• Define general preferences
• Set consistent patterns
• Establish best practices

Project Prompt Examples

1. Architecture Definition

"This is a Next.js project with:
- TypeScript for type safety
- Tailwind CSS for styling
- Supabase for backend
- Authentication required
- Mobile-first design

All components should:
- Use functional components
- Implement proper error boundaries
- Include TypeScript types
- Follow atomic design principles"

2. Coding Standards

"Follow these standards:
- Use arrow functions for components
- Implement proper prop types
- Use custom hooks for logic
- Follow BEM for CSS classes
- Add JSDoc comments for functions
- Use meaningful variable names
- Implement error handling"

3. Testing Requirements

"All code should include:
- Unit tests for utilities
- Component tests with React Testing Library
- Integration tests for critical paths
- E2E tests for user flows
- Proper test coverage
- Meaningful test descriptions"

Global Prompt Examples

1. Code Style

"Always:
- Use TypeScript
- Implement error handling
- Add proper documentation
- Follow SOLID principles
- Use meaningful names
- Include type definitions
- Add proper comments"

2. Best Practices

// Example of enforced practices
interface ComponentProps {
  // Always require proper props
  children: React.ReactNode;
  className?: string;
  // Always type event handlers
  onChange?: (value: string) => void;
  // Always type data structures
  data?: Record<string, unknown>;
}

// Always use proper error handling
const Component: React.FC<ComponentProps> = ({
  children,
  className,
  onChange,
  data
}) => {
  // Always use try-catch
  try {
    // Always validate props
    if (data && !isValidData(data)) {
      throw new Error('Invalid data structure');
    }

    return (
      <div className={cn('base-class', className)}>
        {children}
      </div>
    );
  } catch (error) {
    // Always handle errors gracefully
    handleError(error);
    return <ErrorFallback error={error} />;
  }
};

Using Prompts Effectively

1. Project Setup

"Initialize a new project with:
- Next.js 13 App Router
- TypeScript configuration
- ESLint + Prettier
- Tailwind CSS
- Component structure
- Testing setup
- CI/CD configuration"

2. Feature Development

"Implement user authentication:
- Email/password login
- OAuth providers
- Session management
- Protected routes
- User profile
- Password reset
- Email verification"

3. Code Review

"Review code for:
- Type safety
- Error handling
- Performance
- Security
- Accessibility
- Best practices
- Documentation"

Best Practices

1. Clear Requirements

"Component requirements:
- Accept children prop
- Support custom styling
- Handle loading states
- Manage errors
- Support keyboard navigation
- Follow accessibility guidelines
- Include documentation"

2. Consistent Patterns

// Example of consistent patterns
interface BaseProps {
  className?: string;
  children?: React.ReactNode;
}

interface DataProps<T> extends BaseProps {
  data: T[];
  onDataChange: (data: T[]) => void;
}

function DataComponent<T>({
  className,
  children,
  data,
  onDataChange
}: DataProps<T>) {
  // Implementation
}

3. Error Handling

// Consistent error handling pattern
async function handleOperation<T>(
  operation: () => Promise<T>
): Promise<Result<T>> {
  try {
    const result = await operation();
    return {
      success: true,
      data: result
    };
  } catch (error) {
    handleError(error);
    return {
      success: false,
      error: getErrorMessage(error)
    };
  }
}

Common Scenarios

1. Component Creation

// Follow consistent patterns
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
}

const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  loading = false,
  className,
  children,
  ...props
}) => {
  // Implementation
};

2. Data Fetching

// Consistent data fetching pattern
interface FetchOptions {
  headers?: Record<string, string>;
  cache?: RequestCache;
  next?: NextFetchRequestConfig;
}

async function fetchData<T>(
  url: string,
  options?: FetchOptions
): Promise<Result<T>> {
  try {
    const response = await fetch(url, {
      headers: {
        'Content-Type': 'application/json',
        ...options?.headers
      },
      cache: options?.cache,
      next: options?.next
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    return { success: true, data };
  } catch (error) {
    return {
      success: false,
      error: error instanceof Error ? error.message : 'Unknown error'
    };
  }
}

3. Form Handling

// Consistent form pattern
interface FormData {
  [key: string]: unknown;
}

interface FormProps<T extends FormData> {
  initialData?: Partial<T>;
  onSubmit: (data: T) => Promise<void>;
  validation?: (data: T) => Record<keyof T, string | undefined>;
}

function Form<T extends FormData>({
  initialData,
  onSubmit,
  validation
}: FormProps<T>) {
  // Implementation
}

Remember

• Keep prompts clear and specific
• Maintain consistency across projects
• Update prompts as needs change
• Review and refine regularly
• Document prompt patterns

Need help setting up effective prompts? Check out our Advanced Support options!