135 lines
4.5 KiB
Markdown
135 lines
4.5 KiB
Markdown
---
|
|
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 |