fraim-framework 2.0.56 → 2.0.58

package/dist/registry/workflows/marketing/create-modern-website.md

@@ -1,456 +0,0 @@
-# Workflow: create-modern-website
-
-**Path:** `workflows/marketing/create-modern-website.md`
-
----
-
-# Modern Website Creation Workflow
-
-## INTENT
-To create modern, appealing, and valuable websites that showcase key value propositions and use cases for any product, leveraging competitive analysis and user preferences to deliver professional, conversion-focused web experiences.
-
-## PRINCIPLES
-- **User-Centric Design**: Start with user preferences and competitor analysis
-- **Value-First Approach**: Lead with clear value propositions and use cases
-- **Modern Aesthetics**: Use contemporary design patterns, animations, and interactions
-- **Performance Optimized**: Fast loading, responsive, and accessible
-- **Conversion Focused**: Clear CTAs and user journey optimization
-- **Deployment Ready**: Complete with hosting options and deployment automation
-
-## Prerequisites
-Before using this workflow, ensure you have:
-- Node.js installed (for running the website structure script)
-- Basic understanding of HTML/CSS/JavaScript (for customization)
-- Access to hosting platform accounts (GitHub, Netlify, etc.)
-
-## Script Location
-The website structure creation script is synced to: `~/.fraim/scripts/create-website-structure.js`
-
-## WEBSITE CREATION WORKFLOW
-
-### Phase 1: Discovery & Research
-
-#### Step 1: User Preference Brainstorming
-Conduct collaborative session to understand user vision:
-
-**Questions to Explore:**
-- What websites do you admire and why? (Collect 3-5 examples)
-- What's your target audience? (Developers, business users, enterprises, etc.)
-- What's the primary goal? (Lead generation, product showcase, documentation, etc.)
-- What tone/personality should the site have? (Professional, playful, technical, etc.)
-- Any specific features you want? (Dark mode, animations, interactive demos, etc.)
-- Brand colors, fonts, or existing brand guidelines?
-- Content priorities: What should visitors see first?
-
-**Deliverable:** User preference document with examples and requirements
-
-#### Step 2: Competitive Analysis
-Research and analyze competitor websites:
-
-**Analysis Framework:**
-- **Visual Design**: Layout, color schemes, typography, imagery
-- **Content Strategy**: Messaging hierarchy, value props, use cases
-- **User Experience**: Navigation, CTAs, conversion funnels
-- **Technical Features**: Performance, mobile experience, interactions
-- **Strengths/Weaknesses**: What works well, what could be improved
-
-**Research Sources:**
-- Direct competitors in the same space
-- Aspirational brands in adjacent markets
-- Award-winning sites (Awwwards, CSS Design Awards)
-- Industry-specific showcases
-
-**Deliverable:** Competitive analysis report with screenshots and insights
-
-#### Step 3: Content Strategy Development
-Define the website's content architecture:
-
-**Content Audit:**
-- Existing marketing materials, documentation, case studies
-- Product features, benefits, and differentiators
-- Customer testimonials, reviews, and success stories
-- Technical specifications and integration details
-
-**Content Hierarchy:**
-- Hero section: Primary value proposition
-- Problem/solution fit demonstration
-- Feature showcase with benefits
-- Use cases and customer stories
-- Social proof and testimonials
-- Clear call-to-action strategy
-
-**Deliverable:** Content strategy document and site map
-
-### Phase 2: Design & Development
-
-#### Step 4: Design System Creation
-Establish visual foundation:
-
-**Design Elements:**
-- Color palette (primary, secondary, accent colors)
-- Typography system (headings, body text, code fonts)
-- Spacing and layout grid system
-- Component library (buttons, cards, forms)
-- Icon set and imagery style
-- Animation and interaction patterns
-
-**Accessibility Considerations:**
-- Color contrast ratios (WCAG AA compliance)
-- Font size and readability
-- Keyboard navigation support
-- Screen reader compatibility
-- Focus states and indicators
-
-**Deliverable:** Design system documentation and CSS variables
-
-#### Step 5: Website Structure Creation
-Create the initial website foundation using the FRAIM script:
-
-**Verify Script Availability:**
-```bash
-# Check if script exists
-ls -la ~/.fraim/scripts/create-website-structure.js
-
-# Test script functionality
-node ~/.fraim/scripts/create-website-structure.js --help
-```
-
-**Create Website Structure:**
-```bash
-# Navigate to your projects directory
-cd ~/projects
-
-# Create website structure (replace with actual project name)
-node ~/.fraim/scripts/create-website-structure.js {PROJECT_NAME}
-
-# Navigate to the created project
-cd {PROJECT_NAME}
-
-# Verify structure was created correctly
-ls -la
-```
-
-**Generated Structure:**
-```
-{PROJECT_NAME}/
-├── index.html          # Main landing page with hero section
-├── css/
-│   └── styles.css      # CSS with dark/light mode variables
-├── js/
-│   └── script.js       # Theme toggle and interactions
-├── assets/
-│   ├── images/         # Image assets directory
-│   └── icons/          # Icon assets directory
-├── docs/
-│   └── README.md       # Project documentation
-├── .gitignore          # Git ignore file
-└── README.md           # Main project README
-```
-
-#### Step 6: Content Integration and Customization
-Populate the website with optimized content based on the generated structure:
-
-**Customize the Generated Foundation:**
-```bash
-# Edit the main page content
-# Update index.html with your specific content
-# Modify css/styles.css for your brand colors
-# Enhance js/script.js with additional functionality
-```
-
-**Content Optimization:**
-- Replace placeholder content with your product information
-- Update CSS variables with your brand colors
-- Add your images to the assets/images/ directory
-- Customize navigation links and structure
-- Integrate your specific call-to-action buttons
-
-**Brand Customization:**
-Edit CSS variables in `css/styles.css`:
-```css
-:root {
-    --bg-primary: #ffffff;
-    --bg-secondary: #f8fafc;
-    --text-primary: #1a1a1a;
-    --text-secondary: #666666;
-    --accent-color: #your-brand-color;  /* Update this */
-    --border-color: #e5e5e5;
-}
-```
-
-**Additional Pages:**
-Create additional pages as needed:
-- `demo.html` - Interactive demo/features page
-- `pricing.html` - Pricing and plans (if applicable)
-- `about.html` - About/company page
-- `contact.html` - Contact and support
-- `404.html` - Custom error page
-
-**Modern Design Patterns to Implement:**
-- Hero section with compelling headline and CTA
-- Feature cards with icons and benefits
-- Before/after problem/solution sections
-- Interactive demos or screenshots
-- Customer testimonial carousels
-- FAQ accordion sections
-- Newsletter signup forms
-- Social proof indicators
-
-**Visual Content:**
-- High-quality product screenshots
-- Explanatory diagrams and infographics
-- Customer success story visuals
-- Team photos (if applicable)
-- Brand-consistent imagery
-
-**Deliverable:** Fully functional website with all content integrated
-
-### Phase 3: Optimization & Testing
-
-#### Step 7: Performance & Quality Assurance
-Ensure website meets modern standards:
-
-**Performance Testing:**
-- Page load speed optimization (target: <3 seconds)
-- Image optimization and lazy loading
-- CSS and JavaScript minification
-- Mobile performance testing
-- Core Web Vitals compliance
-
-**Cross-Browser Testing:**
-- Chrome, Firefox, Safari, Edge compatibility
-- Mobile device testing (iOS, Android)
-- Responsive design validation
-- Accessibility testing with screen readers
-
-**SEO Optimization:**
-- Meta tags and descriptions
-- Structured data markup
-- XML sitemap generation
-- Internal linking strategy
-- Image alt text optimization
-
-**Deliverable:** Performance report and optimization recommendations
-
-#### Step 8: User Experience Validation
-Test and refine the user experience:
-
-**Usability Testing:**
-- Navigation flow testing
-- Call-to-action effectiveness
-- Form completion rates
-- Mobile user experience
-- Loading state and error handling
-
-**Conversion Optimization:**
-- A/B test different headlines
-- CTA button placement and copy
-- Form field optimization
-- Trust signal placement
-- Social proof positioning
-
-**Deliverable:** UX testing report with improvement recommendations
-
-### Phase 4: Deployment & Launch
-
-#### Step 9: Hosting Options Analysis
-Present deployment options based on requirements:
-
-**Static Site Hosting (Recommended for most cases):**
-- **GitHub Pages**: Free, automatic deployment, custom domains
-- **Netlify**: Free tier, form handling, serverless functions
-- **Vercel**: Excellent performance, preview deployments
-- **Cloudflare Pages**: Global CDN, fast performance
-
-**Traditional Hosting:**
-- **Shared Hosting**: cPanel-based hosts (Bluehost, SiteGround)
-- **VPS/Cloud**: DigitalOcean, AWS, Google Cloud
-- **Managed WordPress**: If CMS functionality needed
-
-**Enterprise Options:**
-- **AWS S3 + CloudFront**: Scalable, enterprise-grade
-- **Azure Static Web Apps**: Microsoft ecosystem integration
-- **Google Cloud Storage**: Google ecosystem integration
-
-**Hosting Recommendation Matrix:**
-```
-Budget-Conscious → GitHub Pages (Free)
-Performance-Critical → Vercel/Netlify (Free tier available)
-Enterprise/Scale → AWS S3 + CloudFront
-CMS Required → Managed WordPress hosting
-Custom Backend → VPS/Cloud hosting
-```
-
-#### Step 10: Deployment Automation
-Set up automated deployment pipeline:
-
-**GitHub Actions Workflow:**
-- Automatic deployment on push to main branch
-- Build optimization (minification, compression)
-- Performance testing integration
-- Broken link checking
-- SEO validation
-
-**Domain Configuration:**
-- Custom domain setup (if provided)
-- SSL certificate configuration
-- DNS optimization (CDN setup)
-- Redirect management (www vs non-www)
-
-**Monitoring Setup:**
-- Google Analytics integration
-- Performance monitoring (Core Web Vitals)
-- Uptime monitoring
-- Error tracking setup
-
-**Deliverable:** Live website with automated deployment pipeline
-
-### Phase 5: Launch & Optimization
-
-#### Step 11: Launch Preparation
-Prepare for website launch:
-
-**Pre-Launch Checklist:**
-- [ ] All content reviewed and approved
-- [ ] Contact forms tested and working
-- [ ] Analytics tracking verified
-- [ ] Social media integration tested
-- [ ] Mobile experience validated
-- [ ] Performance benchmarks met
-- [ ] SEO elements in place
-- [ ] Backup and recovery plan established
-
-**Launch Strategy:**
-- Soft launch for testing and feedback
-- Stakeholder review and approval
-- Public launch announcement
-- Social media promotion plan
-- Email marketing integration
-
-#### Step 12: Post-Launch Optimization
-Continuous improvement based on real user data:
-
-**Analytics Review:**
-- User behavior analysis
-- Conversion rate tracking
-- Performance monitoring
-- Mobile vs desktop usage patterns
-- Traffic source analysis
-
-**Iterative Improvements:**
-- A/B testing implementation
-- Content optimization based on user feedback
-- Performance enhancements
-- SEO improvements based on search data
-- Feature additions based on user requests
-
-**Deliverable:** Launch report and optimization roadmap
-
-## AGENT INSTRUCTIONS
-
-When executing this workflow, agents should:
-
-### Phase 1: Discovery & Research
-1. **Conduct user brainstorming session** using the questions in Step 1
-2. **Research competitor websites** and document findings
-3. **Create content strategy** based on user input
-
-### Phase 2: Design & Development
-1. **ALWAYS start with the script**: Use `node ~/.fraim/scripts/create-website-structure.js {PROJECT_NAME}` to create the foundation
-2. **Verify script output**: Check that all files were created correctly
-3. **Customize based on user preferences**: Update colors, content, and structure
-4. **Add additional pages** as needed for the specific project
-
-### Phase 3: Testing & Optimization
-1. **Test the generated website** in multiple browsers
-2. **Validate performance** using tools like Lighthouse
-3. **Check accessibility** compliance
-
-### Phase 4: Deployment
-1. **Analyze hosting options** based on user needs and budget
-2. **Set up deployment pipeline** using provided templates
-3. **Configure domain and SSL** if needed
-
-## TEMPLATE USAGE
-
-Use `get_fraim_file({ path: "templates/marketing/WEBSITE-TEMPLATE.md" })` to create:
-- `docs/marketing/websites/{project-name}-website-brief.md`
-
-## TOOLS & RESOURCES
-
-**FRAIM Scripts:**
-- `~/.fraim/scripts/create-website-structure.js` - Creates initial website structure with modern foundation
-
-**Script Usage:**
-```bash
-# Basic usage
-node ~/.fraim/scripts/create-website-structure.js project-name
-
-# With custom output directory
-node ~/.fraim/scripts/create-website-structure.js project-name /path/to/output
-
-# Example
-node ~/.fraim/scripts/create-website-structure.js awesome-saas-product
-```
-
-**Design Inspiration:**
-- Awwwards.com - Award-winning web design
-- Dribbble.com - Design inspiration
-- Behance.net - Creative portfolios
-- SiteInspire.com - Web design showcase
-
-**Development Tools:**
-- VS Code with Live Server extension
-- Chrome DevTools for debugging
-- Lighthouse for performance testing
-- WAVE for accessibility testing
-
-**Asset Resources:**
-- Unsplash.com - High-quality stock photos
-- Heroicons.com - Beautiful SVG icons
-- Google Fonts - Web typography
-- TinyPNG.com - Image compression
-
-**Performance Testing:**
-- PageSpeed Insights - Google's performance tool
-- GTmetrix - Detailed performance analysis
-- WebPageTest - Advanced performance testing
-- Pingdom - Website speed testing
-
-## SUCCESS METRICS
-
-**Technical Metrics:**
-- Page load speed < 3 seconds
-- Mobile-friendly score > 95%
-- Accessibility score > 90%
-- SEO score > 85%
-
-**Business Metrics:**
-- Conversion rate improvement
-- Time on site increase
-- Bounce rate reduction
-- Lead generation increase
-
-**User Experience Metrics:**
-- User satisfaction scores
-- Task completion rates
-- Navigation success rates
-- Mobile usability scores
-
-## OUTPUT
-- Modern, responsive website with dark/light mode
-- Competitive analysis and user research insights
-- Performance-optimized codebase
-- Automated deployment pipeline
-- Comprehensive hosting recommendations
-- Launch strategy and optimization roadmap
-- Complete documentation and handoff materials
-
-## INTEGRATION WITH OTHER WORKFLOWS
-
-This workflow can be combined with:
-- Content creation workflows for ongoing updates
-- SEO optimization workflows for search visibility
-- Analytics and conversion optimization workflows
-- Brand development workflows for visual consistency
-- Customer development workflows for user feedback integration