figma-atomic-design-implementation
OfficialFigma to Angular Atomic Design
Authorcromesdk
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the translation of Figma designs into well-structured Angular components, adhering strictly to the Atomic Design methodology, ensuring code reusability and maintainability.
Core Features & Use Cases
- Atomic Design Implementation: Generates Angular components following the strict hierarchy of atoms, molecules, organisms, templates, and pages.
- Component Completeness: Ensures all generated or modified components have complete companion files (.ts, .html, .css/.scss, .stories.ts, .spec.ts).
- Reusability Focus: Prioritizes reusing existing components and enforces design-system-oriented naming and styling.
- Use Case: Convert a complex UI section from Figma into a set of reusable Angular components, starting with basic buttons and inputs (atoms), composing them into form elements (molecules), then into a complete login panel (organism), and finally integrating it into a page structure.
Quick Start
Implement the login form from the provided Figma design into an Angular application following atomic design principles.
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-atomic-design-implementation Download link: https://github.com/cromesdk/ai-skills/archive/main.zip#figma-atomic-design-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.