figma-to-angular
Figma to Angular Component
This skill turns a Figma design spec into a fully implemented Angular component with Storybook stories in the Bitwarden Clients monorepo. The output should match the design visually while following all codebase conventions.
Workflow
Phase 1: Extract the design
Call get_design_context from the Figma MCP server. Extract the fileKey and nodeId from the URL:
figma.com/design/:fileKey/:fileName?node-id=:nodeId→ convert-to:in nodeId- Pass
clientFrameworks: "angular"andclientLanguages: "typescript,html,css"
The response contains reference code (React+Tailwind), a screenshot, and design metadata. Treat the code as a structural reference only — it must be fully converted to Angular.
Phase 2: Explore the codebase
More from bitwarden/clients
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.
92create-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".
5fix-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.
4writing-client-code
Bitwarden client code conventions for Angular and TypeScript. Use when creating components, services, or modifying web/browser/desktop apps.
4cipher-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.
4create-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.
4