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" and clientLanguages: "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