diff --git a/web/app/chief/chief.module.css b/web/app/chief/chief.module.css
deleted file mode 100644
index f755055..0000000
--- a/web/app/chief/chief.module.css
+++ /dev/null
@@ -1,221 +0,0 @@
-.page {
- --chief-bg: #08111a;
- --chief-surface: #0f1b29;
- --chief-surface-strong: #13283b;
- --chief-line: rgba(116, 184, 226, 0.18);
- --chief-line-strong: rgba(116, 184, 226, 0.36);
- --chief-text: #edf4fb;
- --chief-muted: #a8b8c8;
- --chief-faint: #77879a;
- --chief-accent: #74b8e2;
- min-height: 100vh;
- overflow-x: clip;
- background: var(--chief-bg);
- color: var(--chief-text);
-}
-
-.hero {
- min-height: min(700px, calc(100dvh - 72px));
- display: flex;
- align-items: center;
- padding: 88px 40px 64px;
- background:
- radial-gradient(circle at 78% 25%, rgba(116, 184, 226, 0.13), transparent 34rem),
- linear-gradient(180deg, #10283b 0%, var(--chief-bg) 100%);
- border-bottom: 1px solid var(--chief-line);
-}
-
-.heroInner {
- width: 100%;
- max-width: 1180px;
- margin: 0 auto;
-}
-
-.heroCopy { max-width: 920px; }
-
-.hero h1,
-.problemInner h2,
-.sectionIntro h2,
-.responsibilityIntro h2,
-.infrastructureCopy h2,
-.evolutionInner h2,
-.ctaInner h2 {
- margin: 0;
- font-family: var(--font-heading), sans-serif;
- font-weight: 520;
- letter-spacing: -0.055em;
- line-height: 1.02;
-}
-
-.hero h1 {
- max-width: 16ch;
- font-size: clamp(3.5rem, 6.2vw, 6.5rem);
-}
-
-.heroLead {
- max-width: 54ch;
- margin: 26px 0 0;
- color: var(--chief-muted);
- font-size: clamp(1.02rem, 1.2vw, 1.16rem);
- line-height: 1.65;
-}
-
-.heroActions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
-
-.pilotButton,
-.pilotButtonCompact,
-.secondaryButton {
- min-height: 48px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: 9px;
- padding: 12px 24px;
- border: 1.5px solid #234969;
- border-radius: 999px;
- background: #2d6a9c;
- color: #fff;
- font-size: 0.91rem;
- font-weight: 650;
- line-height: 1;
- text-decoration: none;
- white-space: nowrap;
- transition: transform 180ms var(--ease-out-quint), background 180ms ease, border-color 180ms ease;
-}
-
-.pilotButtonCompact { min-height: 38px; padding: 9px 17px; background: #edf7fd; border-color: #d8ebf8; color: #0b2233; }
-.secondaryButton { background: transparent; border-color: var(--chief-line-strong); color: var(--chief-text); }
-.pilotButton svg, .pilotButtonCompact svg, .secondaryButton svg { width: 16px; height: 16px; stroke-width: 1.8; }
-.pilotButton:hover { background: #4a90c2; }
-.secondaryButton:hover { border-color: var(--chief-accent); color: var(--chief-accent); }
-.pilotButton:hover, .pilotButtonCompact:hover, .secondaryButton:hover { transform: translateY(-1px); }
-.pilotButton:active, .pilotButtonCompact:active, .secondaryButton:active { transform: scale(0.97); }
-.pilotButton:focus-visible, .pilotButtonCompact:focus-visible, .secondaryButton:focus-visible { outline: 3px solid var(--chief-accent); outline-offset: 4px; }
-
-.problemSection { padding: 118px 40px; background: #0b1723; border-bottom: 1px solid var(--chief-line); }
-.problemInner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 96px; align-items: end; }
-.problemInner h2, .sectionIntro h2, .responsibilityIntro h2, .infrastructureCopy h2, .evolutionInner h2, .ctaInner h2 { font-size: clamp(2.35rem, 4.2vw, 4.5rem); }
-.problemCopy { padding-left: 28px; border-left: 1px solid var(--chief-line-strong); }
-.problemCopy p, .sectionIntro p, .responsibilityIntro p, .infrastructureCopy p, .evolutionInner p, .ctaInner > p { color: var(--chief-muted); line-height: 1.7; }
-.problemCopy p { margin: 0; }
-.problemCopy p + p { margin-top: 20px; color: var(--chief-text); }
-
-.workflowSection { max-width: 1280px; margin: 0 auto; padding: 128px 40px 140px; }
-.sectionIntro { max-width: 760px; }
-.sectionIntro p { max-width: 61ch; margin: 24px 0 0; }
-.workflowTrack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 76px; }
-.workflowItem { position: relative; padding: 0 32px 0 0; }
-.workflowItem:not(:last-child) { border-right: 1px solid var(--chief-line); margin-right: 32px; }
-.workflowRail { height: 2px; margin-bottom: 30px; background: var(--chief-line); }
-.workflowRail span { display: block; width: 38%; height: 100%; background: var(--chief-accent); }
-.workflowIcon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--chief-line-strong); border-radius: 12px; background: var(--chief-surface); color: var(--chief-accent); }
-.workflowIcon svg { width: 20px; height: 20px; stroke-width: 1.7; }
-.workflowDetail { margin: 24px 0 0; color: var(--chief-accent) !important; font: 0.7rem/1.2 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .07em; }
-.workflowItem h3 { margin: 12px 0 0; font-size: 1.16rem; letter-spacing: -.025em; }
-.workflowItem > p:last-child { margin: 13px 0 0; color: var(--chief-muted); font-size: .92rem; line-height: 1.65; }
-
-.responsibilitySection { padding: 128px 40px; background: #10283b; border-block: 1px solid var(--chief-line); }
-.responsibilitySection > * { max-width: 1160px; margin-inline: auto; }
-.responsibilityIntro { max-width: 770px; }
-.responsibilityIntro p { max-width: 66ch; margin: 22px 0 0; }
-.responsibilityIntro p + p { margin-top: 10px; color: var(--chief-text); }
-.responsibilityDiagram { margin-top: 68px; display: grid; grid-template-columns: 1fr 50px 1fr; gap: 22px; align-items: center; }
-.beforeDiagram, .afterDiagram { min-height: 390px; padding: 28px; border: 1px solid var(--chief-line); border-radius: 16px; background: #0b1b29; }
-.beforeDiagram h3, .afterDiagram h3 { margin: 0; color: var(--chief-muted); font: .72rem/1.2 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .08em; }
-.beforeDiagram > p, .afterDiagram > p { margin: 20px 0 0; color: var(--chief-muted); font-size: .86rem; text-align: center; }
-.manualMap { position: relative; width: 260px; height: 245px; margin: 22px auto 0; }
-.personNode, .manualNode, .managedChief, .returnNode { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--chief-line-strong); border-radius: 12px; background: var(--chief-surface-strong); font: .7rem/1.2 var(--font-geist-mono), monospace; }
-.personNode { padding: 12px 14px; color: var(--chief-text); }
-.personNode svg, .returnNode svg { width: 15px; height: 15px; color: var(--chief-accent); }
-.manualMap .personNode { position: absolute; left: 82px; top: 96px; z-index: 2; }
-.manualNode { position: absolute; width: 68px; height: 42px; color: var(--chief-muted); }
-.manualNode::after { content: ''; position: absolute; width: 66px; height: 1px; background: var(--chief-line-strong); transform-origin: left; }
-.manualNode:nth-child(2) { left: 0; top: 16px; } .manualNode:nth-child(2)::after { left: 58px; top: 35px; transform: rotate(35deg); }
-.manualNode:nth-child(3) { right: 0; top: 16px; } .manualNode:nth-child(3)::after { right: 58px; top: 35px; transform: rotate(-35deg); transform-origin: right; }
-.manualNode:nth-child(4) { left: 0; bottom: 10px; } .manualNode:nth-child(4)::after { left: 58px; bottom: 35px; transform: rotate(-35deg); }
-.manualNode:nth-child(5) { right: 0; bottom: 10px; } .manualNode:nth-child(5)::after { right: 58px; bottom: 35px; transform: rotate(35deg); transform-origin: right; }
-.manualNode:nth-child(6) { left: 96px; top: 0; } .manualNode:nth-child(6)::after { left: 34px; top: 42px; transform: rotate(90deg); }
-.manualNode:nth-child(7) { left: 96px; bottom: 0; } .manualNode:nth-child(7)::after { left: 34px; bottom: 42px; transform: rotate(-90deg); }
-.compareArrow { width: 24px; margin: auto; color: var(--chief-accent); }
-.managedMap { min-height: 245px; margin-top: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; }
-.managedMap > svg { width: 18px; color: var(--chief-faint); }
-.managedChief { padding: 13px 28px; border-color: var(--chief-accent); background: #12334b; color: var(--chief-text); font-size: .85rem; }
-.managedTeams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
-.managedTeams span { padding: 9px 13px; border: 1px solid var(--chief-line); border-radius: 10px; color: var(--chief-muted); font: .65rem/1 var(--font-geist-mono), monospace; }
-.returnNode { padding: 10px 15px; color: var(--chief-accent); }
-
-.infrastructureSection { padding: 136px 40px; }
-.infrastructureInner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .82fr 1.18fr; gap: 100px; align-items: center; }
-.infrastructureCopy p { max-width: 55ch; margin: 24px 0 0; }
-.infrastructureCopy p + p { margin-top: 14px; color: var(--chief-text); }
-.layerDiagram { display: grid; gap: 10px; }
-.chiefLayer, .relayLayer { padding: 28px; border: 1px solid var(--chief-line-strong); border-radius: 16px; }
-.chiefLayer { width: 82%; margin: 0 auto; background: #15344a; }
-.relayLayer { background: var(--chief-surface); }
-.chiefLayer > span, .relayLayer > span { color: var(--chief-accent); font: .68rem/1.2 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .08em; }
-.chiefLayer strong, .relayLayer strong { display: block; margin-top: 10px; font: 520 1.5rem/1.1 var(--font-heading), sans-serif; }
-.chiefLayer p { margin: 13px 0 0; color: var(--chief-muted); font-size: .84rem; line-height: 1.55; }
-.capabilityGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 22px; }
-.capabilityGrid span { display: flex; align-items: center; gap: 8px; color: var(--chief-muted); font-size: .78rem; }
-.capabilityGrid svg { width: 15px; height: 15px; color: var(--chief-accent); stroke-width: 1.7; }
-
-.evolutionSection { padding: 94px 40px; background: #0c1c2a; border-block: 1px solid var(--chief-line); }
-.evolutionInner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 90px 1fr; gap: 40px; align-items: start; }
-.evolutionInner > svg { width: 70px; height: 70px; padding: 18px; border: 1px solid var(--chief-line-strong); border-radius: 16px; color: var(--chief-accent); }
-.evolutionInner h2 { font-size: clamp(2.2rem, 3.8vw, 4rem); }
-.evolutionInner p { max-width: 65ch; margin: 22px 0 0; }
-.evolutionInner p + p { margin-top: 12px; color: var(--chief-text); font-weight: 600; }
-
-.ctaSection { padding: 140px 40px; text-align: center; background: radial-gradient(circle at 50% 25%, rgba(116, 184, 226, .13), transparent 32rem); }
-.ctaInner { max-width: 820px; margin: 0 auto; }
-.ctaInner > p { margin: 24px auto 0; font-size: 1.08rem; }
-.ctaInner .pilotButton { margin-top: 34px; }
-.ctaInner > span { display: block; margin-top: 18px; color: var(--chief-faint); font-size: .83rem; }
-
-@media (max-width: 1120px) {
- .hero { padding-top: 72px; }
- .heroCopy { max-width: 860px; }
- .workflowTrack { grid-template-columns: repeat(2, 1fr); gap: 52px 0; }
- .workflowItem:nth-child(2) { border-right: 0; margin-right: 0; }
- .infrastructureInner { gap: 60px; }
-}
-
-@media (max-width: 760px) {
- .hero, .problemSection, .workflowSection, .responsibilitySection, .infrastructureSection, .evolutionSection, .ctaSection { padding-left: 20px; padding-right: 20px; }
- .hero { min-height: auto; padding-top: 76px; padding-bottom: 52px; }
- .hero h1 { max-width: 12ch; font-size: clamp(3rem, 15vw, 4.3rem); }
- .heroLead { font-size: 1rem; }
- .problemSection { padding-top: 88px; padding-bottom: 88px; }
- .problemInner { grid-template-columns: 1fr; gap: 38px; }
- .problemCopy { padding-left: 20px; }
- .workflowSection { padding-top: 96px; padding-bottom: 104px; }
- .workflowTrack { grid-template-columns: 1fr; gap: 0; margin-top: 54px; }
- .workflowItem, .workflowItem:not(:last-child), .workflowItem:nth-child(2) { margin: 0; padding: 0 0 44px; border-right: 0; }
- .workflowItem:last-child { padding-bottom: 0; }
- .workflowRail { width: 48%; }
- .responsibilitySection { padding-top: 96px; padding-bottom: 96px; }
- .responsibilityDiagram { grid-template-columns: 1fr; margin-top: 48px; }
- .compareArrow { transform: rotate(90deg); }
- .beforeDiagram, .afterDiagram { min-height: 370px; padding: 22px; }
- .infrastructureSection { padding-top: 102px; padding-bottom: 102px; }
- .infrastructureInner { grid-template-columns: 1fr; gap: 52px; }
- .chiefLayer { width: 88%; }
- .evolutionSection { padding-top: 78px; padding-bottom: 78px; }
- .evolutionInner { grid-template-columns: 1fr; gap: 26px; }
- .evolutionInner > svg { width: 58px; height: 58px; padding: 15px; }
- .ctaSection { padding-top: 104px; padding-bottom: 104px; }
-}
-
-@media (max-width: 440px) {
- .hero h1 { max-width: 10ch; }
- .heroActions { align-items: stretch; flex-direction: column; }
- .pilotButton, .secondaryButton { width: 100%; }
- .problemInner h2, .sectionIntro h2, .responsibilityIntro h2, .infrastructureCopy h2, .evolutionInner h2, .ctaInner h2 { font-size: 2.35rem; }
- .manualMap { transform: scale(.92); transform-origin: center; margin-inline: -2px; }
- .capabilityGrid { grid-template-columns: 1fr; }
-}
-
-@media (prefers-reduced-motion: reduce) {
- .pilotButton, .pilotButtonCompact, .secondaryButton { transition: none; }
- .pilotButton:hover, .pilotButtonCompact:hover, .secondaryButton:hover, .pilotButton:active, .pilotButtonCompact:active, .secondaryButton:active { transform: none; }
-}
diff --git a/web/app/chief/page.tsx b/web/app/chief/page.tsx
deleted file mode 100644
index ee1d793..0000000
--- a/web/app/chief/page.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import type { Metadata } from 'next';
-import Link from 'next/link';
-import {
- ArrowDown,
- ArrowRight,
- Bot,
- FileCode2,
- Files,
- GitBranch,
- GitPullRequest,
- KeyRound,
- ListTodo,
- MessagesSquare,
- ShieldCheck,
- UserRound,
- Workflow,
-} from 'lucide-react';
-
-import { FadeIn } from '../../components/FadeIn';
-import { SiteFooter } from '../../components/SiteFooter';
-import { SiteNav } from '../../components/SiteNav';
-import { ogImage } from '../../lib/og-meta';
-import { absoluteUrl } from '../../lib/site';
-import s from './chief.module.css';
-
-const pilotHref = 'https://agentrelay.com/will';
-const description =
- 'Chief manages coding-agent teams across your Linear or GitHub backlog and returns pull requests ready for review.';
-const ogPath = '/chief/og.png';
-
-export const metadata: Metadata = {
- title: { absolute: 'Chief by Agent Relay | Run your engineering backlog with agent teams' },
- description,
- alternates: { canonical: absoluteUrl('/chief') },
- robots: { index: true, follow: true },
- openGraph: {
- title: 'Chief by Agent Relay | The Agent Software Manager',
- description,
- url: absoluteUrl('/chief'),
- type: 'website',
- images: [ogImage(ogPath, 'Chief coordinates coding-agent teams across an engineering backlog')],
- },
- twitter: {
- card: 'summary_large_image',
- title: 'Chief by Agent Relay | The Agent Software Manager',
- description,
- images: [absoluteUrl(ogPath)],
- },
-};
-
-const workflow = [
- {
- icon: ListTodo,
- title: 'Import the work',
- body: 'Chief takes issues from Linear or GitHub and determines what can run in parallel.',
- detail: 'Backlog in',
- },
- {
- icon: Bot,
- title: 'Start the right team',
- body: 'For each issue, Chief assembles and directs the coding agents needed to implement and review it.',
- detail: 'Teams assigned',
- },
- {
- icon: Workflow,
- title: 'Keep the work moving',
- body: 'Chief passes context, monitors progress, handles handoffs, and escalates decisions that need human judgment.',
- detail: 'Work managed',
- },
- {
- icon: GitPullRequest,
- title: 'Review the result',
- body: 'You receive pull requests ready for review instead of a collection of unfinished agent sessions.',
- detail: 'PRs returned',
- },
-];
-
-const relayCapabilities = [
- { icon: MessagesSquare, label: 'Real-time messaging' },
- { icon: Files, label: 'Shared context and files' },
- { icon: ShieldCheck, label: 'Scoped permissions' },
- { icon: KeyRound, label: 'Authentication' },
- { icon: GitBranch, label: 'Workflow state' },
-];
-
-function PilotButton({ compact = false }: { compact?: boolean }) {
- return (
-
- Request a pilot
-
-
- );
-}
-
-function ResponsibilityDiagram() {
- return (
-
-
-
Before Chief
-
- Engineer
- Agent
- Agent
- Agent
- Task
- Review
- Context
-
-
Every handoff runs through you.
-
-
-
-
-
-
With Chief
-
-
Engineer
-
-
Chief
-
- Team
- Team
- Team
-
-
Pull requests
-
-
You set direction and review the result.
-
-
- );
-}
-
-export default function ChiefPage() {
- const navAction = ;
-
- return (
-
-
-
-
-
-
-
-
The Agent Software Manager
-
Let an agent manage the coordination of your agents. Step in when you need to.
-
-
-
- See how Chief works
-
-
-
-
-
-
-
-
-
- Coding agents created a new management job.
-
-
You can run eight coding agents at once. But then you spend the day starting them, passing context, checking progress, recovering failures, and deciding what happens next.
-
The agents may be writing the code, but you are still managing every handoff.
-
-
-
-
-
-
-
- Give Chief the backlog.
- Chief turns a queue of issues into coordinated work that comes back in a form engineers already know how to review.
-
-
-
-
- {workflow.map((item, index) => {
- const Icon = item.icon;
- return (
-
-
-
-
-
- {item.detail}
- {item.title}
- {item.body}
-
- );
- })}
-
-
-
-
-
- You review the work. Chief manages the work.
- Chief does not remove engineering judgment. It removes engineers from the coordination loop.
- You set priorities, permissions, and approval boundaries. Chief manages the agents. You review the pull requests and make the decisions that matter.
-
-
-
-
-
-
-
-
-
- Relay underneath. Chief on top.
- Agent Relay provides the durable communication layer beneath Chief across models, harnesses, and environments.
- Chief uses that infrastructure to coordinate long-running software work without requiring a human to relay every message.
-
-
-
-
-
Management layer
-
Chief
-
Backlog planning, team direction, progress, handoffs, escalation
-
-
-
Communication layer
-
Agent Relay
-
- {relayCapabilities.map((capability) => {
- const Icon = capability.icon;
- return {capability.label} ;
- })}
-
-
-
-
-
-
-
-
-
-
-
Communication was only the first layer.
-
We built Agent Relay so agents could communicate directly. Users built teams of coding agents to complete and review software tasks, but still had to supervise those teams themselves.
-
Chief is the manager those agent teams were missing.
-
-
-
-
-
-
- Stop managing every agent.
- Run more of your engineering backlog without becoming the bottleneck.
-
- We are onboarding a small number of engineering teams as design partners.
-
-
-
-
-
-
- );
-}
diff --git a/web/app/sitemap.ts b/web/app/sitemap.ts
index e2c7bad..b7fae62 100644
--- a/web/app/sitemap.ts
+++ b/web/app/sitemap.ts
@@ -74,7 +74,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
priority: 0.8,
},
{
- url: absoluteUrl('/chief'),
+ url: absoluteUrl('/skip'),
lastModified: now,
changeFrequency: 'weekly',
priority: 0.9,
diff --git a/web/app/chief/og.png/route.tsx b/web/app/skip/og.png/route.tsx
similarity index 72%
rename from web/app/chief/og.png/route.tsx
rename to web/app/skip/og.png/route.tsx
index 8f83632..ee8d470 100644
--- a/web/app/chief/og.png/route.tsx
+++ b/web/app/skip/og.png/route.tsx
@@ -11,10 +11,10 @@ export async function GET() {
return new ImageResponse(
,
{
...OG_SIZE,
diff --git a/web/app/skip/page.tsx b/web/app/skip/page.tsx
new file mode 100644
index 0000000..e453fec
--- /dev/null
+++ b/web/app/skip/page.tsx
@@ -0,0 +1,431 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import {
+ ArrowDown,
+ ArrowRight,
+ Bot,
+ FileCode2,
+ Files,
+ GitBranch,
+ GitPullRequest,
+ KeyRound,
+ ListTodo,
+ MessagesSquare,
+ ShieldCheck,
+ UserRound,
+ Workflow,
+} from 'lucide-react';
+
+import { FadeIn } from '../../components/FadeIn';
+import { SiteFooter } from '../../components/SiteFooter';
+import { LogoIcon, SiteNav } from '../../components/SiteNav';
+import { ogImage } from '../../lib/og-meta';
+import { absoluteUrl } from '../../lib/site';
+import s from './skip.module.css';
+
+const pilotHref = 'https://agentrelay.com/will';
+const description =
+ 'Skip is the single agent you talk to. It manages coding-agent teams across your Linear or GitHub backlog and returns pull requests ready for review.';
+const ogPath = '/skip/og.png';
+
+export const metadata: Metadata = {
+ title: { absolute: 'Skip by Agent Relay | Run your engineering backlog with agent teams' },
+ description,
+ alternates: { canonical: absoluteUrl('/skip') },
+ robots: { index: true, follow: true },
+ openGraph: {
+ title: 'Skip by Agent Relay | The Agent Software Manager',
+ description,
+ url: absoluteUrl('/skip'),
+ type: 'website',
+ images: [ogImage(ogPath, 'Skip coordinates coding-agent teams across an engineering backlog')],
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: 'Skip by Agent Relay | The Agent Software Manager',
+ description,
+ images: [absoluteUrl(ogPath)],
+ },
+};
+
+const workflow = [
+ {
+ icon: ListTodo,
+ title: 'Import the work',
+ body: 'Skip takes issues from Linear or GitHub and determines what can run in parallel.',
+ detail: 'Backlog in',
+ },
+ {
+ icon: Bot,
+ title: 'Start the right team',
+ body: 'For each issue, Skip assembles and directs the coding agents needed to implement and review it.',
+ detail: 'Teams assigned',
+ },
+ {
+ icon: Workflow,
+ title: 'Keep the work moving',
+ body: 'Skip passes context, monitors progress, handles handoffs, and escalates decisions that need human judgment.',
+ detail: 'Work managed',
+ },
+ {
+ icon: GitPullRequest,
+ title: 'Review the result',
+ body: 'You receive pull requests ready for review instead of a collection of unfinished agent sessions.',
+ detail: 'PRs returned',
+ },
+];
+
+const relayCapabilities = [
+ { icon: MessagesSquare, label: 'Real-time messaging' },
+ { icon: Files, label: 'Shared context and files' },
+ { icon: ShieldCheck, label: 'Scoped permissions' },
+ { icon: KeyRound, label: 'Authentication' },
+ { icon: GitBranch, label: 'Workflow state' },
+];
+
+function PilotButton({ compact = false }: { compact?: boolean }) {
+ return (
+
+ Request a pilot
+
+
+ );
+}
+
+function AgentRelayGlyph() {
+ return (
+
+
+
+
+ );
+}
+
+function SkipMark({ size = 18 }: { size?: number }) {
+ return (
+
+
+
+ );
+}
+
+function HeroMock() {
+ return (
+
+
+
+
+
+
+
+
+
+ Agent Relay
+
+
+
+
+
+
Search
+
Pinned
+
+
+
+ Skip
+ Latest: eng-341 status u… · 12:04
+
+
+
+
+
+
+
+
+ Skip
+
+ Active
+
+
+
+
+
+
+
+ Skip connectivity check. Please reply with a short acknowledgement.
+
+ 10:35
+
+
+
+ Acknowledged — Skip is online and responsive, workspace rw_7ccfea89.
+
+ 10:36
+
+
+ what's the status on ENG-341?
+ 10:50
+
+
+
+ ENG-341 status: in progress. Team of 2 assigned — builder on the branch, reviewer running the
+ suite. I'll report back once it's green.
+
+ 10:51
+
+
+ ship it once tests pass
+ 10:57
+
+
+
+ Confirmed — tests passed. PR #128 opened for review, linked back to ENG-341.
+
+ 10:58
+
+
+
+
+
+ );
+}
+
+function ResponsibilityDiagram() {
+ return (
+
+
+
Before Skip
+
+
+
+ Engineer
+
+ Agent
+ Agent
+ Agent
+ Task
+ Review
+ Context
+
+
Every handoff runs through you.
+
+
+
+
+
+
With Skip
+
+
+
+ Engineer
+
+
+
+
+ Skip
+
+
+ Team
+ Team
+ Team
+
+
+
+ Pull requests
+
+
+
You set direction and review the result.
+
+
+ );
+}
+
+export default function SkipPage() {
+ const navAction = ;
+ const structuredData = {
+ '@context': 'https://schema.org',
+ '@type': 'SoftwareApplication',
+ name: 'Skip',
+ applicationCategory: 'DeveloperApplication',
+ description,
+ url: absoluteUrl('/skip'),
+ operatingSystem: 'Web',
+ provider: {
+ '@type': 'Organization',
+ name: 'Agent Relay',
+ url: absoluteUrl('/'),
+ },
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
The Agent Software Manager
+
One agent you talk to. A whole team it runs.
+
+ Skip is a single point of contact — you chat with one agent, and it assembles, directs, and manages
+ the coding-agent team that actually does the work. Step in when you need to.
+
+
+
+
+ See how Skip works
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Single point of contact
+ Manages full agent teams
+ Linear & GitHub ready
+ Step in anytime
+
+
+
+
+
+ Coding agents created a new management job.
+
+
+ You can run eight coding agents at once. But then you spend the day starting them, passing
+ context, checking progress, recovering failures, and deciding what happens next.
+
+
The agents may be writing the code, but you are still managing every handoff.
+
+
+
+
+
+
+
+ Give Skip the backlog.
+
+ Skip turns a queue of issues into coordinated work that comes back in a form engineers already
+ know how to review.
+
+
+
+
+
+ {workflow.map((item, index) => {
+ const Icon = item.icon;
+ return (
+
+
+
+
+
+
+
+ {item.detail}
+ {item.title}
+ {item.body}
+
+ );
+ })}
+
+
+
+
+
+ You review the work. Skip manages the work.
+ Skip does not remove engineering judgment. It removes engineers from the coordination loop.
+
+ You set priorities, permissions, and approval boundaries. Skip manages the agents. You review the
+ pull requests and make the decisions that matter.
+
+
+
+
+
+
+
+
+
+
+ Relay underneath. Skip on top.
+ Agent Relay provides the durable communication layer beneath Skip across models, harnesses, and environments.
+
+ Skip uses that infrastructure to coordinate long-running software work without requiring a human
+ to relay every message.
+
+
+
+
+
+
Management layer
+
Skip
+
Backlog planning, team direction, progress, handoffs, escalation
+
+
+
Communication layer
+
Agent Relay
+
+ {relayCapabilities.map((capability) => {
+ const Icon = capability.icon;
+ return (
+
+
+ {capability.label}
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
Communication was only the first layer.
+
+ We built Agent Relay so agents could communicate directly. Users built teams of coding agents to
+ complete and review software tasks, but still had to supervise those teams themselves.
+
+
Skip is the manager those agent teams were missing.
+
+
+
+
+
+
+ Stop managing every agent.
+ Run more of your engineering backlog without becoming the bottleneck.
+
+ We are onboarding a small number of engineering teams as design partners.
+
+
+
+
+
+
+ );
+}
diff --git a/web/app/skip/skip.module.css b/web/app/skip/skip.module.css
new file mode 100644
index 0000000..df8d2a3
--- /dev/null
+++ b/web/app/skip/skip.module.css
@@ -0,0 +1,1050 @@
+.page {
+ --skip-bg: #08111a;
+ --skip-surface: #0f1b29;
+ --skip-surface-strong: #13283b;
+ --skip-line: rgba(116, 184, 226, 0.18);
+ --skip-line-strong: rgba(116, 184, 226, 0.36);
+ --skip-text: #edf4fb;
+ --skip-muted: #a8b8c8;
+ --skip-faint: #77879a;
+ --skip-accent: #74b8e2;
+ min-height: 100vh;
+ overflow-x: clip;
+ background: var(--skip-bg);
+ color: var(--skip-text);
+}
+
+.hero {
+ display: flex;
+ align-items: center;
+ padding: 88px 40px 64px;
+ background:
+ radial-gradient(circle at 78% 25%, rgba(116, 184, 226, 0.13), transparent 34rem),
+ linear-gradient(180deg, #10283b 0%, var(--skip-bg) 100%);
+ border-bottom: 1px solid var(--skip-line);
+}
+
+.heroInner {
+ width: 100%;
+ max-width: 1180px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
+ gap: 64px;
+ align-items: center;
+}
+
+.heroCopy {
+ max-width: 560px;
+}
+
+.eyebrow {
+ display: inline-block;
+ margin: 0 0 20px;
+ padding: 7px 13px;
+ border: 1px solid var(--skip-line-strong);
+ border-radius: 8px;
+ color: var(--skip-accent);
+ font-family: var(--font-geist-mono), monospace;
+ font-size: 0.7rem;
+ font-weight: 600;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+
+.hero h1,
+.problemInner h2,
+.sectionIntro h2,
+.responsibilityIntro h2,
+.infrastructureCopy h2,
+.evolutionInner h2,
+.ctaInner h2 {
+ margin: 0;
+ font-family: var(--font-heading), sans-serif;
+ font-weight: 520;
+ letter-spacing: -0.055em;
+ line-height: 1.02;
+}
+
+.hero h1 {
+ max-width: 15ch;
+ font-size: clamp(2.7rem, 4.8vw, 4.6rem);
+}
+
+.heroLead {
+ max-width: 52ch;
+ margin: 24px 0 0;
+ color: var(--skip-muted);
+ font-size: clamp(1rem, 1.15vw, 1.1rem);
+ line-height: 1.65;
+}
+
+.heroActions {
+ display: flex;
+ gap: 14px;
+ margin-top: 32px;
+ flex-wrap: wrap;
+}
+
+.heroVisual {
+ display: flex;
+}
+
+.pilotButton,
+.pilotButtonCompact,
+.secondaryButton {
+ min-height: 48px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 9px;
+ padding: 12px 24px;
+ border: 1.5px solid #234969;
+ border-radius: 999px;
+ background: #2d6a9c;
+ color: #fff;
+ font-size: 0.91rem;
+ font-weight: 650;
+ line-height: 1;
+ text-decoration: none;
+ white-space: nowrap;
+ transition:
+ transform 180ms var(--ease-out-quint),
+ background 180ms ease,
+ border-color 180ms ease;
+}
+
+.pilotButtonCompact {
+ min-height: 38px;
+ padding: 9px 17px;
+ background: #edf7fd;
+ border-color: #d8ebf8;
+ color: #0b2233;
+}
+.secondaryButton {
+ background: transparent;
+ border-color: var(--skip-line-strong);
+ color: var(--skip-text);
+}
+.pilotButton svg,
+.pilotButtonCompact svg,
+.secondaryButton svg {
+ width: 16px;
+ height: 16px;
+ stroke-width: 1.8;
+}
+.pilotButton:hover {
+ background: #4a90c2;
+}
+.secondaryButton:hover {
+ border-color: var(--skip-accent);
+ color: var(--skip-accent);
+}
+.pilotButton:hover,
+.pilotButtonCompact:hover,
+.secondaryButton:hover {
+ transform: translateY(-1px);
+}
+.pilotButton:active,
+.pilotButtonCompact:active,
+.secondaryButton:active {
+ transform: scale(0.97);
+}
+.pilotButton:focus-visible,
+.pilotButtonCompact:focus-visible,
+.secondaryButton:focus-visible {
+ outline: 3px solid var(--skip-accent);
+ outline-offset: 4px;
+}
+
+/* ── Hero product mockup ── */
+
+.skipMark {
+ flex: 0 0 auto;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 999px;
+ background: linear-gradient(160deg, #4a90c2, #2d6a9c);
+ color: #fff;
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
+}
+
+.skipMarkGlyph {
+ width: 58%;
+ height: 58%;
+ color: #fff;
+}
+
+.mock {
+ width: 100%;
+ max-width: 560px;
+ margin-left: auto;
+ border: 1px solid var(--skip-line-strong);
+ border-radius: 16px;
+ background: #0b1622;
+ box-shadow: 0 40px 100px rgba(2, 8, 14, 0.55);
+ overflow: hidden;
+}
+
+.mockTitlebar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--skip-line);
+ background: #0e1c2b;
+}
+
+.mockDots {
+ display: inline-flex;
+ gap: 6px;
+}
+
+.mockDots i {
+ width: 10px;
+ height: 10px;
+ border-radius: 999px;
+ display: block;
+}
+
+.dotRed {
+ background: var(--status-red, #ff5f57);
+}
+.dotYellow {
+ background: var(--status-yellow, #febc2e);
+}
+.dotGreen {
+ background: var(--status-green, #28c840);
+}
+
+.mockBrand {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ color: var(--skip-faint);
+ font-family: var(--font-geist-mono), monospace;
+ font-size: 0.68rem;
+ letter-spacing: 0.03em;
+}
+
+.mockBrand svg {
+ width: 15px;
+ height: 15px;
+ color: var(--skip-accent);
+}
+
+.mockBody {
+ display: grid;
+ grid-template-columns: 168px minmax(0, 1fr);
+ min-height: 460px;
+}
+
+.mockSidebar {
+ padding: 16px 12px;
+ border-right: 1px solid var(--skip-line);
+ background: #0a1520;
+}
+
+.mockSearch {
+ padding: 8px 10px;
+ margin-bottom: 18px;
+ border: 1px solid var(--skip-line);
+ border-radius: 8px;
+ color: var(--skip-faint);
+ font-size: 0.72rem;
+}
+
+.mockSidebarLabel {
+ margin: 0 0 8px;
+ padding: 0 2px;
+ color: var(--skip-faint);
+ font-size: 0.64rem;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+}
+
+.mockPinned {
+ display: flex;
+ align-items: flex-start;
+ gap: 9px;
+ padding: 10px;
+ border: 1px solid var(--skip-line-strong);
+ border-radius: 10px;
+ background: #122232;
+}
+
+.mockPinned div {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ min-width: 0;
+}
+
+.mockPinned strong {
+ font-size: 0.78rem;
+ color: var(--skip-text);
+}
+
+.mockPinned span {
+ color: var(--skip-faint);
+ font-size: 0.64rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.mockChat {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+}
+
+.mockChatHeader {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 14px 18px;
+ border-bottom: 1px solid var(--skip-line);
+}
+
+.mockChatHeader strong {
+ display: block;
+ font-size: 0.86rem;
+ color: var(--skip-text);
+}
+
+.mockStatus {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ color: var(--skip-faint);
+ font-size: 0.66rem;
+}
+
+.mockStatus i {
+ width: 6px;
+ height: 6px;
+ border-radius: 999px;
+ background: var(--status-green, #28c840);
+}
+
+.mockThread {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ padding: 18px;
+ overflow: hidden;
+}
+
+.mockRow {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 4px;
+}
+
+.mockRowAgent {
+ align-items: flex-start;
+}
+
+.mockBubble {
+ max-width: 88%;
+ padding: 9px 13px;
+ border-radius: 12px;
+ font-size: 0.76rem;
+ line-height: 1.5;
+}
+
+.mockBubbleUser {
+ border-bottom-right-radius: 3px;
+ background: #2d6a9c;
+ color: #fff;
+}
+
+.mockBubbleAgent {
+ border-bottom-left-radius: 3px;
+ border: 1px solid var(--skip-line);
+ background: #10202f;
+ color: var(--skip-text);
+}
+
+.mockTime {
+ color: var(--skip-faint);
+ font-size: 0.6rem;
+}
+
+/* ── Proof bar ── */
+
+.proofBar {
+ padding: 0 40px;
+ border-bottom: 1px solid var(--skip-line);
+ background: #0d1926;
+}
+
+.proofGrid {
+ max-width: 1180px;
+ min-height: 80px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+}
+
+.proofGrid span {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 18px;
+ border-right: 1px solid var(--skip-line);
+ color: var(--skip-muted);
+ font-family: var(--font-geist-mono), monospace;
+ font-size: 0.75rem;
+ text-align: center;
+}
+
+.proofGrid span:first-child {
+ border-left: 1px solid var(--skip-line);
+}
+
+/* ── Problem ── */
+
+.problemSection {
+ padding: 118px 40px;
+ background: #0b1723;
+ border-bottom: 1px solid var(--skip-line);
+}
+.problemInner {
+ max-width: 1080px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
+ gap: 96px;
+ align-items: end;
+}
+.problemInner h2,
+.sectionIntro h2,
+.responsibilityIntro h2,
+.infrastructureCopy h2,
+.evolutionInner h2,
+.ctaInner h2 {
+ font-size: clamp(2.35rem, 4.2vw, 4.5rem);
+}
+.problemCopy {
+ padding-left: 28px;
+ border-left: 1px solid var(--skip-line-strong);
+}
+.problemCopy p,
+.sectionIntro p,
+.responsibilityIntro p,
+.infrastructureCopy p,
+.evolutionInner p,
+.ctaInner > p {
+ color: var(--skip-muted);
+ line-height: 1.7;
+}
+.problemCopy p {
+ margin: 0;
+}
+.problemCopy p + p {
+ margin-top: 20px;
+ color: var(--skip-text);
+}
+
+/* ── Workflow ── */
+
+.workflowSection {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 128px 40px 140px;
+}
+.sectionIntro {
+ max-width: 760px;
+}
+.sectionIntro p {
+ max-width: 61ch;
+ margin: 24px 0 0;
+}
+.workflowTrack {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ margin-top: 76px;
+}
+.workflowItem {
+ position: relative;
+ padding: 0 32px 0 0;
+}
+.workflowItem:not(:last-child) {
+ border-right: 1px solid var(--skip-line);
+ margin-right: 32px;
+}
+.workflowRail {
+ height: 2px;
+ margin-bottom: 30px;
+ background: var(--skip-line);
+}
+.workflowRail span {
+ display: block;
+ width: 38%;
+ height: 100%;
+ background: var(--skip-accent);
+}
+.workflowIcon {
+ width: 44px;
+ height: 44px;
+ display: grid;
+ place-items: center;
+ border: 1px solid var(--skip-line-strong);
+ border-radius: 12px;
+ background: var(--skip-surface);
+ color: var(--skip-accent);
+}
+.workflowIcon svg {
+ width: 20px;
+ height: 20px;
+ stroke-width: 1.7;
+}
+.workflowDetail {
+ margin: 24px 0 0;
+ color: var(--skip-accent) !important;
+ font: 0.7rem/1.2 var(--font-geist-mono), monospace;
+ text-transform: uppercase;
+ letter-spacing: 0.07em;
+}
+.workflowItem h3 {
+ margin: 12px 0 0;
+ font-size: 1.16rem;
+ letter-spacing: -0.025em;
+}
+.workflowItem > p:last-child {
+ margin: 13px 0 0;
+ color: var(--skip-muted);
+ font-size: 0.92rem;
+ line-height: 1.65;
+}
+
+/* ── Responsibility (before/after) ── */
+
+.responsibilitySection {
+ padding: 128px 40px;
+ background: #10283b;
+ border-block: 1px solid var(--skip-line);
+}
+.responsibilitySection > * {
+ max-width: 1160px;
+ margin-inline: auto;
+}
+.responsibilityIntro {
+ max-width: 770px;
+}
+.responsibilityIntro p {
+ max-width: 66ch;
+ margin: 22px 0 0;
+}
+.responsibilityIntro p + p {
+ margin-top: 10px;
+ color: var(--skip-text);
+}
+.responsibilityDiagram {
+ margin-top: 68px;
+ display: grid;
+ grid-template-columns: 1fr 50px 1fr;
+ gap: 22px;
+ align-items: center;
+}
+.beforeDiagram,
+.afterDiagram {
+ min-height: 390px;
+ padding: 28px;
+ border: 1px solid var(--skip-line);
+ border-radius: 16px;
+ background: #0b1b29;
+}
+.beforeDiagram h3,
+.afterDiagram h3 {
+ margin: 0;
+ color: var(--skip-muted);
+ font: 0.72rem/1.2 var(--font-geist-mono), monospace;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+}
+.beforeDiagram > p,
+.afterDiagram > p {
+ margin: 20px 0 0;
+ color: var(--skip-muted);
+ font-size: 0.86rem;
+ text-align: center;
+}
+.manualMap {
+ position: relative;
+ width: 260px;
+ height: 245px;
+ margin: 22px auto 0;
+}
+.personNode,
+.manualNode,
+.managedSkip,
+.returnNode {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 7px;
+ border: 1px solid var(--skip-line-strong);
+ border-radius: 12px;
+ background: var(--skip-surface-strong);
+ font: 0.7rem/1.2 var(--font-geist-mono), monospace;
+}
+.personNode {
+ padding: 12px 14px;
+ color: var(--skip-text);
+}
+.personNode svg,
+.returnNode svg {
+ width: 15px;
+ height: 15px;
+ color: var(--skip-accent);
+}
+.manualMap .personNode {
+ position: absolute;
+ left: 82px;
+ top: 96px;
+ z-index: 2;
+}
+.manualNode {
+ position: absolute;
+ width: 68px;
+ height: 42px;
+ color: var(--skip-muted);
+}
+.manualNode::after {
+ content: '';
+ position: absolute;
+ width: 66px;
+ height: 1px;
+ background: var(--skip-line-strong);
+ transform-origin: left;
+}
+.manualNode:nth-child(2) {
+ left: 0;
+ top: 16px;
+}
+.manualNode:nth-child(2)::after {
+ left: 58px;
+ top: 35px;
+ transform: rotate(35deg);
+}
+.manualNode:nth-child(3) {
+ right: 0;
+ top: 16px;
+}
+.manualNode:nth-child(3)::after {
+ right: 58px;
+ top: 35px;
+ transform: rotate(-35deg);
+ transform-origin: right;
+}
+.manualNode:nth-child(4) {
+ left: 0;
+ bottom: 10px;
+}
+.manualNode:nth-child(4)::after {
+ left: 58px;
+ bottom: 35px;
+ transform: rotate(-35deg);
+}
+.manualNode:nth-child(5) {
+ right: 0;
+ bottom: 10px;
+}
+.manualNode:nth-child(5)::after {
+ right: 58px;
+ bottom: 35px;
+ transform: rotate(35deg);
+ transform-origin: right;
+}
+.manualNode:nth-child(6) {
+ left: 96px;
+ top: 0;
+}
+.manualNode:nth-child(6)::after {
+ left: 34px;
+ top: 42px;
+ transform: rotate(90deg);
+}
+.manualNode:nth-child(7) {
+ left: 96px;
+ bottom: 0;
+}
+.manualNode:nth-child(7)::after {
+ left: 34px;
+ bottom: 42px;
+ transform: rotate(-90deg);
+}
+.compareArrow {
+ width: 24px;
+ margin: auto;
+ color: var(--skip-accent);
+}
+.managedMap {
+ min-height: 245px;
+ margin-top: 22px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 11px;
+}
+.managedMap > svg {
+ width: 18px;
+ color: var(--skip-faint);
+}
+.managedSkip {
+ padding: 13px 22px;
+ border-color: var(--skip-accent);
+ background: #12334b;
+ color: var(--skip-text);
+ font-size: 0.85rem;
+}
+.managedSkip svg {
+ width: 15px;
+ height: 15px;
+}
+.managedTeams {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 8px;
+}
+.managedTeams span {
+ padding: 9px 13px;
+ border: 1px solid var(--skip-line);
+ border-radius: 10px;
+ color: var(--skip-muted);
+ font: 0.65rem/1 var(--font-geist-mono), monospace;
+}
+.returnNode {
+ padding: 10px 15px;
+ color: var(--skip-accent);
+}
+
+/* ── Infrastructure (Relay underneath) ── */
+
+.infrastructureSection {
+ padding: 136px 40px;
+}
+.infrastructureInner {
+ max-width: 1180px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 0.82fr 1.18fr;
+ gap: 100px;
+ align-items: center;
+}
+.infrastructureCopy p {
+ max-width: 55ch;
+ margin: 24px 0 0;
+}
+.infrastructureCopy p + p {
+ margin-top: 14px;
+ color: var(--skip-text);
+}
+.layerDiagram {
+ display: grid;
+ gap: 10px;
+}
+.skipLayer,
+.relayLayer {
+ padding: 28px;
+ border: 1px solid var(--skip-line-strong);
+ border-radius: 16px;
+}
+.skipLayer {
+ width: 82%;
+ margin: 0 auto;
+ background: #15344a;
+}
+.relayLayer {
+ background: var(--skip-surface);
+}
+.skipLayer > span,
+.relayLayer > span {
+ color: var(--skip-accent);
+ font: 0.68rem/1.2 var(--font-geist-mono), monospace;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+}
+.skipLayer strong,
+.relayLayer strong {
+ display: block;
+ margin-top: 10px;
+ font: 520 1.5rem/1.1 var(--font-heading), sans-serif;
+}
+.skipLayer p {
+ margin: 13px 0 0;
+ color: var(--skip-muted);
+ font-size: 0.84rem;
+ line-height: 1.55;
+}
+.capabilityGrid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 10px 18px;
+ margin-top: 22px;
+}
+.capabilityGrid span {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--skip-muted);
+ font-size: 0.78rem;
+}
+.capabilityGrid svg {
+ width: 15px;
+ height: 15px;
+ color: var(--skip-accent);
+ stroke-width: 1.7;
+}
+
+/* ── Evolution ── */
+
+.evolutionSection {
+ padding: 94px 40px;
+ background: #0c1c2a;
+ border-block: 1px solid var(--skip-line);
+}
+.evolutionInner {
+ max-width: 1000px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 90px 1fr;
+ gap: 40px;
+ align-items: start;
+}
+.evolutionInner > svg {
+ width: 70px;
+ height: 70px;
+ padding: 18px;
+ border: 1px solid var(--skip-line-strong);
+ border-radius: 16px;
+ color: var(--skip-accent);
+}
+.evolutionInner h2 {
+ font-size: clamp(2.2rem, 3.8vw, 4rem);
+}
+.evolutionInner p {
+ max-width: 65ch;
+ margin: 22px 0 0;
+}
+.evolutionInner p + p {
+ margin-top: 12px;
+ color: var(--skip-text);
+ font-weight: 600;
+}
+
+/* ── CTA ── */
+
+.ctaSection {
+ padding: 140px 40px;
+ text-align: center;
+ background: radial-gradient(circle at 50% 25%, rgba(116, 184, 226, 0.13), transparent 32rem);
+}
+.ctaInner {
+ max-width: 820px;
+ margin: 0 auto;
+}
+.ctaInner > p {
+ margin: 24px auto 0;
+ font-size: 1.08rem;
+}
+.ctaInner .pilotButton {
+ margin-top: 34px;
+}
+.ctaInner > span {
+ display: block;
+ margin-top: 18px;
+ color: var(--skip-faint);
+ font-size: 0.83rem;
+}
+
+@media (max-width: 1120px) {
+ .hero {
+ padding-top: 72px;
+ }
+ .heroInner {
+ grid-template-columns: 1fr;
+ gap: 48px;
+ }
+ .heroCopy {
+ max-width: 720px;
+ }
+ .heroVisual {
+ justify-content: center;
+ }
+ .mock {
+ margin-inline: auto;
+ }
+ .workflowTrack {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 52px 0;
+ }
+ .workflowItem:nth-child(2) {
+ border-right: 0;
+ margin-right: 0;
+ }
+ .infrastructureInner {
+ gap: 60px;
+ }
+}
+
+@media (max-width: 760px) {
+ .hero,
+ .problemSection,
+ .workflowSection,
+ .responsibilitySection,
+ .infrastructureSection,
+ .evolutionSection,
+ .ctaSection,
+ .proofBar {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+ .hero {
+ padding-top: 76px;
+ padding-bottom: 52px;
+ }
+ .hero h1 {
+ max-width: 12ch;
+ font-size: clamp(2.6rem, 12vw, 4rem);
+ }
+ .heroLead {
+ font-size: 1rem;
+ }
+ .mockBody {
+ grid-template-columns: 1fr;
+ }
+ .mockSidebar {
+ display: none;
+ }
+ .problemSection {
+ padding-top: 88px;
+ padding-bottom: 88px;
+ }
+ .problemInner {
+ grid-template-columns: 1fr;
+ gap: 38px;
+ }
+ .problemCopy {
+ padding-left: 20px;
+ }
+ .workflowSection {
+ padding-top: 96px;
+ padding-bottom: 104px;
+ }
+ .workflowTrack {
+ grid-template-columns: 1fr;
+ gap: 0;
+ margin-top: 54px;
+ }
+ .workflowItem,
+ .workflowItem:not(:last-child),
+ .workflowItem:nth-child(2) {
+ margin: 0;
+ padding: 0 0 44px;
+ border-right: 0;
+ }
+ .workflowItem:last-child {
+ padding-bottom: 0;
+ }
+ .workflowRail {
+ width: 48%;
+ }
+ .responsibilitySection {
+ padding-top: 96px;
+ padding-bottom: 96px;
+ }
+ .responsibilityDiagram {
+ grid-template-columns: 1fr;
+ margin-top: 48px;
+ }
+ .compareArrow {
+ transform: rotate(90deg);
+ }
+ .beforeDiagram,
+ .afterDiagram {
+ min-height: 370px;
+ padding: 22px;
+ }
+ .infrastructureSection {
+ padding-top: 102px;
+ padding-bottom: 102px;
+ }
+ .infrastructureInner {
+ grid-template-columns: 1fr;
+ gap: 52px;
+ }
+ .skipLayer {
+ width: 88%;
+ }
+ .evolutionSection {
+ padding-top: 78px;
+ padding-bottom: 78px;
+ }
+ .evolutionInner {
+ grid-template-columns: 1fr;
+ gap: 26px;
+ }
+ .evolutionInner > svg {
+ width: 58px;
+ height: 58px;
+ padding: 15px;
+ }
+ .ctaSection {
+ padding-top: 104px;
+ padding-bottom: 104px;
+ }
+}
+
+@media (max-width: 440px) {
+ .hero h1 {
+ max-width: 10ch;
+ }
+ .heroActions {
+ align-items: stretch;
+ flex-direction: column;
+ }
+ .pilotButton,
+ .secondaryButton {
+ width: 100%;
+ }
+ .problemInner h2,
+ .sectionIntro h2,
+ .responsibilityIntro h2,
+ .infrastructureCopy h2,
+ .evolutionInner h2,
+ .ctaInner h2 {
+ font-size: 2.35rem;
+ }
+ .manualMap {
+ transform: scale(0.92);
+ transform-origin: center;
+ margin-inline: -2px;
+ }
+ .capabilityGrid {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .pilotButton,
+ .pilotButtonCompact,
+ .secondaryButton {
+ transition: none;
+ }
+ .pilotButton:hover,
+ .pilotButtonCompact:hover,
+ .secondaryButton:hover,
+ .pilotButton:active,
+ .pilotButtonCompact:active,
+ .secondaryButton:active {
+ transform: none;
+ }
+}
diff --git a/web/next.config.mjs b/web/next.config.mjs
index 08fe1c1..6ee5960 100644
--- a/web/next.config.mjs
+++ b/web/next.config.mjs
@@ -73,6 +73,8 @@ const nextConfig = {
permanent: false,
},
{ source: '/quickstart', destination: '/docs/quickstart', permanent: true },
+ { source: '/chief', destination: '/skip', permanent: true },
+ { source: '/chief/:path*', destination: '/skip', permanent: true },
{ source: '/relayfile', destination: '/primitives#file', permanent: true },
{ source: '/relayfile/:path*', destination: '/primitives#file', permanent: true },
{ source: '/relayauth', destination: '/primitives#auth', permanent: true },