CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Conventions

• No AI attribution anywhere. Never add Co-Authored-By: Claude, Claude-Session:, "Generated with Claude Code", or any similar AI-provenance trailer, line, or note to commit messages, PR descriptions, code comments, or docs. Commits and comments should read as the author's own work.
• Minimal comments. The audience is other software engineers — don't narrate what the code plainly says. No banner/section comments above a component, class, or method (// UserProfile component, // --- helpers ---), no restating a line in words, no scaffolding leftovers. Comment only a non-obvious why: a workaround, a spec quirk, a deliberate edge-case choice.

Commands

• npm start — dev server (ng serve)
• npm run build — production build
• npm run test — run tests with Jest
• No lint script configured. Prettier enforces style (single quotes, 100 width, Angular parser for *.html).

Architecture & Tech Stack

Angular 22, standalone components, zoneless, no NgModules. Tailwind CSS v4.

Routing is a client-type tree under src/app/features/client/<role>/ (currently teacher; student is a stub, unwired). app.routes.ts lazy-loads each role's <role>.routes.ts, which sets a layout component (e.g. TeacherLayoutComponent) as parent and lazy loadComponents each page from components/<page>/.

To add a teacher page: create features/client/teacher/components/<name>/, register it in teacher.routes.ts, and add a nav entry in TeacherLayoutComponent.sidebarConfig.

Layout/sidebar: TeacherLayoutComponent owns collapse state and builds the SidebarConfig (shared/models/sidebar.model.ts) — nav items/badges/user go here, not in the sidebar component. SidebarComponent is presentational only (config/collapsed inputs, toggle/logout outputs). Use signal-based input()/output(), not decorators. Pages own their own header/greeting chrome — there's no shared topbar.

Shared components (shared/components/) are input-driven and cross-role (e.g. MetricCardComponent) — reuse before duplicating.

Styling: theme tokens (--color-purple, --color-surface, --color-txt, etc.) are defined in the @theme block of src/styles.css — use them instead of ad-hoc colors. Icons are Tabler webfont classes (ti-*). Per-component style budget: 4kB warn / 8kB error in prod builds.

Path aliases @core/*, @features/*, @shared/* → src/app/{core,features,shared} (set in tsconfig.json and jest.config.ts). core/ is currently empty. Use aliases, not relative paths, across feature/shared boundaries.

Testing: Jest via jest-preset-angular, zoneless. Every component/pipe/service has a co-located .spec.ts — keep that up for new ones. Keep every spec (new or existing) as the Angular CLI scaffold should create test only — do not add behavioural test cases.

Naming: legacy explicit suffixes (*.component.ts/.html/.scss/.spec.ts), enforced via angular.json schematics — deliberate, not the newer suffix-less default.