frontend-ui-ux-engineer by 404kidwiz/claude-supercode-skills
npx skills add https://github.com/404kidwiz/claude-supercode-skills --skill frontend-ui-ux-engineer提供前端设计和开发专业知识,专注于创建视觉惊艳、以用户为中心的界面,无需设计稿。通过创造性设计思维、高级样式、动画和现代 Web 应用程序的无障碍最佳实践,打造精美的 UI/UX。
在以下情况下调用此技能:
在以下情况下请勿调用:
使用场景: 给定一个普通的 React 组件,使其在视觉上出类拔萃
输入示例:
// 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>
);
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
步骤:
1. 视觉分析(2 分钟)
需要回答的问题:
- 此界面应唤起何种情感?(高端?有趣?值得信赖?)
- 视觉层次结构是什么?(图片 > 名称 > 价格 > 行动号召按钮)
- 哪些交互能让用户感到愉悦?(悬停效果、平滑过渡)
- 哪里需要留白?(元素周围的呼吸空间)
2. 色彩与排版增强
// 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. 微交互与润色
// 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>
);
}
预期成果:
使用时机: 现代、高端美学(与彩色背景搭配良好)
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>
);
}
使用时机: 卡片、列表的加载状态(比旋转加载器提供更好的用户体验)
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%)' },
},
},
},
},
}
表现形式:
/* ❌ 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) */
}
为何失败:
正确方法:
/* ✅ 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 */
}
prefers-reduced-motion 设置max-width: 100%, height: auto)transform 和 opacity(GPU 加速)<link rel="preload">)每周安装量
1.4K
代码仓库
GitHub 星标数
61
首次出现
2026 年 1 月 24 日
安全审计
安装于
opencode1.3K
codex1.3K
gemini-cli1.3K
github-copilot1.2K
cursor1.2K
kimi-cli1.1K
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.
Invoke this skill when:
Do NOT invoke when:
Use case: Given a plain React component, make it visually exceptional
Input Example:
// 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
// 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
// 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:
When to use: Modern, premium aesthetic (works well with colorful backgrounds)
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>
);
}
When to use: Loading states for cards, lists (better UX than spinners)
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%)' },
},
},
},
},
}
What it looks like:
/* ❌ 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:
Correct approach:
/* ✅ 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 */
}
prefers-reduced-motionmax-width: 100%, height: auto)transform and opacity (GPU-accelerated)<link rel="preload">)Weekly Installs
1.4K
Repository
GitHub Stars
61
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode1.3K
codex1.3K
gemini-cli1.3K
github-copilot1.2K
cursor1.2K
kimi-cli1.1K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装