skills.rest
dotCMS
dotCMSOFFICIAL
Explore all skills by this author →
WebsiteGitHub

dot-ui-angular-standards

Enforces dotCMS Angular coding standards for the core-web Nx workspace.

950|482|Updated Mar 15, 2012
Search Tags:#pnpm#Jest#Angular#Frontend#Coding Standards#NX#Code review
One-click install
npx skills add https://github.com/dotCMS/core --skill dot-ui-angular-standards
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dot-ui-angular-standards
Source: https://github.com/dotCMS/core/tree/main/.claude/skills/dot-ui-angular-standards
Command: npx skills add https://github.com/dotCMS/core --skill dot-ui-angular-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend work in the dotCMS core-web Nx workspace follows repository-specific Angular conventions that differ from generic upstream Angular guidance, and applying stock Angular CLI advice (ng commands, standalone flags, Karma, @ngneat/spectator) produces code that violates project standards.

Core Features & Use Cases

  • Repository-Specific Rules: Enforces Nx/pnpm workflows, Jest 30 with @openng/spectator, three-file component structure, and Material Symbols icons instead of generic Angular defaults.
  • Precedence Over Upstream Guidance: Overrides the vendored angular-developer skill wherever generic Angular advice conflicts with dotCMS conventions.
  • Review Checklist: Provides a pre-completion checklist covering change detection, component states (loading/empty/error/loaded), subscription teardown, and test verification.
  • Use Case: When writing or reviewing a new component in core-web, the skill ensures you scaffold with Nx generators, use signal-based naming conventions ($ prefix for signals, $ suffix for observables), and test with spectator.setInput() and byTestId selectors.

Quick Start

Ask the assistant to create a new Angular component in core-web following the dotCMS standards and verify it with pnpm nx test and lint.

Frequently Asked Questions about dot-ui-angular-standards

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build and test Angular projects in the dotCMS core-web workspace?▼

Use pnpm with Nx commands from the core-web directory, such as pnpm nx run dotcms-ui:test or pnpm nx build dotcms-ui. There is no angular.json and no Angular CLI workspace, so ng, npm, and yarn commands must not be used.

What testing framework does dotCMS use for Angular components?▼

dotCMS uses Jest 30 with @openng/spectator, never Karma, Vitest, or the deprecated @ngneat/spectator. Tests select elements with byTestId, set inputs via spectator.setInput(), and mock stores in componentProviders.

Should I add standalone: true or changeDetection to new Angular components?▼

No. Standalone is the Angular default so the property is forbidden, and OnPush is the default change detection as of Angular v22, making explicit configuration redundant. Components explicitly marked Eager opted in deliberately and must be left unchanged.

Can I use inline templates or styles in dotCMS Angular components?▼

No. Every component requires three separate files: a .ts file, an .html template referenced via templateUrl, and an .scss file referenced via styleUrls. Inline template and styles properties in decorators are forbidden.

What naming conventions apply to signals and observables in dotCMS Angular code?▼

Signals use a $ prefix (e.g., $mySignal) while observables use a $ suffix (e.g., myObservable$), which is the reverse of common community conventions. Component selectors must use the dot- prefix.

Which icon library should I use in dotCMS Angular templates?▼

Use Material Symbols with the icon name in the element's text content, such as a span with class material-symbols-outlined. Existing PrimeIcons remain as-is, and the deprecated dot-icon component must not be used.

Related Skills

Explore More Software Engineering Skills→
ngx-signal-formsngx-signal-forms
3

nx-plugins

Discover and install Nx plugins via pnpm nx CLI commands.

Official
Intermediate
shenjingnanshenjingnan
333

dev-workflow-checker

Automate type checks, linting, and tests after code modifications.

Community
Intermediate
cuongtl1992cuongtl1992
10

angular-dev

Design Angular 17+ components, state stores, and HTTP services with .NET backend integration.

Community
Advanced
machhub-devmachhub-dev
1

machhub-angular

Integrate MACHHUB SDK into Angular applications with lifecycle-aware initialization.

Official
Intermediate