# Frontend Standards

> React patterns and frontend best practices for this project. Use when implementing React components, hooks, routes, styling, or client-side logic in packages/client.

- Skill: `majiayu000/frontend-standards` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/frontend-standards`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/frontend-standards/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-standards

---


# Frontend Standards

## Key Principles

- **Avoid useEffect** - Use TanStack Query, useSyncExternalStore, or event handlers instead
- **Prefer Suspense** - For loading states and async boundaries
- **useSyncExternalStore** - For external state subscriptions (WebSocket, global stores)
- **Server is the source of truth** - Don't maintain conflicting client state

## Tech Stack

- React 18, TanStack Router, TanStack Query, Tailwind CSS, xterm.js, Valibot

## React Best Practices

- **Suspense Usage** - Prefer Suspense for async operations over manual isLoading flags
- **useEffect Discipline** - Challenge every useEffect: could it be derived value, event handler, or useMemo?
- **Icon Components** - SVG icons belong in `Icons.tsx`, not inline in View components
- **External State** - Use `useSyncExternalStore` for singleton/global state, not useEffect subscriptions
- **Query Key Management** - Use consistent key factories, ensure complete invalidation

## Detailed Documentation

- [react-patterns.md](react-patterns.md) - React patterns (useEffect alternatives, Suspense, state management)
- [frontend-standards.md](frontend-standards.md) - Directory structure, TanStack Router/Query, React best practices, styling