diff --git a/LLM_DEV_PROMPTS/.dockerignore b/LLM_DEV_PROMPTS/.dockerignore new file mode 100644 index 0000000..5414d56 --- /dev/null +++ b/LLM_DEV_PROMPTS/.dockerignore @@ -0,0 +1,3 @@ +.git +node_modules +.DS_Store diff --git a/LLM_DEV_PROMPTS/.gitignore b/LLM_DEV_PROMPTS/.gitignore new file mode 100644 index 0000000..afdb9cf --- /dev/null +++ b/LLM_DEV_PROMPTS/.gitignore @@ -0,0 +1,26 @@ +# OS +.DS_Store +Thumbs.db + +# Editors +*.swp +*.swo +*~ +*.bak +.idea/ +.vscode/ +*.sublime-* + +# Node +node_modules/ + +# Environment / secrets +.env +.env.* +*.pem +*.key + +# Prompts +prompts/ +*prompts +prompts* \ No newline at end of file diff --git a/LLM_DEV_PROMPTS/ANGULAR PROJECTS/ANGULAR_BEST_PRACTICES.md b/LLM_DEV_PROMPTS/ANGULAR PROJECTS/ANGULAR_BEST_PRACTICES.md new file mode 100644 index 0000000..8ecf0d6 --- /dev/null +++ b/LLM_DEV_PROMPTS/ANGULAR PROJECTS/ANGULAR_BEST_PRACTICES.md @@ -0,0 +1,1561 @@ +## Introduction + +1. This guide covers a range of style conventions for Angular application code. These recommendations +are not required for Angular to work, but instead establish a set of coding practices that promote +consistency across the Angular ecosystem. A consistent set of practices makes it easier to share +code and move between projects. + +2. This guide does _not_ cover TypeScript or general coding practices unrelated to Angular. For +TypeScript, check +out [Google's TypeScript style guide](https://google.github.io/styleguide/tsguide.html). + +### When in doubt, prefer consistency + +1. Whenever you encounter a situation in which these rules contradict the style of a particular file, +prioritize maintaining consistency within a file. Mixing different style conventions in a single +file creates more confusion than diverging from the recommendations in this guide. + +## Naming + +### Separate words in file names with hyphens + +1. Separate words within a file name with hyphens (`-`). For example, a component named `UserProfile` +has a file name `user-profile.ts`. + +### Use the same name for a file's tests with `.spec` at the end + +1. For unit tests, end file names with `.spec.ts`. For example, the unit test file for +the `UserProfile` component has the file name `user-profile.spec.ts`. + +### Match file names to the TypeScript identifier within + +1. File names should generally describe the contents of the code in the file. When the file contains a +TypeScript class, the file name should reflect that class name. For example, a file containing a +component named `UserProfile` has the name `user-profile.ts`. + +2. If the file contains more than one primary namable identifier, choose a name that describes the +common theme to the code within. If the code in a file does not fit within a common theme or feature +area, consider breaking the code up into different files. Do not use overly generic file names +like `helpers.ts`, `utils.ts`, or `common.ts`. + +### Use the same file name for a component's TypeScript, template, and styles + +1. Components typically consist of one TypeScript file, one template file, and one style file. These +files should share the same name with different file extensions. For example, a `UserProfile` +component can have the files `user-profile.ts`, `user-profile.html`, and `user-profile.css`. + +2. If a component has more than one style file, append the name with additional words that describe the +styles specific to that file. For example, `UserProfile` might have style +files `user-profile-settings.css` and `user-profile-subscription.css`. + +## Project structure + +### All the application's code goes in a directory named `src` + +1. All of your Angular UI code (TypeScript, HTML, and styles) should live inside a directory +named `src`. Code that's not related to UI, such as configuration files or scripts, should live +outside the `src` directory. + +2. This keeps the root application directory consistent between different Angular projects and creates +a clear separation between UI code and other code in your project. + +### Bootstrap your application in a file named `main.ts` directly inside `src` + +1. The code to start up, or **bootstrap**, an Angular application should always live in a file +named `main.ts`. This represents the primary entry point to the application. + +### Group closely related files together in the same directory + +1. Angular components consist of a TypeScript file and, optionally, a template and one or more style +files. You should group these together in the same directory. + +2. Unit tests should live in the same directory as the code-under-test. Do not collect unrelated +tests into a single `tests` directory. + +### Organize your project by feature areas + +1. Organize your project into subdirectories based on the features of your application or common themes +to the code in those directories. For example, the project structure for a movie theater site, +MovieReel, might look like this: + +``` +src/ +├─ movie-reel/ +│ ├─ show-times/ +│ │ ├─ film-calendar/ +│ │ ├─ film-details/ +│ ├─ reserve-tickets/ +│ │ ├─ payment-info/ +│ │ ├─ purchase-confirmation/ +``` + +2. Do not create subdirectories based on the type of code that lives in those directories. For +example, do not create directories like `components`, `directives`, and `services`. + +3. Do not put so many files into one directory that it becomes hard to read or navigate. As the +number of files in a directory grows, consider splitting further into additional sub-directories. + +### One concept per file + +1. Prefer focusing source files on a single _concept_. For Angular classes specifically, this usually +means one component, directive, or service per file. However, it's okay if a file contains more than +one component or directive if your classes are relatively small and they tie together as part of a +single concept. + +2. When in doubt, go with the approach that leads to smaller files. + +## Dependency injection + +### Prefer the `inject` function over constructor parameter injection + +1. Prefer using the [`inject`](/api/core/inject) function over injecting constructor parameters. The [`inject`](/api/core/inject) function works the same way as constructor parameter injection, but offers several style advantages: + +- [`inject`](/api/core/inject) is generally more readable, especially when a class injects many dependencies. +- It's more syntactically straightforward to add comments to injected dependencies +- [`inject`](/api/core/inject) offers better type inference. +- When targeting ES2022+ with [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields), you can avoid separating field declaration and initialization when fields read on injected dependencies. + +2. [You can refactor existing code to `inject` with an automatic tool](reference/migrations/inject-function). + +## Components and directives + +### Choosing component selectors + +1. See +the [Components guide for details on choosing component selectors](guide/components/selectors#choosing-a-selector). + +### Naming component and directive members + +1. See the Components guide for details +on [naming input properties](guide/components/inputs#choosing-input-names) +and [naming output properties](guide/components/outputs#choosing-event-names). + +### Choosing directive selectors + +1. Directives should use the +same [application-specific prefix](guide/components/selectors#selector-prefixes) +as your components. + +2. When using an attribute selector for a directive, use a camelCase attribute name. For example, if +your application is named "MovieReel" and you build a directive that adds a tooltip to an element, +you might use the selector `[mrTooltip]`. + +### Group Angular-specific properties before methods + +1. Components and directives should group Angular-specific properties together, typically near the top +of the class declaration. This includes injected dependencies, inputs, outputs, and queries. Define +these and other properties before the class's methods. + +2. This practice makes it easier to find the class's template APIs and dependencies. + +### Keep components and directives focused on presentation + +1. Code inside your components and directives should generally relate to the UI shown on the page. For +code that makes sense on its own, decoupled from the UI, prefer refactoring to other files. For +example, you can factor form validation rules or data transformations into separate functions or +classes. + +### Do not use overly complex logic in templates + +1. Angular templates are designed to +accommodate [JavaScript-like expressions](guide/templates/expression-syntax). +You should take advantage of these expressions to capture relatively straightforward logic directly +in template expressions. + +2. When the code in a template gets too complex, refactor logic into the TypeScript code (typically with a [computed](guide/signals#computed-signals)). + +3. There's no one hard-and-fast rule that determines what constitutes "complex". Use your best +judgement. + +### Use `protected` on class members that are only used by a component's template + +1. A component class's public members intrinsically define a public API that's accessible via +dependency injection and [queries](guide/components/queries). Prefer `protected` +access for any members that are meant to be read from the component's template. + +```ts +@Component({ + ..., + template: `

{{ fullName() }}

`, +}) +export class UserProfile { + firstName = input(); + lastName = input(); + +// `fullName` is not part of the component's public API, but is used in the template. + protected fullName = computed(() => `${this.firstName()} ${this.lastName()}`); +} +``` + +### Use `readonly` for properties that shouldn't change + +1. Mark component and directive properties initialized by Angular as `readonly`. This includes +properties initialized by `input`, `model`, `output`, and queries. The readonly access modifier +ensures that the value set by Angular is not overwritten. + +```ts +@Component({ + /*...*/ +}) +export class UserProfile { + readonly userId = input(); + readonly userSaved = output(); + readonly userName = model(); +} +``` + +2. For components and directives that use the decorator-based `@Input`, `@Output`, and query APIs, this +advice applies to output properties and queries, but not input properties. + +```ts +@Component({ + /*...*/ +}) +export class UserProfile { + @Output() readonly userSaved = new EventEmitter(); + @ViewChildren(PaymentMethod) readonly paymentMethods?: QueryList; +} +``` + +### Prefer `class` and `style` over `ngClass` and `ngStyle` + +1. Prefer `class` and `style` bindings over using the [`NgClass`](/api/common/NgClass) and [`NgStyle`](/api/common/NgStyle) directives. + +```html +{prefer} +
+
+ +
+
+
+
+
+``` + +```html +{avoid} +
+
+
+``` + +2. Both `class` and `style` bindings use a more straightforward syntax that aligns closely with +standard HTML attributes. This makes your templates easier to read and understand, especially for +developers familiar with basic HTML. + +3. Additionally, the `NgClass` and `NgStyle` directives incur an additional performance cost compared +to the built-in `class` and `style` binding syntax. + +4. For more details, refer to the [bindings guide](/guide/templates/binding#css-class-and-style-property-bindings) + +### Name event handlers for what they _do_, not for the triggering event + +1. Prefer naming event handlers for the action they perform rather than for the triggering event: + +```html +{prefer} + +``` + +```html +{avoid} + +``` + +2. Using meaningful names like this makes it easier to tell what an event does from reading the +template. + +3. For keyboard events, you can use Angular's key event modifiers with specific handler names: + +```html +