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.
$ Installer
git clone https://github.com/ms2sato/agent-console /tmp/agent-console && cp -r /tmp/agent-console/.claude/skills/frontend-standards ~/.claude/skills/agent-console// tip: Run this command in your terminal to install the skill
SKILL.md
name: frontend-standards description: React patterns and frontend best practices for this project. Use when implementing React components, hooks, routes, styling, or client-side logic in packages/client.
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
Detailed Documentation
- react-patterns.md - React patterns (useEffect alternatives, Suspense, state management)
- frontend-standards.md - Directory structure, TanStack Router/Query, xterm.js, styling
Repository
ms2sato
Author
ms2sato/agent-console/.claude/skills/frontend-standards
2
Stars
0
Forks
Updated4d ago
Added1w ago