skills.rest
mazenyassergithub
mazenyassergithubCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux

Design user interfaces with typography, color palettes, motion, and spatial composition.

6|1|Updated May 9, 2022
Search Tags:#design#ui#frontend#visuals#aesthetic#ux
One-click install
npx skills add https://github.com/mazenyassergithub/oh-my-claudecode --skill frontend-ui-ux-mazenyassergithub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/mazenyassergithub/oh-my-claudecode/tree/main/skills/frontend-ui-ux
Command: npx skills add https://github.com/mazenyassergithub/oh-my-claudecode --skill frontend-ui-ux-mazenyassergithub

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the gap between pure development and impactful design, enabling the creation of visually appealing and user-friendly interfaces even without explicit design mockups.

Core Features & Use Cases

  • Aesthetic Direction: Establishes a strong, unique visual identity for interfaces.
  • Design Principles: Applies principles of typography, color theory, motion, and spatial composition.
  • Anti-Pattern Avoidance: Actively steers clear of generic and cliché design choices.
  • Use Case: Develop a landing page for a new SaaS product that feels both modern and playful, using a bold color palette and asymmetrical layouts, without relying on pre-existing design assets.

Quick Start

Design a user interface for a mobile app with a retro-futuristic aesthetic.

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 a user interface without existing mockups?▼

Design a user interface without mockups by applying strong aesthetic directions, utilizing unique typography, cohesive color palettes, and unconventional spatial composition to create visually appealing and user-friendly experiences directly from code.

What is the best way to apply unconventional spatial composition to frontend visuals?▼

The best way to apply unconventional spatial composition is to combine it with unique typography and impactful motion, steering clear of common anti-patterns to create a memorable user interface and aesthetic.

Does this approach to UI design avoid generic design patterns?▼

Yes, this approach actively avoids generic design patterns and common anti-patterns, ensuring the creation of memorable user experiences through distinctive aesthetic direction and cohesive visual identity.

How do I establish a retro-futuristic aesthetic for a mobile app user interface?▼

Establish a retro-futuristic aesthetic for a mobile app by focusing on unique typography, cohesive color palettes, and impactful motion, deliberately avoiding cliché design choices to create a memorable interface.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
bahayonghangbahayonghang
16

frontend-engineer

Convert UI/UX designs into reusable React components with responsive layouts.

Community
Advanced
elwa2elwa2

bolder

Enhances web design mockups with typography, color, layout, and motion.

Community
Advanced
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate