Why are Tailwind classes prefixed with tw-?

Bitwarden uses the tw- prefix to prevent naming collisions and ensure that the build pipeline correctly identifies and processes utility classes.

Does this skill work for the Bitwarden CLI?

Yes, it includes specific rules for libs/common and the CLI app to ensure shared code does not accidentally import Angular dependencies.

How does it handle dependency injection?

It prefers the inject() function for new Angular-specific code while maintaining constructor injection for services shared with the CLI.

Will this skill automatically modernize my existing code?

No, the skill is programmed to follow existing patterns within a file to maintain consistency, unless you explicitly request a modernization or refactor.

Bitwarden Client Code Standards

Name: Bitwarden Client Code Standards
Author: bitwarden

bybitwarden

•

Developer Tools

Implements Bitwarden-specific Angular and TypeScript conventions across web, browser, desktop, and CLI applications.

This skill provides specialized guidance for developing within the Bitwarden client mono-repo, ensuring architectural consistency across diverse platforms. It enforces critical patterns such as keeping shared libraries free of Angular dependencies for CLI compatibility, utilizing thin components with OnPush change detection, and adhering to specific Tailwind CSS and TypeScript naming conventions. By distinguishing between legacy and modern Angular patterns, it helps developers maintain codebase integrity while systematically adopting standalone components, signals, and new control flow syntax.

Key Features

012 GitHub stars

02Converts TypeScript enums to frozen const objects per ADR-0025

03Balances state management using Signals and RxJS based on client context

04Ensures CSS consistency with mandatory Tailwind tw- prefixes

05Applies Angular standalone component and control flow syntax patterns

06Enforces mono-repo library boundaries to ensure CLI compatibility

Use Cases

01Modifying shared logic in libs/common while ensuring it remains compatible with the Node-based CLI

02Refactoring legacy Angular templates to modern control flow and signal-based inputs

03Developing new standalone components and services for Bitwarden web or browser apps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bitwarden/ai-plugins writing-client-code

For use in Claude.ai and ChatGPT

Download Skill