skills.rest
Immanuel-Aristotle
Immanuel-AristotleCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

modern-web-design

Guide teams in implementing modern web design patterns with reusable tokens.

Updated Apr 27, 2026
Search Tags:#performance#accessibility#design-patterns#web-design#3d#design-systems#scrollytelling
One-click install
npx skills add https://github.com/Immanuel-Aristotle/agents --skill modern-web-design-immanuel-aristotle
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modern-web-design
Source: https://github.com/Immanuel-Aristotle/agents/tree/main/skills/modern-web-design
Command: npx skills add https://github.com/Immanuel-Aristotle/agents --skill modern-web-design-immanuel-aristotle

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Modern web design guidance that consolidates current patterns, principles, and implementation strategies for creating fast, accessible, and engaging web experiences across devices.

Core Features & Use Cases

  • Performance-First Design: prioritize Core Web Vitals and smooth interactions.
  • Bold Minimalism + Micro-Interactions: strong typography, white space, and purposeful motion.
  • Scrollytelling & Cursor UX: narrative reveals and interactive cursor-driven effects.
  • 3D & Glassmorphism Integration: lightweight 3D glimpses and glassy surfaces within design systems.
  • Design System Guidance: tokens, components, accessibility, and performance patterns.
  • Pattern Library Patterns: immersive hero, horizontal galleries, 3D viewers, animated data, page transitions.

Usage Scenarios: When designing websites, portfolios, dashboards, or product marketing pages that require modern aesthetics, accessibility, and performant interactions.

Quick Start

Create a starter page that showcases a bold hero, a responsive card grid, and a simple 3D viewer using the included patterns.

Frequently Asked Questions about modern-web-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build modern web design patterns that prioritize Core Web Vitals and accessibility?▼

You can build accessible, high-performance web design patterns by prioritizing Core Web Vitals, using bold minimalism, and applying reusable design system tokens. This approach ensures fast, engaging, and accessible cross-device web experiences.

What's the best way to integrate 3D elements and glassmorphism into a web design system without hurting performance?▼

Integrating lightweight 3D glimpses and glassy surfaces into your design system requires balancing visual aesthetics with performance-first principles. You should use purposeful micro-interactions and reusable tokens to maintain smooth interactions across devices.

Can I use scrollytelling and cursor-driven effects for marketing pages and dashboards?▼

Yes, you can apply scrollytelling and interactive cursor-driven effects to websites, dashboards, and marketing pages. These narrative reveals and micro-interactions enhance user engagement while maintaining accessibility and performance standards.

How do I create a responsive web design starter page with an immersive hero and 3D viewer?▼

You can create a responsive starter page by implementing an immersive hero, a responsive card grid, and a simple 3D viewer. Utilizing the included pattern library ensures these components follow modern accessibility and performance guidelines.

Does modern web design guidance provide reusable tokens for cross-team implementation?▼

Yes, modern web design guidance provides reusable tokens, components, and implementation patterns for cross-team use. These design system tokens ensure consistent accessibility, performance, and visual coherence across multiple web projects.

When should I avoid using heavy micro-interactions and 3D animations in web design?▼

You should avoid heavy micro-interactions and 3D animations when they compromise Core Web Vitals or accessibility. If these engaging interactions cause performance bottlenecks or hinder screen reader navigation, prioritize bold minimalism and white space instead.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
almazomalmazom

frontend-dev

Coordinate design, motion, AI assets, and copywriting to build React/Next.js pages.

Community
Advanced
freshtechbrofreshtechbro
682

modern-web-design

Guide modern web design trends with CSS implementation patterns and accessibility practices.

Community
Advanced
markus41markus41
18

3D Animations Skill

Generate CSS and JavaScript code for browser-based 3D animations.

Community
Intermediate