---
title: Frontend Development Guide
description: Comprehensive guide for developing in the frontend (app-ui) codebase
---

import { Callout } from 'nextra/components';

<br />

<Callout type="info" emoji="🔄">
  This document is **automatically synced** from 
  
  **Source:** `ui/app-ui/CLAUDE.md`

 </Callout>

<br />

import ClaudeDoc from '../../../../ui/app-ui/CLAUDE.md';

<ClaudeDoc />

<Callout type="warning" emoji="📝">
  **Source of Truth:** [`ui/app-ui/CLAUDE.md`](../../../../ui/app-ui/CLAUDE.md)

To update this guide, edit the source file directly in the app-ui repository.

</Callout>

## Related Documentation

- [App-UI README](../../../../ui/app-ui/README.md)
- [State Management Guide](../../../../ui/app-ui/src/state/README.md)
- [Songify Integration](../../../../ui/app-ui/src/components/songify/README.md)