michaeldyrynda/dotfiles/frontend-ui-ux-engineer

Name: frontend-ui-ux-engineer
Author: michaeldyrynda

Claude Code and agent skill by michaeldyrynda/dotfiles

Trust tier 3

community

By michaeldyrynda
Design
michaeldyrynda/dotfiles
agents/skills/frontend-ui-ux-engineer/SKILL.md
Updated 19 Sep 2026
Version 1.0.01 version recorded

Source check pending

Checking that the SKILL.md file is still in the repository.

A designer-turned-developer who crafts stunning UI/UX even without design mockups. Code may be a bit messy, but the visual output is always fire.

Install

npx vskill@latest install michaeldyrynda/dotfiles/frontend-ui-ux-engineer

SKILL.md

Frontend UI/UX Engineer

Purpose

Provides frontend design and development expertise specializing in creating visually stunning, user-centric interfaces without requiring design mockups. Crafts beautiful UI/UX with creative design thinking, advanced styling, animations, and accessibility best practices for modern web applications.

When to Use

Need to transform functional UI into visually stunning interfaces
Design mockups don't exist but beautiful UI is required
Visual polish and micro-interactions are priority
Component styling requires creative design thinking
User experience improvements needed without dedicated designer

Quick Start

Invoke this skill when:

Need to transform functional UI into visually stunning interfaces
Design mockups don't exist, but beautiful UI is required
Visual polish and micro-interactions are priority over code elegance
Component styling requires creative design thinking
User experience improvements needed without dedicated designer

Do NOT invoke when:

Backend logic or API development needed
Pure code refactoring without visual changes
Performance optimization is sole priority
Security-focused development required
Database or infrastructure work

Core Workflows

Workflow 1: Transform Functional Component to Stunning UI

Use case: Given a plain React component, make it visually exceptional

Input Example:

tsx

// Before: Functional but plain
function ProductCard({ product }: { product: Product }) {
  return (
    <div>
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button>Add to Cart</button>
    </div>
  );
}

Steps:

1. Visual Analysis (2 minutes)

Questions to answer:
- What emotion should this evoke? (Premium? Playful? Trustworthy?)
- What's the visual hierarchy? (Image > Name > Price > CTA)
- What interactions delight users? (Hover effects, smooth transitions)
- Where's the whitespace needed? (Breathing room around elements)

2. Color & Typography Enhancement

tsx

// After: Visual foundation established
import { motion } from 'framer-motion';
function ProductCard({ product }: { product: Product }) {
  return (
    <motion.div
      className="group relative overflow-hidden rounded-2xl bg-white shadow-lg transition-shadow hover:shadow-2xl"
      whileHover={{ y: -4 }}
      transition={{ duration: 0.2, ease: 'easeOut' }}
    >
      {/* Image container with aspect ratio */}
      <div className="relative aspect-square overflow-hidden">
        <img
          src={product.image}
          alt={product.name}
          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
        />
        {/* Gradient overlay for readability */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
      </div>
      {/* Content with proper spacing */}
      <div className="p-6 space-y-3">
        <h3 className="text-xl font-semibold text-gray-900 line-clamp-2">
          {product.name}
        </h3>
        
        <div className="flex items-baseline gap-2">
          <span className="text-2xl font-bold text-blue-600">
            ${product.price}
          </span>
          {product.compareAtPrice && (
            <span className="text-sm text-gray-500 line-through">
              ${product.compareAtPrice}
            </span>
          )}
        </div>
        {/* Enhanced CTA button */}
        <button className="w-full rounded-lg bg-blue-600 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-700 active:bg-blue-800 disabled:bg-gray-300 disabled:cursor-not-allowed">
          Add to Cart
        </button>
      </div>
    </motion.div>
  );
}

3. Micro-interactions & Polish

tsx

// Final: Delightful interactions added
function ProductCard({ product, onAddToCart }: ProductCardProps) {
  const [isAdded, setIsAdded] = useState(false);
  const handleAddToCart = () => {
    onAddToCart(product);
    setIsAdded(true);
    setTimeout(() => setIsAdded(false), 2000);
  };
  return (
    <motion.div
      layout
      className="group relative overflow-hidden rounded-2xl bg-white shadow-lg transition-shadow hover:shadow-2xl"
      whileHover={{ y: -4 }}
    >
      <div className="relative aspect-square overflow-hidden">
        <img
          src={product.image}
          alt={product.name}
          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
        />
        
        {/* Sale badge with animation */}
        {product.onSale && (
          <motion.div
            initial={{ scale: 0, rotate: -180 }}
            animate={{ scale: 1, rotate: 0 }}
            className="absolute top-4 right-4 rounded-full bg-red-500 px-3 py-1 text-sm font-bold text-white shadow-lg"
          >
            SALE
          </motion.div>
        )}
      </div>
      <div className="p-6 space-y-3">
        <h3 className="text-xl font-semibold text-gray-900 line-clamp-2 transition-colors group-hover:text-blue-600">
          {product.name}
        </h3>
        
        <div className="flex items-baseline gap-2">
          <motion.span
            className="text-2xl font-bold text-blue-600"
            key={product.price} // Re-animate on price change
            initial={{ scale: 1.2, color: '#ef4444' }}
            animate={{ scale: 1, color: '#2563eb' }}
          >
            ${product.price}
          </motion.span>
          {product.compareAtPrice && (
            <span className="text-sm text-gray-500 line-through">
              ${product.compareAtPrice}
            </span>
          )}
        </div>
        {/* Button with success state */}
        <button
          onClick={handleAddToCart}
          className={`
            w-full rounded-lg px-6 py-3 font-medium text-white transition-all
            ${isAdded 
              ? 'bg-green-500 scale-105' 
              : 'bg-blue-600 hover:bg-blue-700 active:scale-95'
            }
          `}
        >
          {isAdded ? (
            <span className="flex items-center justify-center gap-2">
              <CheckIcon className="h-5 w-5" />
              Added!
            </span>
          ) : (
            'Add to Cart'
          )}
        </button>
      </div>
    </motion.div>
  );
}

Expected Outcome:

Visual appeal increased 5x
Engagement metrics improve 20-40% (typical)
User delight through micro-interactions
Maintains accessibility (ARIA labels, keyboard navigation)

Patterns & Templates

Pattern 1: Glassmorphism Card

When to use: Modern, premium aesthetic (works well with colorful backgrounds)

tsx

function GlassCard({ children, className = '' }: GlassCardProps) {
  return (
    <div className={`
      relative overflow-hidden rounded-2xl
      backdrop-blur-xl backdrop-saturate-150
      bg-white/10 border border-white/20
      shadow-xl shadow-black/5
      ${className}
    `}>
      {/* Optional gradient overlay */}
      <div className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent opacity-50" />
      
      <div className="relative z-10 p-6">
        {children}
      </div>
    </div>
  );
}

Pattern 3: Skeleton Loading with Shimmer

When to use: Loading states for cards, lists (better UX than spinners)

tsx

function SkeletonCard() {
  return (
    <div className="relative overflow-hidden rounded-xl bg-gray-200 p-6">
      {/* Shimmer effect */}
      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/50 to-transparent" />
      
      {/* Skeleton content */}
      <div className="space-y-4">
        <div className="h-4 w-3/4 rounded bg-gray-300" />
        <div className="h-4 w-1/2 rounded bg-gray-300" />
        <div className="h-32 w-full rounded bg-gray-300" />
      </div>
    </div>
  );
}
// Tailwind config (add to tailwind.config.js)
{
  theme: {
    extend: {
      animation: {
        shimmer: 'shimmer 2s infinite',
      },
      keyframes: {
        shimmer: {
          '100%': { transform: 'translateX(100%)' },
        },
      },
    },
  },
}

❌ Anti-Pattern 2: Ignoring Color Contrast

What it looks like:

css

/* ❌ Gray text on light gray background = unreadable */
.subtle-text {
  color: #999999;
  background: #f0f0f0;
  /* Contrast ratio: 2.1:1 (FAILS WCAG AA 4.5:1 requirement) */
}

Why it fails:

Fails WCAG AA accessibility (4.5:1 contrast for text)
Users with visual impairments cannot read content
Poor UX in bright sunlight (mobile devices)

Correct approach:

css

/* ✅ Sufficient contrast */
.readable-text {
  color: #333333;
  background: #ffffff;
  /* Contrast ratio: 12.6:1 (PASSES WCAG AAA) */
}
 
/* Or use design system tokens */
.text {
  color: var(--color-text-primary);    /* Guaranteed 4.5:1 */
  background: var(--color-bg-surface); /* Against text color */
}

Quality Checklist

Visual Polish

[ ] Color palette uses max 3 primary colors + neutrals
[ ] Typography hierarchy clear (3-5 font sizes)
[ ] Spacing follows consistent scale (4px, 8px, 16px, 24px, 32px...)
[ ] Hover states on all interactive elements
[ ] Loading states for async actions
[ ] Empty states with helpful messaging

Accessibility

[ ] Color contrast ≥4.5:1 for text (WCAG AA)
[ ] Focus indicators visible on all interactive elements
[ ] Animations respect prefers-reduced-motion
[ ] Alt text on all images
[ ] Keyboard navigation works (Tab, Enter, Esc)

Responsive Design

[ ] Mobile-first approach (320px base)
[ ] Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
[ ] Touch targets ≥44x44px (mobile)
[ ] No horizontal scroll on mobile
[ ] Images responsive (max-width: 100%, height: auto)

Performance

[ ] Animations use transform and opacity (GPU-accelerated)
[ ] Images optimized (WebP, lazy loading)
[ ] CSS bundle <50KB (after minification)
[ ] No layout shift (CLS <0.1)
[ ] Fonts preloaded (<link rel="preload">)

Security

Security scanPassed, 95 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingagents/skills/frontend-ui-ux-engineer/SKILL.md

Popularity

Repository stars: 59
Repository forks: 3
7-day trend score: 20

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/michaeldyrynda/dotfiles/frontend-ui-ux-engineer/badge)](https://verified-skill.com/skills/michaeldyrynda/dotfiles/frontend-ui-ux-engineer)

Something wrong with this skill or its page? Tell us.