ui-from-mockup
CommunityTransform hi-fi mockups into Angular screens
Authoravgarcia
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill solves the challenge of converting approved high-fidelity designs into consistent Angular components without losing visual intent, accessibility, or project conventions.
Core Features & Use Cases
- Mockup Translation: Converts HTML/CSS design mockups into Angular Material 3 components while preserving layout, hierarchy, and content.
- Frontend Standards Alignment: Applies standalone OnPush components, i18n practices, Material tokens, accessibility rules, and testing expectations.
- Use Case: Build an MVP screen from a design mockup such as a weekly training plan editor while ensuring the implementation follows the project's frontend architecture.
Quick Start
Use the ui-from-mockup skill to convert the specified design mockup into an Angular component for the target feature.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 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: ui-from-mockup Download link: https://github.com/avgarcia/runcriticon/archive/main.zip#ui-from-mockup 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 545,000+ vetted skills library on demand.