-
-
- Spend your time on the product, not the workflow
-
-
- Pair-programming, not babysitting
-
-
+const Closing = () => (
+
+
+
+
+
+ Spend your time on the product, not the workflow
+
+
+ Pair-programming, not babysitting
+
+
-
- );
-}
+
+);
+
+export default Closing;
diff --git a/src/sections/Commands.tsx b/src/sections/Commands.tsx
deleted file mode 100644
index 1de694e..0000000
--- a/src/sections/Commands.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Section } from '@/components/Section';
-
-export default function Commands() {
- return (
-
-
- Slash commands for scaffolding, quality, session management, and project lifecycle.
-
-
- Project Lifecycle
-
- -
-
/init - Initializes a new GAIA project
-
- -
-
/update-gaia - Merges the latest GAIA
- release without overwriting your customizations
-
- -
-
/update-deps - Upgrades
- outdated packages and handles any necessary code changes
-
-
-
- Authoring
-
- -
-
/orchestrate - Plan a complex
- feature. Claude structures the work, you approve, then an orchestrator drives focused subagents through execution
-
- -
-
/new-route - Scaffold a new route
- with its page component and test
-
- -
-
/new-component - Scaffold a new React
- component with optional story
-
- -
-
/new-hook - Scaffold a new custom
- React hook with a test
-
- -
-
/new-service - Scaffold a new API
- service with schemas and mock handlers
-
-
-
- Quality
-
- -
-
/audit-code - Run the quality gate:
- simplify code, typecheck, lint, and run tests
-
- -
-
/audit-knowledge - Audit memory,
- wiki, and auto-loaded context files for duplication and/or conflicting knowledge
-
-
-
- Session
-
- -
-
/handoff - Generate a session handoff
- document so you can clear context without losing anything
-
- -
-
/pickup - Restore context from
- handoff and continue work
-
-
-
- );
-}
diff --git a/src/sections/Consulting.tsx b/src/sections/Consulting.tsx
deleted file mode 100644
index 4d19cda..0000000
--- a/src/sections/Consulting.tsx
+++ /dev/null
@@ -1,323 +0,0 @@
-import type React from "react";
-import { useEffect } from "react";
-import { getCalApi } from "@calcom/embed-react";
-import { Section } from "../components/Section";
-
-const CAL_USERNAME = "stevensacks";
-const CAL_NAMESPACE = "consulting";
-
-type SkuTier = { price: string; description: string };
-
-type SkuData = {
- title: string;
- tagline: string;
- price: string;
- priceDetail: string;
- deliverables: string[];
- calEvent: string;
- tiers?: SkuTier[];
- icon: React.ReactNode;
-};
-
-const iconBaseProps = {
- width: 36,
- height: 36,
- viewBox: "0 0 24 24",
- fill: "none",
- stroke: "var(--color-fg-dim)",
- strokeWidth: 1.5,
- strokeLinecap: "round" as const,
- strokeLinejoin: "round" as const,
- "aria-hidden": true,
- className: "block mb-[0.875rem]",
-};
-
-const AuditIcon = (
-
-);
-
-const MigrateIcon = (
-
-);
-
-const FoundationIcon = (
-
-);
-
-const RetainerIcon = (
-
-);
-
-const SKUS: SkuData[] = [
- {
- title: "Audit",
- icon: AuditIcon,
- tagline: "An outside opinion on your Claude workflow",
- price: "$5,000",
- priceDetail: "1 week · 100% async",
- calEvent: "audit-intro",
- deliverables: [
- "Deep review of one repo: CLAUDE.md, rules, hooks, prompt patterns, last 50 PRs",
- "15–25 page written report: what's working, what's costing you, top 5 fixes ranked by ROI",
- "20-minute recorded walkthrough video",
- "Optional 30-minute Q&A call within 2 weeks",
- ],
- },
- {
- title: "Foundation",
- icon: FoundationIcon,
- tagline: "Full GAIA setup for you",
- price: "$25,000",
- priceDetail: "2 weeks · 2–3 live sessions",
- calEvent: "foundation-intro",
- deliverables: [
- "GAIA installed and customized for your repo: rules, hooks, skills, wiki templates matched to your stack",
- "Integration with your existing tooling (Sentry, Linear, etc.)",
- "2–3 live sessions: kickoff, mid-foundation demo, handoff training (all recorded)",
- "Written runbook customized to you",
- "30 days of post-delivery email support",
- ],
- },
- {
- title: "Migrate",
- icon: MigrateIcon,
- tagline: "Take one messy repo from AI sprawl to GAIA-ready",
- price: "From $35,000",
- priceDetail: "3–4 weeks · async-first · scope-variable",
- calEvent: "migrate-intro",
- deliverables: [
- "Hands-on refactor of one repo: pattern consolidation, AI-debt cleanup, type tightening",
- "GAIA installed on the refactored codebase: rules, hooks, skills, wiki templates",
- "Commit-by-commit migration log so you can review the cleanup",
- "Written remediation report: what was changed, why, and what to watch for",
- "Optional 30-minute handoff call within 2 weeks of delivery",
- ],
- },
- {
- title: "Retainer",
- icon: RetainerIcon,
- tagline: "Ongoing oversight as your project grows",
- price: "From $5,000/mo",
- priceDetail: "Ongoing · async-first",
- calEvent: "retainer-intro",
- deliverables: [
- "Async review of critical PRs (5–10/month)",
- "Weekly 30-minute office hour (live)",
- "Slack/Discord access with 24-hour response time",
- "Quarterly written health-check summary",
- "First-look access to GAIA roadmap features",
- "10% discount on additional Foundation or Migration engagements",
- ],
- tiers: [
- { price: "$5k/mo", description: "8 hours, basic PR review" },
- { price: "$8k/mo", description: "15 hours, full critical-path PR review" },
- ],
- },
-];
-
-function CtaButton({
- href,
- calLink,
- children,
- fullWidth,
-}: {
- href?: string;
- calLink?: string;
- children: React.ReactNode;
- fullWidth?: boolean;
-}) {
- const baseClass = `${fullWidth ? "flex w-full justify-center" : "inline-flex"} items-center bg-accent text-bg no-underline font-body text-[0.9375rem] font-medium py-[0.6875rem] px-5 rounded-lg transition-colors duration-150 tracking-[0.01em] whitespace-nowrap hover:bg-accent-2`;
-
- if (calLink) {
- return (
-
- );
- }
-
- return (
-
- {children}
-
- );
-}
-
-function SkuCard({ sku }: { sku: SkuData }) {
- return (
-
- {/* Title + tagline */}
-
- {sku.icon}
-
- {sku.title}
-
-
- {sku.tagline}
-
-
-
- {/* Price */}
-
-
- {sku.price}
-
-
- {sku.priceDetail}
-
-
-
- {/* CTA above the feature list */}
-
- Book free intro call →
-
-
- {/* Divider */}
-
-
- {/* Feature list */}
-
- {sku.deliverables.map((item) => (
- -
-
- ✓
-
- {item}
-
- ))}
-
-
- {/* Retainer tiers */}
- {sku.tiers && (
-
-
- Two tiers
-
-
- {sku.tiers.map((tier) => (
- -
- {tier.price}:{" "}
- {tier.description}
-
- ))}
-
-
- )}
-
- );
-}
-
-export default function Consulting() {
- useEffect(() => {
- (async () => {
- const cal = await getCalApi({ namespace: CAL_NAMESPACE });
- cal("ui", {
- theme: "dark",
- hideEventTypeDetails: false,
- layout: "month_view",
- });
- })();
- }, []);
-
- return (
- <>
- {/* Hero */}
-
-
-
- Work with the creator of GAIA
-
-
- I built the GAIA Flash Framework in the 2000s, which was used to build 100k+ sites and by
- every major digital agency worldwide. GAIA React carries the same
- automation philosophy into the AI-native era.
-
- Now, I help teams and individuals adopt it.
-
-
-
- {/* Skip to pricing. Doubles as visual break between hero and pitch */}
-
- See engagement options ↓
-
-
- {/* Lead-in */}
-
-
-
- Your team started using Claude Code. Now everyone's doing it differently:
- inconsistent patterns, ballooning token costs, and AI-generated problems
- that shouldn't exist, caught in code review, or worse, production.
-
-
- Without guardrails, this compounds into technical debt and bugs
- that ship. I help teams and individuals fix the workflow before it gets there.
-
-
-
- {/* SKU cards */}
-
-
-
- {SKUS.map((sku) => (
-
- ))}
-
-
-
- {/* Custom inquiries */}
-
-
-
- Need something outside these engagements? Multi-month builds, custom integrations, or scope I haven't named here.{" "}
-
- Get in touch
-
- .
-
-
-
- );
-}
diff --git a/src/sections/FrameworkComparison.tsx b/src/sections/FrameworkComparison.tsx
deleted file mode 100644
index 2438d6c..0000000
--- a/src/sections/FrameworkComparison.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import {
- ComparisonTable,
- type ComparisonCell,
- type ComparisonColumn,
- type ComparisonRow,
-} from '@/components/ComparisonTable';
-
-const check: ComparisonCell = { kind: 'check' };
-const dash: ComparisonCell = { kind: 'dash' };
-const value = (label: string): ComparisonCell => ({ kind: 'value', label });
-
-const columns: ComparisonColumn[] = [
- { key: 'gaia', label: 'GAIA', isHero: true },
- { key: 'epic', label: 'Epic Stack' },
- { key: 't3', label: 'create-t3-app' },
- { key: 'redwood', label: 'RedwoodJS' },
-];
-
-const rows: ComparisonRow[] = [
- {
- feature: 'Routing',
- values: {
- gaia: value('React Router 7'),
- epic: value('React Router 7'),
- t3: value('Next.js'),
- redwood: value('@redwoodjs/router'),
- },
- },
- {
- feature: 'TypeScript',
- values: { gaia: check, epic: check, t3: check, redwood: check },
- },
- {
- feature: 'Tailwind',
- values: { gaia: check, epic: check, t3: check, redwood: dash },
- },
- {
- feature: 'Unit / integration tests',
- values: { gaia: check, epic: check, t3: dash, redwood: check },
- },
- {
- feature: 'E2E tests',
- values: { gaia: check, epic: check, t3: dash, redwood: dash },
- },
- {
- feature: 'Storybook',
- values: { gaia: check, epic: dash, t3: dash, redwood: check },
- },
- {
- feature: 'Visual regression tests',
- values: { gaia: check, epic: dash, t3: dash, redwood: dash },
- },
- {
- feature: 'Dark mode',
- values: { gaia: check, epic: check, t3: dash, redwood: dash },
- },
- {
- feature: 'i18n',
- values: { gaia: check, epic: dash, t3: dash, redwood: dash },
- },
- {
- feature: 'Mock API',
- values: { gaia: check, epic: dash, t3: dash, redwood: dash },
- },
- {
- feature: 'Forms',
- values: { gaia: check, epic: dash, t3: dash, redwood: dash },
- },
- {
- feature: 'Accessibility guardrails',
- values: { gaia: check, epic: dash, t3: dash, redwood: dash },
- },
- {
- feature: 'Lint rules',
- values: {
- gaia: value('1,592'),
- epic: value('748'),
- t3: value('637'),
- redwood: value('626'),
- },
- mobileLabel: (cell) =>
- cell?.kind === 'value' ? `${cell.label} lint rules` : 'Lint rules',
- },
-];
-
-export default function FrameworkComparison() {
- return (
-
-
-
- How the major React starters stack up
-
-
- GAIA's stack is the most complete. Fewer gaps means fewer
- decisions Claude has to invent on its own.
-
-
-
-
-
- Every lint rule is a check Claude has to clear, and GAIA has more
- than twice as many as any other starter, including 85 Stylelint
- rules none of the others ship at all. The extras cover the patterns
- Claude drifts into first: complexity creep, architectural
- shortcuts, mismatched filenames, broken CSS.{' '}
-
- In GAIA, the code Claude writes matches high standards because
- every commit enforces them.
-
-
-
-
-
- Order and focus
-
-
- Only GAIA is built for Claude.
-
-
- GAIA was strict long before Claude existed. That same
- discipline is what keeps Claude's code clean now. Claude
- thrives with enforced standards, and GAIA's were already
- battle-tested.
-
-
-
-
- Ship features
-
-
- Set the goal. Trust the diff.
-
-
- You describe what you want. Claude works inside the guardrails.
- Code review stops being a hunt for surprises, and you get
- back to shipping.
-
-
-
-
- );
-}
diff --git a/src/sections/GetStarted.tsx b/src/sections/GetStarted.tsx
deleted file mode 100644
index 6b734e0..0000000
--- a/src/sections/GetStarted.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Section } from '@/components/Section';
-import { CodeBlock } from '@/components/CodeBlock';
-
-export default function GetStarted() {
- return (
-
-
-
Two commands and you're initialized.
-
-
-
- npx create-gaia my-app
-
-
-
- /init
-
-
-
-
- The first command pulls the latest release and git-inits your project. The second
- initializes GAIA's Claude setup, including installing skills and plugins. See the{' '}
-
- commands section
- {' '}
- in the docs for more information.
-
-
- );
-}
diff --git a/src/sections/GitHub.tsx b/src/sections/GitHub.tsx
deleted file mode 100644
index cc92498..0000000
--- a/src/sections/GitHub.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Section } from '@/components/Section';
-
-export default function GitHub() {
- return (
-
-
-
- GAIA is open source under the MIT license. Browse the code, file issues, and follow
- development on GitHub.
-
-
-
-
- );
-}
diff --git a/src/sections/Hero.tsx b/src/sections/Hero.tsx
deleted file mode 100644
index 8c06c47..0000000
--- a/src/sections/Hero.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import gaiaLogo from '../assets/gaia-logo.svg';
-
-export default function Hero() {
- return (
-
-
-
-
-
- The React workflow for Claude
-
-
- Claude is raw power. GAIA is order and focus.
-
-
- GAIA makes Claude trustworthy enough to own features end to end, and disciplined enough
- to do it at scale.
-
-
-
- );
-}
diff --git a/src/sections/Hooks.tsx b/src/sections/Hooks.tsx
deleted file mode 100644
index c4fa529..0000000
--- a/src/sections/Hooks.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Section } from '@/components/Section';
-
-export default function Hooks() {
- return (
-
-
- GAIA's Claude hooks prevent debt-accumulating patterns and enforce conventions
- before code is committed.
-
-
- Edit Guards
- Protect critical files from unintended edits:
-
- -
- ESLint config - Prevents Claude from disabling rules in the config instead of fixing lint errors
-
- -
- i18n keys - Ensures no hard-coded strings slip
- through
-
-
-
- Bash Guards
- Block destructive or expensive operations:
-
- -
- Protect main branch - No commits or force-pushes
- to main
-
- -
- Prevent technical debt - Audit code before every
- PR merge
-
-
-
-
- Wiki Management
- Update wiki state across sessions:
-
- -
- Automated updates - Evaluate if committed code changes should be added to the wiki
-
- -
- Keep commits clean - Squash auto-commits from the claude-obsidian plugin
-
-
-
- );
-}
diff --git a/src/sections/ObsidianWiki.tsx b/src/sections/ObsidianWiki.tsx
deleted file mode 100644
index ed88781..0000000
--- a/src/sections/ObsidianWiki.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Section, SectionHeading } from '@/components/Section';
-import wikiVaultDiagram from '../assets/wiki-vault-diagram.svg';
-import ClaudeLogo from '../assets/logos/ClaudeLogo';
-import ObsidianLogo from '../assets/logos/ObsidianLogo';
-
-export default function ObsidianWiki() {
- return (
-
-
-
-
A second brain for Claude
-
- GAIA's wiki saves Claude tokens. Architecture, flows, and decisions live as committed
- markdown Claude reads on demand, so it never re-infers them from source code.
-
-
-
- Onboarding stops being a multi-week ramp. Context stops getting lost between sessions.
-
-
-
- The vault stays yours. Plain markdown in your repo, not a vendor's database, not chat
- history.
-
-
-
-
- Learn more →
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/sections/ObsidianWikiDetail.tsx b/src/sections/ObsidianWikiDetail.tsx
deleted file mode 100644
index 642bdea..0000000
--- a/src/sections/ObsidianWikiDetail.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Section } from '@/components/Section';
-
-export default function ObsidianWikiDetail() {
- return (
-
-
-
- With an Obsidian wiki, Claude understands what you are actually building, not just the
- code in front of it. Product features, user flows, design rationale, business decisions,
- architecture, and dependencies all live as focused markdown pages committed to git, not
- chat history, not machine-local memory.
-
-
-
- GAIA ships with the{' '}
-
- claude-obsidian
- {' '}
- integration wired up. The vault structure, the ingestion commands, and the maintenance
- skills are configured before you write your first page.
-
-
-
- On top of the integration, GAIA layers project-specific commands and hooks that turn the
- wiki into a self-maintaining knowledge base. Duplicates, conflicts, and stale information
- get pruned, so the vault stays clean as the project grows.
-
-
-
- Token costs do not balloon as the wiki gets richer. Claude only reads the specific
- information a task needs, so a project with 1,000 pages of context is no more expensive
- to work in than one with 10.
-
-
-
- Why Obsidian? A local markdown vault means the project's knowledge
- persists, compounds, and stays yours, not held in a vendor's database or trapped in
- chat history.
-
-
-
- Domain isolation is mandatory. Technical, branding, and business
- knowledge are kept siloed, and Claude does not cross-load between them unless a task
- genuinely spans more than one.
-
-
- );
-}
diff --git a/src/sections/Rules.tsx b/src/sections/Rules.tsx
deleted file mode 100644
index c100155..0000000
--- a/src/sections/Rules.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Section } from '@/components/Section';
-
-export default function Rules() {
- return (
-
-
- Project rules live in .claude/rules/{' '}
- and only load into Claude's context when it's working in matching file paths. They
- encode project conventions (coding style, API patterns, accessibility, testing) so Claude
- doesn't have to re-derive them every session.
-
-
-
-
- Accessibility - ARIA
- attributes, semantic HTML, keyboard navigation, color contrast
-
-
- API Service Pattern -
- URL constants, Zod schemas, request functions, MSW mocks
-
-
- Coding Guidelines -
- naming conventions, imports organization, error handling
-
-
- Component Testing Pattern{' '}
- - Vitest assertions, render utilities, accessibility testing
-
-
- ESLint Fix Patterns -
- fixing linting issues at the source, not in config
-
-
- End-to-End Test Conventions{' '}
- - page objects, assertions, visual regression
-
-
- Internationalization (i18n){' '}
- - key naming, pluralization, date/time handling
-
-
- New Route Pattern -
- file structure, loaders, actions, page component layout
-
-
- Quality Gate - runs
- before every commit: simplifying, linting, typechecking, and tests
-
-
- State Pattern - Ensures
- application state is managed well
-
-
- Storybook Conventions -
- component isolation, story structure, visual testing
-
-
- Tailwind Conventions -
- class naming, efficient utility usage, utility rules
-
-
- );
-}
diff --git a/src/sections/Skills.tsx b/src/sections/Skills.tsx
deleted file mode 100644
index 8087472..0000000
--- a/src/sections/Skills.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Section } from '@/components/Section';
-
-export default function Skills() {
- return (
-
-
- Skills live in .claude/skills/ and are
- loaded on demand when Claude detects a matching pattern in the task. They encode
- project-specific conventions and patterns so Claude applies them consistently without
- needing to re-derive them every session. Six skills ship with GAIA.
-
-
-
-
- typescript - naming
- identifiers, type-only imports, Zod schemas, avoiding enums and switch statements
-
-
- tdd - red-green-refactor
- loop, integration-style tests, behavior over implementation, stack references for
- React/Vitest/MSW/Storybook
-
-
- react-code - component
- patterns, hook gates (useEffect, useCallback, useState), event handlers, catching stale
- closures and unnecessary re-renders
-
-
- tailwind - class naming,
- combining conditional classes, twJoin vs twMerge, custom values and rem units
-
-
- playwright-cli - browser
- automation for testing, form filling, screenshots, data extraction
-
-
- skeleton-loaders -
- pixel-perfect skeleton loading states with the transparent-text technique and shimmer
- animation
-
-
- );
-}
diff --git a/src/sections/Stack.tsx b/src/sections/Stack.tsx
deleted file mode 100644
index ae15e63..0000000
--- a/src/sections/Stack.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { Section } from '@/components/Section';
-import ClaudeLogo from '@/assets/logos/ClaudeLogo';
-import ObsidianLogo from '@/assets/logos/ObsidianLogo';
-import ReactRouterLogo from '@/assets/logos/ReactRouterLogo';
-import TailwindLogo from '@/assets/logos/TailwindLogo';
-import TSLogo from '@/assets/logos/TSLogo';
-import ZodLogo from '@/assets/logos/ZodLogo';
-import ConformLogo from '@/assets/logos/ConformLogo';
-import I18NextLogo from '@/assets/logos/I18NextLogo';
-import VitestLogo from '@/assets/logos/VitestLogo';
-import RTLLogo from '@/assets/logos/RTLLogo';
-import PlaywrightLogo from '@/assets/logos/PlaywrightLogo';
-import MSWLogo from '@/assets/logos/MSWLogo';
-import StorybookLogo from '@/assets/logos/StorybookLogo';
-import ChromaticLogo from '@/assets/logos/ChromaticLogo';
-import ESLintLogo from '@/assets/logos/ESLintLogo';
-import PrettierLogo from '@/assets/logos/PrettierLogo';
-import StylelintLogo from '@/assets/logos/StylelintLogo';
-
-type LogoEntry = {
- name: string;
- href: string;
- component: React.ReactNode;
- wide?: boolean;
-};
-
-const FOUNDATION: LogoEntry[] = [
- { name: 'Claude', href: 'https://claude.com/claude-code', component:
},
- { name: 'Obsidian', href: 'https://obsidian.md/', component:
},
- { name: 'React Router', href: 'https://reactrouter.com/', component:
},
- { name: 'Tailwind', href: 'https://tailwindcss.com', component:
},
- { name: 'TypeScript', href: 'https://www.typescriptlang.org/', component:
},
- { name: 'Zod', href: 'https://zod.dev/', component:
},
- { name: 'i18next', href: 'https://react.i18next.com/', component:
},
- { name: 'Conform', href: 'https://conform.guide/', component:
, wide: true },
-];
-
-const TESTING: LogoEntry[] = [
- { name: 'Vitest', href: 'https://vitest.dev/', component:
},
- { name: 'RTL', href: 'https://testing-library.com/docs/react-testing-library/intro/', component:
},
- { name: 'Playwright', href: 'https://playwright.dev/', component:
},
- { name: 'MSW', href: 'https://mswjs.io/', component:
},
- { name: 'Storybook', href: 'https://storybook.js.org/', component:
},
- { name: 'Chromatic', href: 'https://www.chromatic.com/', component:
},
-];
-
-const CODE_QUALITY: LogoEntry[] = [
- { name: 'ESLint', href: 'https://eslint.org/', component:
},
- { name: 'Prettier', href: 'https://prettier.io/', component:
},
- { name: 'Stylelint', href: 'https://stylelint.io/', component:
},
-];
-
-function LogoCard({ name, href, component, wide }: LogoEntry) {
- return (
-
-
- {component}
-
-
- {name}
-
-
- );
-}
-
-type GroupProps = {
- label: string;
- items: LogoEntry[];
-};
-
-function LogoGroup({ label, items }: GroupProps) {
- return (
-
-
- {label}
-
-
- {items.map((item) => (
-
- ))}
-
-
- );
-}
-
-export default function Stack() {
- return (
-
-
- 20+ ESLint plugins, four testing layers (unit, integration, E2E,
- visual) with mocking, i18n, dark mode, forms with validation, and Storybook. All pre-configured
- and documented for Claude.
-
-
-
-
-
-
-
- );
-}
diff --git a/src/sections/StackRow.tsx b/src/sections/StackRow.tsx
deleted file mode 100644
index a097a4e..0000000
--- a/src/sections/StackRow.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import type { ReactNode } from 'react';
-import ChromaticLogo from '@/assets/logos/ChromaticLogo';
-import ClaudeLogo from '@/assets/logos/ClaudeLogo';
-import ConformLogo from '@/assets/logos/ConformLogo';
-import ESLintLogo from '@/assets/logos/ESLintLogo';
-import I18NextLogo from '@/assets/logos/I18NextLogo';
-import MSWLogo from '@/assets/logos/MSWLogo';
-import ObsidianLogo from '@/assets/logos/ObsidianLogo';
-import PlaywrightLogo from '@/assets/logos/PlaywrightLogo';
-import PrettierLogo from '@/assets/logos/PrettierLogo';
-import ReactRouterLogo from '@/assets/logos/ReactRouterLogo';
-import RTLLogo from '@/assets/logos/RTLLogo';
-import StorybookLogo from '@/assets/logos/StorybookLogo';
-import StylelintLogo from '@/assets/logos/StylelintLogo';
-import TailwindLogo from '@/assets/logos/TailwindLogo';
-import TSLogo from '@/assets/logos/TSLogo';
-import VitestLogo from '@/assets/logos/VitestLogo';
-import ZodLogo from '@/assets/logos/ZodLogo';
-
-type LogoEntry = { name: string; node: ReactNode };
-
-const LOGOS: LogoEntry[] = [
- { name: 'Claude', node:
},
- { name: 'Obsidian', node:
},
- { name: 'React Router', node:
},
- { name: 'Tailwind', node:
},
- { name: 'TypeScript', node:
},
- { name: 'Zod', node:
},
- { name: 'i18next', node:
},
- { name: 'Conform', node:
},
- { name: 'Vitest', node:
},
- { name: 'React Testing Library', node:
},
- { name: 'Playwright', node:
},
- { name: 'MSW', node:
},
- { name: 'Storybook', node:
},
- { name: 'Chromatic', node:
},
- { name: 'ESLint', node:
},
- { name: 'Prettier', node:
},
- { name: 'Stylelint', node:
},
-];
-
-const MARQUEE_STYLES = `
-@keyframes stackrow-scroll {
- from { transform: translateX(0); }
- to { transform: translateX(-50%); }
-}
-.stackrow-marquee-track {
- animation: stackrow-scroll 40s linear infinite;
-}
-@media (prefers-reduced-motion: reduce) {
- .stackrow-marquee-track {
- animation: none;
- }
-}
-`;
-
-function LogoItem({ name, node }: LogoEntry) {
- return (
-
- {node}
-
- );
-}
-
-export default function StackRow() {
- return (
-
-
-
-
- Built on
-
-
- {/* Desktop: static flex-wrap row */}
-
- {LOGOS.map((logo) => (
-
- ))}
-
-
- {/* Mobile: marquee */}
-
-
- {LOGOS.map((logo) => (
-
- ))}
- {LOGOS.map((logo) => (
-
- ))}
-
-
-
- );
-}
diff --git a/src/sections/Statusline.tsx b/src/sections/Statusline.tsx
deleted file mode 100644
index 8053e47..0000000
--- a/src/sections/Statusline.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Section } from '@/components/Section';
-
-type StatuslineLeftProps = {
- branch: string;
- model: string;
- contextBar: string;
- contextPct: number;
- contextColor: string;
-};
-
-function StatuslineLeft({ branch, model, contextBar, contextPct, contextColor }: StatuslineLeftProps) {
- return (
-
- app
- |
- {branch}
- |
- {model}
- |
- {contextBar}
- {contextPct}%
-
- );
-}
-
-export default function Statusline() {
- return (
-
-
- GAIA ships with a custom Claude Code statusline. The left side shows basic information
- and the right side conditionally shows when updates are available for your project.
-
The left side is optional during setup. You can choose not to use it if you have your own.
-
The right side only works in GAIA projects and does not modify your existing statusline configuration.
- During{' '}/init,
- a live preview is shown before any changes are made.
-
-
-
-
- Claude Code
-
-
-
-
-
-
-
-
-
-
-
-
- Run /update-deps (3 outdated)
-
-
-
-
-
-
-
-
-
-
- Run /update-gaia (GAIA 1.2.0 available)
-
-
-
-
-
-
- | app |
- current project folder (git root name) |
-
-
- | main |
- active git branch |
-
-
- | Sonnet 4.6 |
- active Claude model |
-
-
- | â–“â–“â–“â–“â–‘â–‘â–‘â–‘â–‘â–‘ 42% |
- context window usage |
-
-
- | Run /update-deps |
- shown when there are outdated packages |
-
-
- | Run /update-gaia |
- shown when a new GAIA release is available |
-
-
-
-
- );
-}
diff --git a/src/sections/TokenEconomics.tsx b/src/sections/TokenEconomics.tsx
deleted file mode 100644
index 348b56c..0000000
--- a/src/sections/TokenEconomics.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Section } from '@/components/Section';
-
-const POINTS = [
- {
- name: 'Rules are scoped to activate only when needed',
- desc: "Claude loads the ones that match what it's editing, nothing else.",
- },
- {
- name: 'Obsidian wiki, fetched on demand',
- desc: 'Project knowledge lives as focused, linked Markdown pages. Claude opens the one page it needs ("How does dark mode wire through?") instead of preloading the whole manual.',
- },
- {
- name: 'Wiki behavior tailored to GAIA',
- desc: "Session hooks keep Obsidian's workflow (ingest cadence, cache discipline, link hygiene) aligned with the project's conventions.",
- },
- {
- name: 'Periodic knowledge audit',
- desc: 'Sweeps memory, wiki, and autoloaded files for duplication, conflicts, and stale instructions before they start costing tokens.',
- },
- {
- name: 'Session continuity',
- desc: '/handoff and /pickup replace re-briefing Claude from scratch at every session start.',
- },
-];
-
-export default function TokenEconomics() {
- return (
-
-
-
- Context bloat isn't just CLAUDE.md sprawl. Instructions get dropped into global memory,
- forgotten, and accumulate into redundancies and conflicts, an invisible cost that
- compounds every session. GAIA keeps token usage minimal by design.
-
-
-
How GAIA keeps Claude token-efficient
-
-
- {POINTS.map(({ name, desc }) => (
- -
- •
-
- {name}. {desc}
-
-
- ))}
-
-
- );
-}
diff --git a/src/sections/Trust.tsx b/src/sections/Trust.tsx
deleted file mode 100644
index 13375dc..0000000
--- a/src/sections/Trust.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Section } from '@/components/Section';
-
-const POINTS = [
- {
- name: 'Coding principles',
- desc: "GAIA's coding rules embed Karpathy's four coding principles (Think Before Coding, Simplicity First, Surgical Changes, Goal-Driven Execution), plus two of GAIA's own: Always Use TDD and Always Verify Your Work.",
- },
- {
- name: 'Best practices baked in',
- desc: "Rules encode the conventions directly instead of hoping Claude infers them from whatever's already in the repo.",
- },
- {
- name: 'Guardrails against technical debt',
- desc: 'Rules block debt-accumulating patterns from being written in the first place: untyped exports, untested components, hardcoded strings, a11y gaps.',
- },
- {
- name: 'Consistently clean code',
- desc: '20+ ESLint plugins, strict TypeScript, and Prettier enforce style and correctness on every file Claude touches. No negotiation, no drift.',
- },
- {
- name: 'Test-driven development',
- desc: 'The bundled tdd skill runs a red-green-refactor loop with tests before code, tailored for Vitest, React Testing Library, Storybook composeStory, and MSW.',
- },
- {
- name: 'Code-review audit before every merge',
- desc: 'A Claude subagent scans the branch diff for security, performance, code smells, and antipatterns, then blocks the merge until the issues are fixed and committed.',
- },
- {
- name: 'Quality gate before commit',
- desc: 'Typecheck, lint, tests, and build must all pass. Not "mostly clean", actually clean.',
- },
-];
-
-export default function Trust() {
- return (
-
-
-
- You can't manage an engineer you can't predict. Without enforceable conventions, Claude
- reverts to its training distribution, an average of every codebase on the internet, bad
- code and all. GAIA's codebase is what you actually want Claude matching. With GAIA,
- Claude writes code that follows best practices on day one, and can't ship code that
- doesn't.
-
-
-
How GAIA makes Claude trustworthy
-
-
- {POINTS.map(({ name, desc }) => (
- -
- •
-
- {name}. {desc}
-
-
- ))}
-
-
- );
-}
diff --git a/src/sections/Why.tsx b/src/sections/Why.tsx
deleted file mode 100644
index 2f14f55..0000000
--- a/src/sections/Why.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Section } from '@/components/Section';
-import { Card } from '@/components/Card';
-import { BullseyeIcon, ShieldCheckIcon } from '@/components/icons';
-
-export default function Why() {
- return (
-
-
- Two things break Claude on real projects: output you can't trust, and quality that drops
- as the project grows. GAIA fixes both.
-
-
-
-
}
- iconColor="secondary"
- title="Trustworthy by default"
- >
-
- GAIA enforces high standards on every commit, so the code your team merges is code
- you can trust.
-
-
-
-
}
- iconColor="accent"
- title="Disciplined at scale"
- >
-
- GAIA gives Claude only what each task needs, so quality and costs stay predictable
- as your codebase grows.
-
-
-
- );
-}
diff --git a/src/sections/about/About.tsx b/src/sections/about/About.tsx
new file mode 100644
index 0000000..b61be4c
--- /dev/null
+++ b/src/sections/about/About.tsx
@@ -0,0 +1,194 @@
+import {Section} from '../../components/Section';
+
+type WorkItem = {
+ company: string;
+ note: string;
+ period: string;
+ role: string;
+};
+
+const SELECTED_WORK: WorkItem[] = [
+ {
+ company: 'Trek10',
+ note: 'Led six engineers rebuilding a financial services platform for one of the world’s largest management consulting firms. Architected a WYSIWYG JSON engine that lets non-engineers configure complex dashboards, and modernized the codebase from React 15 to React 19.',
+ period: '2024–2026',
+ role: 'Principal Frontend Engineer',
+ },
+ {
+ company: 'American Express',
+ note: 'Built and shipped the internal dining concierge platform used by Amex teams worldwide. Led the mobile-first rebuild of Pocket Concierge for the Japan market.',
+ period: '2020–2023',
+ role: 'Lead React Engineer',
+ },
+ {
+ company: 'PlayBrain',
+ note: 'Architected a custom multilingual publishing platform and a real-time esports tournament system on a serverless AWS backend. Hired and led the engineering team.',
+ period: '2016–2017',
+ role: 'Director of Engineering',
+ },
+ {
+ company: 'Plug DJ',
+ note: 'Social music platform that grew to 6M registered users and 1M monthly actives, supporting 60K simultaneous connections. Raised $2.5M from Javelin Venture Partners. Acquired.',
+ period: '2012–2015',
+ role: 'Founder',
+ },
+];
+
+const GitHubIcon = (
+
+);
+
+const LinkedInIcon = (
+
+);
+
+const EmailIcon = (
+
+);
+
+const LINKS = [
+ {href: 'https://github.com/stevensacks', icon: GitHubIcon, label: 'GitHub'},
+ {
+ href: 'https://www.linkedin.com/in/stevensacks/',
+ icon: LinkedInIcon,
+ label: 'LinkedIn',
+ },
+ {href: 'mailto:steven@gaiareact.com', icon: EmailIcon, label: 'Email'},
+];
+
+const About = () => (
+ <>
+ {/* Hero */}
+
+
+
+
+ Steven Sacks
+
+
+ I build production software with AI agents.
+
+
+
+
+ {/* Throughline */}
+
+
+
+ I’ve been building for the web since Flash was king. In the 2000s I
+ authored the GAIA Flash Framework, the most popular open source Flash
+ framework of its era, used to build over 100,000 websites and adopted
+ by every major digital agency. It replaced the chaos of Flash
+ development with opinionated structure, automated project setup, and a
+ library of powerful, easy-to-use solutions for the problems every
+ Flash developer ran into.
+
+
+ Now I’m doing it again with AI agents. GAIA React is the spiritual
+ successor to GAIA Flash: a comprehensive starting point for
+ professional React projects with Claude Code integration built in.
+ Same philosophy, new substrate.
+
+
+
+ {/* Selected work */}
+
+
+ {/* Why this, now */}
+
+
+
+ The AI tooling landscape today looks like Flash development before the
+ framework era: powerful tools, no shared structure, every team
+ reinventing the same patterns.
+
+
+ I’ve been here before. The fix the first time was structure: a
+ framework that codified the patterns worth keeping and made the rest
+ unnecessary. GAIA React is that, applied to Claude Code. The goal is
+ the same one I’ve been chasing for twenty years: one person shipping
+ the work of a team, without the work falling apart six months later.
+
+
+
+);
+
+export default About;
diff --git a/src/sections/consulting/Consulting.tsx b/src/sections/consulting/Consulting.tsx
new file mode 100644
index 0000000..c838f5e
--- /dev/null
+++ b/src/sections/consulting/Consulting.tsx
@@ -0,0 +1,326 @@
+import type React from 'react';
+import {useEffect} from 'react';
+import {getCalApi} from '@calcom/embed-react';
+import {twJoin} from 'tailwind-merge';
+import {Section} from '../../components/Section';
+
+const CAL_USERNAME = 'stevensacks';
+const CAL_NAMESPACE = 'consulting';
+
+type SkuData = {
+ calEvent: string;
+ deliverables: string[];
+ icon: React.ReactNode;
+ price: string;
+ priceDetail: string;
+ tagline: string;
+ tiers?: SkuTier[];
+ title: string;
+};
+
+type SkuTier = {description: string; price: string};
+
+const iconBaseProperties = {
+ 'aria-hidden': true,
+ className: 'block mb-[0.875rem]',
+ fill: 'none',
+ height: 36,
+ stroke: 'var(--color-ink-dim)',
+ strokeLinecap: 'round' as const,
+ strokeLinejoin: 'round' as const,
+ strokeWidth: 1.5,
+ viewBox: '0 0 24 24',
+ width: 36,
+};
+
+const AuditIcon = (
+
+);
+
+const MigrateIcon = (
+
+);
+
+const FoundationIcon = (
+
+);
+
+const RetainerIcon = (
+
+);
+
+const SKUS: SkuData[] = [
+ {
+ calEvent: 'audit-intro',
+ deliverables: [
+ 'Deep review of one repo: CLAUDE.md, rules, hooks, prompt patterns, last 50 PRs',
+ '15–25 page written report: what’s working, what’s costing you, top 5 fixes ranked by ROI',
+ '20-minute recorded walkthrough video',
+ 'Optional 30-minute Q&A call within 2 weeks',
+ ],
+ icon: AuditIcon,
+ price: '$5,000',
+ priceDetail: '1 week · 100% async',
+ tagline: 'An outside opinion on your Claude workflow',
+ title: 'Audit',
+ },
+ {
+ calEvent: 'foundation-intro',
+ deliverables: [
+ 'GAIA installed and customized for your repo: rules, hooks, skills, wiki templates matched to your stack',
+ 'Integration with your existing tooling (Sentry, Linear, etc.)',
+ '2–3 live sessions: kickoff, mid-foundation demo, handoff training (all recorded)',
+ 'Written runbook customized to you',
+ '30 days of post-delivery email support',
+ ],
+ icon: FoundationIcon,
+ price: '$25,000',
+ priceDetail: '2 weeks · 2–3 live sessions',
+ tagline: 'Full GAIA setup for you',
+ title: 'Foundation',
+ },
+ {
+ calEvent: 'migrate-intro',
+ deliverables: [
+ 'Hands-on refactor of one repo: pattern consolidation, AI-debt cleanup, type tightening',
+ 'GAIA installed on the refactored codebase: rules, hooks, skills, wiki templates',
+ 'Commit-by-commit migration log so you can review the cleanup',
+ 'Written remediation report: what was changed, why, and what to watch for',
+ 'Optional 30-minute handoff call within 2 weeks of delivery',
+ ],
+ icon: MigrateIcon,
+ price: 'From $35,000',
+ priceDetail: '3–4 weeks · async-first · scope-variable',
+ tagline: 'Take one messy repo from AI sprawl to GAIA-ready',
+ title: 'Migrate',
+ },
+ {
+ calEvent: 'retainer-intro',
+ deliverables: [
+ 'Async review of critical PRs (5–10/month)',
+ 'Weekly 30-minute office hour (live)',
+ 'Slack/Discord access with 24-hour response time',
+ 'Quarterly written health-check summary',
+ 'First-look access to GAIA roadmap features',
+ '10% discount on additional Foundation or Migration engagements',
+ ],
+ icon: RetainerIcon,
+ price: 'From $5,000/mo',
+ priceDetail: 'Ongoing · async-first',
+ tagline: 'Ongoing oversight as your project grows',
+ tiers: [
+ {description: '8 hours, basic PR review', price: '$5k/mo'},
+ {description: '15 hours, full critical-path PR review', price: '$8k/mo'},
+ ],
+ title: 'Retainer',
+ },
+];
+
+const CtaButton = ({
+ calLink,
+ children,
+ href,
+ isFullWidth,
+}: {
+ calLink?: string;
+ children: React.ReactNode;
+ href?: string;
+ isFullWidth?: boolean;
+}) => {
+ const baseClass = twJoin(
+ isFullWidth ? 'flex w-full justify-center' : 'inline-flex',
+ 'bg-accent text-canvas font-body hover:bg-accent-2 items-center rounded-lg px-5 py-2.75 text-[0.9375rem] font-medium tracking-[0.01em] whitespace-nowrap no-underline transition-colors duration-150'
+ );
+
+ if (calLink) {
+ return (
+
+ );
+ }
+
+ return (
+
+ {children}
+
+ );
+};
+
+const SkuCard = ({sku}: {sku: SkuData}) => (
+
+ {/* Title + tagline */}
+
+ {sku.icon}
+
+ {sku.title}
+
+
+ {sku.tagline}
+
+
+
+ {/* Price */}
+
+
+ {sku.price}
+
+
{sku.priceDetail}
+
+
+ {/* CTA above the feature list */}
+
+ Book free intro call →
+
+
+ {/* Divider */}
+
+
+ {/* Feature list */}
+
+ {sku.deliverables.map((item) => (
+ -
+
+ ✓
+
+ {item}
+
+ ))}
+
+
+ {/* Retainer tiers */}
+ {sku.tiers && (
+
+
+ Two tiers
+
+
+ {sku.tiers.map((tier) => (
+ -
+ {tier.price}:{' '}
+ {tier.description}
+
+ ))}
+
+
+ )}
+
+);
+
+const Consulting = () => {
+ useEffect(() => {
+ (async () => {
+ const cal = await getCalApi({namespace: CAL_NAMESPACE});
+ cal('ui', {
+ hideEventTypeDetails: false,
+ layout: 'month_view',
+ theme: 'dark',
+ });
+ })();
+ }, []);
+
+ return (
+ <>
+ {/* Hero */}
+
+
+
+ Work with the creator of GAIA
+
+
+ I built the GAIA Flash Framework in the 2000s, which was used to
+ build 100k+ sites and by every major digital agency worldwide. GAIA
+ React carries the same automation philosophy into the AI-native era.
+
+
+ Now, I help teams and individuals adopt it.
+
+
+
+ {/* Skip to pricing. Doubles as visual break between hero and pitch */}
+
+ See engagement options ↓
+
+
+ {/* Lead-in */}
+
+
+
+ Your team started using Claude Code. Now everyone’s doing it
+ differently: inconsistent patterns, ballooning token costs, and
+ AI-generated problems that shouldn’t exist, caught in code review,
+ or worse, production.
+
+
+ Without guardrails, this compounds into technical debt and bugs that
+ ship. I help teams and individuals fix the workflow before it gets
+ there.
+
+
+
+ {/* SKU cards */}
+
+
+
+ {SKUS.map((sku) => (
+
+ ))}
+
+
+
+ {/* Custom inquiries */}
+
+
+
+ Need something outside these engagements? Multi-month builds, custom
+ integrations, or scope I haven’t named here.{' '}
+
+ Get in touch
+
+ .
+
+
+
+ );
+};
+
+export default Consulting;
diff --git a/src/sections/docs/Agents.tsx b/src/sections/docs/Agents.tsx
new file mode 100644
index 0000000..d1e49c0
--- /dev/null
+++ b/src/sections/docs/Agents.tsx
@@ -0,0 +1,50 @@
+import {Section} from '@/components/Section';
+
+const Agents = () => (
+
+ GAIA ships with one specialized agent:
+
+
+
+ code-review-audit
+
+
+ Audits your branch’s changes: security vulnerabilities, performance
+ bottlenecks, code smells, anti-patterns, accessibility issues, and
+ refactoring opportunities. Dispatches specialist subagents alongside{' '}
+
+ React Doctor
+ {' '}
+ (47+ React-specific checks for security, performance, correctness, and
+ architecture) in parallel, then merges findings into a single report.
+ Goes beyond linting and type-checking to reason about data flow,
+ architecture, and intent.
+
+
+ When it runs: Gated before{' '}
+ gh pr merge by the{' '}
+ pr-merge-audit-check.sh hook,
+ and also available on demand.
+
+
+ Extendable: Review rules live in{' '}
+
+ .claude/agents/code-review-audit/
+ {' '}
+ (React patterns, TypeScript strictness, Tailwind utilities, form
+ libraries). Add your own as your project grows.
+
+
+ Why: Every merge reviewed by a
+ second pair of eyes without waiting on a human reviewer.
+
+
+);
+
+export default Agents;
diff --git a/src/sections/docs/Commands.tsx b/src/sections/docs/Commands.tsx
new file mode 100644
index 0000000..2c594d0
--- /dev/null
+++ b/src/sections/docs/Commands.tsx
@@ -0,0 +1,78 @@
+import {Section} from '@/components/Section';
+
+const Commands = () => (
+
+
+ Slash commands for scaffolding, quality, session management, and project
+ lifecycle.
+
+
+ Project Lifecycle
+
+ -
+
/init - Initializes a new GAIA
+ project
+
+ -
+
/update-gaia - Merges the latest
+ GAIA release without overwriting your customizations
+
+ -
+
/update-deps - Upgrades outdated
+ packages and handles any necessary code changes
+
+
+
+ Authoring
+
+ -
+
/orchestrate - Plan a complex
+ feature. Claude structures the work, you approve, then an orchestrator
+ drives focused subagents through execution
+
+ -
+
/new-route - Scaffold a new route
+ with its page component and test
+
+ -
+
/new-component - Scaffold a new
+ React component with optional story
+
+ -
+
/new-hook - Scaffold a new custom
+ React hook with a test
+
+ -
+
/new-service - Scaffold a new API
+ service with schemas and mock handlers
+
+
+
+ Quality
+
+ -
+
/audit-code - Run the quality gate:
+ simplify code, typecheck, lint, and run tests
+
+ -
+
/audit-knowledge - Audit memory,
+ wiki, and auto-loaded context files for duplication and/or conflicting
+ knowledge
+
+
+
+ Session
+
+ -
+
/handoff - Generate a session
+ handoff document so you can clear context without losing anything
+
+ -
+
/pickup - Restore context from
+ handoff and continue work
+
+
+
+);
+
+export default Commands;
diff --git a/src/sections/docs/GitHub.tsx b/src/sections/docs/GitHub.tsx
new file mode 100644
index 0000000..11c3130
--- /dev/null
+++ b/src/sections/docs/GitHub.tsx
@@ -0,0 +1,34 @@
+import {Section} from '@/components/Section';
+
+const GitHub = () => (
+
+
+
+ GAIA is open source under the MIT license. Browse the code, file issues,
+ and follow development on GitHub.
+
+
+
+
+);
+
+export default GitHub;
diff --git a/src/sections/docs/Hooks.tsx b/src/sections/docs/Hooks.tsx
new file mode 100644
index 0000000..a2a7864
--- /dev/null
+++ b/src/sections/docs/Hooks.tsx
@@ -0,0 +1,62 @@
+import {Section} from '@/components/Section';
+
+const Hooks = () => (
+
+
+ GAIA’s Claude hooks prevent debt-accumulating patterns and enforce
+ conventions before code is committed.
+
+
+ Edit Guards
+
+ Protect critical files from unintended edits:
+
+
+ -
+ ESLint config - Prevents Claude
+ from disabling rules in the config instead of fixing lint errors
+
+ -
+ i18n keys - Ensures no hard-coded
+ strings slip through
+
+
+
+ Bash Guards
+ Block destructive or expensive operations:
+
+ -
+ Protect main branch - No commits
+ or force-pushes to main
+
+ -
+ Prevent technical debt - Audit
+ code before every PR merge
+
+
+
+ Wiki Management
+ Update wiki state across sessions:
+
+ -
+ Automated updates - Evaluate if
+ committed code changes should be added to the wiki
+
+ -
+ Keep commits clean - Squash
+ auto-commits from the
+
+ claude-obsidian
+ {' '}
+ plugin
+
+
+
+);
+
+export default Hooks;
diff --git a/src/sections/docs/Rules.tsx b/src/sections/docs/Rules.tsx
new file mode 100644
index 0000000..9598d71
--- /dev/null
+++ b/src/sections/docs/Rules.tsx
@@ -0,0 +1,72 @@
+import {Section} from '@/components/Section';
+
+const Rules = () => (
+
+
+ Project rules live in .claude/rules/{' '}
+ and only load into Claude’s context when it’s working in matching file
+ paths. They encode project conventions (coding style, API patterns,
+ accessibility, testing) so Claude doesn’t have to re-derive them every
+ session.
+
+
+
+
+ Accessibility - ARIA
+ attributes, semantic HTML, keyboard navigation, color contrast
+
+
+ API Service Pattern -
+ URL constants, Zod schemas, request functions, MSW mocks
+
+
+ Coding Guidelines -
+ naming conventions, imports organization, error handling
+
+
+
+ Component Testing Pattern
+ {' '}
+ - Vitest assertions, render utilities, accessibility testing
+
+
+ ESLint Fix Patterns -
+ fixing linting issues at the source, not in config
+
+
+
+ End-to-End Test Conventions
+ {' '}
+ - page objects, assertions, visual regression
+
+
+
+ Internationalization (i18n)
+ {' '}
+ - key naming, pluralization, date/time handling
+
+
+ New Route Pattern -
+ file structure, loaders, actions, page component layout
+
+
+ Quality Gate - runs
+ before every commit: simplifying, linting, typechecking, and tests
+
+
+ State Pattern -
+ Ensures application state is managed well
+
+
+ Storybook Conventions{' '}
+ - component isolation, story structure, visual testing
+
+
+ Tailwind Conventions{' '}
+ - class naming, efficient utility usage, utility rules
+
+
+);
+
+export default Rules;
diff --git a/src/sections/docs/Skills.tsx b/src/sections/docs/Skills.tsx
new file mode 100644
index 0000000..6f94f4a
--- /dev/null
+++ b/src/sections/docs/Skills.tsx
@@ -0,0 +1,48 @@
+import {Section} from '@/components/Section';
+
+const Skills = () => (
+
+
+ Skills live in .claude/skills/ and
+ are loaded on demand when Claude detects a matching pattern in the task.
+ They encode project-specific conventions and patterns so Claude applies
+ them consistently without needing to re-derive them every session. Six
+ skills ship with GAIA.
+
+
+
+
+ typescript - naming
+ identifiers, type-only imports, Zod schemas, avoiding enums and switch
+ statements
+
+
+ tdd -
+ red-green-refactor loop, integration-style tests, behavior over
+ implementation, stack references for React/Vitest/MSW/Storybook
+
+
+ react-code -
+ component patterns, hook gates (useEffect, useCallback, useState), event
+ handlers, catching stale closures and unnecessary re-renders
+
+
+ tailwind - class
+ naming, combining conditional classes, twJoin vs twMerge, custom values
+ and rem units
+
+
+ playwright-cli -
+ browser automation for testing, form filling, screenshots, data
+ extraction
+
+
+ skeleton-loaders -
+ pixel-perfect skeleton loading states with the transparent-text
+ technique and shimmer animation
+
+
+);
+
+export default Skills;
diff --git a/src/sections/docs/Statusline.tsx b/src/sections/docs/Statusline.tsx
new file mode 100644
index 0000000..94c4483
--- /dev/null
+++ b/src/sections/docs/Statusline.tsx
@@ -0,0 +1,189 @@
+import {Section} from '@/components/Section';
+
+type StatuslineLeftProperties = {
+ branch: string;
+ contextBar: string;
+ contextColor: string;
+ contextPct: number;
+ model: string;
+};
+
+const StatuslineLeft = ({
+ branch,
+ contextBar,
+ contextColor,
+ contextPct,
+ model,
+}: StatuslineLeftProperties) => (
+
+
+ app
+
+ |
+
+ {branch}
+
+ |
+
+ {model}
+
+ |
+
+ {contextBar}
+
+ {contextPct}%
+
+);
+
+const Statusline = () => (
+
+
+ GAIA ships with a custom Claude Code statusline. The left side shows basic
+ information and the right side conditionally shows when updates are
+ available for your project.
+
+
+ The left side is optional during setup. You can choose not to use it if
+ you have your own.
+
+
+ The right side only works in GAIA projects and does not modify your
+ existing statusline configuration. During{' '}
+
+ /init
+
+ , a live preview is shown before any changes are made.
+
+
+
+
+
+ Claude Code
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Run /update-deps (3 outdated)
+
+
+
+
+
+
+
+
+
+
+ Run /update-gaia (GAIA 1.2.0 available)
+
+
+
+
+
+
+ | Token |
+ Description |
+
+
+
+
+ |
+ app
+ |
+
+ current project folder (git root name)
+ |
+
+
+ |
+ main
+ |
+ active git branch |
+
+
+ |
+ Sonnet 4.6
+ |
+ active Claude model |
+
+
+ |
+ â–“â–“â–“â–“â–‘â–‘â–‘â–‘â–‘â–‘ 42%
+ |
+ context window usage |
+
+
+ |
+ Run /update-deps
+ |
+
+ shown when there are outdated packages
+ |
+
+
+ |
+ Run /update-gaia
+ |
+
+ shown when a new GAIA release is available
+ |
+
+
+
+
+);
+
+export default Statusline;
diff --git a/src/sections/AgenticDesignDetail.tsx b/src/sections/features/AgenticDesignDetail.tsx
similarity index 67%
rename from src/sections/AgenticDesignDetail.tsx
rename to src/sections/features/AgenticDesignDetail.tsx
index 337e490..25e3320 100644
--- a/src/sections/AgenticDesignDetail.tsx
+++ b/src/sections/features/AgenticDesignDetail.tsx
@@ -1,128 +1,146 @@
-import { Section } from '@/components/Section';
+import {twJoin} from 'tailwind-merge';
+import {Section} from '@/components/Section';
type Pattern = {
- name: string;
body: string;
+ name: string;
};
const HEADLINE: Pattern[] = [
{
- name: 'The Stop Hook',
body: "Claude can't ship broken code. Pre-tool-use hooks block destructive git, watch-mode tests, force-pushes to main, and eslint-config edits before they happen. Pre-commit hooks gate every commit on typecheck, lint, tests, and build.",
+ name: 'The Stop Hook',
},
{
- name: 'Reflection',
body: 'Two blocking review layers before merge. The Quality Gate (typecheck, lint, test, build) loops until clean. The code-review audit tiers findings as Critical, Important, and Suggestions and blocks every merge.',
+ name: 'Reflection',
},
{
- name: 'Memory Management',
body: 'Five tiers so Claude stops relearning your codebase. Wiki for long-term, hot cache for session start, /handoff and /pickup for episodic, agent memory across reviews, user memory across projects. /audit-knowledge sweeps for duplication and bloat.',
+ name: 'Memory Management',
},
{
- name: 'Multi-Agent Collaboration',
body: 'A specialist for every concern, dispatched in parallel. The code-review audit dispatches React Patterns, TypeScript and Architecture, Translation, and react-doctor specialists from a single tool call. Extension files inject library-specific rules into the right specialist at runtime.',
+ name: 'Multi-Agent Collaboration',
},
];
const SUPPLEMENTARY: Pattern[] = [
{
- name: 'Routing',
body: 'Constraints route to context, not loaded globally. Path-scoped rules auto-load only when Claude is editing matching files. Conditional Bash hooks route commands to specific scripts based on shape.',
+ name: 'Routing',
},
{
- name: 'Resource-Aware Optimization',
body: 'Cost and quality discipline wired in. /audit-knowledge runs research on Opus with ultrathink and the mechanical apply step on Sonnet. The code-review audit declares model: sonnet for structured review, leaving Opus for harder reasoning.',
+ name: 'Resource-Aware Optimization',
},
{
- name: 'Planning',
body: 'Plans are durable artifacts requiring user approval. /orchestrate writes per-task docs, a task graph with phases, an execution playbook, and a kickoff prompt to .claude/plans/. The plan never executes until you say go.',
+ name: 'Planning',
},
{
- name: 'Session Isolation',
body: "Sub-agents run in fresh contexts so shared state can't corrupt their work. Each task doc is self-contained for a fresh-context sub-agent. /orchestrate offers a git-worktree branch for filesystem-level isolation.",
+ name: 'Session Isolation',
},
];
const ROUND_OUT: Pattern[] = [
{
- name: 'Tool Use',
body: 'A curated React-specific tool surface. ESLint with 20+ plugins, TypeScript, Vitest with React Testing Library, Playwright, Storybook with Chromatic, MSW, the gh CLI, react-doctor, the Obsidian wiki, and typescript-lsp.',
+ name: 'Tool Use',
},
{
- name: 'Parallelization',
body: 'Independent work runs concurrently. The audit dispatches its specialist subagents in a single tool-call message. The orchestrator runs per-phase sub-agents in parallel where dependencies allow.',
+ name: 'Parallelization',
},
{
- name: 'Guardrails & Safety',
body: "Defense in depth, layered from the filesystem up. Filesystem deny list keeps secrets out (.env, credentials, keys). Block hooks reject debt-accumulating patterns at the source. The audit's security dimension covers XSS, SSRF, IDOR, and dependency vulnerabilities.",
+ name: 'Guardrails & Safety',
},
{
- name: 'Human-in-the-Loop',
body: "Six structurally enforced checkpoints between Claude's intent and impact. Quality Gate, code-review audit, plan approval, phase gates, destructive-git hook, PR-merge reminder. The bypass paths are blocked at the hook layer.",
+ name: 'Human-in-the-Loop',
},
];
-type GroupProps = {
- label: string;
- items: Pattern[];
+type GroupProperties = {
accent: 'accent' | 'secondary' | 'warn';
+ items: Pattern[];
+ label: string;
};
-const NAME_COLOR: Record
= {
+const NAME_COLOR: Record = {
accent: 'text-accent',
secondary: 'text-secondary',
warn: 'text-warn',
};
-function PatternGroup({ label, items, accent }: GroupProps) {
+const PatternGroup = ({accent, items, label}: GroupProperties) => {
const nameColor = NAME_COLOR[accent];
+
return (
-
+
{label}
-
- {items.map(({ name, body }) => (
+
+ {items.map(({body, name}) => (
-
+
{name}
- {body}
+ {body}
))}
- The{' '}
-
- canonical taxonomy
- {' '}
- catalogs 29 agentic design patterns. GAIA implements{' '}
- 12 of those 29 structurally:
- wired in through hooks, agents, rules, commands, and wiki conventions, so each
- runs the same way every session, every engineer, every model variant. Not as
- emergent model behavior on top of a vanilla setup.
-
+const AgenticDesignDetail = () => (
+
+
+ The{' '}
+
+ canonical taxonomy
+ {' '}
+ catalogs 29 agentic design patterns. GAIA implements{' '}
+
+ 12 of those 29 structurally
+
+ : wired in through hooks, agents, rules, commands, and wiki conventions,
+ so each runs the same way every session, every engineer, every model
+ variant. Not as emergent model behavior on top of a vanilla setup.
+
-
-
- );
-}
+
+
+);
+
+export default AgenticDesignDetail;
diff --git a/src/sections/features/ClaudeMdDetail.tsx b/src/sections/features/ClaudeMdDetail.tsx
new file mode 100644
index 0000000..bbb8ba1
--- /dev/null
+++ b/src/sections/features/ClaudeMdDetail.tsx
@@ -0,0 +1,129 @@
+import {Section} from '@/components/Section';
+
+const KARPATHY = [
+ {
+ desc: 'Surface assumptions, push back on complexity, ask when unclear.',
+ name: 'Think Before Coding',
+ },
+ {
+ desc: 'Write the minimum code that solves the problem, no speculative abstractions.',
+ name: 'Simplicity First',
+ },
+ {
+ desc: 'Touch only what is needed; match existing style; leave unbroken things alone.',
+ name: 'Surgical Changes',
+ },
+ {
+ desc: 'Define verifiable success criteria before starting; loop until verified.',
+ name: 'Goal-Driven Execution',
+ },
+];
+
+const PRINCIPLES = [
+ {
+ desc: 'Vitest for units, Playwright for user flows, tests before code.',
+ name: 'Always Use TDD',
+ },
+ {
+ desc: 'Run the quality gate process; fix all warnings and errors before reporting done.',
+ name: 'Always Verify Your Work',
+ },
+];
+
+const BENEFITS = [
+ {
+ desc: 'Lazy-fetch only the pages Claude needs. Adding 20 more wiki pages does not bloat every session, since they are not loaded unless asked.',
+ name: 'Tokens saved',
+ },
+ {
+ desc: 'Domain isolation prevents unrelated information from leaking into the context window. Technical questions get technical answers only.',
+ name: 'Context stays focused',
+ },
+ {
+ desc: 'Whether you are building a 2-person startup or a 100-person team, the wiki-first discipline keeps sessions lean and predictable.',
+ name: 'The pattern scales',
+ },
+];
+
+const ClaudeMdDetail = () => (
+
+
+
+ A Karpathy-style CLAUDE.md is wiki-first, don’t-preload, lazy-fetch. It
+ tells Claude where to look, not to load everything upfront. See{' '}
+
+ Karpathy’s original
+ {' '}
+ for the philosophy.
+
+
+
+ GAIA ships with coding rules that only load when Claude is writing code.
+ The first four come from Karpathy’s CLAUDE.md:
+
+
+
+ {KARPATHY.map(({desc, name}) => (
+ -
+ •
+
+ {name} -
+ {desc}
+
+
+ ))}
+
+
+
GAIA adds two more principles on top of these:
+
+
+ {PRINCIPLES.map(({desc, name}) => (
+ -
+ •
+
+ {name} -
+ {desc}
+
+
+ ))}
+
+
+
+ GAIA’s variant also adds three wiki habits on top of Karpathy’s framing.{' '}
+ Domain isolation means technical work fetches only from{' '}
+
+ wiki/app/
+
+ , brand work from its own domain. wiki/hot.md auto-load{' '}
+ is a 200-word recent-context cache loaded at every session start to
+ surface work-in-progress. Memory discipline keeps
+ machine-local memory for personal preferences only. Durable knowledge
+ lives in the wiki or{' '}
+
+ .claude/rules/
+
+ .
+
+
+
Three concrete benefits
+
+
+ {BENEFITS.map(({desc, name}) => (
+ -
+ •
+
+ {name}. {desc}
+
+
+ ))}
+
+
+
+ With an Obsidian wiki, Claude understands what you are actually
+ building, not just the code in front of it. Product features, user
+ flows, design rationale, business decisions, architecture, and
+ dependencies all live as focused markdown pages committed to git, not
+ chat history, not machine-local memory.
+
+
+
+ GAIA ships with the{' '}
+
+ claude-obsidian
+ {' '}
+ integration wired up. The vault structure, the ingestion commands, and
+ the maintenance skills are configured before you write your first page.
+
+
+
+ On top of the integration, GAIA layers project-specific commands and
+ hooks that turn the wiki into a self-maintaining knowledge base.
+ Duplicates, conflicts, and stale information get pruned, so the vault
+ stays clean as the project grows.
+
+
+
+ Token costs do not balloon as the wiki gets richer. Claude only reads
+ the specific information a task needs, so a project with 1,000 pages of
+ context is no more expensive to work in than one with 10.
+
+
+
+ Why Obsidian? A local markdown vault means the
+ project’s knowledge persists, compounds, and stays yours, not held in a
+ vendor’s database or trapped in chat history.
+
+
+
+ Domain isolation is mandatory. Technical, branding, and
+ business knowledge are kept siloed, and Claude does not cross-load
+ between them unless a task genuinely spans more than one.
+
+
{component}
+ {name}
+
+);
+
+type GroupProperties = {
+ items: LogoEntry[];
+ label: string;
+};
+
+const LogoGroup = ({items, label}: GroupProperties) => (
+
+
+ {label}
+
+
+ {items.map((item) => (
+
+ ))}
+
+
+ 20+ ESLint plugins, four testing layers (unit, integration, E2E, visual)
+ with mocking, i18n, dark mode, forms with validation, and Storybook. All
+ pre-configured and documented for Claude.
+
+
+
+
+
+
+
+);
+
+export default Stack;
diff --git a/src/sections/features/TokenEconomics.tsx b/src/sections/features/TokenEconomics.tsx
new file mode 100644
index 0000000..09f6b76
--- /dev/null
+++ b/src/sections/features/TokenEconomics.tsx
@@ -0,0 +1,54 @@
+import {Section} from '@/components/Section';
+
+const POINTS = [
+ {
+ desc: 'Claude loads the ones that match what it’s editing, nothing else.',
+ name: 'Rules are scoped to activate only when needed',
+ },
+ {
+ desc: 'Project knowledge lives as focused, linked Markdown pages. Claude opens the one page it needs ("How does dark mode wire through?") instead of preloading the whole manual.',
+ name: 'Obsidian wiki, fetched on demand',
+ },
+ {
+ desc: 'Session hooks keep Obsidian’s workflow (ingest cadence, cache discipline, link hygiene) aligned with the project’s conventions.',
+ name: 'Wiki behavior tailored to GAIA',
+ },
+ {
+ desc: 'Sweeps memory, wiki, and autoloaded files for duplication, conflicts, and stale instructions before they start costing tokens.',
+ name: 'Periodic knowledge audit',
+ },
+ {
+ desc: '/handoff and /pickup replace re-briefing Claude from scratch at every session start.',
+ name: 'Session continuity',
+ },
+];
+
+const TokenEconomics = () => (
+
+
+
+ Context bloat isn’t just CLAUDE.md sprawl. Instructions get dropped into
+ global memory, forgotten, and accumulate into redundancies and
+ conflicts, an invisible cost that compounds every session. GAIA keeps
+ token usage minimal by design.
+
+
+
+ How GAIA keeps Claude token-efficient
+
+
+
+ {POINTS.map(({desc, name}) => (
+ -
+ •
+
+ {name}. {desc}
+
+
+ ))}
+
+
+
+ You can’t manage an engineer you can’t predict. Without enforceable
+ conventions, Claude reverts to its training distribution, an average of
+ every codebase on the internet, bad code and all. GAIA’s codebase is
+ what you actually want Claude matching. With GAIA, Claude writes code
+ that follows best practices on day one, and can’t ship code that
+ doesn’t.
+
+
+
+ How GAIA makes Claude trustworthy
+
+
+
+ {POINTS.map(({desc, name}) => (
+ -
+ •
+
+ {name}. {desc}
+
+
+ ))}
+
+
+
Two commands and you’re initialized.
+
+
+
+ npx create-gaia my-app
+
+
+
+ /init
+
+
+
+
+ The first command pulls the latest release and git-inits your project.
+ The second initializes GAIA’s Claude setup, including installing skills
+ and plugins. See the{' '}
+
+ commands section
+ {' '}
+ in the docs for more information.
+
+
+ GAIA wires agentic behavior into the project itself, not the prompt. The
+ four patterns below run the same way every session, every engineer, every
+ model variant.
+
+
+
+
}
+ iconColor="secondary"
+ title="Claude can't ship broken code"
+ >
+
+ Pre-tool-use hooks block destructive git, watch-mode tests,
+ force-pushes to main, and eslint-config edits before they happen.
+
+
+
+
}
+ iconColor="accent"
+ title="Ensure quality before merge"
+ >
+
+ The Quality Gate runs typecheck, lint, tests, and build on every
+ commit. The code-review audit tiers findings as Critical, Important,
+ and Suggestions, and blocks the merge until fixed.
+
+
+
+
}
+ iconColor="secondary"
+ title="Five tiers of memory"
+ >
+
+ Wiki, hot cache, session handoff, agent memory, user memory. Each tier
+ has a scope and a maintenance loop, so Claude stops relearning your
+ codebase every session.
+
+
+
+
}
+ iconColor="accent"
+ title="A specialist for every concern"
+ >
+
+ The audit dispatches React Patterns, TypeScript and Architecture,
+ Translation, and react-doctor specialists in parallel from a single
+ tool call.
+
+
+
+ GAIA wires in 12 of the 29 canonical agentic design patterns structurally.
+ See the full breakdown on the{' '}
+
+ features page
+
+ .
+
+
+);
+
+export default AgenticDesign;
diff --git a/src/sections/home/ClaudeMd.tsx b/src/sections/home/ClaudeMd.tsx
new file mode 100644
index 0000000..0ae3563
--- /dev/null
+++ b/src/sections/home/ClaudeMd.tsx
@@ -0,0 +1,181 @@
+import {twJoin} from 'tailwind-merge';
+import {Section, SectionHeading} from '@/components/Section';
+
+const ACTIVE_TIERS = [
+ {accent: true, caption: 'you invoke', eyebrow: 'SLASH', name: '/orchestrate'},
+ {caption: 'fires automatically', eyebrow: 'HOOK', name: 'pre-commit'},
+ {caption: 'gates every merge', eyebrow: 'AGENT', name: 'code-review-audit'},
+];
+
+const RULE_ROWS = [
+ {active: true, pattern: '**/*.tsx', rule: 'react-code'},
+ {active: true, pattern: '**/*.ts', rule: 'typescript'},
+ {pattern: '**/api/**', rule: 'api-service'},
+ {pattern: '**/*.test.tsx', rule: 'component-testing'},
+ {pattern: '**/*.stories.tsx', rule: 'storybook'},
+ {pattern: '**/i18n/**', rule: 'i18n'},
+];
+
+const ActiveTriptych = () => (
+
+ {ACTIVE_TIERS.map((t) => (
+
+
+
+ {t.eyebrow}
+
+
+ {t.caption}
+
+
+
+ {t.name}
+
+
+ ))}
+
+
+
+ .claude/rules/
+
+
+ on match
+
+
+
+ {RULE_ROWS.map((r) => (
+
+
+
+ {r.pattern}
+
+
+
→
+
+
+ {r.rule}
+
+
+
+ ))}
+
+
+
+
+ Claude Code, configured
+
+
+ Commands you invoke, hooks that fire, an agent that reviews. The
+ active layer of GAIA’s Claude Code integration.
+
+
+
+ /orchestrate plans complex
+ features through specialist subagents.{' '}
+ /handoff and{' '}
+ /pickup let you clear context
+ without losing state.
+
+
+
+ Hooks protect main, prevent technical debt, and keep commits clean.
+ The code-review-audit agent
+ gates every PR merge with security, performance, and architecture
+ checks.
+
+
+
+
+ Learn more →
+
+
+
+
+
+
+
+
+ Claude Code, calibrated
+
+
+ Project rules and skills load only when Claude is doing matching
+ work, so they never bloat the context window. The passive layer.
+
+
+
+ Rules guide coding practices, accessibility, testing, API patterns.{' '}
+
+ Karpathy’s
+ {' '}
+ coding principles are wired in.
+
+
+
+ Skills activate when needed: TypeScript naming, TDD discipline,
+ React patterns, Tailwind conventions.
+
+
+
+
+ Learn more →
+
+
+
+
+
+
+
+
+
+ How the major React starters stack up
+
+
+ GAIA’s stack is the most complete. Fewer gaps means fewer decisions
+ Claude has to invent on its own.
+
+
+
+
+
+ Every lint rule is a check Claude has to clear, and GAIA has more than
+ twice as many as any other starter, including 85 Stylelint rules none of
+ the others ship at all. The extras cover the patterns Claude drifts into
+ first: complexity creep, architectural shortcuts, mismatched filenames,
+ broken CSS.{' '}
+
+ In GAIA, the code Claude writes matches high standards because every
+ commit enforces them.
+
+
+
+
+
+ Order and focus
+
+
+ Only GAIA is built for Claude.
+
+
+ GAIA was strict long before Claude existed. That same discipline is
+ what keeps Claude’s code clean now. Claude thrives with enforced
+ standards, and GAIA’s were already battle-tested.
+
+
+
+
+ Ship features
+
+
+ Set the goal. Trust the diff.
+
+
+ You describe what you want. Claude works inside the guardrails. Code
+ review stops being a hunt for surprises, and you get back to
+ shipping.
+
+
+
+
+
+
+ The React workflow for Claude
+
+
+ Claude is raw power. GAIA is order and focus.
+
+
+ GAIA makes Claude trustworthy enough to own features end to end, and
+ disciplined enough to do it at scale.
+
+
+
+
+
A second brain for Claude
+
+ GAIA’s wiki saves Claude tokens. Architecture, flows, and decisions
+ live as committed markdown Claude reads on demand, so it never
+ re-infers them from source code.
+
+
+
+ Onboarding stops being a multi-week ramp. Context stops getting lost
+ between sessions.
+
+
+
+ The vault stays yours. Plain markdown in your repo, not a vendor’s
+ database, not chat history.
+
+
+
+
+ Learn more →
+
+
+
+
+
+
+
+
+
+
+
+
+ Two things break Claude on real projects: output you can’t trust, and
+ quality that drops as the project grows.{' '}
+ GAIA fixes both.
+
+
+
+
}
+ iconColor="secondary"
+ title="Trustworthy by default"
+ >
+
+ GAIA enforces high standards on every commit, so the code your team
+ merges is code you can trust.
+
+
+
+
}
+ iconColor="accent"
+ title="Disciplined at scale"
+ >
+
+ GAIA gives Claude only what each task needs, so quality and costs stay
+ predictable as your codebase grows.
+
+
+
npx create-gaia walks you
- through React Router, Next.js, Astro, and TanStack Start with a short Q&A that
- recommends the right foundation for the project you have in mind. No more spending a
- weekend comparing docs before you write your first component.
+
+ npx create-gaia
+ {' '}
+ walks you through React Router, Next.js, Astro, and TanStack Start
+ with a short Q&A that recommends the right foundation for the
+ project you have in mind. No more spending a weekend comparing docs
+ before you write your first component.
),
+ title: 'Pick your framework at create time',
},
{
- title: 'Choose component library and icons up front',
description:
'Get a project already wired to use them. The defaults match the app you plan to build, not a generic template you have to rip out.',
+ title: 'Choose component library and icons up front',
},
{
- title: 'Deployment whenever you are ready',
description:
'Wire it up during create or run a command later when you decide to go live. Pick from popular targets with the tradeoffs explained, or bring your own, and walk away with the build, environment variables, and CI/CD configured for you.',
+ title: 'Deployment whenever you are ready',
},
{
- title: 'Security and performance scanning on every PR',
description:
'Snyk runs against every change before it merges, catching vulnerabilities and performance regressions while they are still cheap to fix. Staying secure stops being a thing you have to remember.',
+ title: 'Security and performance scanning on every PR',
},
],
+ label: 'Planned',
},
{
+ color: 'var(--color-muted)',
id: 'vision',
- label: 'Vision',
- color: 'var(--color-fg-mute)',
items: [
{
- title: 'Claude as a true senior engineer',
description:
'Stop managing Claude line by line. Describe what you want, and it ships. Claude is raw power. GAIA is order and focus that makes it a senior engineer on every task, one who already knows your stack.',
+ title: 'Claude as a true senior engineer',
},
{
- title: 'Production-ready React for any skill level',
description:
'Whether you are a 20-year veteran or shipping your first app, what you build is production-grade. Vibe coders graduate to real apps. Teams stop relitigating style and convention. Clean, accessible, low-debt code is the path of least resistance.',
+ title: 'Production-ready React for any skill level',
},
{
- title: 'Secure and fast by default',
description:
'Agentic engineering ships code faster than any human can review at a glance. GAIA closes that gap. Vulnerabilities, performance regressions, and unsafe patterns are caught before they land, not after they hit production.',
+ title: 'Secure and fast by default',
},
{
- title: 'The default starting point for greenfield React',
description:
'The "what stack should I use" question that burns weeks at the start of every project is already answered. Skip the bikeshedding, the wiring, and the boilerplate, and start building the actual product the same day you start the repo.',
+ title: 'The default starting point for greenfield React',
},
{
- title: 'Zero context bloat at any scale',
description:
'The cost of working with Claude does not grow with the codebase. A massive monorepo stays as cheap and responsive as a fresh repo. Claude stays sharp no matter how big the project gets.',
+ title: 'Zero context bloat at any scale',
},
{
- title: 'A project that remembers itself',
description:
'Institutional knowledge survives turnover, time off, and time itself. New collaborators, human or AI, get up to speed by opening the project. Onboarding stops being a multi-week ramp.',
+ title: 'A project that remembers itself',
},
],
+ label: 'Vision',
},
];
-function StatusGroup({ group }: { group: Group }) {
- return (
-
-
-
- {group.items.map((item) => (
- -
-
- {item.title}
-
- {item.description}
-
- ))}
-
+const StatusGroup = ({group}: {group: Group}) => (
+
+
- );
-}
+
+ {group.items.map((item) => (
+ -
+
+ {item.title}
+
+ {item.description}
+
+ ))}
+
+
+);
-export default function Roadmap() {
- return (
-
-
-
- Roadmap
-
-
- Last updated: 2026-04-28
-
-
- Where GAIA stands today, and where it's going. A Claude-native React workflow, sharpening
- with every release into a leaner, more reliable way to ship production-quality apps.
-
-
- {GROUPS.map((group) => (
-
- ))}
-
+const Roadmap = () => (
+
+
+
+ Roadmap
+
+
Last updated: 2026-04-28
+
+ Where GAIA stands today, and where it’s going. A Claude-native React
+ workflow, sharpening with every release into a leaner, more reliable way
+ to ship production-quality apps.
+
+
+ {GROUPS.map((group) => (
+
+ ))}
-
- );
-}
+
+);
+
+export default Roadmap;
diff --git a/src/styles.css b/src/styles.css
index b535516..b7f4ebf 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,12 +1,12 @@
-@import "tailwindcss";
+@import 'tailwindcss';
@theme {
- --color-bg: #141413;
- --color-bg-elev: #1f1e1d;
- --color-bg-elev-2: #262624;
- --color-fg: #faf9f5;
- --color-fg-dim: #b0aea5;
- --color-fg-mute: #87867f;
+ --color-canvas: #141413;
+ --color-surface: #1f1e1d;
+ --color-surface-raised: #262624;
+ --color-ink: #faf9f5;
+ --color-ink-dim: #b0aea5;
+ --color-muted: #87867f;
--color-accent: #d97757;
--color-accent-2: #c96442;
--color-accent-soft: #efa58e;
@@ -16,19 +16,19 @@
--color-warn: #d9a857;
--color-warn-2: #b88a3f;
--color-warn-soft: #ecc781;
- --color-bg-tint: #181c1e;
- --color-border: #3d3d3a;
- --color-border-soft: #2e2e2b;
+ --color-tint: #181c1e;
+ --color-line: #3d3d3a;
+ --color-line-soft: #2e2e2b;
- --font-display: "Fraunces", Georgia, serif;
+ --font-display: 'Fraunces', Georgia, serif;
--font-body: ui-sans-serif, system-ui, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
html {
scroll-behavior: smooth;
- background-color: var(--color-bg);
- color: var(--color-fg);
+ background-color: var(--color-canvas);
+ color: var(--color-ink);
font-family: var(--font-body);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
@@ -36,14 +36,14 @@ html {
}
body {
- background-color: var(--color-bg);
- color: var(--color-fg);
+ background-color: var(--color-canvas);
+ color: var(--color-ink);
font-family: var(--font-body);
position: relative;
}
body::before {
- content: "";
+ content: '';
position: fixed;
inset: 0;
pointer-events: none;
@@ -81,15 +81,27 @@ samp {
}
@keyframes gaia-drift-a {
- 0% { transform: translate3d(0, 0, 0); }
- 50% { transform: translate3d(40px, -25px, 0); }
- 100% { transform: translate3d(0, 0, 0); }
+ 0% {
+ transform: translate3d(0, 0, 0);
+ }
+ 50% {
+ transform: translate3d(40px, -25px, 0);
+ }
+ 100% {
+ transform: translate3d(0, 0, 0);
+ }
}
@keyframes gaia-drift-b {
- 0% { transform: translate3d(0, 0, 0); }
- 50% { transform: translate3d(-35px, 30px, 0); }
- 100% { transform: translate3d(0, 0, 0); }
+ 0% {
+ transform: translate3d(0, 0, 0);
+ }
+ 50% {
+ transform: translate3d(-35px, 30px, 0);
+ }
+ 100% {
+ transform: translate3d(0, 0, 0);
+ }
}
.gaia-drift-orb-a {
@@ -108,3 +120,20 @@ samp {
animation: none;
}
}
+
+@keyframes stackrow-scroll {
+ from {
+ transform: translateX(0);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+}
+.stackrow-marquee-track {
+ animation: stackrow-scroll 40s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+ .stackrow-marquee-track {
+ animation: none;
+ }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 1ffef60..b3de6fd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
{
"files": [],
"references": [
- { "path": "./tsconfig.app.json" },
- { "path": "./tsconfig.node.json" }
+ {"path": "./tsconfig.app.json"},
+ {"path": "./tsconfig.node.json"}
]
}
diff --git a/vite.config.ts b/vite.config.ts
index b298f81..8da037c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,23 +1,23 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
-import { resolve } from 'node:path';
+import react from '@vitejs/plugin-react';
+import {defineConfig} from 'vite';
+import path from 'node:path';
export default defineConfig({
base: '/',
- plugins: [react(), tailwindcss()],
- resolve: { alias: { '@': '/src' } },
build: {
rollupOptions: {
input: {
- main: resolve(import.meta.dirname, 'index.html'),
- features: resolve(import.meta.dirname, 'features/index.html'),
- docs: resolve(import.meta.dirname, 'docs/index.html'),
- getStarted: resolve(import.meta.dirname, 'get-started/index.html'),
- roadmap: resolve(import.meta.dirname, 'roadmap/index.html'),
- about: resolve(import.meta.dirname, 'about/index.html'),
- consulting: resolve(import.meta.dirname, 'consulting/index.html'),
+ about: path.resolve(import.meta.dirname, 'about/index.html'),
+ consulting: path.resolve(import.meta.dirname, 'consulting/index.html'),
+ docs: path.resolve(import.meta.dirname, 'docs/index.html'),
+ features: path.resolve(import.meta.dirname, 'features/index.html'),
+ getStarted: path.resolve(import.meta.dirname, 'get-started/index.html'),
+ main: path.resolve(import.meta.dirname, 'index.html'),
+ roadmap: path.resolve(import.meta.dirname, 'roadmap/index.html'),
},
},
},
+ plugins: [react(), tailwindcss()],
+ resolve: {alias: {'@': '/src'}},
});