# Frontend Development Guidelines

---

## Overview

hyb-oa frontend work uses React, TypeScript, Vite and Tailwind under `client/`.
The project-specific frontend implementation rules live in
`../hyb-oa/frontend-react-vite-design.md`; product experience facts remain in
`docs/产品设计规则.md`. Visual and interaction design authority comes from the
installed `frontend-design` skill.

---

## Guidelines Index

| Guide | Description | Status |
|-------|-------------|--------|
| [hyb-oa Frontend Rules](../hyb-oa/frontend-react-vite-design.md) | Current project frontend/design rules | Current |
| [Directory Structure](./directory-structure.md) | Module organization and file layout | Scaffold |
| [Component Guidelines](./component-guidelines.md) | Component patterns, props, composition | Scaffold |
| [Hook Guidelines](./hook-guidelines.md) | Custom hooks, data fetching patterns | Scaffold |
| [State Management](./state-management.md) | Local state, global state, server state | Scaffold |
| [Quality Guidelines](./quality-guidelines.md) | Code standards, forbidden patterns | Scaffold |
| [Type Safety](./type-safety.md) | Type patterns, validation | Scaffold |

---

## Language

Project rules are Chinese-first where they are user-facing. Short English files
generated by Trellis may remain when they are tool-facing scaffolding.