# Frontend Standards

> Detailed React patterns and code examples for frontend implementation. Use when you need step-by-step guidance or concrete code patterns beyond what the auto-loaded frontend rules provide.

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

---


# Frontend Standards (Procedural Guide)

> **Note:** Declarative rules (conventions, directory structure, naming) are in `.claude/rules/frontend.md` and auto-loaded for `packages/client/**`. This skill provides detailed code examples and patterns.

## Detailed Documentation

- [frontend-standards.md](frontend-standards.md) — agent-console-specific frontend patterns: TanStack Router/Query usage, xterm.js integration, Tailwind conventions, Valibot form pitfalls, Browser Verification procedure for UI changes.
- [react-patterns.md](react-patterns.md) — generic React patterns with full code examples: `useSyncExternalStore` for external stores, Suspense for async, async/await in event handlers, async useEffect with cleanup flag, icon component extraction.

The two files are non-overlapping. When a topic is generic React, it lives in `react-patterns.md`; when it is specific to agent-console's stack, it lives in `frontend-standards.md`.

See also: `ux-design-standards` skill for UX design principles that guide feature-level decisions.