fashion-commerce-shadcn/AGENTS.md

AGENTS.md

Шаблон Monochrome Supply — premium fashion e-commerce; сохраняй product-first минимализм, строгую сетку, реальные commerce-секции и понятные состояния выбора размера/цвета.

Project Specifics

• Source content lives in src/entities/site-content.ts; keep visible copy there or directly in route JSX.
• src/app — только route wrappers; композиция каждой страницы живёт в отдельном widget (src/widgets/<page>-page.tsx). Header/footer — в src/widgets/site-shell.tsx. См. File Map.
• Keep cards at 8px radius or less and preserve the selected palette in src/app/globals.css.
• This is a static frontend template: do not add real payments, auth, persistence, external API calls, or backend contracts without an explicit product request.
• After changes run pnpm lint and pnpm build.

Визуальные правки

• Кириллица обязательна для видимого текста и выбранных Google Fonts.
• При AI-правках сохраняйте доменные блоки этого шаблона: они отличают проект от generic landing.

Design System

Источник токенов — src/app/globals.css (@theme inline + :root/.dark). Шрифты: заголовки и .font-display — Montserrat (--font-display), body — Inter (--font-sans); mono замаплен на тот же display. Работай через семантические классы Tailwind (bg-foreground, text-muted-foreground, border-border), не хардкодь hex/oklch.

Личность: premium monochrome fashion — почти бесцветная ахроматическая палитра (всё в нейтральных серых, chroma ≈ 0), near-black «ink» как контраст, и единственный тёплый янтарный accent (oklch 0.72 0.16 71) для редких акцентов. Фотографии сознательно grayscale и расцвечиваются (group-hover:grayscale-0) только при наведении — это ключевой приём бренда.

Роль	Light	Характер
background	почти белый neutral (0.985)	основной фон страниц
foreground	near-black ink (0.13)	текст + инверсный CTA/footer (bg-foreground text-background)
primary	near-black ink	логотип-плашка, primary-кнопки
secondary	светло-серый (0.94)	бейджи, теги товаров
accent	тёплый янтарь	редкий точечный акцент (по умолчанию почти не используется)
muted	серый (0.955 / fg 0.48)	фон image-плейсхолдеров, вторичный текст
card	чистый белый (1.0)	карточки на фоне 0.985
border	мягкий серый (0.86)	тонкие границы (border border-border, НЕ толстые)

Узнаваемые приёмы (держи их, это и есть «лицо» проекта):

• Мягкие углы: --radius = 0.375rem; почти всё — rounded-md. Никаких острых или сильно скруглённых форм.
• Тонкие границы: border border-border (1px), не толстые brutalist-рамки.
• Grayscale → color на hover: фото идут object-cover grayscale, при наведении карточки — transition group-hover:grayscale-0 (+ лёгкий group-hover:scale-[1.03]).
• Hover-lift с мягкой тенью: hover:-translate-y-1 hover:shadow-[0_24px_60px_rgba(0,0,0,0.09)] — приподнятая карточка вместо жёсткого offset-shadow.
• Типографика: font-semibold (не black), очень крупные плотные заголовки (text-7xl+, leading-[0.94]), eyebrow — uppercase tracking-[0.16em] text-muted-foreground.
• Инверсные блоки: акцентные секции (footer, CTA, средняя карточка lookbook) — bg-foreground text-background с text-background/70 для вторичного текста.
• Фон-фактура: .fashion-fabric — тонкая тканевая сетка для hero; фиксированная max-ширина контента max-w-[1320px].

Do / Don't:

• Do: держи ахроматическую палитру, тонкие границы, grayscale-фото, product-first сетки, крупную сдержанную типографику.
• Don't: яркие цвета/градиенты, толстые рамки, жёсткие offset-тени, rounded-none или rounded-full на карточках, font-black — это ломает premium-минимализм.

File Map

Route	Widget
/	src/widgets/home-page.tsx (HomePage)
/catalog	src/widgets/catalog-page.tsx (CatalogPage)
/product/classic-overshirt	src/widgets/product-detail-page.tsx (ProductDetailPage)
/lookbook	src/widgets/lookbook-page.tsx (LookbookPage)
/cart	src/widgets/cart-page.tsx (CartPage)
/shipping	src/widgets/shipping-page.tsx (ShippingPage)

Переиспользуемые блоки:

• src/widgets/site-shell.tsx — SiteHeader + SiteFooter (обёртка всех страниц через app/layout.tsx).
• src/widgets/featured-grid.tsx — FeaturedGrid (Home, Catalog).
• src/widgets/collection-board.tsx — CollectionBoard (Home, Lookbook).
• src/widgets/product-assurance.tsx — ProductAssurance (Home, Product).
• src/shared/ui/inner-hero.tsx — InnerHero (заголовочная секция внутренних страниц).
• src/shared/ui/icon-cards.tsx — IconCards (Shipping, Product).
• src/shared/ui/info-columns.tsx — InfoColumns (Shipping, Cart).
• src/shared/ui/split-story.tsx — SplitStory (Home, Lookbook).

Одноразовые блоки колоцированы со своей страницей: PageHero/MetricStrip/TestimonialBand в home-page.tsx, CatalogToolbar/PricingTiles в catalog-page.tsx, LookbookGrid в lookbook-page.tsx, CartPreview в cart-page.tsx, ProductDetail/OptionRow/CtaPanel в product-detail-page.tsx.