Cursor rule

1---
2description: "Nx monorepo frontend (core-web): Angular, TypeScript, SDK Angular/React. Use when editing apps, libs, or SDK in core-web."
3globs: core-web/**/*.ts, core-web/**/*.tsx, core-web/**/*.html, core-web/**/*.scss, core-web/**/*.css
4alwaysApply: false
5---
6 
7# Frontend Context (core-web)
8 
9**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.
10 
11## Stack
12- **Angular**: standalone, signals, `inject()`, `input()`/`output()`, `@if`/`@for`, OnPush, PrimeNG + Tailwind CSS (Angular 20+). PrimeFlex is deprecated/removed.
13- **SDK**: `sdk-angular`, `sdk-react`, `sdk-client`, `sdk-types`, etc.
14- **Apps**: `dotcms-ui`, `content-drive-ui`, `edit-ema-ui`, portlets, libs.
15 
16## Nx commands (repo root or `core-web`)
17```bash
18cd core-web && yarn nx show projects
19cd core-web && yarn nx run dotcms-ui:serve
20cd core-web && yarn nx run <project>:test
21cd core-web && yarn nx run <project>:test -t MyComponent
22cd core-web && yarn nx affected -t build --exclude='tag:skip:build'
23cd core-web && yarn nx affected -t lint --exclude='tag:skip:lint'
24cd core-web && yarn nx affected -t test --exclude='tag:skip:test'
25```
26 
27## When to load which doc (`@docs/frontend/...`)
28 
29| If you are… | Load |
30|-------------|------|
31| Writing or refactoring components, templates, or Angular patterns | `@docs/frontend/ANGULAR_STANDARDS.md` |
32| Defining component structure, inputs/outputs, file layout | `@docs/frontend/COMPONENT_ARCHITECTURE.md` |
33| Adding or changing feature state (stores, async) | `@docs/frontend/STATE_MANAGEMENT.md` |
34| Writing or updating styles, Tailwind, BEM | `@docs/frontend/STYLING_STANDARDS.md` |
35| Writing or fixing tests (Spectator, Jest, data-testid) | `@docs/frontend/TESTING_FRONTEND.md` |
36| Using TypeScript (strict, inference, `unknown`, `as const`, `#` private) | `@docs/frontend/TYPESCRIPT_STANDARDS.md` |
37 
38**Reference in chat**: e.g. `@docs/frontend/ANGULAR_STANDARDS.md` or `@docs/frontend/TESTING_FRONTEND.md` so the right doc is included in context.
39 
40## Quick reminders (details in docs)
41- **Angular**: `$` prefix for signals, `$` suffix for observables; no `standalone: true`; OnPush; `[class.x]` / `[style.x]` (no ngClass/ngStyle); host bindings in `host: {}` (no @HostBinding/@HostListener).
42- **File structure**: One component = one `.ts` + one `.html` + one `.scss` (or `.css`); `templateUrl`/`styleUrls` relative to the component file.
43- **Images**: Use `NgOptimizedImage` for static/asset URLs; not for inline base64.
44- **State**: Prefer NgRx Signal Store; avoid manual signal soup in components. See `@docs/frontend/STATE_MANAGEMENT.md`.
45- **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`.
46- **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`.
47- **TypeScript**: Strict types, no `any` (use `unknown`), `as const` instead of enums, `#` for private. See `@docs/frontend/TYPESCRIPT_STANDARDS.md`.
48- **Services**: Single responsibility; `providedIn: 'root'`; use `inject()` instead of constructor injection.
49- **Accessibility**: Aim for WCAG AA; semantic HTML and ARIA where appropriate.
50 
51## Nx
52For workspace/graph/config: Nx MCP tools or `yarn nx show projects`; see `core-web/AGENTS.md`.
53