| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 0 | 0 | 10 | 0% |
| Commands | 0 | 0 | 0 | — |
| Section tags | 1 | 2 | 3 | 17% |
What each file covers
Sections
0 shared · 0 only in A · 10 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 · 2 only in A · 3 only in B- − security
- − do-not
- + architecture
- + ui
- + performance
- code-style
Line diff
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
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
@@ −1 +1 @@
1−Codex Workspace Rules (AGENTS.md)
1+# React Patterns and Best Practices
22
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.
3+## Component Structure
64
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.
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
1011
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.
12+## Context Usage
1813
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).
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
2318
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.
19+## Custom Hooks
2920
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.
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
3525
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.
26+## State Management
4027
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.
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
4532
46−When In Doubt
47−- Clarify requirements, propose a minimal plan, and confirm before large changes.
33+## Form Handling
4834
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.*`.
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
5839
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.
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+---
6286
