Imported from leozinholucas6-arch/studionatalya.dias (AGENTS.md). Install upstream with npx skills add leozinholucas6-arch/studionatalya.dias. Copyright stays with the author.

AGENTS.md

This document provides project context for developers and AI agents working on this codebase.

Project Overview

Product Company is a product marketing storefront built with TanStack Start and deployed on Netlify. The app presents a catalog of products and is structured so recommendation or assistant features can be added without changing the core routing model.

Tech Stack

Key Directories

├── public/                  # Static assets served by the app
├── src/
│   ├── data/products.ts     # Product catalog data
│   ├── routes/              # TanStack Router file-based routes
│   │   ├── __root.tsx       # Root document, metadata, scripts, and global styles
│   │   ├── index.tsx        # Home route with the product list
│   │   └── products/
│   │       └── $productId.tsx
│   ├── router.tsx           # Router setup
│   └── styles.css           # Global Tailwind and CSS variables
├── index.html               # Standalone static landing page
├── netlify.toml             # Netlify build and dev settings
├── package.json             # Scripts and dependencies
└── vite.config.ts           # Vite, TanStack Start, React, Tailwind, and Netlify plugins

Architecture Notes

Routes are file-based under src/routes/. The root route owns the document shell and imports global styles. The home route reads product data from src/data/products.ts, while product detail pages use the dynamic $productId route segment.

Shared UI components should be added under src/components/ when markup or behavior starts repeating across routes. Keep product content in structured data modules unless it needs persistence, in which case use Netlify platform storage.

The root index.html is a standalone static landing page. It is useful for direct static preview or handoff, but the TanStack Start app remains the primary application entry point for Netlify builds.

Coding Conventions

• Use TypeScript and keep strict-mode assumptions intact.
• Use @/ imports for source paths when importing across directories.
• Name React components in PascalCase.
• Name hooks and utilities in camelCase.
• Keep route filenames aligned with TanStack Router conventions.
• Prefer Tailwind utilities and existing CSS variables for app styling.
• Avoid introducing global state until state is genuinely shared across routes or components.

Netlify Notes

The Netlify configuration builds with vite build and publishes dist/client. Local Netlify development should use netlify dev, which proxies the Vite dev server through port 8888.