modern-web-design

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 2b2fd871ca33 · 28 Oct 2026Report an issue or request a re-scan

• Publisherfreshtechbro GitHub userOwner of the repository this skill is read from
• Source folderfreshtechbro/claudedesignskills/.claude/skills/modern-web-designThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdict2b2fd871ca33A new audit runs when the source changes
• Repository statusNot archivedLast push 342 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: 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…

---
name: modern-web-design
description: 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.
---

# Modern Web Design

## Overview

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.

## Core Design Principles (2024-2025)

### 1. Performance-First Design

**Philosophy**: Design decisions should prioritize Core Web Vitals and user experience on all devices.

**Key Metrics**:
- Largest Contentful Paint (LCP): < 2.5s
- First Input Delay (FID): < 100ms
- Cumulative Layout Shift (CLS): < 0.1
- Interaction to Next Paint (INP): < 200ms

**Implementation Guidelines**:
- Defer non-critical animations until after page load
- Use CSS transforms/opacity for animations (GPU-accelerated)
- Implement lazy loading for images, videos, and 3D content
- Progressive enhancement: core content without JavaScript

**Related Skills**: `gsap-scrolltrigger`, `motion-framer`, `lottie-animations` for optimized animations

### 2. Bold Minimalism

**Characteristics**:
- Large, impactful typography (clamp() for fluid sizing)
- Ample white space (negative space as design element)
- Limited color palettes (3-5 primary colors)
- Intentional use of bold accent colors
- Geometric shapes and clean lines

**Typography Scale** (Modern fluid system):
```css
/* 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);
```

**Color System** (Accessibility-first):
```css
/* 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 */
```

**Related Skills**: `animated-component-libraries` for UI components

### 3. Micro-Interactions

**Definition**: Small, purposeful animations that provide feedback, guide users, and enhance perceived performance.

**Categories**:

**a) Hover States** (Desktop):
- Scale transformations (1.05-1.1x)
- Color transitions (200-300ms)
- Shadow depth changes
- Cursor transformations

**b) Loading States**:
- Skeleton screens (better than spinners)
- Progressive image loading (blur-up technique)
- Optimistic UI updates
- Staggered content reveals

**c) Interactive Feedback**:
- Button press states (scale down 0.95x)
- Toggle switches with spring physics
- Form field validation (immediate, kind feedback)
- Success/error states with motion

**Implementation Example** (Framer Motion):
```jsx
// 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>
```

**Related Skills**: `motion-framer`, `react-spring-physics`, `animejs` for micro-interactions

### 4. Scrollytelling

**Definition**: Narrative-driven experiences where content reveals and transforms as the user scrolls.

**Patterns**:

**a) Scroll-Triggered Reveals**:
- Fade-in on scroll entry (with offset)
- Slide-in from sides with stagger
- Scale + opacity transitions
- Clip-path reveals

**b) Scroll-Linked Animations**:
- Parallax layers (different scroll speeds)
- Horizontal scrolling sections
- Pinned sections with scrubbing animations
- 3D object rotation tied to scroll

**c) Progress Indicators**:
- Reading progress bars
- Step-by-step visual guides
- Animated SVG paths following scroll

**Implementation Example** (GSAP ScrollTrigger):
```javascript
// Scroll-linked 3D rotation
gsap.to(".cube", {
  scrollTrigger: {
    trigger: ".section",
    start: "top top",
    end: "bottom top",
    scrub: 1, // Smooth scrubbing
  },
  rotationY: 360,
  ease: "none"
});
```

**Related Skills**: `gsap-scrolltrigger`, `locomotive-scroll`, `scroll-reveal-libraries`, `react-three-fiber` for 3D scrollytelling

### 5. Cursor UX

**Evolution**: Custom cursors that enhance interaction and provide contextual feedback.

**Patterns**:

**a) Custom Cursor Shapes**:
- Circle/dot followers (delayed with easing)
- Text-based cursors ("View", "Drag", "Click")
- Blend modes for visual interest
- Scale/morph on hover

**b) Contextual Transformations**:
- Expand on links/buttons
- Magnetic attraction to interactive elements
- Color inversion over images
- Custom icons for actions (play, zoom, expand)

**c) Performance Considerations**:
- Use CSS transforms only (no top/left)
- RequestAnimationFrame for JS cursors
- Disable on mobile/touch devices
- Respect `prefers-reduced-motion`

**Implementation Example**:
```javascript
// 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 upda

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

1. 2026-10-28
   ✓SAFE B 89 / 100

   first audit · source 2b2fd871ca33

Questions about modern-web-design

• github.com/freshtechbro/claudedesignskills/tree/main/.claude/ski — the audited source at commit 2b2fd871ca33 and every finding aboveObserved · 28 Oct 2026

Spotted something wrong? Report a correction · Methodology