diff --git a/README.md b/README.md index 03c599e..c73a465 100644 --- a/README.md +++ b/README.md @@ -302,7 +302,7 @@ Each agent is designed with: ## πŸ—ΊοΈ Roadmap - [ ] Interactive agent selector web tool -- [ ] Multi-agent workflow examples +- [x] Multi-agent workflow examples β€” see [`examples/`](examples/) - [ ] Video tutorials on agent design - [ ] Community agent marketplace - [ ] Agent "personality quiz" for project matching diff --git a/examples/workflow-landing-page.md b/examples/workflow-landing-page.md new file mode 100644 index 0000000..391b68c --- /dev/null +++ b/examples/workflow-landing-page.md @@ -0,0 +1,119 @@ +# Multi-Agent Workflow: Landing Page Sprint + +> Ship a conversion-optimized landing page in one day using 4 agents. + +## The Scenario + +You need a landing page for a new product launch. It needs to look great, convert visitors, and be live by end of day. + +## Agent Team + +| Agent | Role in this workflow | +|-------|---------------------| +| Content Creator | Write the copy | +| UI Designer | Design the layout and component specs | +| Frontend Developer | Build it | +| Growth Hacker | Optimize for conversion | + +## The Workflow + +### Morning: Copy + Design (parallel) + +**Step 1a β€” Activate Content Creator** + +``` +Activate Content Creator. + +Write landing page copy for "FlowSync" β€” an API integration platform +that connects any two SaaS tools in under 5 minutes. + +Target audience: developers and technical PMs at mid-size companies. +Tone: confident, concise, slightly playful. + +Sections needed: +1. Hero (headline + subheadline + CTA) +2. Problem statement (3 pain points) +3. How it works (3 steps) +4. Social proof (placeholder testimonial format) +5. Pricing (3 tiers: Free, Pro, Enterprise) +6. Final CTA + +Keep it scannable. No fluff. +``` + +**Step 1b β€” Activate UI Designer (in parallel)** + +``` +Activate UI Designer. + +Design specs for a SaaS landing page. Product: FlowSync (API integration platform). +Style: clean, modern, dark mode option. Think Linear or Vercel aesthetic. + +Deliver: +1. Layout wireframe (section order + spacing) +2. Color palette (primary, secondary, accent, background) +3. Typography (font pairing, heading sizes, body size) +4. Component specs: hero section, feature cards, pricing table, CTA buttons +5. Responsive breakpoints (mobile, tablet, desktop) +``` + +### Midday: Build + +**Step 2 β€” Activate Frontend Developer** + +``` +Activate Frontend Developer. + +Build a landing page from these specs: + +Copy: [paste Content Creator output] +Design: [paste UI Designer output] + +Stack: HTML, Tailwind CSS, minimal vanilla JS (no framework needed). +Requirements: +- Responsive (mobile-first) +- Fast (no heavy assets, system fonts OK) +- Accessible (proper headings, alt text, focus states) +- Include a working email signup form (action URL: /api/subscribe) + +Deliver a single index.html file ready to deploy. +``` + +### Afternoon: Optimize + +**Step 3 β€” Activate Growth Hacker** + +``` +Activate Growth Hacker. + +Review this landing page for conversion optimization: + +[paste the HTML or describe the current page] + +Evaluate: +1. Is the CTA above the fold? +2. Is the value proposition clear in under 5 seconds? +3. Any friction in the signup flow? +4. What A/B tests would you run first? +5. SEO basics: meta tags, OG tags, structured data + +Give me specific changes, not general advice. +``` + +## Timeline + +| Time | Activity | Agent | +|------|----------|-------| +| 9:00 | Copy + design kick off (parallel) | Content Creator + UI Designer | +| 11:00 | Build starts | Frontend Developer | +| 14:00 | First version ready | β€” | +| 14:30 | Conversion review | Growth Hacker | +| 15:30 | Apply feedback | Frontend Developer | +| 16:30 | Ship | Deploy to Vercel/Netlify | + +## Key Patterns + +1. **Parallel kickoff**: Copy and design happen at the same time since they're independent +2. **Merge point**: Frontend Developer needs both outputs before starting +3. **Feedback loop**: Growth Hacker reviews, then Frontend Developer applies changes +4. **Time-boxed**: Each step has a clear timebox to prevent scope creep diff --git a/examples/workflow-startup-mvp.md b/examples/workflow-startup-mvp.md new file mode 100644 index 0000000..13af008 --- /dev/null +++ b/examples/workflow-startup-mvp.md @@ -0,0 +1,155 @@ +# Multi-Agent Workflow: Startup MVP + +> A step-by-step example of how to coordinate multiple agents to go from idea to shipped MVP. + +## The Scenario + +You're building a SaaS MVP β€” a team retrospective tool for remote teams. You have 4 weeks to ship a working product with user signups, a core feature, and a landing page. + +## Agent Team + +| Agent | Role in this workflow | +|-------|---------------------| +| Sprint Prioritizer | Break the project into weekly sprints | +| UX Researcher | Validate the idea with quick user interviews | +| Backend Architect | Design the API and data model | +| Frontend Developer | Build the React app | +| Rapid Prototyper | Get the first version running fast | +| Growth Hacker | Plan launch strategy while building | +| Reality Checker | Gate each milestone before moving on | + +## The Workflow + +### Week 1: Discovery + Architecture + +**Step 1 β€” Activate Sprint Prioritizer** + +``` +Activate Sprint Prioritizer. + +Project: RetroBoard β€” a real-time team retrospective tool for remote teams. +Timeline: 4 weeks to MVP launch. +Core features: user auth, create retro boards, add cards, vote, action items. +Constraints: solo developer, React + Node.js stack, deploy to Vercel + Railway. + +Break this into 4 weekly sprints with clear deliverables and acceptance criteria. +``` + +**Step 2 β€” Activate UX Researcher (in parallel)** + +``` +Activate UX Researcher. + +I'm building a team retrospective tool for remote teams (5-20 people). +Competitors: EasyRetro, Retrium, Parabol. + +Run a quick competitive analysis and identify: +1. What features are table stakes +2. Where competitors fall short +3. One differentiator we could own + +Output a 1-page research brief. +``` + +**Step 3 β€” Hand off to Backend Architect** + +``` +Activate Backend Architect. + +Here's our sprint plan: [paste Sprint Prioritizer output] +Here's our research brief: [paste UX Researcher output] + +Design the API and database schema for RetroBoard. +Stack: Node.js, Express, PostgreSQL, Socket.io for real-time. + +Deliver: +1. Database schema (SQL) +2. REST API endpoints list +3. WebSocket events for real-time board updates +4. Auth strategy recommendation +``` + +### Week 2: Build Core Features + +**Step 4 β€” Activate Frontend Developer + Rapid Prototyper** + +``` +Activate Frontend Developer. + +Here's the API spec: [paste Backend Architect output] + +Build the RetroBoard React app: +- Stack: React, TypeScript, Tailwind, Socket.io-client +- Pages: Login, Dashboard, Board view +- Components: RetroCard, VoteButton, ActionItem, BoardColumn + +Start with the Board view β€” it's the core experience. +Focus on real-time: when one user adds a card, everyone sees it. +``` + +**Step 5 β€” Reality Check at midpoint** + +``` +Activate Reality Checker. + +We're at week 2 of a 4-week MVP build for RetroBoard. + +Here's what we have so far: +- Database schema: [paste] +- API endpoints: [paste] +- Frontend components: [paste] + +Evaluate: +1. Can we realistically ship in 2 more weeks? +2. What should we cut to make the deadline? +3. Any technical debt that will bite us at launch? +``` + +### Week 3: Polish + Landing Page + +**Step 6 β€” Frontend Developer continues, Growth Hacker starts** + +``` +Activate Growth Hacker. + +Product: RetroBoard β€” team retrospective tool, launching in 1 week. +Target: Engineering managers and scrum masters at remote-first companies. +Budget: $0 (organic launch only). + +Create a launch plan: +1. Landing page copy (hero, features, CTA) +2. Launch channels (Product Hunt, Reddit, Hacker News, Twitter) +3. Day-by-day launch sequence +4. Metrics to track in week 1 +``` + +### Week 4: Launch + +**Step 7 β€” Final Reality Check** + +``` +Activate Reality Checker. + +RetroBoard is ready to launch. Evaluate production readiness: + +- Live URL: [url] +- Test accounts created: yes +- Error monitoring: Sentry configured +- Database backups: daily automated + +Run through the launch checklist and give a GO / NO-GO decision. +Require evidence for each criterion. +``` + +## Key Patterns + +1. **Sequential handoffs**: Each agent's output becomes the next agent's input +2. **Parallel work**: UX Researcher and Sprint Prioritizer can run simultaneously in Week 1 +3. **Quality gates**: Reality Checker at midpoint and before launch prevents shipping broken code +4. **Context passing**: Always paste previous agent outputs into the next prompt β€” agents don't share memory + +## Tips + +- Copy-paste agent outputs between steps β€” don't summarize, use the full output +- If a Reality Checker flags an issue, loop back to the relevant specialist to fix it +- Keep the Orchestrator agent in mind for automating this flow once you're comfortable with the manual version