# Frontend UI Dark Theme Acceptance Criteria (TypeScript)
**Stack**: React, Tailwind CSS, Framer Motion, Vite
**Purpose**: Skill testing acceptance criteria for validating generated code correctness
---
## 1. Correct Import Patterns
### 1.1 Core React Imports
#### ✅ CORRECT: React Imports
```typescript
import React from 'react';
import { useState, useEffect, useCallback, memo } from 'react';
import ReactDOM from 'react-dom/client';
```
### 1.2 Router Imports
#### ✅ CORRECT: React Router Imports
```typescript
import { BrowserRouter, Routes, Route, Link, useNavigate } from 'react-router-dom';
```
### 1.3 Animation Imports
#### ✅ CORRECT: Framer Motion Imports
```typescript
import { motion, AnimatePresence } from 'framer-motion';
```
### 1.4 Utility Imports
#### ✅ CORRECT: Class Merging
```typescript
import clsx from 'clsx';
```
### 1.5 Anti-Patterns (ERRORS)
#### ❌ INCORRECT: Using outdated imports
```typescript
// WRONG - outdated createRoot API
import ReactDOM from 'react-dom';
ReactDOM.render(, document.getElementById('root'));
// WRONG - using require
const React = require('react');
```
---
## 2. Color System Patterns
### 2.1 ✅ CORRECT: Brand Colors
```typescript
// Brand purple palette
const brandColors = {
brand: '#8251EE',
brandHover: '#9366F5',
brandLight: '#A37EF5',
brandSubtle: 'rgba(130, 81, 238, 0.15)',
};
```
### 2.2 ✅ CORRECT: Neutral Background Colors
```typescript
// Dark theme neutral backgrounds (bg1 darkest to bg6 lightest)
Page background
Card background
Elevated surface
Hover state
```
### 2.3 ✅ CORRECT: Text Colors
```typescript
Primary text (white)
Secondary text (gray)
Muted text (dark gray)
```
### 2.4 ✅ CORRECT: Border Colors
```typescript
Subtle border
Default border
Strong border
```
### 2.5 ✅ CORRECT: Status Colors
```typescript
Success
Warning
Error
Info
```
### 2.6 Anti-Patterns (ERRORS)
#### ❌ INCORRECT: Using light theme colors
```typescript
// WRONG - light theme background
...
// WRONG - light theme text
...
```
---
## 3. Glass Effect Patterns
### 3.1 ✅ CORRECT: Glass Card
```typescript
Card Title
Card content goes here.
```
### 3.2 ✅ CORRECT: Glass Panel
```typescript
```
### 3.3 ✅ CORRECT: Glass Overlay (Modal)
```typescript
```
### 3.4 ✅ CORRECT: Glass Input
```typescript
```
---
## 4. Animation Patterns
### 4.1 ✅ CORRECT: Fade In Variant
```typescript
const fadeIn = {
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
transition: { duration: 0.2 },
};
Content
```
### 4.2 ✅ CORRECT: Slide Up Variant
```typescript
const slideUp = {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: 20 },
transition: { duration: 0.3, ease: 'easeOut' },
};
```
### 4.3 ✅ CORRECT: Scale on Hover
```typescript
const scaleOnHover = {
whileHover: { scale: 1.02 },
whileTap: { scale: 0.98 },
transition: { type: 'spring', stiffness: 400, damping: 17 },
};
```
### 4.4 ✅ CORRECT: Stagger Children
```typescript
const staggerContainer = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.05,
delayChildren: 0.1,
},
},
};
const staggerItem = {
hidden: { opacity: 0, y: 10 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.2, ease: 'easeOut' },
},
};
```
### 4.5 ✅ CORRECT: Page Transition
```typescript
{children}
```
### 4.6 ✅ CORRECT: AnimatePresence for Exit
```typescript
} />
} />
```
---
## 5. Component Patterns
### 5.1 ✅ CORRECT: Button Component
```typescript
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'ghost';
size?: 'sm' | 'md' | 'lg';
children: React.ReactNode;
onClick?: () => void;
}
function Button({ variant = 'primary', size = 'md', children, onClick }: ButtonProps) {
return (
{children}
);
}
```
### 5.2 ✅ CORRECT: Card Component
```typescript
interface CardProps {
children: React.ReactNode;
className?: string;
}
function Card({ children, className }: CardProps) {
return (
{children}
);
}
```
---
## 6. Typography Patterns
### 6.1 ✅ CORRECT: Typography Classes
```typescript
// Page title
Page Title
// Section title
Section Title
// Card title
Card Title
// Body text
Body text content
// Caption
Caption text
// Label
```
---
## 7. Layout Patterns
### 7.1 ✅ CORRECT: App Shell
```typescript
function AppShell({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
### 7.2 ✅ CORRECT: Page Header
```typescript
function PageHeader({ title, description }: { title: string; description?: string }) {
return (
{title}
{description && (
{description}
)}
);
}
```
---
## 8. Focus and Accessibility Patterns
### 8.1 ✅ CORRECT: Focus Visible
```css
*:focus-visible {
@apply outline-none ring-2 ring-brand ring-offset-2 ring-offset-neutral-bg1;
}
```
### 8.2 ✅ CORRECT: Dark Color Scheme
```css
html {
color-scheme: dark;
}
```
---
## 9. Tailwind Configuration Patterns
### 9.1 ✅ CORRECT: Custom Colors in Config
```javascript
module.exports = {
theme: {
extend: {
colors: {
brand: {
DEFAULT: '#8251EE',
hover: '#9366F5',
},
neutral: {
bg1: 'hsl(240, 6%, 10%)',
bg2: 'hsl(240, 5%, 12%)',
},
text: {
primary: '#FFFFFF',
secondary: '#A1A1AA',
},
},
},
},
};
```
---
## 10. Anti-Patterns (ERRORS)
### 10.1 ❌ INCORRECT: Light Theme Usage
```typescript
// WRONG - light backgrounds
...
...
```
### 10.2 ❌ INCORRECT: Missing Motion Components
```typescript
// WRONG - static hover without motion
// CORRECT - with motion
...
```
### 10.3 ❌ INCORRECT: Missing AnimatePresence
```typescript
// WRONG - no exit animations
{isOpen && }
// CORRECT - with AnimatePresence
{isOpen && }
```