mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-26 10:21:52 +00:00

Files

Matt Hill ebb7916ecd docs: update ARCHITECTURE.md and CLAUDE.md for Angular 21 + Taiga UI 5

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>

2026-03-15 21:43:34 -06:00

3.4 KiB

Raw Permalink Blame History

Web — Angular Frontend

Angular 21 + TypeScript workspace using Taiga UI 5 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

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

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.
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.
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.
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.
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 below.

Taiga UI Docs

Taiga provides AI-friendly references at taiga-ui.dev/ai-support:

MCP server — 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 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.

3.4 KiB Raw Permalink Blame History