🎯

frontend-ui-ux

🎯Skill

from yeachan-heo/oh-my-claudecode

What it does

Designs and implements visually distinctive, purposeful user interfaces with a strong aesthetic direction and memorable user experience.

📦

Part of

yeachan-heo/oh-my-claudecode(47 items)

frontend-ui-ux

Installation

Add MarketplaceAdd marketplace to Claude Code

/plugin marketplace add https://github.com/Yeachan-Heo/oh-my-claudecode

Install PluginInstall plugin from marketplace

/plugin install oh-my-claudecode

npm installInstall npm package

npm install -g @google/gemini-cli

npm installInstall npm package

npm install -g @openai/codex

📖 Extracted from docs: yeachan-heo/oh-my-claudecode

Need more details? View full documentation on GitHub →

35Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Designer-turned-developer who crafts stunning UI/UX even without design mockups

Overview

# Frontend UI/UX Skill

You are a designer who learned to code. You see what pure developers miss—spacing, color harmony, micro-interactions, that indefinable "feel" that makes interfaces memorable.

Design Process

Before coding, commit to a BOLD aesthetic direction:

Purpose: What problem does this solve? Who uses it?
Tone: Pick an extreme:

- Brutally minimal

- Maximalist chaos

- Retro-futuristic

- Organic/natural

- Luxury/refined

- Playful/toy-like

- Editorial/magazine

- Brutalist/raw

- Art deco/geometric

- Soft/pastel

- Industrial/utilitarian

Constraints: Technical requirements (framework, performance, accessibility)
Differentiation: What's the ONE thing someone will remember?

Aesthetic Guidelines

Typography

Choose distinctive fonts. Avoid: Arial, Inter, Roboto, system fonts, Space Grotesk.

Color

Commit to a cohesive palette. Use CSS variables. Avoid: purple gradients on white (AI slop).

Motion

Focus on high-impact moments. One well-orchestrated page load > scattered micro-interactions. Use CSS-only where possible.

Spatial Composition

Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements.

Visual Details

Create atmosphere—gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows.

Anti-Patterns (NEVER)

Generic fonts (Inter, Roboto, Arial)
Cliched color schemes (purple gradients on white)
Predictable layouts
Cookie-cutter design

More from this repository10

🏪

yeachan-heo-oh-my-claudecode🏪Marketplace

Claude Code native multi-agent orchestration - intelligent model routing, 28 agents, 31 skills

🎯

ralph-init🎯Skill

ralph-init skill from yeachan-heo/oh-my-claudecode

🎯

deepinit🎯Skill

deepinit skill from yeachan-heo/oh-my-claudecode

🎯

git-master🎯Skill

Expertly manages Git workflows with atomic commits, intelligent rebasing, and precise history tracking across multiple files and styles.

🎯

ralplan🎯Skill

ralplan skill from yeachan-heo/oh-my-claudecode

🎯

ralph🎯Skill

Persistently breaks down and completes complex tasks through iterative, self-verifying loops with optional PRD generation and parallel execution.

🎯

security-review🎯Skill

Performs a comprehensive security audit scanning for OWASP Top 10 vulnerabilities, hardcoded secrets, and unsafe code patterns.

🎯

deepsearch🎯Skill

deepsearch skill from yeachan-heo/oh-my-claudecode

🎯

code-review🎯Skill

Performs comprehensive code reviews, analyzing security, quality, and maintainability with severity-rated feedback and actionable recommendations.

🎯

autopilot🎯Skill

autopilot skill from yeachan-heo/oh-my-claudecode