From bitwarden-software-engineer
Bitwarden client code conventions for Angular and TypeScript. Use when working in the clients mono-repo, creating components, services, or modifying web/browser/desktop apps.
How this skill is triggered — by the user, by Claude, or both
Slash command
/bitwarden-software-engineer:writing-client-codeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The `clients` mono-repo contains:
The clients mono-repo contains:
apps/web, apps/browser, apps/desktop, apps/cli — client applicationslibs/common — shared code for ALL clients including CLI (no Angular dependencies — CLI uses Node, not Angular DI)libs/angular — Angular-specific code for visual clients onlylibs/components — Angular Component Library (CL)libs/common cannot import AngularCLI is a first-class client. Any code in libs/common must work without Angular's dependency injection, decorators, or lifecycle hooks. This is why cross-client services use abstract classes as interfaces — the concrete implementations (Default*, Web*, Browser*, Desktop*, Cli*) live in their respective apps.
Components contain only view logic. Business logic belongs in services. This keeps components testable, reusable, and prevents Angular lifecycle coupling from leaking into domain logic.
Avoid extending components across clients. Compose using shared child components instead. Inheritance creates tight coupling between client-specific UI and shared behavior — when one client's needs diverge, inherited components become hard to change safely.
The codebase contains both legacy and modern Angular patterns. When modifying an existing file, follow the patterns already in that file. Don't migrate any of these unless explicitly asked:
*ngIf → @if, *ngFor → @for@Input() / @Output() → input() / output() signalsinject()OnPushIf asked to modernize, follow this order (per the Angular migration guide): standalone → control flow → input/output signals → view queries → signals → computed → OnPush (last, only after full signal migration).
libs/common): Use RxJS (because CLI has no Angular Signals support)Avoid manual subscriptions. Prefer | async pipe. When subscriptions are necessary, pipe through takeUntilDestroyed() — enforced by the prefer-takeUntil lint rule.
Use frozen const objects with Object.freeze() and as const, plus a companion type alias. Enums have runtime behavior that creates subtle bugs with tree-shaking.
These rules apply strictly to new files and components. For existing code, follow the patterns already in the file.
ChangeDetectionStrategy.OnPush and be standalone: true. NgModules are permitted only for grouping related standalone componentsinject() function for DI in Angular primitives (components, pipes, directives). Use constructor injection for code shared with non-Angular clients (CLI)@if, @for, @switch), not structural directiveshost property in component decorators, not @HostBinding / @HostListenerkebab-case.component.ts, .service.ts, .pipe.ts, .directive.ts. Also: .request.ts, .response.ts, .view.ts, .data.ts for models (ADR-0012)tw- prefix — tw-flex, tw-mt-2, not flex, mt-2jest-mock-extended for mocking services. describe/it blocks, not test()@bitwarden/common must not pull in Angular-specific code (breaks CLI)// CORRECT — inject() for Angular primitives
export class VaultComponent {
private vaultService = inject(VaultService);
}
// ALSO CORRECT — constructor injection for code shared with CLI
export class CryptoService {
constructor(private stateService: StateService) {}
}
<!-- CORRECT -->
<div class="tw-flex tw-gap-2 tw-mt-4">
<!-- WRONG — missing tw- prefix, will be stripped -->
<div class="flex gap-2 mt-4"></div>
</div>
// CORRECT — with companion type alias
export const CipherType = Object.freeze({
Login: 1,
SecureNote: 2,
} as const);
export type CipherType = (typeof CipherType)[keyof typeof CipherType];
// WRONG — TypeScript enums have runtime side effects
export enum CipherType {
Login = 1,
SecureNote = 2,
}
npx claudepluginhub bitwarden/ai-plugins --plugin bitwarden-software-engineerGenerates Angular code and provides architectural guidance on signals, forms, DI, routing, SSR, accessibility, animations, styling, testing, and CLI tooling.
Bitwarden server code conventions for C# and .NET. Use when working in the server repo, creating commands, queries, services, or API endpoints.
Creates and migrates modern Angular (v20+) applications using Signals, Standalone Components, Zoneless mode, and SSR/Hydration with reactive patterns.