modern-web-design

name	modern-web-design
description	Create modern, responsive websites with professional design systems. Generates complete HTML/CSS/JS websites with Tailwind CSS, modern animations, and mobile-first responsive design. Perfect for landing pages, portfolios, business sites, and SaaS applications.

Modern Web Design Creator

Build beautiful, responsive websites using modern design principles, Tailwind CSS, and contemporary UI patterns. Creates production-ready code with animations, responsive layouts, and accessibility features.

When to Use This Skill

Use this skill for:

• Landing pages and marketing websites
• Portfolio and personal brand sites
• Business and company websites
• SaaS application interfaces
• E-commerce product pages
• Blog and content sites
• Dashboard and admin interfaces

Design System Foundation

Core Principles

• Mobile-first responsive design with breakpoint optimization
• Design tokens for consistent spacing, colors, and typography
• Component-based architecture for maintainable code
• Accessibility-first development with ARIA labels and semantic HTML
• Performance optimization with minimal CSS and efficient animations

Style Categories

Reference references/design-systems.md for complete style specifications:

Minimalist Professional

• Clean typography with generous whitespace
• Neutral color palette with strategic accent colors
• Subtle shadows and minimal animations
• Focus on content hierarchy and readability

Modern SaaS

• Bold gradients and vibrant colors
• Card-based layouts with elevation
• Micro-interactions and hover states
• Dashboard-style components

Creative Portfolio

• Experimental layouts and grid systems
• Bold typography and creative color schemes
• Advanced animations and scroll effects
• Image-focused design patterns

E-commerce Optimized

• Product-focused layouts
• Trust signals and social proof elements
• Conversion-optimized CTAs
• Shopping and checkout flows

Implementation Workflow

1. Analyze Requirements: Determine site purpose, target audience, and functionality needs
2. Select Design Category: Choose appropriate style system from references
3. Generate Structure: Create semantic HTML with proper heading hierarchy
4. Apply Styling: Implement Tailwind CSS classes with design system tokens
5. Add Interactions: Include animations, hover states, and micro-interactions
6. Optimize Responsive: Ensure mobile-first responsive behavior
7. Enhance Accessibility: Add ARIA labels, alt text, and keyboard navigation

Code Generation Standards

HTML Structure

• Semantic HTML5 elements (<header>, <main>, <section>, <article>)
• Proper heading hierarchy (h1 → h6)
• Accessibility attributes (ARIA, alt text, roles)
• Meta tags for SEO and responsive design

CSS Framework

• Tailwind CSS utility classes for rapid development
• Custom CSS for complex animations and unique effects
• CSS variables for design token consistency
• Mobile-first media queries

JavaScript Features

• Vanilla JavaScript for lightweight interactions
• Intersection Observer for scroll animations
• Form validation and submission handling
• Mobile menu and navigation toggles

Component Library

Load assets/component-templates.html for reusable components:

Navigation Components

• Responsive header with mobile menu
• Sticky navigation with scroll effects
• Breadcrumb navigation
• Footer with social links

Content Sections

• Hero sections with various layouts
• Feature grids and comparison tables
• Testimonial carousels
• FAQ accordions
• Contact forms

Interactive Elements

• Animated buttons and CTAs
• Image galleries and lightboxes
• Progress bars and counters
• Modal dialogs and tooltips

Advanced Features

Animation System

• CSS transitions for smooth interactions
• Keyframe animations for complex movements
• Intersection Observer for scroll-triggered effects
• Performance-optimized animations

Performance Optimization

• Minimal CSS footprint with utility-first approach
• Lazy loading for images and heavy content
• Critical CSS inlining for above-fold content
• Progressive enhancement strategies

SEO Foundation

• Semantic HTML structure
• Meta tags and Open Graph
• JSON-LD structured data
• Performance optimization for Core Web Vitals

Supporting Resources

• references/design-systems.md: Complete style guides and color palettes
• assets/component-templates.html: Reusable HTML component library
• scripts/build-tools.js: Optimization and build utilities