# CLAUDE.md - Premium UX/UI & Web Development Guidelines

This document sets the strict rules and standards for all web application design and development tasks in this project. The goal is to produce **ultra-realistic, high-converting, production-ready, premium-grade interfaces** that avoid any generic "AI-generated" look.

---

## 🎨 1. Core Visual & UX Principles (Zero AI Trope)

### 🚫 Strictly Forbidden (AI-Trope Anti-Patterns)
* **No Multicolored Modern Gradients / Mesh Gradients:** Avoid neon purple-to-cyan or bright pink-to-blue gradients on dark backgrounds.
* **No Unnecessary Glassmorphism:** Do not use `backdrop-filter: blur()` everywhere unless specifically required for overlay context (e.g., sticky headers over media).
* **No Floating Glow Effects:** Avoid subtle background glowing orbs (`blur-3xl` colored circles behind cards).
* **No Generic Abstract AI Graphics:** Never insert futuristic 3D shapes, abstract glowing nodes, or generic high-tech illustrations.
* **No Overused Stock/AI Imagery:** Avoid overly glossy, hyper-perfect faces, or synthetic "corporate modern" vectors.

### ✅ Mandatory Ultra-Realistic Standards
* **Solid & Muted Palette:** Use purposeful, solid surface colors with subtle hue shifts for depth (e.g., tailored slate, zinc, or rich off-white tones).
* **Precision Borders & Shadows:**
  * Use crisp 1px borders with subtle opacity (`border-border` or `border-black/5` / `border-white/10`).
  * Use multi-layered, realistic ambient drop shadows rather than single harsh blurs.
* **Typographic Hierarchy & Tight Kerning:**
  * Clean, highly readable variable sans-serif fonts (e.g., *Inter, SF Pro, Geist, Plus Jakarta Sans*) or precise serif accents.
  * Use explicit letter-spacing (`tracking-tight` for large headlines) and strict line-height ratios.
* **Real-World UI Patterns:** Model interfaces after proven, high-end SaaS and enterprise tools (e.g., *Linear, Vercel, Stripe, Raycast, Apple*).
* **High Contrast & Accessibility:** Ensure WCAG AA compliance with distinct text-to-background contrast.

---

## 🛠️ 2. Component & Layout Architecture

* **Design System First:** Define tokens for color, spacing, typography, and elevation before building components.
* **Micro-Interactions over Flashy Animations:**
  * Subtle hover states (150ms–200ms `ease-out`).
  * Purposeful feedback for click, focus, and state changes (active states, optimistic UI).
  * Avoid long, dramatic entrance animations that slow down user task completion.
* **Data Density & Clarity:** Ensure proper padding, clean table/grid layouts, precise status badges, and well-proportioned icon sizes (use *Lucide Icons* or *Phosphor Icons* at 16px/20px).

---

## 💻 3. Code Standards & Workflow

* **Single-File Output Rule (for Web Apps/Demos):** 
  * When requested to output code or interactive prototypes, deliver everything strictly in a **single self-contained `.html` file** (using Tailwind CDN, modern ES modules, and Inline React/Alpine/Vanilla JS) or a **single `.jsx`/`.tsx` file**.
* **Clean & Maintainable Structure:**
  * Modular component breakdown within the single file.
  * Fully semantic HTML elements (`<main>`, `<nav>`, `<aside>`, `<section>`, `<article>`).
  * Accessible ARIA attributes where relevant.
* **Performance First:** Keep code lean, avoid heavy runtime dependencies, and ensure snappy layout rendering.

---

## 🚀 4. Skill Execution Guidelines

When working on UI/UX tasks:
1. **Analyze First:** Identify the user workflow, target audience, and core data density requirements.
2. **Apply Premium Layout:** Draft clean grids, sidebar navigation, top bar controls, and clear action hierarchies.
3. **Verify Visual Realism:** Audit the UI against the anti-patterns list (Ensure no floating glows, no unnecessary neon gradients, and crisp 1px borders).