mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-26 02:11:53 +00:00
ebb7916ecd
Update version references from Angular 20 to Angular 21 and Taiga UI to Taiga UI 5 across architecture docs. Update web/CLAUDE.md with improved Taiga golden rules: prioritize MCP server for docs, remove hardcoded component examples in favor of live doc lookups. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
60 lines
3.4 KiB
Markdown
60 lines
3.4 KiB
Markdown
# Web — Angular Frontend
|
|
|
|
Angular 21 + TypeScript workspace using [Taiga UI 5](https://taiga-ui.dev/) component library.
|
|
|
|
## Projects
|
|
|
|
- `projects/ui/` — Main admin interface
|
|
- `projects/setup-wizard/` — Initial setup
|
|
- `projects/start-tunnel/` — VPN management UI
|
|
- `projects/shared/` — Common library (API clients, components, i18n)
|
|
- `projects/marketplace/` — Service discovery
|
|
|
|
## Development
|
|
|
|
```bash
|
|
npm ci
|
|
npm run start:ui # Dev server with mocks
|
|
npm run build:ui # Production build
|
|
npm run check # Type check all projects
|
|
```
|
|
|
|
## Golden Rules
|
|
|
|
1. **Taiga does it all.** We use Taiga UI 5 for everything — components, directives, layout, dialogs, forms, icons, and styling. Do not hand-roll HTML/CSS when Taiga provides a solution. If you think Taiga can't do something, you're probably wrong — look it up first.
|
|
|
|
2. **Follow existing patterns.** Before writing new code, search this codebase for a similar example. Nearly anything we build has a precedent. Copy the conventions used in neighboring components. Do not invent new patterns when established ones exist.
|
|
|
|
3. **Never guess Taiga APIs.** Taiga UI 5 has its own way of doing things. Do not make up component names, directive names, input bindings, or usage patterns from memory. Always verify against the official docs or the MCP server. Getting it wrong wastes everyone's time.
|
|
|
|
4. **Use the Taiga MCP server.** If a `taiga-ui-mcp` MCP server is available, use it to look up components and get documentation with code examples. It provides two tools: `get_list_components` (search/filter components) and `get_component_example` (get full docs and examples for a component). This is the fastest and most accurate way to get Taiga usage information.
|
|
|
|
5. **Fall back to the Taiga docs.** If the MCP server is not available, use `WebFetch` against `https://taiga-ui.dev/llms-full.txt` to search for component usage. Taiga docs are authoritative — this project's code is not. See [Taiga UI Docs](#taiga-ui-docs) below.
|
|
|
|
## Taiga UI Docs
|
|
|
|
Taiga provides AI-friendly references at [taiga-ui.dev/ai-support](https://taiga-ui.dev/ai-support):
|
|
|
|
- **MCP server** — [`taiga-ui-mcp`](https://github.com/taiga-family/taiga-ui-mcp) provides full access to Taiga UI component docs and Angular code examples via the Model Context Protocol.
|
|
- **llms-full.txt** — `https://taiga-ui.dev/llms-full.txt` (~2200 lines covering all components with code examples). Use `WebFetch` to search it:
|
|
|
|
```
|
|
WebFetch url=https://taiga-ui.dev/llms-full.txt prompt="How to use TuiTextfield with a select dropdown"
|
|
```
|
|
|
|
When implementing something with Taiga, **also check existing code in this project** for local patterns and conventions — Taiga usage here may have project-specific wrappers or style choices.
|
|
|
|
## Architecture
|
|
|
|
See [ARCHITECTURE.md](ARCHITECTURE.md) for the web architecture: API layer, PatchDB state, WebSockets, routing, forms, i18n, and services.
|
|
|
|
## Component Conventions
|
|
|
|
- **Standalone components** preferred (no NgModule). Use `imports` array in `@Component`.
|
|
- **`export default class`** for route components (enables direct `loadComponent` import).
|
|
- **`inject()`** function for DI (not constructor injection).
|
|
- **`signal()`** and `computed()`\*\* for local reactive state.
|
|
- **`toSignal()`** to convert Observables (e.g., PatchDB watches) to signals.
|
|
- **`ChangeDetectionStrategy.OnPush`** on almost all components.
|
|
- **`takeUntilDestroyed(inject(DestroyRef))`** for subscription cleanup.
|