code-yeongyu-frontend-ui-ux

Convert rough UI concepts into accessible HTML/CSS/JS frontend implementations.

Updated Dec 17, 2025

Search Tags:#accessibility #frontend #interaction #ui-ux #pixel-perfect #spacing #design-to-code

Ready to run

npx skills add https://github.com/Lrmdom/patrimonio-pwa --skill code-yeongyu-frontend-ui-ux

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: code-yeongyu-frontend-ui-ux
Source: https://github.com/Lrmdom/patrimonio-pwa/tree/main/.windsurf/skills/code-yeongyu-frontend-ui-ux
Command: npx skills add https://github.com/Lrmdom/patrimonio-pwa --skill code-yeongyu-frontend-ui-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bridge the gap between design intent and implemented UI by delivering pixel-perfect, accessible interfaces even when design mockups are incomplete or imperfect.

Core Features & Use Cases

Pixel-perfect UI implementation from design intent that respects spacing, typography, and color harmony.
Robust front-end translation with accessible components, semantic markup, and responsive behavior.
Use Case: transform a rough design sketch into a polished, responsive component library that matches the brand.

Quick Start

Provide a rough UI sketch and I will deliver a pixel-perfect, accessible frontend prototype.

Frequently Asked Questions about code-yeongyu-frontend-ui-ux

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

FAQPage Schema

How do I implement pixel-perfect UI from a rough design sketch?▼

To implement pixel-perfect UI from a rough design sketch, you provide the concept to receive maintainable HTML, CSS, and JS. The output features clean structure, semantic markup, and responsive behavior across multiple breakpoints and themes.

What is the best way to ensure accessible components in frontend development?▼

The best way to ensure accessible components is generating semantic markup with clean structure. This approach produces accessible frontend implementations that satisfy requirements for robust web apps and dashboards where interaction is critical.

Can I build a responsive component library from incomplete design mockups?▼

Yes, you can build a responsive component library from incomplete design mockups. The process bridges the gap between design intent and implemented UI, respecting spacing, typography, and color harmony to match your brand.

How do I handle responsive CSS across multiple breakpoints and themes?▼

Handle responsive CSS across multiple breakpoints and themes by translating design intent into robust frontend implementations. The generated code maintains color harmony, spacing, and micro-interactions suitable for web apps and dashboards.

Does design-to-code translation work without complete mockups?▼

Design-to-code translation works effectively without complete mockups by applying design intuition to fill gaps. It delivers polished, accessible interfaces even when design mockups are imperfect or incomplete.

Why does my frontend implementation lose spacing and typography harmony?▼

Frontend implementation loses spacing and typography harmony when code diverges from design intent. Bridging this gap requires applying pixel-perfect translation that respects spacing, typography, and color harmony across all responsive breakpoints.