skills.rest
avgarcia
avgarciaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-from-mockup

Convert HTML/CSS mockups into Angular Material 3 components.

Updated May 15, 2026
Search Tags:#accessibility#frontend#angular#i18n#material#mockup#ui implementation
One-click install
npx skills add https://github.com/avgarcia/runcriticon --skill ui-from-mockup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-from-mockup
Source: https://github.com/avgarcia/runcriticon/tree/main/.claude/skills/ui-from-mockup
Command: npx skills add https://github.com/avgarcia/runcriticon --skill ui-from-mockup

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about ui-from-mockup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a high-fidelity UI mockup into Angular Material components?▼

To convert a high-fidelity UI mockup into Angular Material components, you translate the HTML/CSS design into standalone OnPush components while preserving layout, visual hierarchy, and content. This ensures the implementation aligns with frontend architecture standards.

Does converting a design mockup to Angular require internationalization and accessibility validation?▼

Yes, converting mockups to Angular requires internationalization and accessibility validation to ensure the resulting components meet frontend standards and preserve design intent for all users.

Can I use this approach to build an MVP screen from an approved design mockup?▼

Yes, you can build an MVP screen from an approved design mockup by translating the visual hierarchy and interactions into Angular components that follow project-specific testing practices and frontend standards.

What is the best way to implement Angular Material design tokens from a mockup?▼

The best way to implement Angular Material design tokens from a mockup is to align the standalone OnPush components with Material 3 standards, ensuring the visual translation preserves the original design intent accurately.

Why does my Angular component lose visual hierarchy when translating from a design mockup?▼

Angular components lose visual hierarchy from design mockups when the translation process fails to preserve the original layout and content structure, which is why applying Material tokens and frontend standards alignment is critical.

Related Skills

Explore More Software Engineering Skills→
ai-enhanced-engineerai-enhanced-engineer
3

frontend-material-design-3

Implement Material Design 3 components and CSS tokens for Angular and Svelte.

Official
Intermediate
roderikroderik
2

rams

Analyze UI components for WCAG accessibility and visual design issues.

Community
Basic
ROU-TechnologyROU-Technology

angular-component

Generates Angular components with TypeScript-first, SCSS, and HTML files.

Official
Intermediate
Zoomma1Zoomma1
3

claude-design-to-code

Convert Claude Design HTML mockups into Angular standalone components with templates and SCSS.

Community
Intermediate