Initial commit

skills/modern-web-design/SKILL.md

@@ -0,0 +1,135 @@
+---
+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