modern-web-design

What this skill does

# 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