Loading...
Loading...
Modern web design trends, principles, and implementation patterns for 2024-2025. Use this skill when designing websites, creating interactive experiences, implementing design systems, ensuring accessibility, or building performance-first interfaces. Triggers on tasks involving modern design trends, micro-interactions, scrollytelling, bold minimalism, cursor UX, glassmorphism, accessibility compliance, performance optimization, or design system architecture. References animation skills (GSAP, Framer Motion, React Spring), 3D skills (Three.js, R3F, Babylon.js), and component libraries for implementation guidance.
npx skill4agent add freshtechbro/claudedesignskills modern-web-designgsap-scrolltriggermotion-framerlottie-animations/* Fluid typography using clamp() */
--font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
--font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
--font-size-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
--font-size-xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
--font-size-2xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
--font-size-3xl: clamp(3.5rem, 2.5rem + 5vw, 6rem);/* WCAG AAA compliant color system */
--color-primary: oklch(50% 0.2 250); /* Blue */
--color-accent: oklch(65% 0.25 30); /* Coral */
--color-neutral-50: oklch(98% 0 0);
--color-neutral-900: oklch(20% 0 0);
/* Contrast ratio: minimum 7:1 for text */animated-component-libraries// Button with micro-interaction
<motion.button
whileHover={{ scale: 1.05, y: -2 }}
whileTap={{ scale: 0.95 }}
transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
Click me
</motion.button>motion-framerreact-spring-physicsanimejs// Scroll-linked 3D rotation
gsap.to(".cube", {
scrollTrigger: {
trigger: ".section",
start: "top top",
end: "bottom top",
scrub: 1, // Smooth scrubbing
},
rotationY: 360,
ease: "none"
});gsap-scrolltriggerlocomotive-scrollscroll-reveal-librariesreact-three-fiberprefers-reduced-motion// Simple smooth cursor follower
const cursor = document.querySelector('.cursor');
let mouseX = 0, mouseY = 0;
let cursorX = 0, cursorY = 0;
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
function updateCursor() {
// Smooth easing
cursorX += (mouseX - cursorX) * 0.1;
cursorY += (mouseY - cursorY) * 0.1;
cursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;
requestAnimationFrame(updateCursor);
}
updateCursor();gsap-scrolltriggermotion-framer.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border-radius: 16px;
}/* Elevation scale */
--elevation-1: 0 1px 3px rgba(0,0,0,0.12);
--elevation-2: 0 4px 8px rgba(0,0,0,0.15);
--elevation-3: 0 8px 16px rgba(0,0,0,0.18);
--elevation-4: 0 16px 32px rgba(0,0,0,0.2);animated-component-libraries<section class="hero">
<div id="bg-canvas"></div>
<div class="hero__content">
<h1 class="hero__title">Modern Design</h1>
<p class="hero__subtitle">Performance meets beauty</p>
<button class="hero__cta">Explore</button>
</div>
<div class="scroll-indicator">
<span>Scroll</span>
</div>
</section>lightweight-3d-effectsgsap-scrolltriggermotion-framerlightweight-3d-effectsgsap-scrolltriggermotion-framergsap.to(".gallery__track", {
x: () => -(document.querySelector(".gallery__track").scrollWidth - window.innerWidth),
ease: "none",
scrollTrigger: {
trigger: ".gallery",
pin: true,
scrub: 1,
end: () => "+=" + document.querySelector(".gallery__track").scrollWidth
}
});gsap-scrolltriggerlocomotive-scrollimport { Canvas } from '@react-three/fiber'
import { OrbitControls, useGLTF } from '@react-three/drei'
function ProductViewer() {
return (
<Canvas camera={{ position: [0, 0, 5], fov: 50 }}>
<ambientLight intensity={0.5} />
<spotLight position={[10, 10, 10]} angle={0.15} />
<Product />
<OrbitControls
enableZoom={false}
autoRotate
autoRotateSpeed={2}
/>
</Canvas>
)
}react-three-fiberthreejs-webglmodel-viewer-componentfunction AnimatedStat({ end, label }) {
const [count, setCount] = useState(0);
const ref = useRef();
const isInView = useInView(ref, { once: true });
useEffect(() => {
if (isInView) {
// Count up animation
const duration = 2000;
const steps = 60;
const increment = end / steps;
let current = 0;
const timer = setInterval(() => {
current += increment;
if (current >= end) {
setCount(end);
clearInterval(timer);
} else {
setCount(Math.floor(current));
}
}, duration / steps);
}
}, [isInView, end]);
return (
<motion.div
ref={ref}
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6 }}
>
<h2>{count}+</h2>
<p>{label}</p>
</motion.div>
);
}motion-framerpixijs-2dbarba.init({
transitions: [{
name: 'slide',
leave(data) {
return gsap.to(data.current.container, {
xPercent: -100,
duration: 0.5
});
},
enter(data) {
return gsap.from(data.next.container, {
xPercent: 100,
duration: 0.5
});
}
}]
});barba-jsgsap-scrolltriggermotion-framerconst links = document.querySelectorAll('a');
const cursor = document.querySelector('.cursor');
links.forEach(link => {
link.addEventListener('mouseenter', () => {
gsap.to(cursor, {
scale: 2,
duration: 0.3,
ease: "power2.out"
});
});
link.addEventListener('mouseleave', () => {
gsap.to(cursor, {
scale: 1,
duration: 0.3,
ease: "power2.out"
});
});
});gsap-scrolltriggermotion-framerconst container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: {
staggerChildren: 0.1
}
}
};
const item = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0 }
};
function FeatureGrid() {
return (
<motion.div
variants={container}
initial="hidden"
whileInView="show"
viewport={{ once: true, amount: 0.3 }}
className="grid"
>
{features.map((feature, i) => (
<motion.div key={i} variants={item}>
{feature}
</motion.div>
))}
</motion.div>
);
}motion-framergsap-scrolltriggerscroll-reveal-librariesgsap-scrolltriggermotion-framerreact-spring-physicsanimejslottie-animationsthreejs-webglreact-three-fiberbabylonjs-enginelightweight-3d-effectsanimated-component-librariesscroll-reveal-libraries@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (prefersReducedMotion) {
// Disable or simplify animations
gsap.config({ nullTargetWarn: false });
// Skip scroll animations, use instant reveals
}// Check contrast ratio
function getContrastRatio(color1, color2) {
const l1 = getLuminance(color1);
const l2 = getLuminance(color2);
const lighter = Math.max(l1, l2);
const darker = Math.min(l1, l2);
return (lighter + 0.05) / (darker + 0.05);
}:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
border-radius: 4px;
}
/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
outline: none;
}<!-- Announce when content loads -->
<div role="status" aria-live="polite" aria-atomic="true">
Loading complete. 12 items displayed.
</div>.button {
min-height: 44px;
min-width: 44px;
padding: 12px 24px;
/* Tap target includes padding */
}will-change// Force GPU acceleration
gsap.set(element, { force3D: true });
// Use will-change during animation only
gsap.to(element, {
x: 100,
onStart: () => element.style.willChange = 'transform',
onComplete: () => element.style.willChange = 'auto'
});<!-- Load essential styles first -->
<style>
/* Critical CSS inlined */
</style>
<!-- Defer non-critical styles -->
<link rel="preload" href="animations.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="animations.css"></noscript><picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture><img
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 640px) 100vw,
(max-width: 1024px) 50vw,
33vw"
src="image-800.jpg"
alt="Description"
loading="lazy"
>threejs-webglreact-three-fiberbabylonjs-engine// Dynamic imports
const AnimationModule = lazy(() => import('./animations'));
// Route-based splitting
const Gallery = lazy(() => import('./pages/Gallery'));matchMediaconst isLowEndDevice = () => {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) &&
navigator.hardwareConcurrency < 4;
};
if (isLowEndDevice()) {
// Simplify or disable animations
}// Feature detection
if ('IntersectionObserver' in window) {
// Use scroll-triggered animations
} else {
// Show content immediately
}prefers-reduced-motion// Skeleton screen pattern
function ProductCard({ loading, data }) {
if (loading) {
return (
<div className="skeleton">
<div className="skeleton__image" />
<div className="skeleton__title" />
<div className="skeleton__price" />
</div>
);
}
return <ProductCardContent data={data} />;
}:root {
/* Colors - OKLCH for perceptual uniformity */
--color-primary: oklch(50% 0.2 250);
--color-accent: oklch(65% 0.25 30);
/* Spacing - Consistent scale */
--space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
--space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
--space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem);
--space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
--space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
--space-xl: clamp(2rem, 1.6rem + 2vw, 3rem);
--space-2xl: clamp(3rem, 2.4rem + 3vw, 4.5rem);
/* Typography - Fluid scale */
--font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
/* Animation - Consistent timing */
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 400ms;
/* Easing - Natural motion */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}animated-component-librariesgsap-scrolltriggermotion-framerreact-spring-physicsanimejslottie-animationsscroll-reveal-librariesthreejs-webglreact-three-fiberbabylonjs-enginelightweight-3d-effectsbarba-jslocomotive-scrollanimated-component-librariespixijs-2dreferences/design_trends_2024.mdinteraction_patterns.mdaccessibility_guide.mdperformance_checklist.mdscripts/pattern_generator.pydesign_audit.pyassets/assets/README.md