frontend-dev-guidelines

# Frontend Dev Guidelines (Senior Level)

> **This skill is at senior frontend developer knowledge level.** Memorize patterns, recognize edge cases, reject anti-patterns.

---

## 1. Senior Developer Mindset

**Think performance-first:**
- Ask "is this causing unnecessary renders?" for every component
- Detect network waterfalls, use parallel fetch
- Monitor bundle size, lazy load heavy components

**Internalize patterns:**
- `React.FC<Props>` + TypeScript always
- `useSWR` with `suspense: true` is standard
- `SuspenseLoader` NEVER early return with spinner

**Reject anti-patterns:**
- Convert barrel file imports to direct imports
- Replace sequential await with `Promise.all()`
- Replace hardcoded colors with globals.css variables

---

## 2. Non-Negotiables (CRITICAL)

### Component Patterns

```typescript
// ✅ STANDARD PATTERN
import React from 'react';
import useSWR from 'swr';
import { SuspenseLoader } from '@/shared/components/SuspenseLoader';

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

interface MyComponentProps {
    id: string;
    className?: string;
}

export const MyComponent: React.FC<MyComponentProps> = ({ id, className }) => {
    const { data } = useSWR(`key-${id}`, () => api.get(id), { suspense: true });
    return <div className={cn("base-class", className)}>{data?.title}</div>;
};

// Usage - with Suspense boundary
<SuspenseLoader>
    <MyComponent id="123" />
</SuspenseLoader>
```

### Performance Rules (Top 15)

| Priority | Rule | Description |
|----------|------|-------------|
| CRITICAL | `Promise.all()` | Parallelize independent async operations |
| CRITICAL | Direct imports | Avoid barrel files, import directly |
| CRITICAL | `next/dynamic` | Dynamic import heavy components |
| CRITICAL | Suspense boundaries | Stream content, prevent waterfalls |
| HIGH | Defer await | Move await to the branch where it's used |
| HIGH | Minimize RSC serialization | Send less data to client |
| HIGH | `React.cache()` | Per-request d