Agent skill
cipher-type-planner
Plans the creation or modification of a cipher type (vault item type) across the Bitwarden clients monorepo. Use this skill when a user wants to add a new cipher type, modify an existing cipher type, or asks about what is needed to implement a cipher type. DO NOT invoke for general vault or cipher questions unrelated to adding or changing a cipher type.
Install this agent skill to your Project
npx add-skill https://github.com/bitwarden/clients/tree/main/.claude/skills/cipher-type-planner
SKILL.md
Cipher Type Planner
Workflow
Step 1: Gather Requirements
Ask the user the following questions (use AskUserQuestion). Adapt questions based on what
the user has already provided.
Required questions:
- Type name and value - What is the cipher type name and integer value? If the user hasn't specified a value, determine the next available integer by reading the
CipherTypeenum definition. - Fields - What are the cipher's properties? Each property must contain:
- Field name
- Data type (string, number, boolean)
- Encryption required?
- Required
- Target client (
$0) - Which client should this plan focus on? (web,desktop,browser,cli, orall). Shared library changes (libs/common,libs/vault) are always included;$0controls whichapps/*files appear. Skip if already provided as an argument. Default:all. - Autofill - Should this type participate in browser autofill? (Currently only Login, Card,
and Identity support autofill.) Only ask if
$0isbrowserorall. - Linked fields - Should this type support linked custom fields? If yes, which properties should be linkable?
- Feature flag - What is the feature flag name?
- Prerequisites - Have all server and SDK prerequisites been completed? Do not proceed with the plan until the user confirms these are done.
Additional questions:
Ask each of the following. If the engineer does not have an answer, accept "N/A" or "not yet decided" and note it as a gap in the plan.
- Import/export - Should import/export support be included in this plan?
- UI details - Are there specific UI requirements for the form or view sections (e.g., dropdowns, masked fields, copy buttons)?
- Subtitle - What value should the
subTitlegetter on the view model return? This appears in vault list items. - Icon - What icon represents this type in the vault? Bitwarden uses
bwi-icon classes. - Organization policy - Does this type appear in the restricted item types policy UI?
Step 2: Enter Plan Mode
After gathering requirements, enter plan mode using EnterPlanMode. Explore the codebase to
verify current patterns and file locations. Use the SshKey cipher type (value 5) as the canonical
reference for implementation patterns.
Key files to inspect for patterns:
libs/common/src/vault/enums/cipher-type.ts- Enum definitionlibs/common/src/vault/models/api/ssh-key.api.ts- API model patternlibs/common/src/vault/models/data/ssh-key.data.ts- Data model patternlibs/common/src/vault/models/domain/ssh-key.ts- Domain model patternlibs/common/src/vault/models/view/ssh-key.view.ts- View model patternlibs/common/src/models/export/ssh-key.export.ts- Export model patternlibs/common/src/vault/models/domain/cipher.ts- Container switch patternslibs/vault/src/cipher-form/components/sshkey-section/- Form component patternlibs/vault/src/cipher-view/sshkey-sections/- View component pattern
Step 3: Build the Plan
Write a comprehensive plan to the plan file. The plan MUST include all sections below.
Plan Output Format
1. Overview
- Cipher type name:
- Integer value:
- Feature flag:
- Minimum client version:
- Fields: Table of all fields with name, type, encrypted (yes/no), required (yes/no)
- Supports autofill: Yes/No
- Supports linked fields: Yes/No
2. Clients - New Files to Create
List every file that needs to be created, with the full path and a brief description. Organize by layer:
Model stack:
libs/common/src/vault/models/api/<type>.api.ts- API response shapelibs/common/src/vault/models/data/<type>.data.ts- Serializable storage formatlibs/common/src/vault/models/domain/<type>.ts- Encrypted business objectlibs/common/src/vault/models/domain/<type>.spec.ts- Domain model testslibs/common/src/vault/models/view/<type>.view.ts- Decrypted view for UI
Export (if import/export is included):
libs/common/src/models/export/<type>.export.ts- Export model
UI components:
libs/vault/src/cipher-form/components/<type>-section/- Form section component (TS, HTML, spec)libs/vault/src/cipher-view/<type>-sections/- View section component (TS, HTML)
3. Clients - Existing Files to Modify
List every file that needs modification, organized by concern. For each file, describe the specific change needed.
Core enum:
libs/common/src/vault/enums/cipher-type.ts- Add<Type>: <N>toCipherTypelibs/common/src/vault/enums/cipher-type.spec.ts- Update tests
Container switches (add case for new type):
libs/common/src/vault/models/data/cipher.data.ts- Constructorlibs/common/src/vault/models/domain/cipher.ts- Constructor,decrypt(),toCipherData(),fromJSON(),toSdkCipher(),fromSdkCipher()libs/common/src/vault/models/view/cipher.view.ts-itemgetter,fromJSON(),fromSdkCipherView(),getSdkCipherViewType(),toSdkCipherView()libs/common/src/vault/models/request/cipher.request.ts- Constructorlibs/common/src/vault/models/response/cipher.response.ts- Constructorlibs/common/src/vault/services/cipher.service.ts-encryptCipherData()
Export (if import/export is included):
libs/common/src/models/export/cipher.export.ts-toView(),toDomain(),build()
SDK integration:
libs/common/src/vault/models/domain/cipher-sdk-mapper.ts- Record mapper- Domain and view model SDK methods (
toSdk*/fromSdk*)
UI wiring:
libs/vault/src/cipher-form/components/cipher-form.component.ts- Import and wire sectionlibs/vault/src/cipher-form/components/cipher-form.component.html- Add section templatelibs/vault/src/cipher-view/cipher-view.component.ts- Import and wire sectionlibs/vault/src/cipher-view/cipher-view.component.html- Add section templatelibs/common/src/vault/icon/build-cipher-icon.ts- Add icon case
Vault filters (CRITICAL — without these, ciphers won't appear in the vault list):
All vault filter files must be feature-flag-gated so the new type only appears when the flag is
enabled. Use ConfigService.getFeatureFlag$() with combineLatest to filter the type out of
arrays when the flag is off.
Always included (shared):
libs/vault/src/services/vault-filter.service.ts- CRITICAL: Add type tobuildCipherTypeTree()allTypeFiltersarray. Without this, ciphers of the new type will not appear in the vault sidebar or list.libs/vault/src/models/filter-function.ts- Add filter case for the new typelibs/angular/src/vault/components/vault-items.component.ts- Feature-flag-gate empty state type buttons
Include if $0 is web or all:
apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.ts- Add toallTypeFilters,searchPlaceholder, and feature-flag-gate inbuildAllFilters()apps/web/src/app/admin-console/organizations/collections/vault-filter/vault-filter.component.ts- Feature-flag-gate inbuildAllFilters()
Include if $0 is desktop or all:
apps/desktop/src/vault/app/vault-v3/vault-filter/filters/type-filter.component.ts- AddConfigService,combineLatestwith feature flag
Include if $0 is browser or all:
apps/browser/src/vault/popup/services/vault-popup-list-filters.service.ts- AddConfigService, feature-flag-gatecipherTypes
New item menus (feature-flag-gated):
Always included (shared):
libs/common/src/vault/types/cipher-menu-items.ts- Add menu item entry for new typelibs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts- AddcanCreate<Type> = input(false)signal, gate incipherMenuItemsobservable
Include if $0 is web or all:
apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts- AddcanCreate<Type>$observable from feature flagapps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html- Bind[canCreate<Type>]to<vault-new-cipher-menu>
Include if $0 is browser or all:
apps/browser/src/vault/popup/components/vault/new-item-dropdown/new-item-dropdown.component.ts- AddConfigService,combineLatestwith feature flag
Localization (add i18n keys):
Include only locale files for $0. If $0 is all, include all three:
apps/web/src/locales/en/messages.json(web)apps/desktop/src/locales/en/messages.json(desktop)apps/browser/src/_locales/en/messages.json(browser)
Linked fields (if applicable):
libs/common/src/vault/enums/linked-id-type.enum.ts
Autofill (if applicable — only if $0 is browser or all):
- List relevant autofill files from
apps/browser/src/autofill/only if the type supports autofill
Restricted item types (if applicable):
Restricted item type enforcement is used across all clients. Include files for $0:
Always included (shared):
libs/common/src/vault/services/vault-settings/vault-settings.service.ts- Restricted types service
Include if $0 is web or all:
apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/restricted-item-types.component.ts- Policy configuration UIapps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/restricted-item-types.component.html
Include if $0 is browser or all:
apps/browser/src/vault/popup/components/vault/item-more-options/item-more-options.component.ts- Restricted type checks
Include if $0 is cli or all:
apps/cli/src/vault/create.command.ts- Restricted type checksapps/cli/src/commands/list.command.ts- Restricted type checksapps/cli/src/commands/get.command.ts- Restricted type checks
4. Localization Keys
List all i18n keys that need to be added. At minimum:
- Type label
- Field labels for each type-specific field
5. Tests
List all test files that need to be created or updated:
libs/common/src/vault/enums/cipher-type.spec.tslibs/common/src/vault/models/domain/cipher.spec.tslibs/common/src/vault/models/domain/<type>.spec.ts(new)libs/common/src/vault/models/view/cipher.view.spec.tslibs/common/src/vault/services/cipher.service.spec.tslibs/common/src/vault/services/cipher-sdk.service.spec.tslibs/common/src/vault/icon/build-cipher-icon.spec.tslibs/common/src/models/export/cipher.export.spec.tslibs/vault/src/cipher-form/components/cipher-form.component.spec.tslibs/vault/src/cipher-view/cipher-view.component.spec.ts- Form section component spec (new)
6. Recommended Implementation Order
Recommended implementation order, customized for this specific type. Only include steps relevant
to $0 (shared steps are always included):
- Core enum addition (shared)
- Feature flag registration (shared)
- Model stack (API, Data, Domain, View, Export if applicable) (shared)
- Container switch updates (shared)
- SDK bindings (
toSdk*/fromSdk*) (shared) - Localization keys (
$0) - Shared UI (icon, menu items) (shared)
- Vault filters with feature flag gating — CRITICAL for ciphers to appear (shared +
$0) - New item menus with feature flag gating (shared +
$0) - Per-app UI (form section, view section) (shared)
- Context menu / copy actions — see Section 8 (shared +
$0) - CLI (only if
$0iscliorall) - Autofill (only if
$0isbrowserorall) - Tests (shared +
$0)
7. Risks and Considerations
- Cross-repo coordination requirements
- Feature flag rollout strategy
- Backward compatibility concerns
- Any fields that need special encryption handling (reminder: no new encryption logic in clients)
- Performance considerations for large vaults
- i18n key reuse - Before adding new locale keys, check whether existing keys already have the desired display value. If an existing key has the same message text, reuse it instead of creating a duplicate. Only create new keys when no existing key matches.
8. Context Menu / Copy Actions
Each cipher type can expose copiable fields in the vault list item context menus (right-click / more
menu). Include only the sections relevant to $0.
Core Infrastructure (always included)
| File | What to add |
|---|---|
libs/vault/src/services/copy-cipher-field.service.ts |
Add field names to the CopyAction type union. Add entries to the CopyActions record with typeI18nKey (i18n key for the toast message), protected (whether it requires password re-prompt), and optional event (for event collection). |
libs/common/src/vault/utils/cipher-view-like-utils.ts |
Add cases to hasCopyableValue() that check whether the cipher has a non-empty value for each copiable field. |
Browser (include if $0 is browser or all)
| File | What to add |
|---|---|
apps/browser/src/vault/popup/components/vault/item-copy-action/item-copy-actions.component.ts |
Add a singleCopyable<Type> getter (for single-field quick copy button), a has<Type>Values getter, and a getNumberOf<Type>Values() method. Follow the Card pattern. |
apps/browser/src/vault/popup/components/vault/item-copy-action/item-copy-actions.component.html |
Add a section using @if syntax (NOT *ngIf) with the single/multi field pattern. |
Web (include if $0 is web or all)
| File | What to add |
|---|---|
apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.ts |
Add is<Type>Cipher and hasVisible<Type>Options getters. Add hasVisible<Type>Options to the showMenuDivider check. |
apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.html |
Add copy buttons using @if syntax with appCopyField directive. |
Desktop (include if $0 is desktop or all)
| File | What to add |
|---|---|
apps/desktop/src/vault/app/vault-v3/vault-items/vault-cipher-row.component.ts |
Add a CipherType.<Type> case to the copyFields computed signal, returning CopyFieldConfig[] entries. This is the most modern pattern — uses a computed signal rather than getters. |
Critical Warnings
- CLI has no copy menu UI — do not add copy-related i18n keys to the CLI locale.
- Only expose fields that should be copiable — not every cipher field needs a copy action. Check with product requirements for which fields get copy buttons.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
angular-modernization
Modernizes Angular code such as components and directives to follow best practices using both automatic CLI migrations and Bitwarden-specific patterns. YOU must use this skill when someone requests modernizing Angular code. DO NOT invoke for general Angular discussions unrelated to modernization.
create-hec-event-integration
Use when adding a new HEC (HTTP Event Collector) event integration to the Bitwarden web client. Implements the Splunk token authentication model (Bearer token + URI). Covers feature flag setup and card registration behind the flag. Does not apply to API key integrations or integrations requiring a custom connect dialog.
fix-angular-fixmes
Resolves eslint-disable suppression comments throughout the Bitwarden clients codebase by fixing the underlying issue. Use when the user asks to "fix FIXMEs", "fix eslint suppressions", "clean up eslint-disable-next-line", "resolve CL-764", "resolve CL-903", "fix OnPush eslint suppressions", "fix Signals eslint suppressions", or reduce linting suppressions.
figma-to-angular
Converts Figma designs into production Angular components with Storybook stories for the Bitwarden Clients monorepo. Use this skill whenever the user provides a Figma URL and wants to create an Angular component, or mentions "implement this design", "create a component from Figma", "build this from the design spec", or similar. Also trigger when the user pastes a Figma link and asks for a component, even if they don't say "Figma" explicitly.
create-pull-request
Pull request creation workflow for Bitwarden Clients. Use when creating PRs, writing PR descriptions, or preparing branches for review. Triggered by "create PR", "pull request", "open PR", "gh pr create", "PR description".
remotion-best-practices
Best practices for Remotion - Video creation in React
Didn't find tool you were looking for?