All authors
Claude Skills by HoangNguyen0403
github.com/HoangNguyen04031,434 skills30 installs1,975 views
- Angular SsrDefine server rendering behavior in `app.routes.server.ts` with a `ServerRoute[]`. Import `RenderMode` from `@angular/ssr` and assign a mode to each path: ```ts import { RenderMode, ServerRoute } from '@angular/ssr'; export const serverRoutes: ServerRoute[] = [ // Static HTML generated at build time. { path: 'blog/:slug', renderMode: RenderMode.Prerender }, // HTML generated on every request. { path: 'feed', renderMode: RenderMode.Server }, // No server rendering; the browser bootstraps the S...Votes: 0GitHub stars: 549
- Angular SsrUse Angular’s HTTP transfer cache through `withHttpTransferCacheOptions()` as a feature of `provideClientHydration()`. The server performs the request, serializes the response into the rendered page, and the browser reuses that response during hydration instead of immediately issuing the same GET again: ```ts import { provideHttpClient } from '@angular/common/http'; import { provideClientHydration, withHttpTransferCacheOptions, } from '@angular/platform-browser'; export const appConfig = { pr...Votes: 0GitHub stars: 549
- Angular SsrDo not read `window`, `document`, or `localStorage` directly during component construction, field initialization, or ordinary code that can run on the server. For one-time browser-only work, use `afterNextRender()`: ```ts import { Component, afterNextRender } from '@angular/core'; @Component({ selector: 'app-chart', template: '<div id="chart"></div>', }) export class ChartComponent { constructor() { afterNextRender(() => { const element = document.getElementById('chart'); const width = window...Votes: 0GitHub stars: 549
- Angular SsrIncremental hydration is available in Angular 19+. First enable normal hydration and event replay in `app.config.ts`: ```ts import { provideClientHydration, withEventReplay, } from '@angular/platform-browser'; export const appConfig = { providers: [provideClientHydration(withEventReplay())], }; ``` Then defer hydration for non-critical content with a `hydrate` trigger: ```html @defer (hydrate on viewport) { <heavy-report /> } @placeholder { <p>Report will load when it is visible.</p> } ``` Th...Votes: 0GitHub stars: 549
- Angular SsrIn `app.routes.server.ts`, export a `ServerRoute[]` and set `renderMode` for each route: ```ts import { RenderMode, ServerRoute } from '@angular/ssr'; export const serverRoutes: ServerRoute[] = [ { path: '', renderMode: RenderMode.Prerender }, { path: 'blog/:slug', renderMode: RenderMode.Prerender }, { path: 'feed', renderMode: RenderMode.Server }, { path: 'dashboard', renderMode: RenderMode.Client }, ]; ``` Choose the mode based on the route’s data and privacy needs: - `RenderMode.Prerender`...Votes: 0GitHub stars: 549
- Angular State ManagementUse a service or Signal Store as the single source of truth. Keep writable signals private and expose read-only signals: ```ts import { Injectable, computed, signal } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class CartStore { private readonly items = signal<CartItem[]>([]); readonly cartItems = this.items.asReadonly(); readonly total = computed(() => this.items().reduce((sum, item) => sum + item.price * item.quantity, 0), ); add(item: CartItem): void { this.items.updat...Votes: 0GitHub stars: 549
- Angular State ManagementAssuming a recent Angular version with Signals support: ```bash npm install @ngrx/signals ``` Create a feature store instead of putting state logic in components: ```ts // cart.store.ts import { patchState, signalStore, withComputed, withMethods, withState, } from '@ngrx/signals'; import { computed } from '@angular/core'; type CartItem = { id: string; name: string; price: number; quantity: number; }; type CartState = { items: CartItem[]; }; const initialState: CartState = { items: [], }; expo...Votes: 0GitHub stars: 549
- Angular State ManagementUse `linkedSignal()` for writable state whose default value depends on another signal and should reset when the source changes. ```ts import { Injectable, linkedSignal, signal } from '@angular/core'; @Injectable() export class ProductState { private readonly products = signal([ { id: 1, name: 'Keyboard' }, { id: 2, name: 'Mouse' }, ]); readonly selectedProduct = linkedSignal( () => this.products()[0] ?? null ); setProducts(products: { id: number; name: string }[]): void { this.products.set(pr...Votes: 0GitHub stars: 549
- Angular State ManagementAssuming `cart.store.ts` owns cart state, use Angular Signals; use `@ngrx/signals` for a feature with multiple operations: ```ts import { patchState, signalStore, withComputed, withMethods, withState, } from '@ngrx/signals'; type CartItem = { productId: string; name: string; price: number; quantity: number; }; type CartState = { items: CartItem[]; coupon: string | null; }; export const CartStore = signalStore( { providedIn: 'root' }, withState<CartState>({ items: [], coupon: null, }), withCom...Votes: 0GitHub stars: 549
- Angular State ManagementKeep the writable signal private, then expose its readonly view: ```ts import { Injectable, signal } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class CounterService { private readonly countState = signal(0); readonly count = this.countState.asReadonly(); increment(): void { this.countState.update(value => value + 1); } reset(): void { this.countState.set(0); } } ``` Consume it in a component: ```ts @Component({ template: ` <p>{{ counter.count() }}</p> <button (click)="co...Votes: 0GitHub stars: 549
- Angular State ManagementUse `computed()` when you need a derived value: ```ts total = computed(() => this.items().reduce((sum, item) => sum + item.price, 0)); ``` `computed()` is pure, cached, and should derive values such as totals, filtered lists, or status flags. Use `effect()` only when a signal change must trigger an external side effect: ```ts effect(() => { localStorage.setItem('theme', this.theme()); }); ``` Typical uses include logging, `localStorage` synchronization, and DOM manipulation. Never update sign...Votes: 0GitHub stars: 549
- Angular Style GuideUse descriptive `kebab-case` filenames with a type suffix: - Components: `hero-list.component.ts` - Services: `auth.service.ts` - Directives: `highlight.directive.ts` - Pipes: `truncate.pipe.ts` - Guards: `auth.guard.ts` - Interceptors: `auth.interceptor.ts` - Routes: `app.routes.ts` The suffix makes a file's purpose immediately identifiable and supports the LIFT goal of locating code quickly. Keep one component or service per file, keep the project structure as flat as practical, and keep fi...Votes: 0GitHub stars: 549
- Angular Style GuideName Angular classes in `PascalCase` and include the construct's type suffix. The filename and class name should describe the same thing: ```text hero-list.component.ts -> HeroListComponent user-profile.service.ts -> UserProfileService truncate.pipe.ts -> TruncatePipe auth.guard.ts -> AuthGuard ``` For components, use the `Component` suffix; for services, use `Service`. Keep each component or service in its own file. This makes files easy to identify and locate. Selectors s...Votes: 0GitHub stars: 549
- Angular Style GuideLIFT is an Angular organization principle: - **Locate**: structure the project so developers can find code quickly. - **Identify**: use descriptive filenames and type suffixes, such as `hero-list.component.ts` and `auth.service.ts`, so a file's role is obvious. - **Flattest structure possible**: avoid unnecessary folder nesting; keep feature folders shallow and no deeper than three levels. - **Try to be DRY**: avoid needless duplication, while keeping abstractions understandable and aligned w...Votes: 0GitHub stars: 549
- Angular Style GuideNo. Do not prefix Angular interfaces with `I`. Name interfaces as nouns, such as `User` or `Hero`, rather than `IUser` or `IHero`: ```ts export interface User { id: string; displayName: string; } ``` The noun already communicates that the type is a model or contract, and the `I` prefix adds no useful information. Use the appropriate suffix for classes that implement behavior, for example `UserService`, while keeping the data contract named `User`.Votes: 0GitHub stars: 549
- Angular Style GuideUse `index.ts` barrels only as public API boundaries. A feature-level barrel can explicitly re-export the components, services, or types that consumers are allowed to use: ```ts // features/heroes/index.ts export { HeroListComponent } from './hero-list/hero-list.component'; export type { Hero } from './hero.model'; ``` Consumers can then import from the feature's public entry point. Within that same feature, import directly from the defining file instead of importing through its own barrel, f...Votes: 0GitHub stars: 549
- Angular Style GuideOrganize the application into shallow, responsibility-based areas under `src/app/`: ```text src/app/ core/ # singletons and global state shared/ # reusable UI components and pipes features/ # lazy-loaded feature areas auth/ heroes/ hero-list/ hero-detail/ ``` Put application-wide singleton services and global state in `core`. Put reusable UI pieces and pipes in `shared`. Put user-facing domains in `features`, with feature areas...Votes: 0GitHub stars: 549
- Angular Testing`TestBed` creates the Angular testing environment, while `ComponentFixture` owns the component instance and its change-detection lifecycle. Configure the test module before creating the fixture. For a standalone component, import it directly; for an NgModule-based component, declare it and import the modules its template needs. The example below assumes a standalone `CounterComponent` with a `count()` signal, an `app-counter` host selector, a `data-testid="count"` element, and an accessible i...Votes: 0GitHub stars: 549
- Angular TestingA component harness is an async, semantic API for interacting with a component as a user would. Angular Material provides harnesses such as `MatButtonHarness`; for a reusable application component, define a custom `ComponentHarness`. Keep DOM locators inside the harness, preferably using stable roles, labels, or test IDs. The spec should call methods such as `clickSave()` or `getName()`, not query CSS classes or traverse `nativeElement`. For a standalone component using Angular Material: ```t...Votes: 0GitHub stars: 549
- Angular TestingUse Angular's HTTP testing backend rather than replacing `HttpClient` with a hand-written mock. `provideHttpClientTesting()` installs an in-memory backend and exposes `HttpTestingController`, which lets the test assert requests and decide when they complete. Provide `provideHttpClient()` first, then `provideHttpClientTesting()` so the testing backend can override the transport. For example, given a service like this: ```ts import { HttpClient } from '@angular/common/http'; import { Injectable...Votes: 0GitHub stars: 549
- Angular TestingAn `input()` value is a read-only signal inside the component. Set it through the fixture's component reference with `setInput()`, not by assigning to `fixture.componentInstance.user`. Run change detection after each input update before asserting a rendered value or a computed signal. Signals update synchronously, so most signal-input tests do not need `fakeAsync`. For a component with a required input: ```ts import { ChangeDetectionStrategy, Component, computed, input, } from '@angular/core'...Votes: 0GitHub stars: 549
- Angular TestingWithout the component source, first map its public contract: inputs, outputs, visible states, user actions, and injected services. Replace the names below with the actual API. For a standalone component, import it in `TestBed`; for an NgModule-based component, declare it and provide the modules its template uses. The harness keeps the spec focused on behavior instead of template selectors: ```ts import { ComponentHarness, HarnessLoader } from '@angular/cdk/testing'; import { TestbedHarnessEnv...Votes: 0GitHub stars: 549
- Angular TestingFor Angular v20 and later, use the Angular CLI unit-test builder with Vitest. New CLI projects are already configured this way. The CLI owns the Angular/Vitest integration, so a normal project does not need a second Vite plugin configuration or a second `TestBed` initialization. In `angular.json`, the project test target should use `@angular/build:unit-test`: ```json { "projects": { "my-app": { "architect": { "test": { "builder": "@angular/build:unit-test", "options": { "tsConfig": "tsconfig....Votes: 0GitHub stars: 549
- Angular ToolingUse the Angular CLI from the Angular workspace root: ```bash ng generate component features/user-profile ``` The shorthand is equivalent: ```bash ng g c features/user-profile ``` For an unfamiliar generator, preview its output first without writing files: ```bash ng g c features/user-profile --dry-run ``` Useful options include `--change-detection=OnPush` to generate the component with OnPush change detection and `--skip-tests` to omit its spec file. Use `ng generate` rather than creating the...Votes: 0GitHub stars: 549
- Angular ToolingRun the build from the Angular workspace root with the production configuration: ```bash ng build -c production ``` `--configuration production` is the long form of `-c production`: ```bash ng build --configuration production ``` For a named multi-project workspace, include the project name, for example `ng build my-app -c production`. The compiled browser output is normally written under `dist/my-app/browser/` (using the project’s configured output path). This is the build intended for produ...Votes: 0GitHub stars: 549
- Angular ToolingGenerate a production build with the bundle statistics file enabled: ```bash ng build -c production --stats-json ``` Then inspect the generated metadata with `esbuild-visualizer`: ```bash npx esbuild-visualizer --metadata dist/my-app/browser/stats.json --open ``` Replace `dist/my-app/browser/stats.json` with the actual configured project output path if it differs. The visualizer helps identify which dependencies or application chunks account for the bundle size. Analyze the bundle before chan...Votes: 0GitHub stars: 549
- Angular ToolingFirst ask the Angular CLI which updates are available: ```bash ng update ``` Then apply the Angular framework and CLI update through the official migration path: ```bash ng update @angular/core @angular/cli ``` This runs Angular’s official migrations/codemods along with the package update. Review the proposed package and migration changes, then resolve any peer-dependency conflicts normally. Do not use `ng update --force`; fix the compatibility conflict instead. Commit or otherwise save the c...Votes: 0GitHub stars: 549
- Angular ToolingUse `ng generate` (or its `ng g` shorthand) and choose flags for the specific generator. The most useful flags are: - `--dry-run`: preview the files and changes without writing them. Use this first when a generator or path is unfamiliar. - `--skip-tests`: omit the generated spec file. - `--flat`: place the generated file directly in the target directory instead of creating a new subdirectory. - `--change-detection=OnPush`: generate a component using OnPush change detection. - `--style=scss`: ...Votes: 0GitHub stars: 549
- Angular ToolingRun the Angular tests once with coverage enabled and watch mode disabled: ```bash ng test --code-coverage --watch=false ``` For a workspace with multiple projects, specify the project name, for example: ```bash ng test my-app --code-coverage --watch=false ``` The command produces the coverage report under the `coverage/` directory. `--watch=false` is important for CI or a one-shot local run because the process exits after the tests complete instead of waiting for file changes.Votes: 0GitHub stars: 549
- Common AccessibilityPrefer a native `<select>` if the requirement is only single-option selection; it already provides reliable keyboard, screen-reader, and mobile behavior. If a custom menu is necessary, implement the ARIA menu pattern deliberately: - Use a real `<button type="button">` as the trigger, with an accessible name, `aria-haspopup="menu"`, `aria-expanded`, and `aria-controls` pointing to the menu. - Render a menu container with `role="menu"` and a stable `id`. Use `role="menuitem"` for ordinary actio...Votes: 0GitHub stars: 549
- Common AccessibilityThe form has three accessibility problems, but each has a direct fix: 1. Replace interactive `div` elements with native controls. Put them inside a real `<form>`, use `<input>` elements, and provide explicit programmatic labels: ```html <form aria-labelledby="login-heading"> <h1 id="login-heading">Sign in</h1> <label for="email">Email address</label> <input id="email" name="email" type="email" autocomplete="email" required aria-describedby="email-error"> <p id="email-error" role="alert" hidde...Votes: 0GitHub stars: 549
- Common AccessibilityA red border is only a visual cue, so it is insufficient by itself. Make the error state available through text, semantics, and focus behavior: - Keep a visible, specific error message next to the field, such as “Email address must contain an @.” Do not rely on the border or red color alone; add an icon only if it has an accessible name or is marked decorative. - Give the input `aria-invalid="true"` while invalid and connect it to the message with `aria-describedby`. Keep the normal `<label>`...Votes: 0GitHub stars: 549
- Common Api DesignStart with a resource-oriented contract and make the HTTP behavior predictable: 1. **Model resources in URLs.** Use lowercase, kebab-case, plural nouns such as `/v1/user-profiles` and `/v1/orders`. Avoid verbs in the base path. Keep nesting shallow; `/v1/users/{userId}/orders` is reasonable, while deeply nested item paths are difficult to document and maintain. 2. **Match methods to their semantics.** Use `GET` for read-only, idempotent reads; `POST` to create a resource or trigger an explici...Votes: 0GitHub stars: 549
- Common Api Design- **Mutating state with `GET`.** `GET` requests are cached, prefetched, and retried by infrastructure. A state-changing operation such as cancellation or deletion must use an appropriate method, for example `POST /v1/orders/{id}/cancel` or `DELETE /v1/orders/{id}`. - **Using verbs or inconsistent casing in base URLs.** Avoid `/getProducts`, `/cancelOrder`, `/UserProfiles`, and `/user_profiles`. Prefer `/v1/products`, `/v1/user-profiles`, and an action sub-resource only where an operation is n...Votes: 0GitHub stars: 549
- Common Api DesignSuppose the API manages orders. Version the public contract in the path and use resource nouns: ```text GET /v1/orders # list orders POST /v1/orders # create an order GET /v1/orders/{orderId} # read one order PATCH /v1/orders/{orderId} # partially update an order DELETE /v1/orders/{orderId} # delete an order POST /v1/orders/{orderId}/cancel # explicit non-CRUD action ``` Use cursor pagination on the list endpoint: ```http GET /v1/or...Votes: 0GitHub stars: 549
- Common Architecture AuditThe concern is valid, but it cannot be confirmed from the prompt alone. The audit should establish whether controllers are transport adapters or whether they own application and persistence decisions. Start with the skill’s backend leakage check: ```bash rg -n 'Repository\.|Query\.|db\.' src/controllers -g '*.ts' ``` Then inspect every controller method for: - direct repository, ORM, query-builder, transaction, filesystem, queue, or third-party-client access; - business rules such as pricing,...Votes: 0GitHub stars: 549
- Common Architecture AuditThe two-year age of the codebase is not itself evidence of a monolith. The audit should measure oversized files and then determine whether a component mixes responsibilities that should have separate ownership. First inventory UI file sizes. The skill’s thresholds are `>500` lines for a medium UI concern and `>1,000` lines for a critical UI monolith. For example: ```bash rg --files -g '*.tsx' | xargs wc -l | awk '$1 > 500' ``` For each large file, inspect whether rendering is mixed with data ...Votes: 0GitHub stars: 549
- Common Architecture Audit`UserService.ts` and `UserServiceNew.ts` are a structural-fragmentation warning, not proof by filename alone. The risk is two competing sources of truth: callers may receive different validation, authorization, transaction, error, or data-integrity behavior depending on which class they import or which provider the runtime resolves. Begin with the skill’s duplicate-file check: ```bash find . -type f -name '*New.*' | sed 's/New//' ``` Then trace actual usage rather than comparing filenames. Se...Votes: 0GitHub stars: 549
- Common Architecture DiagrammingStart with one audience and one question. A diagram should tell one story, not attempt to model the entire system. Define the scope, audience, status, date/version, and author before choosing the notation.Votes: 0GitHub stars: 549
- Common Architecture DiagrammingAvoid these failure modes by keeping every diagram audience-specific, single-purpose, and explicit. | Anti-pattern | Why it fails | Better practice | | --- | --- | --- | | **The “everything” diagram** | Context, containers, database columns, deployment hosts, and runtime details become unreadable and answer no single question. | Split the story into C4 Context, Container, Component, sequence, ERD, or deployment views. | | **Mixed abstraction levels** | A class next to a database or a cloud VM...Votes: 0GitHub stars: 549
- Common Architecture DiagrammingUse a C4 Container view when the question is “What are the main deployable parts of this system, and how do they communicate?” The following example is intentionally small and shows one story. **Title:** Order submission — C4 Container view **Scope:** Order system and its immediate integrations **Audience:** Architects and developers **Status:** Proposed **Version/date:** v1.0, 2026-07-11 **Author:** Architecture team ```mermaid graph LR Customer((Person: Customer)) Web[Internal container: We...Votes: 0GitHub stars: 549
- Common Best PracticesAn 80-line function with five nesting levels is doing too much. Refactor it into a short orchestration function plus small, intention-revealing helpers. Preserve the existing behavior first; do not redesign domain rules while extracting code.Votes: 0GitHub stars: 549
- Common Best PracticesDo not keep the URL as a duplicated module constant. Define one configuration boundary, read the value from the deployment environment, validate it once, and inject it into the clients or services that need it. This follows DRY and dependency inversion while avoiding mutable global state. ```ts export type AppConfig = Readonly<{ apiBaseUrl: string; }>; export function loadAppConfig( environment: Record<string, string | undefined>, ): AppConfig { const configuredApiUrl = environment.API_URL?.t...Votes: 0GitHub stars: 549
- Common Best Practices`doStuff()`, `handleIt()`, and `process()` hide intent. They force callers and maintainers to inspect the implementation to learn what the function does, and `process()` is especially risky because it can become an overloaded catch-all. Rename functions using a specific verb plus the domain object or outcome. | Current name | Better shape | Example | | --- | --- | --- | | `doStuff()` | domain verb + object | `createInvoice()` | | `handleIt()` | event/action + subject | `handleCheckoutSubmissi...Votes: 0GitHub stars: 549
- Common Business Requirements**Status**: Draft **Owner**: BA Lead (recommended) **Last Updated**: 2026-07-11Votes: 0GitHub stars: 549
- Common Business Requirements**Status**: Draft **Owner**: BA Lead (recommended) **Last Updated**: 2026-07-11 > **Working assumption**: “Onboarding” means onboarding employees from accepted offer through the first 30 days. If the request instead means customer, partner, or vendor onboarding, the actors, controls, and metrics must be re-baselined before approval.Votes: 0GitHub stars: 549
- Common Business Requirements**Status**: Draft — discovery required before implementation **Owner**: BA Lead (recommended) **Last Updated**: 2026-07-11 > “Implement playbook feature” is not yet a sufficiently bounded business requirement. The artifact below uses recommended defaults to make progress and identifies only the decisions that block a responsible PRD and implementation handoff.Votes: 0GitHub stars: 549
- Common Code Review[BLOCKER] [New user-data endpoint; file/route unspecified] Missing authentication and authorization allows any caller to retrieve another user’s data by changing the URL user ID (IDOR/BOLA). Why: This is an unauthenticated data-exposure vulnerability that may allow user enumeration and disclosure of private or sensitive information. Fix: Require authentication, then authorize access to the requested ID based on ownership or an explicit role. Return `401` when unauthenticated and `403` when un...Votes: 0GitHub stars: 549
- Common Code ReviewNo code or diff was included, so an evidence-based critique isn’t possible yet. Please provide: - The code or PR diff - Expected behavior and relevant framework/API context - Existing tests, especially for security, performance, and edge cases I’ll review it using `[BLOCKER]`, `[MAJOR]`, and `[NIT]` findings, with each substantive finding containing: ```text [SEVERITY] [File] Issue Description Why: Risk or impact. Fix: Concrete remediation. ```Votes: 0GitHub stars: 549
- Common Code Review[BLOCKER] [PR diff/files not supplied] The caching implementation cannot be reviewed with evidence. Why: The changed code, cache configuration, invalidation behavior, and tests are required to assess logic, security, efficiency, and edge cases. Fix: Provide the PR diff or changed files, including cache keys, TTLs, fallback behavior, and tests. [MAJOR] [Cache read path — file unknown] Check whether cache keys include tenant/user/authorization scope. Why: Incorrect key isolation can return one ...Votes: 0GitHub stars: 549