Generated Full prompt for github page blog

GitHub Pages Static Website Improvement Project

Project Information

  • Tech Stack: Jekyll

  • Target Audience: General Audiences

🎯 Project Goal

Systematically improve my GitHub Pages static website using the contains-studio agents workflow: UX Research → UI Design → Frontend Development → Continuous Optimization

📋 PHASE 1: UX RESEARCH & ANALYSIS (Day 1-2)

1.1 Initial Site Analysis

Use the ux-researcher agent to analyze my current GitHub Pages site:

  • Map current site structure and navigation patterns

  • Identify user journey pain points and friction areas

  • Analyze mobile responsiveness and accessibility issues

  • Document current user flows with specific problem areas

  • Benchmark against modern static site best practices

Output: Comprehensive UX audit report with prioritized issues

1.2 Feedback Collection

Next, use the feedback-synthesizer agent to:

  • Analyze GitHub Issues for user complaints/suggestions

  • Check any analytics data for user behavior patterns

  • Review any email feedback or social media mentions

  • Identify top 5 recurring user pain points

  • Synthesize feedback into actionable insights

Connect this analysis with the ux-researcher findings.

1.3 Trend Research

Use the trend-researcher agent to:

  • Research current static site generator trends

  • Find modern GitHub Pages showcase examples

  • Identify viral features suitable for static sites

  • Analyze competitor sites in my niche

  • Suggest implementable improvements for 6-day sprint

Focus on trends that align with user needs identified earlier.

1.4 Sprint Planning

Use the sprint-prioritizer agent to:

  • Consolidate all findings from previous agents

  • Create prioritized improvement list using RICE scoring

  • Break down into 6-day sprint tasks

  • Define measurable success metrics

  • Allocate time for each improvement

Output: Day-by-day sprint plan with clear deliverables

🎨 PHASE 2: UI DESIGN SYSTEM (Day 3-4)

2.1 Design System Creation

Use the ui-designer agent to:

  • Create modern, responsive design system based on UX findings

  • Design these components:

    • Navigation (desktop/mobile)
    • Hero sections
    • Content cards/blocks
    • Forms and CTAs
    • Footer

  • Follow mobile-first approach

  • Ensure WCAG 2.1 AA compliance

  • Provide CSS/Tailwind specifications

Output: Complete component library with implementation notes

2.2 Brand Consistency

Use the brand-guardian agent to:

  • Review and refine ui-designer’s output

  • Define consistent color palette (CSS variables)

  • Establish typography scale

  • Create spacing and sizing system

  • Document all design tokens

  • Ensure cohesive visual language

Output: Brand style guide with code snippets

2.3 Visual Enhancement

Use the visual-storyteller agent to:

  • Design compelling homepage narrative flow

  • Create visual hierarchy for content

  • Plan scroll-triggered animations

  • Design infographics for data

  • Optimize for social sharing (OG images)

Work with the existing design system from ui-designer.

2.4 Delight Injection

After UI completion, use the whimsy-injector agent to:

  • Add micro-interactions to all interactive elements

  • Design creative 404 and error pages

  • Create loading animations

  • Add easter eggs for power users

  • Implement delightful hover states

Ensure all additions maintain performance budget.

💻 PHASE 3: FRONTEND IMPLEMENTATION (Day 5-6)

3.1 Rapid Prototyping

Use the rapid-prototyper agent to:

  • Set up Jekyll/Hugo/Gatsby project structure

  • Implement core layout and navigation

  • Create reusable components/includes

  • Add sample content

  • Deploy preview to GitHub Pages

Get live preview URL within 4 hours.

3.2 Production Development

Use the frontend-developer agent to:

  • Implement complete design system in production code

  • Ensure responsive behavior (test at 320px, 768px, 1200px)

  • Add these optimizations:

    • Lazy loading for images
    • Minified CSS/JS
    • Proper meta tags for SEO
    • Open Graph tags
    • PWA manifest (if applicable)

  • Create maintainable, documented code

Build upon rapid-prototyper’s foundation.

3.3 Performance Optimization

Use the performance-benchmarker agent to:

  • Run Lighthouse audit (target 90+ scores)

  • Analyze Core Web Vitals

  • Identify render-blocking resources

  • Check image optimization

  • Measure Time to Interactive

  • Test on slow 3G connection

Then have frontend-developer implement all recommended fixes.

3.4 Test Implementation

Use the test-writer-fixer agent to:

  • Write tests for critical user paths

  • Add visual regression tests

  • Create accessibility tests

  • Implement cross-browser tests

  • Set up GitHub Actions CI/CD

Ensure all tests pass before deployment.

🚀 PHASE 4: DEPLOYMENT & MONITORING

4.1 Infrastructure Setup

Use the infrastructure-maintainer agent to:

  • Configure GitHub Actions workflow:

    • Automatic deployment on main branch
    • Preview deployments for PRs
    • Rollback capabilities

  • Set up custom domain (if needed)

  • Configure caching headers

  • Implement security headers

  • Set up uptime monitoring

Ensure zero-downtime deployments.

4.2 Analytics & Experiments

Use the experiment-tracker agent to:

  • Set up Google Analytics 4

  • Implement event tracking for key actions

  • Create A/B test framework

  • Define success metrics:

    • Page views
    • Time on site
    • Bounce rate
    • Conversion goals

  • Plan first experiments

Then use analytics-reporter to create baseline report.

4.3 Launch Coordination

Use the project-shipper agent to:

  • Create launch checklist

  • Coordinate final testing

  • Prepare announcement content

  • Set up monitoring alerts

  • Document everything

  • Plan post-launch iterations

🔄 CONTINUOUS IMPROVEMENT WORKFLOW

Weekly Optimization Cycle

  1. analytics-reporter: Analyze performance data
  2. feedback-synthesizer: Collect user feedback
  3. performance-benchmarker: Check site health
  4. sprint-prioritizer: Plan improvements
  5. Repeat relevant phases above

Quick Fix Workflow

For urgent issues:

  1. test-writer-fixer: Identify and reproduce issue
  2. frontend-developer: Implement fix
  3. performance-benchmarker: Verify no regression
  4. infrastructure-maintainer: Deploy hotfix

📊 SUCCESS METRICS

Track these KPIs:

  • Lighthouse Score: 90+ (all categories)

  • Core Web Vitals: All green

  • Load Time: <3s on 3G

  • Bounce Rate: <40%

  • Mobile Traffic: Properly served

  • Accessibility: WCAG 2.1 AA compliant

  • SEO: First page for target keywords

🚨 SPECIAL INSTRUCTIONS

  1. Each agent should build upon previous agent’s work
  2. Show output after each agent completes their task
  3. Ask for approval before moving to next phase
  4. If any blocker found, suggest alternatives
  5. Maintain all work in the repository
  6. Document all decisions and rationale

🎯 FINAL DELIVERABLES

By end of 6-day sprint:

  • Redesigned, responsive GitHub Pages site

  • Performance score 90+

  • Automated deployment pipeline

  • Test suite with CI/CD

  • Analytics and monitoring setup

  • Documentation for maintenance

  • Roadmap for future improvements

Start with Phase 1 and progress systematically through each phase, ensuring smooth handoffs between agents.