figma-make-angular20-tailwind4-implementation
OfficialFigma UI to Angular 20 + Tailwind v4
Authorcromesdk
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the implementation or refactoring of UI designs from Figma Make exports directly into an Angular 20 + Tailwind CSS v4 project, ensuring consistency with existing project structure and design tokens.
Core Features & Use Cases
- Direct Implementation: Translates Figma designs into functional Angular components and templates.
- Design Token & Component Reuse: Leverages existing project design tokens, shared components, and Tailwind v4 utility classes.
- Deterministic Fallbacks: Handles missing inputs or paths with a defined fallback strategy.
- Use Case: Implement a new marketing landing page screen designed in Figma by directly editing your Angular project's code, ensuring it matches the design's spacing, typography, and interactive states.
Quick Start
Use the figma-make-angular20-tailwind4-implementation skill to implement the 'Hero Section' from the provided Figma URL into the 'homepage' route of your Angular project.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 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: figma-make-angular20-tailwind4-implementation Download link: https://github.com/cromesdk/ai-skills/archive/main.zip#figma-make-angular20-tailwind4-implementation Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.