tellent

Appearance

GitHub Copilot Configuration ​

This repository uses unified AI configuration from the .ai/ directory.

Core Instructions ​

For complete coding guidelines, see:

  • .ai/config/shared/instructions.md - TypeScript, Angular, and coding best practices
  • .ai/config/shared/workspace.md - Project architecture and development commands
  • .ai/config/shared/contributing.md - Commit conventions and workflow

Quick Reference (Inline Copy) ​

General ​

  • Do not add any comments in the code annotating your changes
  • Follow the existing code indentation

TypeScript Best Practices ​

  • Use strict type checking
  • Prefer type inference when the type is obvious
  • Avoid the any type; use unknown when type is uncertain
  • Use modern ECMAScript features freely
  • Don't use lodash (see: https://youmightnotneed.com/lodash/)

Angular Best Practices ​

  • Always use standalone components over NgModules
  • Don't use explicit standalone: true (it is implied by default)
  • Use signals for state management
  • Implement lazy loading for feature routes
  • Use NgOptimizedImage for all static images

Components ​

  • Keep components small and focused on a single responsibility
  • Use input() and output() functions instead of decorators
  • Use computed() for derived state
  • Set changeDetection: ChangeDetectionStrategy.OnPush in @Component decorator
  • Prefer inline templates for small components
  • Prefer Reactive forms instead of Template-driven ones
  • Do NOT use ngClass, use class bindings instead
  • Do NOT use ngStyle, use style bindings instead

State Management ​

  • Use signals for local component state
  • Use computed() for derived state
  • Keep state transformations pure and predictable

Templates ​

  • Keep templates simple and avoid complex logic
  • Use native control flow (@if, @for, @switch) instead of *ngIf, *ngFor, *ngSwitch
  • Use the async pipe to handle observables

Styling (CSS/Less) ​

  • Use variables from 'theme/vars' for consistency in colors, spacing, and typography
  • Scope component styles using :host to avoid global style pollution
  • Use rem for font sizes (0.1rem = 1px), px for borders/paddings
  • Never hardcode colors - always use theme variables
  • Keep CSS selectors simple; avoid specificity wars
  • Use Less nesting for organization
  • Avoid ::ng-deep - use Input props or CSS attributes instead

Services ​

  • Design services around a single responsibility
  • Use providedIn: 'root' for singleton services
  • Use inject() instead of constructor injection

HTML Layout/Spacing Attribute Utilities ​

  • Use attribute-based utilities: layout, layout-horizontal, layout-vertical, layout-align-items-center, layout-space-between, layout-full-width, layout-full-height, layout-flex-1, padding-tb-small-xx, padding-lr, margin-lr-auto
  • Source: libs/theme/util/theme/styles/utilities/layout.less and spaces.less
  • Prefer for simple flex layouts and spacing; use component-scoped styles for complex cases

Naming Conventions ​

  • Components: {Name}Component in {name}/{name}.component.ts
  • Services: {Name}Service in {name}.service.ts
  • Directives: {Name}Directive in {name}.directive.ts
  • Pipes: {Name}Pipe in {name}.pipe.ts
  • Component selectors: rt-{name} (namespace with rt-)
  • Pipe names: prefix with rt (e.g., rtDuration)

Testing ​

  • Test framework: Vitest
  • Use @ngneat/spectator/vitest for component/service testing
  • Import from @ngneat/spectator/vitest (not @ngneat/spectator)
  • Tests use .spec.ts extension
  • E2E tests in {app-name}-e2e projects using Cypress

For complete details, see .ai/config/shared/instructions.md.