| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 0 | 0 | 11 | 0% |
| Commands | 0 | 0 | 0 | — |
| Section tags | 0 | 3 | 2 | 0% |
What each file covers
Sections
0 shared · 0 only in A · 11 only in B- + UI Components and Design System
- + Component Library
- + Available UI Components
- + Styling Guidelines
- + Button Variants
- + Form Components
- + Layout Components
- + Responsive Design
- + Theme Consistency
- + Custom Components
- + Example Usage
Commands
neither file has anySection tags
0 shared · 3 only in A · 2 only in B- − code-style
- − security
- − do-not
- + architecture
- + ui
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/ui-components.mdc
@@ +1 @@
1# UI Components and Design System
2
3## Component Library
4
5- Use shadcn/ui components from `src/components/ui/`
6- All UI components are built on Radix UI primitives
7- Components follow consistent naming: `Button`, `Card`, `Dialog`, etc.
8- Import components from their individual files, not from index
9
10## Available UI Components
11
12- **Button**: `Button` with variants (default, destructive, outline, secondary, ghost, link)
13- **Card**: `Card`, `CardHeader`, `CardContent`, `CardFooter`
14- **Form**: `Input`, `Label`, `Textarea`, `Select`, `Checkbox`
15- **Feedback**: `AlertDialog`, `Dialog`, `Toast` (via sonner)
16- **Layout**: `Separator`, `ScrollArea`, `Tabs`
17- **Data**: `Badge`, `Avatar`, `Skeleton`
18
19## Styling Guidelines
20
21- Use Tailwind CSS for all styling
22- Follow mobile-first responsive design
23- Use CSS variables for consistent spacing and colors
24- Maintain consistent component spacing and sizing
25
26## Button Variants
27
28```typescript
29// Available button variants
30<Button variant="default">Default</Button>
31<Button variant="destructive">Delete</Button>
32<Button variant="outline">Outline</Button>
33<Button variant="secondary">Secondary</Button>
34<Button variant="ghost">Ghost</Button>
35<Button variant="link">Link</Button>
36
37// Available sizes
38<Button size="sm">Small</Button>
39<Button size="default">Default</Button>
40<Button size="lg">Large</Button>
41<Button size="icon">Icon Only</Button>
42```
43
44## Form Components
45
46- Use `Input` for text inputs with proper labels
47- Use `Select` for dropdown selections
48- Use `Checkbox` for boolean selections
49- Always pair form controls with `Label` components
50- Use `Textarea` for multi-line text input
51
52## Layout Components
53
54- Use `Card` for content containers
55- Use `Separator` for visual divisions
56- Use `ScrollArea` for scrollable content
57- Use `Tabs` for tabbed interfaces
58
59## Responsive Design
60
61- Design for mobile first (320px+)
62- Use Tailwind responsive prefixes (sm:, md:, lg:, xl:)
63- Ensure touch-friendly button sizes (min 44px)
64- Test on various screen sizes
65
66## Theme Consistency
67
68- Use project color scheme (purple ping gradient primary, consistent grays)
69- Maintain consistent spacing scale
70- Use consistent typography hierarchy
71- Follow existing component patterns
72
73## Custom Components
74
75- Extend existing UI components when possible
76- Create new components in `src/components/ui/` if needed
77- Follow the same naming and structure patterns
78- Use `cn()` utility for conditional classes
79
80## Example Usage
81
82```typescript
83import { Button } from "@/components/ui/button";
84import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
85import { Input } from "@/components/ui/input";
86import { Label } from "@/components/ui/label";
87
88// Good: Proper component composition
89<Card>
90 <CardHeader>
91 <CardTitle>Product Details</CardTitle>
92 </CardHeader>
93 <CardContent>
94 <div className="space-y-4">
95 <div>
96 <Label htmlFor="name">Product Name</Label>
97 <Input id="name" placeholder="Enter product name" />
98 </div>
99 <Button type="submit">Save Product</Button>
100 </div>
101 </CardContent>
102</Card>;
103```
104
105description:
106globs:
107alwaysApply: false
108
109---
110
@@ −1 +1 @@
1−Codex Workspace Rules (AGENTS.md)
1+# UI Components and Design System
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 Library
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 shadcn/ui components from `src/components/ui/`
6+- All UI components are built on Radix UI primitives
7+- Components follow consistent naming: `Button`, `Card`, `Dialog`, etc.
8+- Import components from their individual files, not from index
109
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.
10+## Available UI Components
1811
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).
12+- **Button**: `Button` with variants (default, destructive, outline, secondary, ghost, link)
13+- **Card**: `Card`, `CardHeader`, `CardContent`, `CardFooter`
14+- **Form**: `Input`, `Label`, `Textarea`, `Select`, `Checkbox`
15+- **Feedback**: `AlertDialog`, `Dialog`, `Toast` (via sonner)
16+- **Layout**: `Separator`, `ScrollArea`, `Tabs`
17+- **Data**: `Badge`, `Avatar`, `Skeleton`
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+## Styling Guidelines
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+- Use Tailwind CSS for all styling
22+- Follow mobile-first responsive design
23+- Use CSS variables for consistent spacing and colors
24+- Maintain consistent component spacing and sizing
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+## Button Variants
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+```typescript
29+// Available button variants
30+<Button variant="default">Default</Button>
31+<Button variant="destructive">Delete</Button>
32+<Button variant="outline">Outline</Button>
33+<Button variant="secondary">Secondary</Button>
34+<Button variant="ghost">Ghost</Button>
35+<Button variant="link">Link</Button>
4536
46−When In Doubt
47−- Clarify requirements, propose a minimal plan, and confirm before large changes.
37+// Available sizes
38+<Button size="sm">Small</Button>
39+<Button size="default">Default</Button>
40+<Button size="lg">Large</Button>
41+<Button size="icon">Icon Only</Button>
42+```
4843
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.*`.
44+## Form Components
5845
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.
46+- Use `Input` for text inputs with proper labels
47+- Use `Select` for dropdown selections
48+- Use `Checkbox` for boolean selections
49+- Always pair form controls with `Label` components
50+- Use `Textarea` for multi-line text input
51+
52+## Layout Components
53+
54+- Use `Card` for content containers
55+- Use `Separator` for visual divisions
56+- Use `ScrollArea` for scrollable content
57+- Use `Tabs` for tabbed interfaces
58+
59+## Responsive Design
60+
61+- Design for mobile first (320px+)
62+- Use Tailwind responsive prefixes (sm:, md:, lg:, xl:)
63+- Ensure touch-friendly button sizes (min 44px)
64+- Test on various screen sizes
65+
66+## Theme Consistency
67+
68+- Use project color scheme (purple ping gradient primary, consistent grays)
69+- Maintain consistent spacing scale
70+- Use consistent typography hierarchy
71+- Follow existing component patterns
72+
73+## Custom Components
74+
75+- Extend existing UI components when possible
76+- Create new components in `src/components/ui/` if needed
77+- Follow the same naming and structure patterns
78+- Use `cn()` utility for conditional classes
79+
80+## Example Usage
81+
82+```typescript
83+import { Button } from "@/components/ui/button";
84+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
85+import { Input } from "@/components/ui/input";
86+import { Label } from "@/components/ui/label";
87+
88+// Good: Proper component composition
89+<Card>
90+ <CardHeader>
91+ <CardTitle>Product Details</CardTitle>
92+ </CardHeader>
93+ <CardContent>
94+ <div className="space-y-4">
95+ <div>
96+ <Label htmlFor="name">Product Name</Label>
97+ <Input id="name" placeholder="Enter product name" />
98+ </div>
99+ <Button type="submit">Save Product</Button>
100+ </div>
101+ </CardContent>
102+</Card>;
103+```
104+
105+description:
106+globs:
107+alwaysApply: false
108+
109+---
62110
