Agent skill
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 this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/frontend-standards-ms2sato-agent-console-6635dc06
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?