Skip to content

Commit 2c9cd64

Browse files
jaruesinkjaruesink
authored
Merge pull request #67 from lambda-curry/codegen-bot/optimize-cursor-rules-file-sizes
feat: Optimize cursor rules file sizes by splitting large files
2 parents bf7336a + 2e76cbd commit 2c9cd64

9 files changed

+1100
-1254
lines changed

‎.cursor/README.md‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,26 @@ This directory contains comprehensive Cursor rules designed to enhance AI-assist
1515
- Security and validation best practices
1616
- Performance optimization techniques
1717

18-
#### `remix-storefront.mdc`
19-
**Comprehensive rules for React Router v7 (Remix) storefront development**
18+
#### Remix Storefront Rules (Split for Better Organization)
19+
20+
**`remix-storefront-routing.mdc`**
2021
- React Router v7 patterns and conventions
22+
- Route structure and loader/action patterns
2123
- Medusa SDK integration
2224
- Form handling with @lambdacurry/forms
23-
- Component patterns and styling with Tailwind CSS
25+
- API integration patterns
26+
27+
**`remix-storefront-components.mdc`**
28+
- Component patterns and architecture
29+
- Styling with Tailwind CSS
30+
- Responsive design principles
31+
- Reusable component patterns
32+
33+
**`remix-storefront-optimization.mdc`**
34+
- Performance optimization and caching strategies
2435
- SEO optimization and meta tag management
25-
- Performance optimization and accessibility
36+
- Error handling and accessibility
37+
- Testing patterns for components
2638

2739
#### `typescript-patterns.mdc`
2840
**Advanced TypeScript patterns and best practices**
@@ -33,11 +45,22 @@ This directory contains comprehensive Cursor rules designed to enhance AI-assist
3345
- Functional programming concepts
3446
- Testing type definitions
3547

36-
#### `testing-patterns.mdc`
37-
**Comprehensive testing strategies for Medusa applications**
48+
#### Testing Rules (Split by Testing Type)
49+
50+
**`testing-patterns-unit.mdc`**
3851
- Unit testing for services and components
52+
- Service layer testing patterns
53+
- React component testing
54+
- Hook testing patterns
55+
56+
**`testing-patterns-integration.mdc`**
3957
- Integration testing for APIs and databases
58+
- Workflow testing
59+
- Database integration patterns
60+
61+
**`testing-patterns-e2e.mdc`**
4062
- End-to-end testing with Playwright
63+
- Storefront user journey testing
4164
- Test utilities and factories
4265
- Mocking strategies and best practices
4366

@@ -66,9 +89,13 @@ These rules are automatically applied based on file patterns:
6689
| Rule File | Target Files |
6790
|-----------|-------------|
6891
| `medusa-development.mdc` | `apps/medusa/**/*.ts`, `apps/medusa/**/*.tsx` |
69-
| `remix-storefront.mdc` | `apps/storefront/**/*.ts`, `apps/storefront/**/*.tsx` |
92+
| `remix-storefront-routing.mdc` | `apps/storefront/**/*.ts`, `apps/storefront/**/*.tsx` |
93+
| `remix-storefront-components.mdc` | `apps/storefront/**/*.ts`, `apps/storefront/**/*.tsx` |
94+
| `remix-storefront-optimization.mdc` | `apps/storefront/**/*.ts`, `apps/storefront/**/*.tsx` |
7095
| `typescript-patterns.mdc` | `**/*.ts`, `**/*.tsx` |
71-
| `testing-patterns.mdc` | `**/*.test.ts`, `**/*.spec.ts`, `**/__tests__/**/*` |
96+
| `testing-patterns-unit.mdc` | `**/*.test.ts`, `**/*.spec.ts`, `**/__tests__/**/*` |
97+
| `testing-patterns-integration.mdc` | `**/*.test.ts`, `**/*.spec.ts`, `**/__tests__/**/*` |
98+
| `testing-patterns-e2e.mdc` | `**/*.test.ts`, `**/*.spec.ts`, `**/__tests__/**/*` |
7299
| `remix-hook-form-migration.mdc` | All TypeScript files (migration context) |
73100

74101
## 🎯 Key Features
@@ -140,7 +167,7 @@ describe("UserService", () => {
140167
it("should create a new user with valid data", async () => {
141168
// Arrange, Act, Assert pattern
142169
})
143-
})
170+
}
144171
```
145172
146173
## 📚 Best Practices Enforced
@@ -245,4 +272,3 @@ Each rule file contains extensive code examples demonstrating:
245272
---
246273
247274
These Cursor rules are designed to accelerate development while maintaining code quality and consistency across the Medusa application. They serve as an intelligent coding assistant, providing contextual guidance based on the specific file and framework being used.
248-

‎.cursor/rules/remix-storefront-components.mdc‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
description: Remix storefront component patterns with React, TypeScript, and Tailwind CSS for building reusable UI components and styling patterns
3+
globs:
4+
- "apps/storefront/**/*.ts"
5+
- "apps/storefront/**/*.tsx"
6+
- "apps/storefront/**/components/**/*.ts"
7+
- "apps/storefront/**/components/**/*.tsx"
8+
- "apps/storefront/**/app/components/**/*.ts"
9+
- "apps/storefront/**/app/components/**/*.tsx"
10+
alwaysApply: true
11+
---
12+
13+
# Remix Storefront Component & Styling Patterns
14+
15+
You are an expert in React component development, TypeScript, and Tailwind CSS for building reusable, accessible, and performant UI components in e-commerce storefronts.
16+
17+
## Core Principles
18+
19+
- Write performant, accessible React components
20+
- Use TypeScript for type safety and better developer experience
21+
- Follow responsive design principles with Tailwind CSS
22+
- Create reusable component patterns and design systems
23+
- Prioritize user experience and accessibility
24+
- Implement proper component composition and prop patterns
25+
26+
## Component Patterns
27+
28+
### Product Components
29+
```typescript
30+
// components/ProductCard.tsx
31+
interface ProductCardProps {
32+
product: Product
33+
className?: string
34+
}
35+
36+
export function ProductCard({ product, className }: ProductCardProps) {
37+
const variant = product.variants?.[0]
38+
const price = variant?.prices?.[0]
39+
40+
return (
41+
<div className={cn("group relative", className)}>
42+
<div className="aspect-square overflow-hidden rounded-lg bg-gray-200">
43+
<img
44+
src={product.thumbnail || "/placeholder.jpg"}
45+
alt={product.title}
46+
className="h-full w-full object-cover object-center group-hover:scale-105 transition-transform"
47+
/>
48+
</div>
49+
50+
<div className="mt-4 space-y-2">
51+
<h3 className="text-sm font-medium text-gray-900">
52+
<Link to={`/products/${product.handle}`}>
53+
<span aria-hidden="true" className="absolute inset-0" />
54+
{product.title}
55+
</Link>
56+
</h3>
57+
58+
{price && (
59+
<p className="text-sm text-gray-700">
60+
{formatPrice(price.amount, price.currency_code)}
61+
</p>
62+
)}
63+
</div>
64+
</div>
65+
)
66+
}
67+
```
68+
69+
### Layout Components
70+
```typescript
71+
// components/Layout.tsx
72+
import { Outlet } from "@react-router/react"
73+
import { Header } from "./Header"
74+
import { Footer } from "./Footer"
75+
76+
export function Layout() {
77+
return (
78+
<div className="min-h-screen flex flex-col">
79+
<Header />
80+
<main className="flex-1">
81+
<Outlet />
82+
</main>
83+
<Footer />
84+
</div>
85+
)
86+
}
87+
```
88+
89+
## Styling with Tailwind CSS
90+
91+
### Responsive Design
92+
```typescript
93+
// Use mobile-first responsive design
94+
<div className="
95+
grid
96+
grid-cols-1
97+
gap-4
98+
sm:grid-cols-2
99+
md:grid-cols-3
100+
lg:grid-cols-4
101+
xl:grid-cols-5
102+
">
103+
{products.map(product => (
104+
<ProductCard key={product.id} product={product} />
105+
))}
106+
</div>
107+
```
108+
109+
### Component Variants
110+
```typescript
111+
// Use clsx for conditional classes
112+
import { clsx } from "clsx"
113+
114+
interface ButtonProps {
115+
variant?: "primary" | "secondary" | "outline"
116+
size?: "sm" | "md" | "lg"
117+
children: React.ReactNode
118+
}
119+
120+
export function Button({
121+
variant = "primary",
122+
size = "md",
123+
children,
124+
...props
125+
}: ButtonProps) {
126+
return (
127+
<button
128+
className={clsx(
129+
"inline-flex items-center justify-center rounded-md font-medium transition-colors",
130+
{
131+
"bg-blue-600 text-white hover:bg-blue-700": variant === "primary",
132+
"bg-gray-200 text-gray-900 hover:bg-gray-300": variant === "secondary",
133+
"border border-gray-300 bg-white text-gray-700 hover:bg-gray-50": variant === "outline",
134+
},
135+
{
136+
"px-3 py-2 text-sm": size === "sm",
137+
"px-4 py-2 text-base": size === "md",
138+
"px-6 py-3 text-lg": size === "lg",
139+
}
140+
)}
141+
{...props}
142+
>
143+
{children}
144+
</button>
145+
)
146+
}
147+
```

0 commit comments

Comments
 (0)