Claude MarketplacesSubmit
freshtechbro avatar

Modern Web Design

freshtechbro/claudedesignskills

This is a comprehensive meta-skill that synthesizes modern design trends and implementation patterns for 2024-2025. You'll want this when building contemporary web experiences that balance aesthetics with performance. It covers the current landscape: bold minimalism with fluid typography, micro-interactions for feedback, scrollytelling with GSAP, custom cursor UX, glassmorphism, and performance-first principles tied to Core Web Vitals. The practical bit is how it references related animation and 3D skills for implementation, so you get design guidance that connects directly to technical execution. Heavy on CSS custom properties and accessibility compliance, light on theoretical fluff.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
7
skills.sh installs
3.1K
GitHub stars
1.3K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add freshtechbro/claudedesignskills --skill modern-web-design --agent claude-code

Installs into .claude/skills of the current project.

Files

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

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/freshtechbro/claudedesignskills
Categories
Frontend Development, Code Review & Quality, Debugging, Java & JVM, Design & UI/UX
First seen
May 16, 2026

More from freshtechbro/claudedesignskills

All 23

Recommended

More Frontend Development
1benjaminsehl avatarliquid-theme-standardsbenjaminsehl/liquid-skillsCSS, JavaScript, and HTML coding standards for Shopify Liquid themes. Covers BEM naming inside stylesheet tags, design tokens, CSS custom properties, Web Compon3.1Kskills.sh installs
2forcedotcom avatargenerating-lwc-componentsforcedotcom/sf-skillsLightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patte3.1Kskills.sh installs
3markdown-viewer avatarinfocardmarkdown-viewer/skillsCreate editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic conten3.1Kskills.sh installs
4getsentry avatarpresentation-creatorgetsentry/skillsCreate data-driven presentation slides using React, Vite, and Recharts with Sentry branding. Use when asked to "create a presentation", "build slides", "make a 3.1Kskills.sh installs
5nexu-io avatargsap-corenexu-io/open-designOfficial GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion).3Kskills.sh installs
6sanity-io avatarportable-text-serializationsanity-io/agent-toolkitRender and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in any frontend f3Kskills.sh installs