modern-web-design

Generated source view for the actual executable engineering/modern-web-design skill. The durable routing article is Frontend and Design Skills. Source: skills/engineering/modern-web-design/SKILL.md

Runtime Source

Bundled Resources

These files are part of the executable skill folder and must be preserved with the skill source.

Description

Apply modern web design patterns: micro-interactions, scrollytelling, bold minimalism, cursor UX, glassmorphism, accessibility, performance and design systems. Use when designing websites or interactive experiences; links animation, 3D and UI skills.

Skill Source

---
name: modern-web-design
description: >-
  Apply modern web design patterns: micro-interactions, scrollytelling, bold minimalism, cursor
  UX, glassmorphism, accessibility, performance and design systems. Use when designing websites or
  interactive experiences; links animation, 3D and UI skills.
origin: personal
source_slug: modern-web-design
---


# Modern Web Design

## Overview

Modern web design in 2024-2025 emphasizes performance, accessibility, and meaningful interactions. This skill provides practical 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.


## Progressive Disclosure

This `SKILL.md` is the routing layer. Detailed recipes, examples, integration notes, and troubleshooting guidance live in `references/details.md` so they are loaded only when the task needs them.

Before producing concrete output, making a design recommendation, or debugging an implementation, load the relevant reference section below. Do not rely on memory for branch-specific APIs, examples, or caveats.

| Task branch | Read first |
| --- | --- |
| Core Design Principles (2024-2025) | `references/details.md#core-design-principles-2024-2025` |
| Common Design Patterns | `references/details.md#common-design-patterns` |
| Integration with Other Skills | `references/details.md#integration-with-other-skills` |
| Accessibility Best Practices | `references/details.md#accessibility-best-practices` |
| Performance Optimization | `references/details.md#performance-optimization` |
| Common Pitfalls | `references/details.md#common-pitfalls` |
| Design System Architecture | `references/details.md#design-system-architecture` |
| Resources | `references/details.md#resources` |

---

Timeline

• 2026-11-02 | Generated a browseable source page from the actual executable skill file. Source: skills/engineering/modern-web-design/SKILL.md