OpenSkillIndex← back to search
claude-code

Claude-skill-registry 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.

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/frontend-standards" ~/.claude/skills/majiayu000-claude-skill-registry-frontend-standards && rm -rf "$T"
manifest: skills/data/frontend-standards/SKILL.md
source content

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