How to Make Cursor Respect Feature Flags

1# .cursorrules
2
3## Feature Flags
4This project uses a centralized feature flag system. Follow these rules for ALL new code.
5
6### Flag evaluation
7- Import the flag hook from src/utils/featureFlags.ts
8- In React components: use const isEnabled = useFeatureFlag('FLAG_NAME')
9- In service/utility code: use isFeatureEnabled('FLAG_NAME') — synchronous, reads from a global flag store
10- NEVER hard-code feature behaviour behind a plain boolean variable
11- NEVER inline flag logic — always call the designated utility
12
13### Active flag names (as of March 2026)
14- 'new_checkout_flow' — gates the redesigned checkout UI
15- 'ai_recommendations' — gates the AI product recommendation widget
16- 'bulk_export' — gates CSV bulk export on the orders page
17- 'beta_api_v2' — gates v2 API endpoints on the backend
18
19### Flag name format
20- Always LOWER_SNAKE_CASE strings
21- NEVER use boolean literals to simulate flags
22
23### Pattern for React components
24if (!isEnabled) return null; // or return <LegacyComponent />
25
26### Pattern for API routes / service methods
27if (!isFeatureEnabled('FLAG_NAME')) {
28  return res.status(404).json({ error: 'Not available' });
29}

1// src/utils/featureFlags.ts — reference this with @file in your prompts
2
3import { useContext } from 'react';
4import { FlagContext } from './FlagContext';
5
6export function useFeatureFlag(flagName: string): boolean {
7  const flags = useContext(FlagContext);
8  return flags[flagName] ?? false;
9}
10
11export function isFeatureEnabled(flagName: string): boolean {
12  // Server-side / non-React usage
13  return globalFlagStore.get(flagName) ?? false;
14}

1Using @file src/utils/featureFlags.ts:
2
3Generate a React component at src/components/AiRecommendations.tsx.
4This component renders an AI product recommendation widget.
5Requirements:
6- At the top of the component, call useFeatureFlag('ai_recommendations')
7- If the flag is false, return null — do not render anything
8- If the flag is true, render the widget content
9- The widget shows a heading 'Recommended for you' and a grid of 4 ProductCard placeholders
10- Export as named export AiRecommendations

1Using @file src/utils/featureFlags.ts:
2
3Generate a Next.js API route at src/app/api/export/route.ts for bulk CSV export.
4Requirements:
5- Check isFeatureEnabled('bulk_export') at the top of the GET handler
6- If false: return Response.json({ error: 'This feature is not available' }, { status: 404 })
7- If true: generate a CSV from a mock array of 5 order objects and return it as a file download
8- Use strict TypeScript, no 'any'

1Using @codebase:
2
3Scan all files modified or created in the last session in src/components/ and src/app/api/.
4Identify any components or API handlers that introduce new user-facing features but do NOT call useFeatureFlag() or isFeatureEnabled().
5List each file, the function or component name, and the suggested flag name based on the feature description.