OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add freshtechbro/claudedesignskills --skill modern-web-design
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 skills add freshtechbro/claudedesignskills --skill modern-web-design
Modern web design in 2024-2025 emphasizes performance, accessibility, and meaningful interactions. This skill provides comprehensive guidance on current design trends, implementation patterns, and best practices for creating engaging, accessible, and performant web experiences.
This meta-skill synthesizes knowledge from all animation, interaction, and 3D skills in this repository to provide holistic design guidance.
Philosophy: Design decisions should prioritize Core Web Vitals and user experience on all devices.
Key Metrics:
Implementation Guidelines:
Related Skills: gsap-scrolltrigger, motion-framer, lottie-animations for optimized animations
Characteristics:
Typography Scale (Modern fluid system):
Color System (Accessibility-first):
Related Skills: animated-component-libraries for UI components
Definition: Small, purposeful animations that provide feedback, guide users, and enhance perceived performance.
Categories:
a) Hover States (Desktop):
b) Loading States:
c) Interactive Feedback:
Implementation Example (Framer Motion):
Related Skills: motion-framer, react-spring-physics, animejs for micro-interactions
Definition: Narrative-driven experiences where content reveals and transforms as the user scrolls.
Patterns:
a) Scroll-Triggered Reveals:
b) Scroll-Linked Animations:
c) Progress Indicators:
Implementation Example (GSAP ScrollTrigger):
Related Skills: gsap-scrolltrigger, locomotive-scroll, scroll-reveal-libraries, react-three-fiber for 3D scrollytelling
Evolution: Custom cursors that enhance interaction and provide contextual feedback.
Patterns:
a) Custom Cursor Shapes:
b) Contextual Transformations:
c) Performance Considerations:
prefers-reduced-motionImplementation Example:
Related Skills: gsap-scrolltrigger (for easing), motion-framer (for React cursor components)
Characteristics:
Modern Glassmorphism (2024):
Depth System (Layering):
Related Skills: animated-component-libraries for glassmorphic components
Patterns:
a) Adaptive Content:
b) Intelligent Interactions:
c) Performance + Privacy:
Implementation Considerations:
Use Case: Landing pages, product launches, portfolio sites
Characteristics:
Implementation (Combined approach):
HTML Structure:
Technologies:
lightweight-3d-effects)gsap-scrolltrigger)motion-framer)Related Skills: lightweight-3d-effects, gsap-scrolltrigger, motion-framer
Use Case: Portfolio work, product showcases, case studies
Implementation (GSAP ScrollTrigger):
Enhancements:
Related Skills: gsap-scrolltrigger, locomotive-scroll
Use Case: E-commerce, product marketing, showcases
Implementation (React Three Fiber):
Enhancements:
Related Skills: react-three-fiber, threejs-webgl, model-viewer-component
Use Case: Dashboards, analytics, infographics
Patterns:
Implementation (Framer Motion + IntersectionObserver):
Related Skills: motion-framer, pixijs-2d for canvas-based visualizations
Use Case: Multi-page apps, portfolio sites, storytelling experiences
Implementation (Barba.js + GSAP):
Modern Alternatives:
Related Skills: barba-js, gsap-scrolltrigger, motion-framer
Use Case: Creative agencies, portfolios, interactive experiences
Patterns:
Implementation (Vanilla JS + GSAP):
Related Skills: gsap-scrolltrigger, motion-framer
Use Case: Feature sections, testimonials, team grids
Implementation (Framer Motion variants):
Related Skills: motion-framer, gsap-scrolltrigger, scroll-reveal-libraries
GSAP ScrollTrigger (gsap-scrolltrigger):
Framer Motion (motion-framer):
React Spring (react-spring-physics):
Anime.js (animejs):
Lottie (lottie-animations):
Three.js (threejs-webgl):
React Three Fiber (react-three-fiber):
Babylon.js (babylonjs-engine):
Lightweight 3D (lightweight-3d-effects):
Animated Components (animated-component-libraries):
Scroll Reveals (scroll-reveal-libraries):
Respect User Preferences:
JavaScript Detection:
WCAG AAA Standards:
Testing:
Requirements:
Focus Styles (Modern):
Semantic HTML:
Animation Announcements:
Minimum Size: 44x44px (iOS), 48x48px (Android)
Spacing: Minimum 8px between touch targets
Implementation:
60 FPS Checklist:
will-change sparingly (memory cost)GSAP Performance:
Critical Path:
Progressive Enhancement:
Modern Formats:
Responsive Images:
Loading Strategy:
Runtime Performance:
Related Skills: threejs-webgl, react-three-fiber, babylonjs-engine
Code Splitting:
Tree Shaking:
Problem: Too many animations distract from content and hurt performance.
Solution:
Rule of Thumb: If you can't explain why an animation exists, remove it.
Problem: Animations work on desktop but lag on mobile devices.
Solution:
matchMedia for device-specific experiencesProblem: Experience breaks without JavaScript or on older browsers.
Solution:
Problem: Forgetting keyboard users, screen readers, or motion-sensitive users.
Solution:
prefers-reduced-motionChecklist:
Problem: Blank screen or layout shifts during content load.
Solution:
Problem: Overriding native scroll behavior frustrates users.
Solution:
Good Practice: Enhance scroll, don't replace it.
Modern Design Tokens (CSS Custom Properties):
Atomic Design (Brad Frost):
Related Skills: animated-component-libraries for component patterns
This skill references the following skills for implementation:
gsap-scrolltrigger - Scroll-driven animations, pinning, scrubbingmotion-framer - React animations, gestures, layout animationsreact-spring-physics - Physics-based animationsanimejs - SVG animations, stagger effectslottie-animations - Designer-created animationsscroll-reveal-libraries - Simple scroll reveals (AOS)threejs-webgl - Custom 3D scenes and effectsreact-three-fiber - 3D in React applicationsbabylonjs-engine - Physics-based 3D, VR/XRlightweight-3d-effects - Vanta.js backgrounds, Zdog illustrationsbarba-js - Page transitionslocomotive-scroll - Smooth scrollinganimated-component-libraries - Magic UI, React Bitspixijs-2d - Canvas-based 2D graphicsSee the references/ directory for in-depth documentation:
design_trends_2024.md - Current web design trends and forecastsinteraction_patterns.md - Comprehensive micro-interaction catalogaccessibility_guide.md - WCAG compliance patterns and testingperformance_checklist.md - Optimization strategies and metricsThe scripts/ directory includes tools for implementing design patterns:
pattern_generator.py - Generate design pattern boilerplatedesign_audit.py - Audit existing designs for complianceThe assets/ directory contains design system templates and starter files. See assets/README.md for details.
/* 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 */// 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>// Scroll-linked 3D rotation
gsap.to(".cube", {
scrollTrigger: {
trigger: ".section",
start: "top top",
end: "bottom top",
scrub: 1, // Smooth scrubbing
},
rotationY: 360,
ease: "none"
});// 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();.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);<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>gsap.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
}
});import { 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>
)
}function 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>
);
}barba.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
});
}
}]
});const 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"
});
});
});const 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>
);
}@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 */
}// 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"
>// Dynamic imports
const AnimationModule = lazy(() => import('./animations'));
// Route-based splitting
const Gallery = lazy(() => import('./pages/Gallery'));const 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
}// 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);
}