HF Next

HF Next Technical Guidance

This page outlines the technical foundations, patterns, and conventions for the HF Next application.

Core Architecture: Angular v20+

The platform is built on modern Angular with a focus on reactivity, performance, and type safety.

Modern Components

  • Standalone by Default: Components are standalone. No need for standalone: true.
  • Reactivity: Emphasize Signals for inputs, outputs, and local state.
  • Change Detection: Use ChangeDetectionStrategy.OnPush for optimal performance.
  • Native Control Flow: Use @if, @for, and @switch instead of legacy structural directives.
  • Inline Templates: Keep HTML and CSS within the .ts file for component cohesion.

Signal-Based Forms

  • Use the Signal Forms API for reactive, type-safe form management.
  • Single source of truth via writable signal models.
  • Type-safe access to nested fields.
  • Schema-based validation (Built-in: required, email, min, max, etc.).

Development Workflows

Persistent Planning (Manus Style)

We use persistent Markdown files as working memory to track progress on complex tasks:

  • task_plan.md: High-level phases and decisions.
  • findings.md: Research, technical discoveries, and bug analysis.
  • progress.md: Step-by-step session log.

Production Debugging with Sentry

Systematic issue resolution using Sentry's full suite:

  • Discovery: Real-time error tracking and project backlog triage.
  • Analysis: Cross-referencing stack traces, breadcrumbs, and traces.
  • AI-Assisted Fixes: Utilizing Seer for root cause hypotheses and code-level recommendations.

Team Conventions & Best Practices

Code Standards

  • Language: English is the primary language for code and documentation.
  • Accessibility (a11y): Must meet WCAG AA standards and pass AXE checks.
  • Type Safety: Strictly avoid any. Define interfaces for all API responses and models.
  • Services: Prefer Promise over Observable for service functions (use lastValueFrom).

Component Structure Priority

  1. @ViewChild / viewChild()
  2. Injected dependencies (inject())
  3. Static variables
  4. Signal Inputs (input())
  5. Signal Outputs (output())
  6. Local Signals
  7. Computed properties

Shared Ecosystem

Always check shared libraries before creating new components:

  • Luva UI: Shared component library for consistency.
  • Shared Utils: Common services and pipes.

For more detailed patterns, refer to the internal Skills ecosystem in the HF Next repository.