What is the modern-web-design skill?
The modern-web-design skill is a meta-skill from freshtechbro's design skillstack. It gives an AI agent seven design principles for 2024 to 2025, from performance-first layout to glassmorphism, plus seven page patterns with code, four reference guides and two Python scripts.
Its performance section fixes four numbers before any styling begins: LCP under 2.5s, FID under 100ms, CLS under 0.1 and INP under 200ms. The modern-web-design skill turns those targets and current trends into rules an agent can follow.
It is a meta-skill, one of two in the meta-skills bundle. Instead of teaching one library, it synthesizes the animation, interaction and 3D skills in the same repository into design guidance, then points to them for implementation.
The seven design principles
- Performance-first design: defer non-critical animation, animate transforms and opacity, lazy load media and keep core content working without JavaScript.
- Bold minimalism: large fluid type, ample white space and a palette of 3 to 5 primary colors.
- Micro-interactions: hover, loading and feedback states, from skeleton screens to spring-driven toggles.
- Scrollytelling: reveals, parallax, pinned sections and progress indicators. For the scroll engine itself, see gsap-scrolltrigger.
- Cursor UX: follower dots, text cursors and magnetic buttons, disabled on touch devices.
- Glassmorphism and depth: frosted panels plus a four step elevation scale.
- AI-enhanced personalization: adaptive content with a default fallback and no layout shift.
Seven page patterns with code
Each pattern lists a use case, an implementation and the related skills. The set is an immersive hero, a horizontal scroll gallery, a 3D product viewer, animated data visualization, page transitions, cursor effects and staggered content reveals.
Examples span GSAP, Framer Motion, React Three Fiber and Barba.js, so one pattern can mix libraries. For a conversion-focused page structure to pair with these effects, see landing-page-design.
What sits in the skill folder
- references: accessibility_guide.md, design_trends_2024.md, interaction_patterns.md and performance_checklist.md.
- scripts: design_audit.py and pattern_generator.py.
- assets: a README for templates and examples.
Who the modern-web-design skill is for
Best for
- Landing pages, portfolios and product launches where motion, depth and speed all matter.
- Agents that need numeric targets such as contrast ratios and Web Vitals thresholds instead of vague taste advice.
- Developers who want one skill that routes to the right animation or 3D skill.
Not for
- A formal accessibility sign-off. The skill includes a guide, but a dedicated option is web-accessibility-skill.
- Reviewing finished code line by line. For a rule checklist, see web-design-guidelines.
Use it with UiChemy
The skill guides an agent; it does not publish anything. To land a scroll-driven hero on WordPress, build the design in Figma and convert it with Figma to WordPress, or edit the result in Composer. Get Started with either route.
How to install Modern Web Design Skill: Principles and Page Patterns
/plugin marketplace add freshtechbro/claudedesignskillsRegister the marketplace
Inside Claude Code, run
/plugin marketplace add freshtechbro/claudedesignskills. The README calls this the recommended route.Install the bundle
Run
/plugin install meta-skills. The README lists that bundle as 2 skills, Integration patterns and Modern design, with 4 commands and 3 agents.Alternative: claude.ai upload
Go to Settings, then Features, then Skills, click Upload skill and pick a .zip from .claude/skills/ in the repository.
Alternative: clone
Run
git clone https://github.com/freshtechbro/claudedesignskills.gitand copy .claude/skills/modern-web-design into your own project.Add the animation skills
The principles point to other skills for implementation, such as
gsap-scrolltrigger. The core-3d-animation bundle covers GSAP, Motion and Three.js.
Check that it loaded
Ask for an immersive hero section with fluid typography. The answer should cite the Web Vitals targets, use a clamp() type scale and keep animations on transforms and opacity.
Key features
- Core Web Vitals targetsSets LCP under 2.5s, FID under 100ms, CLS under 0.1 and INP under 200ms as design constraints, with a performance checklist in the references.
- Fluid type scaleSeven clamp() custom properties from xs to 3xl, so headings scale smoothly across viewports without breakpoints for every size.
- Accessibility-first colorAn oklch palette with primary, accent and neutral tokens, and a stated minimum 7:1 contrast ratio for text.
- Micro-interaction recipesHover scale of 1.05 to 1.1, color transitions of 200 to 300 ms, press states at 0.95 scale, skeleton screens and optimistic updates.
- Scrollytelling toolkitScroll-triggered reveals, parallax layers, horizontal sections, pinned scrubbing and animated SVG paths that follow scroll.
- Cursor rulesFollower and magnetic cursors built from CSS transforms and requestAnimationFrame, turned off on touch devices and respectful of prefers-reduced-motion.
- Glass and elevation CSSA glass-card recipe using backdrop-filter blur, plus four elevation shadows for layered interfaces.
- Seven page patternsHero, gallery, 3D viewer, data visualization, page transitions, cursor effects and staggered reveals, each with code and related skills.
- Reference guidesFour markdown files on accessibility, 2024 design trends, interaction patterns and performance, loaded when the task needs detail.
- Audit and generator scriptsdesign_audit.py and pattern_generator.py ship in the scripts folder next to the skill.
Frequently asked questions
What is the modern-web-design skill?
It is a meta-skill in the freshtechbro design skillstack. It covers modern web design trends, principles and implementation patterns for 2024 to 2025, including accessibility compliance, performance optimization and design system architecture, and it routes to animation and 3D skills for the code.
How do I install the modern-web-design skill?
Run /plugin marketplace add freshtechbro/claudedesignskills, then /plugin install meta-skills. You can also upload a zip to claude.ai under Settings, Features, Skills, or clone the repository and copy the skill folder into your project. The README lists all of these.
Which AI coding agents can use the modern-web-design skill?
The README is written for Claude Code and also documents uploading skills to claude.ai. It describes no other agent. The skill itself is a standard SKILL.md folder, but its use elsewhere is untested by the repository, so check that your tool loads such folders.
Which Core Web Vitals targets does it set?
Four: Largest Contentful Paint under 2.5s, First Input Delay under 100ms, Cumulative Layout Shift under 0.1 and Interaction to Next Paint under 200ms. A performance checklist in the references folder expands on them for design decisions.
Does the skill cover accessibility?
Yes, in several places. Its color system targets a minimum 7:1 text contrast, cursor effects must respect prefers-reduced-motion, and an accessibility guide sits in the references folder. For a skill dedicated to the topic, see web-accessibility-skill.
Does it include working code?
The SKILL.md contains snippets in CSS, JavaScript and JSX, covering fluid typography, glass cards, a scroll-linked GSAP rotation, a horizontal gallery, a React Three Fiber viewer and Framer Motion reveals. They are starting points to adapt, not a packaged library.
Do I need the other skills from the repository?
Not to read its guidance, but its Related Skills lines name others for implementation, including gsap-scrolltrigger, motion-framer and lightweight-3d-effects. Installing the core-3d-animation bundle adds GSAP, Motion and Three.js knowledge alongside it.