Skills
.Work. You
Rest

universal-figma-skill

Official

Figma to Angular 20 UI delivery

Design & Creative#angular#figma#atomic design#component generation#tailwind#ui implementation
Authorcromesdk
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the process of translating Figma designs into functional Angular 20 components, automating UI implementation, refactoring, and adherence to design system principles.

Core Features & Use Cases

  • Unified Workflow: Executes a single, end-to-end process for Figma-driven Angular development.
  • Atomic Design Implementation: Enforces a structured approach to building UI from atoms to pages.
  • Figma-to-Code Conversion: Converts Figma designs (URLs, node IDs, Make exports) into Angular 20 + Tailwind v4 code.
  • Icon Bridging: Integrates eligible icons with existing lucide-angular usage.
  • Structure Enforcement: Applies feature-first folder structures and component companion file rules.

Quick Start

Use the universal figma skill to implement the Figma design at the provided URL for the 'user-profile' route.

Dependency Matrix

Required Modules

None required

Components

scriptsreferencesassets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: universal-figma-skill
Download link: https://github.com/cromesdk/ai-skills/archive/main.zip#universal-figma-skill

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.