AI Coding

Angular Instructions jun-25.md

1. Project Structure and Setup

• Use Angular CLI for project scaffolding, component generation, and development tasks. This ensures consistency and leverages Angular's best practices out of the box.
• Follow a clear folder structure that separates features, shared modules, and core services. Organize code by feature rather than by type to improve maintainability.
• Enable strict mode in tsconfig.json to catch errors early and enforce type safety.

---

2. Core Angular Concepts

• Standalone Components: Angular uses standalone components, directives, and pipes by default. This simplifies development and reduces boilerplate. You no longer need to declare standalone: true—it is the default.
• NgModules: While standalone is the default, NgModules are still supported for legacy code. Use standalone: false if you need to opt out.
• Signals: Use Angular's new signals API for local state management and reactivity. Prefer signals over external state libraries for simple state needs.

---

3. Coding Standards

• Follow the Angular Style Guide for naming conventions, file organization, and code formatting.
• Use TypeScript features such as interfaces, generics, and type annotations to improve code clarity and safety.
• Prefer const and let over var for variable declarations. Use const when values do not change.
• Avoid using the any type. Always specify explicit types for variables, function parameters, and return values.

---

4. Component and Template Best Practices

• Keep components small and focused. Each component should have a single responsibility.
• Use OnPush change detection to optimize performance, especially for presentational (dumb) components.
• Leverage Angular's built-in directives like *ngFor and *ngIf efficiently. Avoid heavy logic inside templates.
• Adopt self-closing tags for void elements to keep templates clean. Use the migration tool if needed.

---

5. State Management

• Use Signals for local state: Signals are now the recommended way to manage local and derived state in Angular 19.2.0. Use signal, computed, and effect from @angular/core.
• For complex state, consider NgRx or NGXS: For large-scale applications, use established state management libraries.
• Avoid nested subscriptions: Use RxJS operators like combineLatest or withLatestFrom instead of subscribing within subscriptions.

---

6. Forms and Validation

• Choose the right form approach: Use template-driven forms for simple cases and reactive forms for complex scenarios.
• Leverage new form features: Angular 19.2.0 supports type sets in validators for more flexible validation.
• Keep form logic in the component and avoid putting business logic in templates.

---

7. HTTP and Data Fetching

• Use the new httpResource API for streamlined HTTP data fetching and resource management.
• Cache API calls where appropriate to improve performance and reduce network usage.

---

8. Performance Optimization

• Lazy load modules and components to reduce initial load time.
• Use trackBy with *ngFor to optimize list rendering.
• Optimize change detection by using OnPush strategy and signals.

---

9. Security

• Sanitize all user input to prevent XSS attacks.
• Use Angular's built-in security features for safe data binding and template rendering.

---

10. Testing

• Write unit tests for components, services, and pipes using Jasmine, Karma, or Jest.
• Use end-to-end testing tools like Cypress or Playwright for user flow validation.
• Run tests with AOT compilation for better reliability and performance.

---

11. Documentation and Collaboration

• Document code and components with clear comments and README files.
• Use version control (Git) and follow the team's branching and commit message conventions.
• Participate in code reviews to maintain code quality and share knowledge.

base ai prompt

You are an expert AI programming assistant that primarily focuses on producing clear, readable Angular, RxJS, TypeScript, and Node.js code.

You always use the latest version of Angular, TypeScript, RxJS, and Node.js, and you are familiar with the latest features and best practices in these technologies.
You carefully provide accurate, factual, thoughtful answers, and excel at reasoning.
Guidelines to follow:

- Follow the user’s requirements carefully and exactly.
- First, think step-by-step. Start by describing the plan for what to build in pseudocode, written out in great detail.
- Confirm the plan with the user before writing any code.
- Always write correct, up-to-date, bug-free, fully functional, secure, and efficient code.
- Focus on code readability over micro-optimizations but ensure performance is adequate.
- Adhere to SOLID principles and Angular best practices, especially regarding component architecture, dependency injection, and module structure.
- Implement all requested functionality fully—leave NO TODOs, placeholders, or missing pieces.
- Be concise. Minimize non-essential prose.
- If you believe there is no correct answer or a question is unclear, be direct and inform the user instead of guessing.

post prompt.md

Improve coding with this simple prompt:

Reflect on 5-7 different possible sources of the problem, distill those down to 1-2 most likely sources, and then add logs to validate your assumptions before we move onto implementing the actual code fix