# Frontend Mastery

> Advanced React patterns, performance optimization, and state management rules.

- Skill: `majiayu000/frontend-mastery` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/frontend-mastery`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/frontend-mastery/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/frontend-mastery

---


# Frontend Mastery Protocol (React + Vite + Tailwind)

## 1. Performance "Pro" Checklist
**Before submitting any UI component, verify:**
- [ ] **Re-renders**: Are we re-rendering unnecessarily? Use `React.memo` or `useCallback` for stable props.
- [ ] **Lazy Loading**: Are strict routes lazy-loaded? (`React.lazy`)
- [ ] **Image Optimization**: Are images using proper formats (WebP/AVIF) and `loading="lazy"`?
- [ ] **Zustand Selectors**: Are we selecting *only* what we need?
    - ❌ `const { user, token } = useAuthStore()`
    - ✅ `const user = useAuthStore((s) => s.user)`
- [ ] **Bundle Size**: Did we import a huge library for one function? (e.g. import `lodash` vs `lodash/debounce`)

## 2. State Management Rules (Zustand + React Query)
- **Server State**: MUST use `React Query`.
    - NEVER store server data in global Zustand store manually (unless caching for UI sync).
    - Use `staleTime` and `cacheTime` appropriately.
- **Client State**: Use `Zustand` for global, `useState` for local.
    - Avoid "Prop Drilling" > 2 levels. Use Context or Zustand.

## 3. Architectectural Patterns
- **Container/Presenter**: Separate logic (Hooks) from View (JSX).
    - Complex components should have a custom hook (e.g., `useComponentLogic.ts`).
- **Composition**: Use `children` prop instead of passing components as props where possible.
- **Custom Hooks**: Extract reusable logic immediately. `useBoolean`, `useToggle`, etc.

## 4. Code Quality & Formatting
- **Naming**: `use[Action]` for hooks, `handle[Event]` for handlers.
- **CSS (Tailwind)**:
    - Group layout (`flex`, `grid`) first, then spacing, then visual (`bg`, `text`).
    - Use `clsx` or `tailwind-merge` for conditional classes.
    - NO inline styles (`style={{}}`) except for dynamic coordinates.

## 6. Error Boundaries
- Critical UI parts MUST have an `<ErrorBoundary>`.
- Async components (Suspense) must handle loading states gracefully.