| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 0 | 10 | 0 | 0% |
| Commands | 0 | 0 | 0 | — |
| Section tags | 1 | 3 | 2 | 17% |
What each file covers
Sections
0 shared · 10 only in A · 0 only in B- − React Patterns and Best Practices
- − Component Structure
- − Context Usage
- − Custom Hooks
- − State Management
- − Form Handling
- − Event Handling
- − Component Composition
- − Performance Considerations
- − Example Patterns
Commands
neither file has anySection tags
1 shared · 3 only in A · 2 only in B- − architecture
- − ui
- − performance
- + security
- + do-not
- code-style
Line diff
KAMAL20201/SneakerMarketplace · .cursor/rules/react-patterns.mdc
@@ −1 @@
1# React Patterns and Best Practices
2
3## Component Structure
4
5- Use functional components with hooks
6- Place components in appropriate directories:
7 - `src/components/ui/` for reusable UI components
8 - `src/components/` for feature-specific components
9 - `src/pages/` for page-level components
10- Use PascalCase for component names and files
11
12## Context Usage
13
14- Use React Context for global state (Auth, Cart, Payment)
15- Wrap providers in `src/Provider.tsx`
16- Access context values using custom hooks (e.g., `useAuth()`, `useCart()`)
17- Keep context providers lightweight and focused
18
19## Custom Hooks
20
21- Create custom hooks in `src/hooks/` directory
22- Use descriptive names starting with `use` (e.g., `useMobile`, `useAddressStorage`)
23- Keep hooks focused on single responsibility
24- Return objects with clear property names
25
26## State Management
27
28- Use `useState` for local component state
29- Use `useReducer` for complex state logic
30- Minimize `useEffect` usage - prefer event-driven updates
31- Use context for cross-component state sharing
32
33## Form Handling
34
35- Use React Hook Form with Zod validation
36- Define validation schemas in `src/lib/validations/`
37- Use controlled components for form inputs
38- Handle form submission with proper error handling
39
40## Event Handling
41
42- Use descriptive handler names (e.g., `handleAddToCart`, `handleFormSubmit`)
43- Pass event objects to handlers when needed
44- Use proper event types for TypeScript
45- Prevent default behavior when appropriate
46
47## Component Composition
48
49- Use composition over inheritance
50- Pass children as props when appropriate
51- Use render props or function children for complex logic
52- Keep components focused and single-purpose
53
54## Performance Considerations
55
56- Use `React.memo` for expensive components
57- Use `useCallback` for event handlers passed to child components
58- Use `useMemo` for expensive calculations
59- Lazy load routes and heavy components
60
61## Example Patterns
62
63```typescript
64// Good: Functional component with proper typing
65export const ProductCard: React.FC<ProductCardProps> = ({
66 product,
67 onAddToCart,
68}) => {
69 const handleClick = useCallback(() => {
70 onAddToCart(product.id);
71 }, [product.id, onAddToCart]);
72
73 return <div className="product-card">{/* component content */}</div>;
74};
75
76// Good: Custom hook usage
77const { user, signIn } = useAuth();
78const { addToCart } = useCart();
79```
80
81description:
82globs:
83alwaysApply: false
84
85---
86
KAMAL20201/SneakerMarketplace · AGENTS.md
@@ +1 @@
1Codex Workspace Rules (AGENTS.md)
2
3Purpose
4- This file defines project-specific rules and preferences that Codex reads before answering any chat in this workspace.
5- Keep it concise and concrete. Place non-obvious, high-impact rules first.
6
7Cursor Rules
8- Also read and honor all rules in `.cursor/rules/*.mdc` for this project.
9- If any guidance conflicts, `.cursor/rules` takes precedence for this repo.
10
11Behavior Rules
12- Always: Ask 1–2 clarifying questions when scope or intent is ambiguous.
13- Always: Explain planned terminal actions briefly before running commands.
14- Always: Keep answers concise by default; expand only when asked.
15- Ask First: Before running destructive commands (rm/reset) or installing packages.
16- Ask First: Before changing config, adding dependencies, or altering build settings.
17- Never: Expose secrets or print full .env contents in answers or logs.
18
19Style and Tone
20- Tone: Friendly, direct, and efficient. Avoid filler.
21- Responses: Use short sections and bullet lists when they improve scanability.
22- File References: Use clickable paths like `src/file.ts:42` (single line only).
23
24Task Execution
25- Scope: Make minimal, surgical changes focused on the user’s request.
26- Tests: If tests exist, run targeted tests for modified code first.
27- Validation: Prefer small, verifiable steps; summarize progress between steps.
28- Plans: Use the plan tool for multi-step or ambiguous work only.
29
30Code and Project
31- Stack: Vite + React + TypeScript (see `package.json`).
32- Formatting: Match existing style; do not add formatters unless requested.
33- Types: Prefer explicit types in new/changed code; avoid one-letter names.
34- Security: Treat environment variables and credentials as sensitive.
35
36Shell and Approvals
37- Approval Mode: Default to asking before actions needing elevated permissions or network.
38- Sandboxing: Assume workspace-write, network restricted; call out when escalation is needed.
39- Commands: Prefer `rg` for search; read files in <=250-line chunks.
40
41Response Defaults
42- Brevity: Target 3–8 lines unless detail is necessary.
43- Structure: Use short headers sparingly; avoid over-fragmentation.
44- Monospace: Wrap commands, paths, env vars, and identifiers in backticks.
45
46When In Doubt
47- Clarify requirements, propose a minimal plan, and confirm before large changes.
48
49Project-Specific Rules (Customize Below)
50- Backend: Supabase is the source of truth (DB/Auth/Storage/Edge Functions). Do not add custom servers. Use Edge Functions for server logic.
51- Supabase Calls: Avoid redundant fetches. Cache shared data in React Context; expose typed hooks and explicit invalidate/refresh methods.
52- Pagination: For any list/multi-item fetch, implement pagination; show fewer items first and add page controls at the bottom.
53- Dependencies: Install latest stable versions. If unsure about API/usage, ask for a docs link and confirmation before adding. Request approval before changing build/config deps.
54- TypeScript: Use strict typing in all new code. Do not change existing TypeScript config; ensure new code compiles under current strictness. Never use `any`.
55- Mobile UI: Design mobile-first (320px+). Use Tailwind responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`). Ensure touch targets ≥44px and test across screen sizes.
56- UI Patterns: Follow shadcn/ui and Radix-based components in `src/components/ui/`; keep props minimal and typed.
57- Secrets: Never echo or log values from `process.env.*`.
58
59Notes
60- Adjust or expand sections above to reflect your preferences.
61- This file is intended to be read as high-priority context at session start.
62
@@ −1 +1 @@
1−# React Patterns and Best Practices
1+Codex Workspace Rules (AGENTS.md)
22
3−## Component Structure
3+Purpose
4+- This file defines project-specific rules and preferences that Codex reads before answering any chat in this workspace.
5+- Keep it concise and concrete. Place non-obvious, high-impact rules first.
46
5−- Use functional components with hooks
6−- Place components in appropriate directories:
7− - `src/components/ui/` for reusable UI components
8− - `src/components/` for feature-specific components
9− - `src/pages/` for page-level components
10−- Use PascalCase for component names and files
7+Cursor Rules
8+- Also read and honor all rules in `.cursor/rules/*.mdc` for this project.
9+- If any guidance conflicts, `.cursor/rules` takes precedence for this repo.
1110
12−## Context Usage
11+Behavior Rules
12+- Always: Ask 1–2 clarifying questions when scope or intent is ambiguous.
13+- Always: Explain planned terminal actions briefly before running commands.
14+- Always: Keep answers concise by default; expand only when asked.
15+- Ask First: Before running destructive commands (rm/reset) or installing packages.
16+- Ask First: Before changing config, adding dependencies, or altering build settings.
17+- Never: Expose secrets or print full .env contents in answers or logs.
1318
14−- Use React Context for global state (Auth, Cart, Payment)
15−- Wrap providers in `src/Provider.tsx`
16−- Access context values using custom hooks (e.g., `useAuth()`, `useCart()`)
17−- Keep context providers lightweight and focused
19+Style and Tone
20+- Tone: Friendly, direct, and efficient. Avoid filler.
21+- Responses: Use short sections and bullet lists when they improve scanability.
22+- File References: Use clickable paths like `src/file.ts:42` (single line only).
1823
19−## Custom Hooks
24+Task Execution
25+- Scope: Make minimal, surgical changes focused on the user’s request.
26+- Tests: If tests exist, run targeted tests for modified code first.
27+- Validation: Prefer small, verifiable steps; summarize progress between steps.
28+- Plans: Use the plan tool for multi-step or ambiguous work only.
2029
21−- Create custom hooks in `src/hooks/` directory
22−- Use descriptive names starting with `use` (e.g., `useMobile`, `useAddressStorage`)
23−- Keep hooks focused on single responsibility
24−- Return objects with clear property names
30+Code and Project
31+- Stack: Vite + React + TypeScript (see `package.json`).
32+- Formatting: Match existing style; do not add formatters unless requested.
33+- Types: Prefer explicit types in new/changed code; avoid one-letter names.
34+- Security: Treat environment variables and credentials as sensitive.
2535
26−## State Management
36+Shell and Approvals
37+- Approval Mode: Default to asking before actions needing elevated permissions or network.
38+- Sandboxing: Assume workspace-write, network restricted; call out when escalation is needed.
39+- Commands: Prefer `rg` for search; read files in <=250-line chunks.
2740
28−- Use `useState` for local component state
29−- Use `useReducer` for complex state logic
30−- Minimize `useEffect` usage - prefer event-driven updates
31−- Use context for cross-component state sharing
41+Response Defaults
42+- Brevity: Target 3–8 lines unless detail is necessary.
43+- Structure: Use short headers sparingly; avoid over-fragmentation.
44+- Monospace: Wrap commands, paths, env vars, and identifiers in backticks.
3245
33−## Form Handling
46+When In Doubt
47+- Clarify requirements, propose a minimal plan, and confirm before large changes.
3448
35−- Use React Hook Form with Zod validation
36−- Define validation schemas in `src/lib/validations/`
37−- Use controlled components for form inputs
38−- Handle form submission with proper error handling
49+Project-Specific Rules (Customize Below)
50+- Backend: Supabase is the source of truth (DB/Auth/Storage/Edge Functions). Do not add custom servers. Use Edge Functions for server logic.
51+- Supabase Calls: Avoid redundant fetches. Cache shared data in React Context; expose typed hooks and explicit invalidate/refresh methods.
52+- Pagination: For any list/multi-item fetch, implement pagination; show fewer items first and add page controls at the bottom.
53+- Dependencies: Install latest stable versions. If unsure about API/usage, ask for a docs link and confirmation before adding. Request approval before changing build/config deps.
54+- TypeScript: Use strict typing in all new code. Do not change existing TypeScript config; ensure new code compiles under current strictness. Never use `any`.
55+- Mobile UI: Design mobile-first (320px+). Use Tailwind responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`). Ensure touch targets ≥44px and test across screen sizes.
56+- UI Patterns: Follow shadcn/ui and Radix-based components in `src/components/ui/`; keep props minimal and typed.
57+- Secrets: Never echo or log values from `process.env.*`.
3958
40−## Event Handling
41−
42−- Use descriptive handler names (e.g., `handleAddToCart`, `handleFormSubmit`)
43−- Pass event objects to handlers when needed
44−- Use proper event types for TypeScript
45−- Prevent default behavior when appropriate
46−
47−## Component Composition
48−
49−- Use composition over inheritance
50−- Pass children as props when appropriate
51−- Use render props or function children for complex logic
52−- Keep components focused and single-purpose
53−
54−## Performance Considerations
55−
56−- Use `React.memo` for expensive components
57−- Use `useCallback` for event handlers passed to child components
58−- Use `useMemo` for expensive calculations
59−- Lazy load routes and heavy components
60−
61−## Example Patterns
62−
63−```typescript
64−// Good: Functional component with proper typing
65−export const ProductCard: React.FC<ProductCardProps> = ({
66− product,
67− onAddToCart,
68−}) => {
69− const handleClick = useCallback(() => {
70− onAddToCart(product.id);
71− }, [product.id, onAddToCart]);
72−
73− return <div className="product-card">{/* component content */}</div>;
74−};
75−
76−// Good: Custom hook usage
77−const { user, signIn } = useAuth();
78−const { addToCart } = useCart();
79−```
80−
81−description:
82−globs:
83−alwaysApply: false
84−
85−---
59+Notes
60+- Adjust or expand sections above to reflect your preferences.
61+- This file is intended to be read as high-priority context at session start.
8662
