frontend-ui-ux

Design and implement web interfaces with defined typography, color, motion, and spatial composition.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/D4ch1au/evil-oh-my-openagent --skill frontend-ui-ux-d4ch1au
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/D4ch1au/evil-oh-my-openagent/tree/main/src/features/builtin-skills/frontend-ui-ux
Command: npx skills add https://github.com/D4ch1au/evil-oh-my-openagent --skill frontend-ui-ux-d4ch1au

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill bridges the gap between design and development, enabling the creation of visually appealing and emotionally engaging user interfaces even in the absence of explicit design mockups.

Core Features & Use Cases

  • Aesthetic Direction: Defines and commits to a unique visual tone (e.g., brutalist, minimalist, maximalist).
  • Pixel-Perfect Implementation: Translates aesthetic vision into production-grade code (HTML/CSS/JS, React, Vue, Angular).
  • Use Case: Develop a unique landing page for a new app, focusing on a "retro-futuristic" aesthetic with custom typography and animated gradients, ensuring it's both functional and memorable.

Quick Start

Design and implement a new user profile page with a "luxury/refined" aesthetic, using custom fonts and a dark theme.

Frequently Asked Questions about frontend-ui-ux

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

FAQPage Schema
How do I design and implement a web interface without a design mockup?

To design a web interface without a mockup, you can define a bold aesthetic direction—such as brutalist or minimalist—and translate that visual tone directly into production-grade HTML, CSS, and JavaScript code.

Can I generate production-grade React code for a specific UI aesthetic?

Yes, you can generate production-grade React code by committing to a specific aesthetic direction, ensuring the implementation applies cohesive design principles for typography, color, and spatial composition.

What is the best way to ensure visual consistency in frontend development?

The best way to ensure visual consistency in frontend development is to establish a unique visual tone early and execute it using specific guidelines for typography, motion, and spatial composition to avoid anti-patterns.

Does this approach work with frameworks like Vue and Angular?

Yes, this aesthetic implementation approach works with Vue and Angular, translating your defined visual direction into functional code while maintaining the cohesive design principles required for memorable interfaces.

How do I avoid anti-patterns when building a custom web user interface?

To avoid anti-patterns when building a custom web user interface, adhere to strict guidelines on typography, color, motion, and spatial composition during the pixel-perfect implementation phase.

When do I need to define a distinct aesthetic direction for my web app?

You need to define a distinct aesthetic direction when your web development task requires unique visual flair and emotionally engaging user interfaces that stand out without relying on explicit design mockups.