The Reference Pattern
Point AI to existing code. It learns your style.
The Concept
Instead of describing your patterns in words, show AI an example:
"Look at how we implemented the UserCard component in
/components/UserCard.tsx. Create a similar ProductCard
component with the same styling patterns."AI will:
- Match your naming conventions
- Use the same structure
- Follow your styling patterns
- Import things the same way
Examples
Matching Component Style
"Reference /components/forms/LoginForm.tsx and create a
similar RegistrationForm component. Same validation pattern,
same error display, same button styling."Matching API Routes
"Look at /app/api/users/route.ts for our API patterns.
Create a similar route at /app/api/products/route.ts
with the same error handling and response format."Matching Service Structure
"Follow the pattern in /services/UserService.ts to create
a ProductService with CRUD operations."Why This Works
Showing is faster than telling. A 50-line file example conveys more than 500 words of explanation.
| Approach | Result |
|---|---|
| "Use consistent naming" | AI interprets loosely |
| "Like in UserCard.tsx" | AI copies exact patterns |
Pro Tips
Use @-mentions in Cursor
@components/UserCard.tsx create a ProductCard with same patternsReference Multiple Files
"Follow the patterns from:
- /components/Card.tsx for layout
- /styles/forms.css for form styling
- /utils/validation.ts for input validation
Create a ContactForm component."Reference for Style Consistency
"Match the tone and format of the comments in /services/AuthService.ts
when documenting this new code."