| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 0 | 11 | 0 | 0% |
| Commands | 0 | 0 | 0 | — |
| Section tags | 0 | 2 | 3 | 0% |
What each file covers
Sections
0 shared · 11 only in A · 0 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 · 2 only in A · 3 only in B- − architecture
- − ui
- + code-style
- + security
- + do-not
Line diff
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
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−# UI Components and Design System
1+Codex Workspace Rules (AGENTS.md)
22
3−## Component Library
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 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
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.
910
10−## Available UI Components
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.
1118
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`
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−## Styling Guidelines
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−- 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
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−## Button Variants
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−```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>
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.
3645
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−```
46+When In Doubt
47+- Clarify requirements, propose a minimal plan, and confirm before large changes.
4348
44−## Form Components
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.*`.
4558
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−---
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.
11062
