skills.rest
ayofemiade
ayofemiadeCOMMUNITY
Explore all skills by this author →
GitHub

modern-web-design

Implements modern web design patterns with accessibility, performance, and animation guidance.

Updated Jun 30, 2026
Search Tags:#accessibility#WCAG#performance optimization#Framer Motion#web design#animation#gsap
One-click install
npx skills add https://github.com/ayofemiade/cleva --skill modern-web-design-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modern-web-design
Source: https://github.com/ayofemiade/cleva/tree/main/.claude/skills/modern-web-design
Command: npx skills add https://github.com/ayofemiade/cleva --skill modern-web-design-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Designing modern websites requires balancing current visual trends, WCAG accessibility compliance, Core Web Vitals performance, and animation implementation across many libraries, which is difficult to coordinate without a unified reference. ## Core Features & Use Cases - Design Pattern Catalog: Provides implementation patterns for bold minimalism, glassmorphism, scrollytelling, cursor UX, micro-interactions, and 3D product viewers with code examples in GSAP, Framer Motion, and React Three Fiber. - Accessibility & Performance Guidance: Includes a WCAG AAA compliance guide covering contrast ratios, keyboard navigation, screen reader support, and prefers-reduced-motion handling, plus Core Web Vitals optimization checklists. - Design Audit Tooling: Ships a Python script that audits HTML files for accessibility issues, performance problems, SEO basics, and modern CSS practices, generating a scored report. - Use Case: When building a landing page with scroll-driven animations, use this Skill to get the GSAP ScrollTrigger implementation, fluid typography tokens, and an accessibility checklist, then run design_audit.py on the output HTML. ## Quick Start Use the modern-web-design skill to implement an accessible hero section with scroll-triggered animations and fluid typography for my Next.js landing page.

Frequently Asked Questions about modern-web-design

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

FAQPage Schema
How do I implement scroll-triggered animations with GSAP ScrollTrigger?▼

GSAP ScrollTrigger ties animations to scroll position using trigger elements, start/end points, and scrub values. Pin sections for multi-step reveals and use scrub: 1 for smooth scroll-linked playback of transforms and opacity.

What contrast ratio is required for WCAG AAA compliance?▼

WCAG AAA requires a 7:1 contrast ratio for normal text and 4.5:1 for large text (18pt or 14pt bold). The guide recommends OKLCH color space for perceptually uniform palettes and includes a JavaScript contrast calculation function.

How do I respect prefers-reduced-motion in web animations?▼

Wrap animations in a @media (prefers-reduced-motion: reduce) query that sets animation and transition durations to near zero. In JavaScript, detect the preference with window.matchMedia and disable GSAP scroll animations accordingly.

Framer Motion vs React Spring for micro-interactions?▼

Framer Motion suits component animations, gestures, and layout transitions with variants like whileHover and whileTap. React Spring provides physics-based springs for drag interactions and trail animations that feel more natural.

Why do animations lag on mobile devices?▼

Mobile lag comes from animating non-GPU properties like top/left or width/height, heavy parallax, and unoptimized 3D content. Animate only transforms and opacity, test on real devices, and simplify effects on low-end hardware.

How do I audit HTML for accessibility and performance issues?▼

Run the design_audit.py script against an HTML file to check alt attributes, heading hierarchy, lazy loading, viewport meta tags, and modern CSS usage. It outputs a scored report with issues, warnings, and passes by category.

Related Skills

Explore More Design & Creative Skills→
hyperfinity-techhyperfinity-tech

hyper-design

Enforce Hyperfinity brand guidelines for AI-generated visual assets and UI components.

Official
Basic
mgd34msumgd34msu
4

vercel-analytics

Track page views and Core Web Vitals for Vercel-deployed applications.

Community
Basic
justfinethankujustfinethanku
40

cc_chrome_devtools_mcp_skill

Measure Core Web Vitals and export HAR files via Chrome DevTools Protocol.

Community
Advanced
markus41markus41
18

Scroll Animations Skill

Implement scroll-triggered animations and parallax effects with Framer Motion or GSAP.

Community
Intermediate