figma-lucide-angular-bridge

What problem does it solve?

This Skill streamlines the process of implementing UI designs from Figma into Angular applications by intelligently converting Lucide icons to use the lucide-angular package, reducing duplicate assets and improving bundle size.

Core Features & Use Cases

• Figma-to-Angular Icon Bridging: Automatically identifies and converts Lucide icons from Figma designs into lucide-angular components.
• Contextual Awareness: Ensures the skill is only applied when working with Figma designs in an Angular project.
• Deterministic Decision Making: Uses a clear, step-by-step process to determine if an icon is Lucide and if it can be bridged, with explicit fallback mechanisms.
• Convention Preservation: Maintains existing project conventions for icon usage ([img] binding or name attribute) and template tags.
• Use Case: When implementing a new feature in an Angular app based on a Figma design, this skill will automatically replace downloaded Lucide SVG assets with efficient lucide-angular component imports, ensuring consistency and optimizing the build.

Quick Start

Use the figma-lucide-angular-bridge skill to implement the Figma design node provided in the prompt, converting Lucide icons to use the lucide-angular package.