skills.rest
maximhar
maximharCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux

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

1|Updated Feb 14, 2026
Search Tags:#design#development#ui#frontend#visuals#ux#aesthetics
One-click install
npx skills add https://github.com/maximhar/oh-my-opencode-beads --skill frontend-ui-ux-maximhar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/maximhar/oh-my-opencode-beads/tree/main/src/features/builtin-skills/frontend-ui-ux
Command: npx skills add https://github.com/maximhar/oh-my-opencode-beads --skill frontend-ui-ux-maximhar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Aesthetic Direction: Defines and executes a unique visual identity (Tone, Typography, Color, Motion, Spatial Composition).
  • Pixel-Perfect Implementation: Translates aesthetic vision into production-grade, functional code (HTML/CSS/JS, React, Vue, Angular, etc.).
  • Use Case: A startup needs a unique, memorable landing page but has no designer. This Skill can define a "brutalist/raw" aesthetic, select appropriate fonts and a stark color palette, and generate the HTML/CSS for a visually striking page.

Quick Start

Define a playful/toy-like aesthetic and implement a responsive navigation bar using React.

Frequently Asked Questions about frontend-ui-ux

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

FAQPage Schema
How do I build a visually striking user interface without design mockups?▼

To build a user interface without design mockups, define an aesthetic direction using tone, typography, color, motion, and spatial composition. This approach translates visual identity directly into production-grade front-end code.

Can I generate React components from a specific aesthetic direction?▼

Yes, you can generate React components from a specific aesthetic direction. The process translates aesthetic visions into functional code for HTML, CSS, JavaScript, and frameworks like React, Vue, and Angular.

What is the best way to implement a cohesive visual identity in frontend development?▼

Implementing a cohesive visual identity in frontend development requires adhering to specific aesthetic guidelines and avoiding anti-patterns. This ensures unique, high-quality experiences through precise spatial composition and motion.

Does this approach work with modern frontend frameworks like Vue and Angular?▼

Yes, this approach works with modern frontend frameworks like Vue and Angular. The aesthetic implementation translates directly into production-grade functional code across HTML, CSS, JS, React, Vue, and Angular.

How do I avoid common UI anti-patterns when designing without mockups?▼

Avoid common UI anti-patterns when designing without mockups by strictly adhering to defined aesthetic guidelines for typography, color, and motion. This ensures the final digital experience remains memorable and cohesive.

Why does my frontend development lack a strong aesthetic point-of-view?▼

Your frontend development may lack a strong aesthetic point-of-view if it fails to define a unique visual identity beforehand. Bridging the gap between design and development requires intentional choices in tone, color, and spatial composition.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
htlin222htlin222
77

frontend

Develop React components with responsive layouts and state management.

Community
Intermediate
stefandevostefandevo
7

Frontend UI/UX Skill

Develop and refine React and Vue user interfaces with component-based architecture.

Community
Intermediate
wmasfoewmasfoe

imagegen

Generate or edit raster images with AI and CLI fallback.

Community
Advanced