---
description: "Nx monorepo frontend (core-web): Angular, TypeScript, SDK Angular/React. Use when editing apps, libs, or SDK in core-web."
globs: core-web/**/*.ts, core-web/**/*.tsx, core-web/**/*.html, core-web/**/*.scss, core-web/**/*.css
alwaysApply: false
---

# Frontend Context (core-web)

**Nx monorepo** in `core-web/`: TypeScript, Angular apps/libs, and SDK for **Angular** and **React**. Full standards live in **`docs/frontend/`**. Index: **`@docs/frontend/README.md`** — load it for the full doc list and when to use each; then load the specific doc you need.

## Stack
- **Angular**: standalone, signals, `inject()`, `input()`/`output()`, `@if`/`@for`, PrimeNG + Tailwind CSS (Angular 22+). PrimeFlex is deprecated/removed.
- **SDK**: `sdk-angular`, `sdk-react`, `sdk-client`, `sdk-types`, etc.
- **Apps**: `dotcms-ui`, `content-drive-ui`, `edit-ema-ui`, portlets, libs.

## Nx commands (repo root or `core-web`)
```bash
cd core-web && pnpm nx show projects
cd core-web && pnpm nx run dotcms-ui:serve
cd core-web && pnpm nx run <project>:test
cd core-web && pnpm nx run <project>:test -t MyComponent
cd core-web && pnpm nx affected -t build --exclude='tag:skip:build'
cd core-web && pnpm nx affected -t lint --exclude='tag:skip:lint'
cd core-web && pnpm nx affected -t test --exclude='tag:skip:test'
```

## When to load which doc (`@docs/frontend/...`)

| If you are… | Load |
|-------------|------|
| Writing or refactoring components, templates, or Angular patterns | `@docs/frontend/ANGULAR_STANDARDS.md` |
| Defining component structure, inputs/outputs, file layout | `@docs/frontend/COMPONENT_ARCHITECTURE.md` |
| Adding or changing feature state (stores, async) | `@docs/frontend/STATE_MANAGEMENT.md` |
| Writing or updating styles, Tailwind, BEM | `@docs/frontend/STYLING_STANDARDS.md` |
| Writing or fixing tests (Spectator, Jest, data-testid) | `@docs/frontend/TESTING_FRONTEND.md` |
| **Reviewing** someone else's tests (violation checklist) | `@docs/frontend/TESTING_REVIEW_RULES.md` |
| Using TypeScript (strict, inference, `unknown`, `as const`, `#` private) | `@docs/frontend/TYPESCRIPT_STANDARDS.md` |
| Working on the breadcrumb trail (GlobalStore) | `@docs/frontend/BREADCRUMBS.md` |
| Unsure which doc you need | `@docs/frontend/README.md` (index) |

**Reference in chat**: e.g. `@docs/frontend/ANGULAR_STANDARDS.md` or `@docs/frontend/TESTING_FRONTEND.md` so the right doc is included in context.

## Quick reminders (details in docs)
- **Angular**: `$` prefix for signals, `$` suffix for observables; no `standalone: true`; no `changeDetection` on new components (OnPush is the v22 default — leave existing `ChangeDetectionStrategy.Eager` as-is); `[class.x]` / `[style.x]` (no ngClass/ngStyle); host bindings in `host: {}` (no @HostBinding/@HostListener).
- **File structure**: One component = one `.ts` + one `.html` + one `.scss` (or `.css`); `templateUrl`/`styleUrls` relative to the component file.
- **Images**: Use `NgOptimizedImage` for static/asset URLs; not for inline base64.
- **State**: Prefer NgRx Signal Store; avoid manual signal soup in components. See `@docs/frontend/STATE_MANAGEMENT.md`.
- **Styling**: Prefer Tailwind utility classes and PrimeNG components first; PrimeFlex is deprecated/removed. Avoid custom SCSS when a Tailwind class exists. Use BEM only when custom styles are truly needed. See `@docs/frontend/STYLING_STANDARDS.md`.
- **Testing**: Spectator + Jest/Vitest; `data-testid` on elements tests query; `byTestId()`, `spectator.setInput()`, `spectator.detectChanges()`, `spectator.click()`, `mockProvider()`; never set component inputs directly. Use `@dotcms/utils-testing` createFake functions (e.g. `createFakeContentlet`, `createFakeLanguage`) instead of manual mocks. See `@docs/frontend/TESTING_FRONTEND.md`.
- **TypeScript**: Strict types, no `any` (use `unknown`), `as const` instead of enums, `#` for private. See `@docs/frontend/TYPESCRIPT_STANDARDS.md`.
- **Services**: Single responsibility; `providedIn: 'root'`; use `inject()` instead of constructor injection.
- **Accessibility**: Aim for WCAG AA; semantic HTML and ARIA where appropriate.

## Nx
For workspace/graph/config: Nx MCP tools or `pnpm nx show projects`; see `core-web/AGENTS.md`.