# UI Development Navigation

**Scope**: Frontend code + visual design

---

## Structure

```
Frontend Code (development/frontend/):
├── react/                     # [future]
│   ├── hooks-patterns.md
│   ├── component-architecture.md
│   └── tanstack/
│       ├── query-patterns.md
│       └── router-patterns.md
└── vue/                       # [future]

Visual Design (ui/web/):
├── animation-patterns.md
├── ui-styling-standards.md
├── design-systems.md
└── design/
    ├── concepts/
    └── examples/
```

---

## Quick Routes

| Task | Path |
|------|------|
| **React patterns** | `frontend/react/hooks-patterns.md` [future] |
| **TanStack Query** | `frontend/react/tanstack/query-patterns.md` [future] |
| **Animations** | `../../ui/web/animation-patterns.md` |
| **Styling** | `../../ui/web/ui-styling-standards.md` |
| **Design systems** | `../../ui/web/design-systems.md` |

---

## By Framework

**React** → `frontend/react/` [future]
**Vue** → `frontend/vue/` [future]
**TanStack** → `frontend/react/tanstack/` [future]

## By Concern

**Code patterns** → `development/frontend/` [future]
**Visual design** → `ui/web/`

---

## Related Context

- **Core Standards** → `../core/standards/code-quality.md`
- **UI Category** → `../ui/navigation.md`