home / skills / zpankz / mcp-skillset / frontend-ui-ux

frontend-ui-ux skill

safe

This skill helps you craft stunning UI/UX by guiding typography, color, spacing, and motion decisions for cohesive interfaces.

npx playbooks add skill zpankz/mcp-skillset --skill frontend-ui-ux

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

1.9 KB

---
name: frontend-ui-ux
description: |
  Designer-turned-developer who crafts stunning UI/UX even without design mockups.
  Use when building user interfaces, improving visual design, creating components,
  or when the user needs help with styling, layout, or user experience.
allowed-tools: Read, Write, Edit, Grep, Glob, Bash
model: sonnet
context: fork
agent: build-domain-agent
user-invocable: true
---

# 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

Overview

This skill equips a designer-turned-developer approach to building polished UI/UX without formal mockups. It emphasizes a decisive aesthetic direction, practical constraints, and memorable visual choices so interfaces feel intentional and crafted. Use it to shape layout, typography, color, motion, and component behavior during development.

How this skill works

Start by defining purpose, tone, constraints, and the single memorable differentiator for the product. Translate that direction into concrete choices: a distinctive type system, a cohesive CSS variable palette, a few high-impact motion moments, and spatial rules that favor asymmetry and layered composition. Iterate in code, favoring CSS-first solutions and small, opinionated component primitives.

When to use it

Building UI from scratch without design mockups
Converting rough wireframes into polished interfaces
Improving visual hierarchy and spacing in existing apps
Designing components with strong personality and reuse
Refining motion and micro-interactions for clarity and delight

Best practices

Pick a bold aesthetic direction early and stick to it across typography, color, and motion.
Define technical constraints up front (framework, performance, accessibility) to keep designs feasible.
Use CSS variables for palettes and scales to ensure consistency and easy theming.
Prioritize a few high-impact motion moments rather than many low-value micro-animations.
Design components as opinionated primitives with clear spacing, states, and accessibility semantics.

Example use cases

Create a distinct landing page style when no brand kit exists by choosing tone and building a rapid style system.
Rework a form-heavy dashboard: improve spacing, typography scale, and focus states for faster task completion.
Design a component library with personality—buttons, cards, inputs—using CSS variables and accessible defaults.
Add a single page-load orchestration that elevates perceived polish without heavy JS.
Rescue an app suffering from ‘samey’ UI by replacing generic fonts and predictable layouts with a directional aesthetic.

FAQ

What if stakeholders prefer a neutral look?

Translate the bold direction into restrained variants: keep underlying spacing, type scale, and motion decisions while dialing visual intensity down.

How do I balance uniqueness with accessibility?

Prioritize accessible contrast, clear focus states, and semantic HTML. Uniqueness should live in type choices, composition, and motion, not in compromised legibility.