Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

Commencer

frontend-ui-ux

Étoiles3

Forks2

Mis à jour21 février 2026 à 12:05

Design-first frontend development with modern UI/UX patterns

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

totoroyyb

totoroyyb/amag

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs webProfessions informatiques et mathématiques·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

Plus depuis ce dépôt

même dépôt

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