THE WORKSPACE
- Six surfaces. One workspace.
+ Eight surfaces. One workspace.
Everything your AI agents need to ship — without you explaining it again.
diff --git a/src/components/SkillsShowcase.tsx b/src/components/SkillsShowcase.tsx
new file mode 100644
index 0000000..c70fc0a
--- /dev/null
+++ b/src/components/SkillsShowcase.tsx
@@ -0,0 +1,156 @@
+import { motion } from 'framer-motion'
+import AnimatedSection from './AnimatedSection'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+ faChartKanban,
+ faStickyNote,
+ faGraduationCap,
+ faLightbulb,
+ faMagnifyingGlass,
+ faCodeBranch,
+ faServer,
+} from '@fortawesome/pro-regular-svg-icons'
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+
+/* ────────────────────────────────────────────
+ Skills showcase — shows how DevFlow exposes
+ structured slash-command skills to AI agents
+ via MCP, with a stylised mockup of the
+ agent setup panel.
+ ──────────────────────────────────────────── */
+
+const skills: { cmd: string; label: string; tools: number; icon: IconDefinition }[] = [
+ { cmd: '/devflow:tasks', label: 'Tasks', tools: 9, icon: faChartKanban },
+ { cmd: '/devflow:notes', label: 'Notes', tools: 6, icon: faStickyNote },
+ { cmd: '/devflow:learning', label: 'Learning', tools: 3, icon: faGraduationCap },
+ { cmd: '/devflow:ideas', label: 'Ideas', tools: 5, icon: faLightbulb },
+ { cmd: '/devflow:search', label: 'Search', tools: 1, icon: faMagnifyingGlass },
+ { cmd: '/devflow:git', label: 'Git', tools: 6, icon: faCodeBranch },
+ { cmd: '/devflow:context', label: 'Context', tools: 4, icon: faServer },
+]
+
+function SkillsMockup() {
+ return (
+
+ {/* Chrome */}
+
+
+
+ {/* Section label */}
+
+
+
+ {skills.reduce((a, s) => a + s.tools, 0)} tools
+
+
+
+ {/* Skill rows */}
+ {skills.map((skill, i) => (
+
+
+
+
+ {skill.cmd}
+ {skill.tools} tools
+
+ ))}
+
+ {/* Copy button */}
+
+
+
+ Copy full skill reference
+
+
+
+
+
+ )
+}
+
+export default function SkillsShowcase() {
+ return (
+
+
+
+
+ SKILLS
+
+
+ Your agents already know what to call
+
+
+ DevFlow packages every MCP tool into slash-command skills that agents discover
+ automatically. No prompt engineering. No manual config. Just capabilities, ready to use.
+
+
+
+
+ {/* Left: explanation */}
+
+
+
+
+ Zero-config agent setup
+
+
+ Skills group related tools under a single slash command. When an agent connects
+ via MCP, it sees /devflow:tasks and
+ instantly knows how to create cards, move them across columns, and add notes —
+ without you writing a single system prompt.
+
+
+
+
+
+ One copy, every agent
+
+
+ Claude Code, Codex, Gemini, Windsurf — each gets the same skill reference.
+ Copy the config once, paste it into your agent's setup, done. When DevFlow
+ adds new tools, every agent sees them automatically.
+
+
+
+
+
+ Not read-only — write access included
+
+
+ Agents don't just query your project. They create tasks, log decisions to
+ the Learning Center, promote ideas to notes, and move kanban cards — all
+ through the same skill interface.
+
+
+
+
+
+ {/* Right: stylised mockup */}
+
+
+
+
+
+ )
+}
diff --git a/src/components/StatsBar.tsx b/src/components/StatsBar.tsx
new file mode 100644
index 0000000..1988b62
--- /dev/null
+++ b/src/components/StatsBar.tsx
@@ -0,0 +1,80 @@
+import { motion, useInView } from 'framer-motion'
+import { useRef, useEffect, useState, useCallback } from 'react'
+import AnimatedSection from './AnimatedSection'
+
+function easeOutExpo(t: number): number {
+ return t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
+}
+
+function AnimatedCounter({ target, suffix = '' }: { target: number; suffix?: string }) {
+ const ref = useRef
(null)
+ const isInView = useInView(ref, { once: true, margin: '-60px' })
+ const [count, setCount] = useState(0)
+
+ const animate = useCallback(() => {
+ const duration = 1800
+ let start: number | null = null
+ function step(timestamp: number) {
+ if (!start) start = timestamp
+ const elapsed = timestamp - start
+ const progress = Math.min(elapsed / duration, 1)
+ setCount(Math.floor(easeOutExpo(progress) * target))
+ if (progress < 1) requestAnimationFrame(step)
+ }
+ requestAnimationFrame(step)
+ }, [target])
+
+ useEffect(() => {
+ if (isInView) animate()
+ }, [isInView, animate])
+
+ return {count}{suffix}
+}
+
+const stats = [
+ { value: 0, suffix: '', label: 'tokens injected by MCP server', animated: false, hero: true },
+ { value: 54, suffix: '', label: 'tools agents can call on demand', animated: true, hero: false },
+ { value: 5, label: 'auto-learning triggers', animated: false, hero: false },
+ { value: '4+', label: 'AI agents supported', animated: false, hero: false },
+]
+
+export default function StatsBar() {
+ return (
+
+
+
+ {stats.map((stat, i) => (
+
+ {stat.hero && (
+
+ )}
+
+ {stat.animated ? (
+
+ ) : (
+ <>{stat.value}
+ )}
+
{stat.label}
+
+ ))}
+
+
+
+
+ THE DIFFERENCE
+
+
+ Static injection burns tokens before your agent says hello
+
+
+ DevFlow’s MCP server injects zero upfront context. Agents fetch exactly what they need, when they need it.
+
+
+
+
+ {/* Static / Before */}
+
+
+
+ Static injection
+
+
+
+
+
Session start prompt
+
+ {staticLines.map((line, i) => (
+
+ ))}
+
+
3,000–8,000+ tokens
+
+
+
+
+
+ Slow first response
+
+
+
+ Context goes stale mid-session
+
+
+
+ Burns 4–8% of context window upfront
+
+
+
+
+ {/* MCP / After */}
+
+
+
+ MCP lazy load
+
+
+
+
+
Session start prompt
+
+
+
Nothing — agents call tools on demand
+
+
+
0 tokens injected
+
+
+
+
+
+ Instant first response
+
+
+
+ Live data on every tool call
+
+
+
+ Write access — agents create tasks, move cards
+
+
+
+
+
+ {/* Three-tier comparison table */}
+
+
+
+
+ | Approach |
+ Tokens |
+ What’s included |
+
+
+
+
+ | Before optimization |
+ 3,000–8,000+ |
+ All tasks, 10 LC entries, commits, metadata |
+
+
+ | Hard limits |
+ 800–1,500 |
+ Top 5 tasks, 3 LC entries, branch name |
+
+
+ | MCP on-demand |
+ 0 |
+ Nothing injected — 54 tools available on demand |
+
+
+
+
+
+ {/* Chrome */}
+
+
+
+ {/* Workflow sidebar */}
+
+ {[
+ { name: 'Auth rewrite', status: 'bg-[#28c840]', progress: '5/5' },
+ { name: 'MCP skills', status: 'bg-indigo', progress: '3/7' },
+ { name: 'Onboarding flow', status: 'bg-peach', progress: '0/4' },
+ ].map((wf, i) => (
+
+
+
+ {wf.name}
+
+
{wf.progress}
+
+ ))}
+
+
+ {/* Phase list */}
+
+ {/* Workflow header */}
+
+
+ {/* Phases */}
+ {[
+ { title: 'Add workflow database tables', status: 'complete' as const },
+ { title: 'Build GSD discussion engine', status: 'complete' as const },
+ { title: 'Implement phase generation', status: 'active' as const },
+ { title: 'Wire up kanban linking', status: 'pending' as const },
+ { title: 'Add drag-to-reorder phases', status: 'pending' as const },
+ ].map((phase, i) => (
+
+
+ {phase.status === 'complete' ? '✓' : i + 1}
+
+
+ {phase.title}
+
+ {phase.status === 'active' && (
+
+ IN PROGRESS
+
+ )}
+
+ ))}
+
+
+
+
+
+ WORKFLOWS
+
+
+ From vague goal to phased roadmap in minutes
+
+
+ Workflows turn "I want to build X" into structured phases — with AI surfacing
+ the questions you'd forget to ask until week two.
+
+
+
+
+ {/* Left: 4-step GSD flow */}
+
+ {steps.map((step, i) => (
+
+ {/* Step number + icon */}
+
+
+
+
+ {/* Connector line */}
+ {i < steps.length - 1 && (
+
+ )}
+
+
+ {step.label}
+
{step.title}
+
+
{step.detail}
+
+ ))}
+
+
+ {/* Right: stylised workflow mockup */}
+
+
+
+
+