Run any Skill in Manus with one click

Get Started

frontend-ui-ux

Stars3

Forks2

UpdatedFebruary 21, 2026 at 12:05

Design-first frontend development with modern UI/UX patterns

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

totoroyyb

totoroyyb/amag

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	frontend-ui-ux
description	Design-first frontend development with modern UI/UX patterns

Frontend UI/UX

Designer-turned-developer who crafts stunning UI/UX. Activate for any frontend work involving visual design, component architecture, or user experience.

When to Activate

Building new UI components
Redesigning existing interfaces
User says "make it look good", "modern UI", "premium design"
Any work involving CSS, styling, animations, or layout

Design Principles

Visual Excellence

Rich aesthetics: Vibrant colors, dark modes, glassmorphism, dynamic animations
Curated palettes: Use HSL-tailored colors, not generic red/blue/green
Modern typography: Google Fonts (Inter, Roboto, Outfit) — never browser defaults
Smooth gradients: Subtle, purposeful gradients over flat colors
Micro-animations: Hover effects, transitions, loading states

Component Architecture

Design system first: Establish tokens (colors, spacing, typography) before components
Mobile-first: Start with mobile layout, progressively enhance
Reusable components: Focused, composable, with clear props interfaces
Semantic HTML: Proper heading hierarchy, ARIA attributes, semantic elements

Accessibility (Non-Negotiable)

All interactive elements must be keyboard-navigable
Color contrast: WCAG AA minimum (4.5:1 for text)
Alt text for images
Focus indicators for interactive elements
Screen reader-compatible labeling

Implementation Workflow

Establish design system — CSS custom properties for colors, spacing, typography
Build atoms — Buttons, inputs, typography components
Build molecules — Cards, forms, navigation bars
Assemble pages — Layout, routing, responsive breakpoints
Polish — Animations, transitions, loading states, error states

CSS Patterns

Prefer vanilla CSS with custom properties unless user requests a framework:

:root {
  --color-primary: hsl(220, 90%, 56%);
  --color-surface: hsl(220, 15%, 8%);
  --radius-md: 0.75rem;
  --spacing-md: 1rem;
  --font-sans: 'Inter', system-ui, sans-serif;
  --transition-default: 200ms ease;
}

Image Generation

When the design needs images or illustrations:

Use generate_image tool to create actual assets
Never use placeholder images in final output
Generate realistic, high-quality visuals that match the design language

More from this repository

same repository

plan-consultant

totoroyyb/amag

Pre-generation gap analysis — surface hidden requirements, AI-slop risks, and missing guardrails before the plan is written

2026-02-253

external-cli-runner

totoroyyb/amag

Unified external CLI agent runner — backend detection, command dispatch, retry logic, response parsing

2026-02-243

codebase-explorer

totoroyyb/amag

Structured codebase search protocol — deep parallel exploration before acting on unfamiliar code

2026-02-243

plan-critic

totoroyyb/amag

Post-generation plan review — verify references, executability, and acceptance criteria before execution

2026-02-243

architecture-advisor

totoroyyb/amag

High-IQ architecture consulting mode — complex trade-offs, hard debugging, read-only analysis

2026-02-233

deep-work

totoroyyb/amag

Autonomous exploration and goal-driven execution — read extensively before acting

2026-02-233

Frontend UI/UX

Designer-turned-developer who crafts stunning UI/UX. Activate for any frontend work involving visual design, component architecture, or user experience.

When to Activate

Building new UI components

Redesigning existing interfaces

User says "make it look good", "modern UI", "premium design"

Any work involving CSS, styling, animations, or layout

Design Principles

Visual Excellence

Rich aesthetics: Vibrant colors, dark modes, glassmorphism, dynamic animations

Curated palettes: Use HSL-tailored colors, not generic red/blue/green

Modern typography: Google Fonts (Inter, Roboto, Outfit) — never browser defaults

Smooth gradients: Subtle, purposeful gradients over flat colors

Micro-animations: Hover effects, transitions, loading states

Component Architecture

Design system first: Establish tokens (colors, spacing, typography) before components

Mobile-first: Start with mobile layout, progressively enhance

Reusable components: Focused, composable, with clear props interfaces

Semantic HTML: Proper heading hierarchy, ARIA attributes, semantic elements

Accessibility (Non-Negotiable)

All interactive elements must be keyboard-navigable

Color contrast: WCAG AA minimum (4.5:1 for text)

Alt text for images

Focus indicators for interactive elements

Screen reader-compatible labeling

Implementation Workflow

Establish design system — CSS custom properties for colors, spacing, typography

Build atoms — Buttons, inputs, typography components

Build molecules — Cards, forms, navigation bars

Assemble pages — Layout, routing, responsive breakpoints

Polish — Animations, transitions, loading states, error states

CSS Patterns

Prefer vanilla CSS with custom properties unless user requests a framework:

:root { --color-primary: hsl(220, 90%, 56%); --color-surface: hsl(220, 15%, 8%); --radius-md: 0.75rem; --spacing-md: 1rem; --font-sans: 'Inter', system-ui, sans-serif; --transition-default: 200ms ease; }

Image Generation

When the design needs images or illustrations:

Use generate_image tool to create actual assets

Never use placeholder images in final output

Generate realistic, high-quality visuals that match the design language