figma.md

gistfile1.txt

You are implementing a production-quality frontend from a Figma design.

Tech stack:
- React
- Next.js (App Router)
- Tailwind CSS
- ShadcnUI

Your goal is to produce a clean, modular, maintainable implementation that matches the Figma design as precisely as possible.

==================================================
CORE RULES
==================================================

1. DO NOT ASSUME DESIGN VALUES
- Do not guess or approximate typography, spacing, dimensions, line-height, letter spacing, radius, shadows, or colors.
- Every visual value must be explicitly derived from Figma.
- If Tailwind does not provide an exact utility, use arbitrary values.
- Never substitute with “close enough” defaults.

2. FRONTEND-ONLY IMPLEMENTATION (CRITICAL)
- This implementation is strictly for UI/UX validation and frontend rendering.
- DO NOT implement real business logic.
- DO NOT connect to real APIs.
- DO NOT implement authentication, persistence, or backend workflows.

==================================================
MOCK DATA + API LAYER (MANDATORY)
==================================================

You MUST simulate backend behavior using mock data and placeholder APIs.

1. CREATE A MOCK API LAYER
- Create a folder: `lib/api/`
- Inside, define placeholder API functions that simulate async calls.

Example:
- `lib/api/todos.ts`
- `lib/api/user.ts`

Each function should:
- Return mocked data
- Use `async/await`
- Simulate latency using `setTimeout` or `Promise`

Example pattern:

export async function getTodos() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: "1", title: "Sample Todo", completed: false }
      ])
    }, 300)
  })
}

2. MOCK DATA STRUCTURE
- Keep mock data realistic and aligned with expected backend contracts.
- Define reusable mock data in:
  - `lib/mocks/`

3. NO BUSINESS LOGIC
- Do NOT implement:
  - validation logic beyond basic UI states
  - calculations
  - transformations that would normally live in backend
- Only implement:
  - data binding
  - UI state (loading, empty, error placeholders)

4. UI STATES REQUIRED
For every data-driven component, support:
- Loading state (skeleton or spinner)
- Empty state
- Populated state
- Basic error state (mocked)

5. DATA FLOW
- Components should:
  - call mock API functions
  - store data in local state
  - render UI accordingly

==================================================
DESIGN FIDELITY RULES
==================================================

(Typography, spacing, layout, colors, shadows — unchanged from previous version)

- Typography must be exact (no inferred line-height)
- Spacing must match Figma exactly
- Colors must use exact values
- Shadows must not be approximated
- Use Tailwind arbitrary values when needed

==================================================
SHADCNUI RULES
==================================================

- Prefer ShadcnUI components
- Install missing components:
  npx shadcn@latest add [component-name]
- Override styles to match Figma exactly

==================================================
ASSET RULES
==================================================

- Icons → `/public/icons`
- Images → `/public/images`
- No external icon libraries unless explicitly specified

==================================================
FILE STRUCTURE
==================================================

Use this structure:

- app/
- components/
  - ui/              (Shadcn only)
  - shared/
  - <feature>/
- lib/
  - api/             (mock APIs)
  - mocks/           (mock data)
  - utils/
- public/icons/
- public/images/

==================================================
COMPONENT NAMING
==================================================

- Files: kebab-case
- Components: PascalCase

Examples:
- `todo-list.tsx` → `TodoList`
- `app-header.tsx` → `AppHeader`

Avoid:
- generic names like `component.tsx`
- dumping everything into one file

==================================================
IMPLEMENTATION RULES
==================================================

1. ROUTES
- Keep pages in `app/` focused on composition only

2. COMPONENTS
- Break UI into logical sections from Figma
- Extract reusable patterns (cards, buttons, lists)

3. STYLING
- Use Tailwind utilities ONLY if exact
- Otherwise use arbitrary values:
  - `text-[14px]`
  - `leading-[20px]`
  - `gap-[12px]`
  - `rounded-[10px]`
  - `shadow-[...]`

4. STATE MANAGEMENT
- Use local React state (`useState`, `useEffect`)
- No global state libraries unless explicitly needed

==================================================
STRICTLY AVOID
==================================================

- ❌ Real API integration
- ❌ Backend logic
- ❌ Auth flows
- ❌ Data persistence
- ❌ Guessing design values
- ❌ Using “close enough” Tailwind classes
- ❌ External icon libraries
- ❌ Over-fragmented components

==================================================
EXPECTED OUTPUT
==================================================

- Pixel-accurate UI from Figma
- Clean component structure
- Mock API layer implemented
- UI supports loading / empty / populated states
- No backend logic
- No assumptions in design implementation

==================================================
FINAL INSTRUCTION
==================================================

Focus on building a visually accurate, modular frontend with mocked data and placeholder APIs.
All styling must match Figma exactly, and all data interactions must be simulated through the mock API layer.