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!