ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
54 lines
1.9 KiB
Plaintext
54 lines
1.9 KiB
Plaintext
---
|
||
description: Frontend coding standards — tokens, reuse, dark mode, Next.js UI conventions
|
||
globs: app/**/*.{tsx,ts},components/**/*.{tsx,ts},lib/**/*.{ts,tsx}
|
||
alwaysApply: false
|
||
---
|
||
|
||
# Frontend Rules (Amin Rayan)
|
||
|
||
Read and follow `docs/design-system/` — especially README, coding-rules, colors, typography, spacing, and quality-checklist.
|
||
|
||
## Always
|
||
|
||
- Follow the Design System docs as the single source of truth.
|
||
- Reuse design tokens from `app/globals.css` via semantic Tailwind classes (`bg-primary`, `text-muted-foreground`, `border-border`, …).
|
||
- Reuse `Container`, `layout` (`@/lib/layout`), `type` / `Typography` (`@/lib/typography`), `Button`, and `Card`.
|
||
- Support light and dark themes through CSS variables (never hardcode surfaces).
|
||
- Preserve responsive, mobile-first behavior.
|
||
- Preserve accessibility (focus rings, labels, keyboard, reduced motion).
|
||
- Prefer existing `components/ui/*` primitives over new ones.
|
||
- Use `cn()` for class composition.
|
||
|
||
## Never
|
||
|
||
- Create another content container or competing `max-w-*` section shell.
|
||
- Hardcode colors (hex/rgb/hsl) in component classNames.
|
||
- Invent spacing outside the project scale (4–96px tokens).
|
||
- Duplicate Button, Card, Input, or typography systems.
|
||
- Ship inconsistent radii, shadows, or hover timings.
|
||
- Introduce a second header/footer for marketing pages.
|
||
- Bypass the design system for “quick” one-off UI.
|
||
|
||
## Patterns
|
||
|
||
```tsx
|
||
import { Container } from "@/components/container";
|
||
import { layout } from "@/lib/layout";
|
||
import { type } from "@/lib/typography";
|
||
import { Button } from "@/components/ui/button";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
<section className={cn("section-shell bg-section-canvas", layout.sectionY)}>
|
||
<Container>
|
||
<h2 className={type.h2}>عنوان</h2>
|
||
<Button size="lg">اقدام</Button>
|
||
</Container>
|
||
</section>
|
||
```
|
||
|
||
## References
|
||
|
||
- `docs/design-system/README.md`
|
||
- `docs/design-system/coding-rules.md`
|
||
- `docs/design-system/quality-checklist.md`
|