Treido Frontend

Deprecated (2026-01-29). Use treido-orchestrator + treido-impl-frontend (and treido-audit-* + treido-verify).

Quick Start

Identify the exact file(s) to modify
Check if Server or Client Component is needed
Make the change (1-3 files max per batch)
Run verification: pnpm -s typecheck && pnpm -s lint && pnpm -s styles:gate

Decision Tree

Is this UI work?
├─ Yes → Which type?
│   ├─ New page/route → Create in app/[locale]/(group)/
│   ├─ Reusable component → components/shared/
│   ├─ Route-specific component → app/[locale]/(group)/**/_components/
│   ├─ shadcn primitive modification → components/ui/ (rare)
│   └─ Styling only → Check Tailwind v4 rules below
└─ No → Wrong skill. Use treido-backend or treido-supabase

File Boundaries

Type	Location	Rule
Pages/routes	`app/[locale]/(group)/`	One page per route
Route-private UI	`app/[locale]/(group)/**/_components/`	Never import across route groups
Shared composites	`components/shared/`	Reusable across routes
shadcn primitives	`components/ui/`	No app logic, no hooks
Hooks	`hooks/`	Reusable client-side logic
i18n messages	`messages/en.json`, `messages/bg.json`	Always update both

Server vs Client Components

Default to Server Components. Add "use client" only when needed:

Event handlers (onClick, onChange, etc.)
React hooks (useState, useEffect, useRef)
Browser-only APIs (window, localStorage)
Third-party client libraries

Keep client boundaries small. Wrap only the interactive part.

Tailwind v4 Rules (Non-Negotiable)

Run pnpm -s styles:gate to validate. These patterns are forbidden:

tsx

// ❌ FORBIDDEN
className="bg-[#ff0000]"     // arbitrary color
className="p-[13px]"         // arbitrary spacing
className="bg-gradient-to-r" // gradients
className="text-blue-500"    // palette colors (use semantic tokens)

// ✅ CORRECT
className="bg-destructive"   // semantic token
className="p-4"              // standard spacing
className="text-foreground"  // semantic token

For complete Tailwind v4 rules: See references/tailwind.md

i18n (next-intl)

All user-facing strings must use next-intl:

tsx

// ❌ FORBIDDEN
<p>Welcome to Treido</p>

// ✅ CORRECT
import { useTranslations } from 'next-intl';
const t = useTranslations('HomePage');
<p>{t('welcome')}</p>

Update both message files:

messages/en.json
messages/bg.json

Caching Rules

For Server Components with 'use cache':

tsx

// ✅ CORRECT
'use cache';
import { cacheLife, cacheTag } from 'next/cache';

export async function getCachedData() {
  cacheLife('hours');
  cacheTag('products');
  // ... fetch data
}

// ❌ FORBIDDEN inside cached functions
import { cookies, headers } from 'next/headers';

Verification

After every change:

bash

pnpm -s typecheck && pnpm -s lint && pnpm -s styles:gate

Common Patterns

For shadcn component patterns: See references/shadcn.md For Next.js App Router patterns: See references/nextjs.md

Search AI Tools

treido-frontend

Install this agent skill to your Project

SKILL.md