frontend-ui-ux

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

11 stars

byMeroZemory

View on GitHub Installation ↓

Best use case

frontend-ui-ux is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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

Teams using frontend-ui-ux should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/frontend-ui-ux/SKILL.md --create-dirs "https://raw.githubusercontent.com/MeroZemory/oh-my-droid/main/skills/frontend-ui-ux/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/frontend-ui-ux/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How frontend-ui-ux Compares

Feature / Agent	frontend-ui-ux	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

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

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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**:

1. **Purpose**: What problem does this solve? Who uses it?
2. **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
3. **Constraints**: Technical requirements (framework, performance, accessibility)
4. **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

Related Skills

We are still matching the closest adjacent skills for this page. In the meantime, continue through the full directory.