{
  "schemaVersion": "1.0",
  "item": {
    "slug": "web-architecture",
    "name": "Web Architecture",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/michaelmonetized/web-architecture",
    "canonicalUrl": "https://clawhub.ai/michaelmonetized/web-architecture",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/web-architecture",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-architecture",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "CODING-STANDARDS.md",
      "CONTRACTS-TEMPLATE.md",
      "SKILL.md",
      "TECH-REQ.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/web-architecture"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/web-architecture",
    "agentPageUrl": "https://openagent3.xyz/skills/web-architecture/agent",
    "manifestUrl": "https://openagent3.xyz/skills/web-architecture/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/web-architecture/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Web Architecture",
        "body": "Multi-agent development workflow for TypeScript/Next.js/Convex projects.\n\nBorn from: 29 agents, 50K lines, 212 errors, 1 hard lesson"
      },
      {
        "title": "No Timeouts",
        "body": "Sub-agents MUST run without timeout limits. A 10-minute timeout that cuts off an agent mid-implementation leaves broken, partial code. Let agents finish."
      },
      {
        "title": "Completion Means Working, Not Compiling",
        "body": "\"Build passes\" is necessary but NOT sufficient.\n\nBefore marking ANY phase complete, verify:\n\nFunctions actually work — Call them, verify data flows\nUI actually renders data — Not just loading spinners forever\nUser flows complete end-to-end — Click through, verify state changes persist\nError states are handled — Not just happy path"
      },
      {
        "title": "The Lesson",
        "body": "An agent produced 15K lines of \"working\" code that:\n\n✅ Compiled with zero TypeScript errors\n✅ Passed bun run build\n❌ Had ZERO actual functionality\n❌ All data was mocked or hardcoded\n❌ Every button was a no-op\n\nSelf-grade: 5/10 — A prototype, not a product."
      },
      {
        "title": "The Core Lesson",
        "body": "Single agent with full context > Many agents with partial context\n\n29 parallel agents wrote 50K lines of code that didn't compile. Why?\n\nNo schema coordination → duplicate table definitions\nNo type contracts → frontend expected user.role, backend returned profile.plan\nNo initialization → npx convex dev never ran, no generated types\nNo integration checkpoints → errors discovered only at the end\n\nThe fix: One agent with full context rewrote the entire Convex backend in 11 minutes."
      },
      {
        "title": "When to Use Multi-Agent",
        "body": "✅ Good for parallel work:\n\nMarketing pages (after design system exists)\nDocumentation files (independent)\nIsolated features with clear contracts\n\n❌ Bad for parallel work:\n\nSchema design (needs single owner)\nCore type definitions (must be shared)\nInterconnected backend functions\nComponent library (needs consistency)"
      },
      {
        "title": "Phase 0: Bootstrap (SEQUENTIAL — One Agent)",
        "body": "Must complete before spawning ANY other agents.\n\nInitialize project structure\nInitialize Convex: npx convex dev --once\nCreate complete schema.ts (ALL tables)\nRun npx convex dev to generate types\nCreate CONTRACTS.md (all data shapes)\nCreate shared types in lib/types.ts\nVerify: bun run build passes\n\nDeliverables:\n\nconvex/schema.ts — Complete, no TODOs\n convex/_generated/ — Types generated\n CONTRACTS.md — API shapes documented\n lib/types.ts — Shared frontend types\n bun run build — Passes with 0 errors"
      },
      {
        "title": "Phase 1: Foundation Documents (CAN BE PARALLEL)",
        "body": "Only spawn AFTER Phase 0 completes.\n\nAgentOutputDependenciesTech RequirementsTECH-REQ.mdNoneComplianceCOMPLIANCE.mdNoneDesign PrinciplesDESIGN.mdNoneCoding StandardsSTANDARDS.mdNone\n\nRule: These agents READ the schema. They do NOT modify it."
      },
      {
        "title": "Phase 2: Backend Implementation (SEQUENTIAL or CAREFUL PARALLEL)",
        "body": "Option A: Single Backend Agent (Recommended)\n\nOne agent implements all Convex functions\nConsistent patterns, no conflicts\n\nOption B: Parallel with File Locks\n\nEach agent owns specific files\nNO shared file writes\nMust reference CONTRACTS.md\n\nFunctional Requirements:\n\nTest CRUD operations — Create, read, update, delete\nVerify queries return data — Not empty arrays\nCheck mutations persist — Data survives refresh\nTest auth guards — Protected functions reject unauthorized\nVerify indexes work — Queries return correct filtered data"
      },
      {
        "title": "Phase 3: Component Library (SEQUENTIAL)",
        "body": "Single agent builds the component library.\n\nWhy? Components reference each other. Parallel work creates duplicate components with different APIs.\n\nFunctional Requirements:\n\nInteractive states work — Buttons trigger onClick\nForm components submit — Not just styled divs\nLoading/error states exist\nAccessibility basics — Labels, ARIA, keyboard nav\nConsistent API — All components follow same patterns"
      },
      {
        "title": "Phase 4: Features & Pages (CAN BE PARALLEL)",
        "body": "Now safe to parallelize because schema is locked, types exist, components exist.\n\nAgentScopeCan ModifyAdmin Suite/app/(admin)/**Own files onlySupport Portal/app/(support)/**Own files onlyMarketing Pages/app/(marketing)/**Own files onlyUser Flows/app/(app)/**Own files only\n\nRules:\n\nRead schema, types, contracts — don't modify\nUse existing components — don't recreate\nWrite to assigned directories only\n\nFunctional Requirements:\n\nPage loads without console errors\n Data appears (not mock/placeholder)\n Forms submit and persist data\n Can complete full user flow (create → view → edit → delete)\n Refresh preserves state\n\nRed flags (NOT complete):\n\n// TODO comments in business logic\nHardcoded arrays instead of useQuery\nonClick handlers that console.log instead of mutate\n\"Coming soon\" placeholders in core features"
      },
      {
        "title": "Phase 5: Integration & QA (SEQUENTIAL)",
        "body": "bun run build (must pass)\nnpx convex dev --once (must pass)\nGenerate sitemap from routes\nRoute crawl & 404 check\nBrowser smoke test (all routes return 200)\nEnd-to-end flow verification\n\nE2E Verification Checklist:\n\nAuth Flow:\n\nSign up creates user in database\n Sign in authenticates and redirects\n Protected routes redirect to sign-in\n\nCore CRUD Flow:\n\nCreate: Form submits → record appears\n Read: List shows real data\n Update: Edit form saves → changes persist\n Delete: Remove action → record gone"
      },
      {
        "title": "Directory Structure",
        "body": "project/\n├── convex/\n│   ├── schema.ts            # 🔒 Phase 0 only\n│   ├── _generated/          # 🔒 Auto-generated\n│   └── [domain].ts\n├── lib/\n│   ├── types.ts             # 🔒 Phase 0 only\n│   └── utils.ts\n├── components/\n│   ├── ui/                  # Component library agent\n│   └── [domain]/            # Feature agents\n├── app/\n│   ├── (admin)/             # Admin agent\n│   ├── (app)/               # App agent\n│   └── (marketing)/         # Marketing agents\n└── CONTRACTS.md             # 🔒 Phase 0 only\n\n🔒 = Locked after Phase 0. Agents read, don't modify."
      },
      {
        "title": "Agent Spawn Order",
        "body": "1. Bootstrap Agent (MUST COMPLETE FIRST)\n   └── schema.ts, types, contracts\n   \n2. Doc Agents (parallel)\n   ├── TECH-REQ.md\n   ├── COMPLIANCE.md\n   └── DESIGN.md\n   \n3. Backend Agent (single)\n   └── All convex/*.ts functions\n   \n4. Component Agent (single)\n   └── All components/ui/*\n   \n5. Feature Agents (parallel, isolated directories)\n   ├── Admin Suite\n   ├── Support Portal\n   ├── Marketing Pages\n   └── User Flows\n   \n6. Integration Agent (single)\n   └── Final build, fixes, QA"
      },
      {
        "title": "Anti-Patterns",
        "body": "❌ Spawn all agents at once — No coordination, duplicate work\n\n❌ Let agents invent types — Use CONTRACTS.md, not imagination\n\n❌ Skip Phase 0 — \"We'll figure out the schema later\" = disaster\n\n❌ Parallel schema writes — One owner only\n\n❌ Frontend before backend types — Generates type mismatches\n\n❌ No build checkpoints — Errors compound"
      },
      {
        "title": "Related Files",
        "body": "TECH-REQ.md — Full stack specification\nCODING-STANDARDS.md — TypeScript/React/Convex patterns\nCONTRACTS-TEMPLATE.md — API contracts template"
      }
    ],
    "body": "Web Architecture\n\nMulti-agent development workflow for TypeScript/Next.js/Convex projects.\n\nBorn from: 29 agents, 50K lines, 212 errors, 1 hard lesson\n\n⚠️ SUB-AGENT POLICY (READ FIRST)\nNo Timeouts\n\nSub-agents MUST run without timeout limits. A 10-minute timeout that cuts off an agent mid-implementation leaves broken, partial code. Let agents finish.\n\nCompletion Means Working, Not Compiling\n\n\"Build passes\" is necessary but NOT sufficient.\n\nBefore marking ANY phase complete, verify:\n\nFunctions actually work — Call them, verify data flows\nUI actually renders data — Not just loading spinners forever\nUser flows complete end-to-end — Click through, verify state changes persist\nError states are handled — Not just happy path\nThe Lesson\n\nAn agent produced 15K lines of \"working\" code that:\n\n✅ Compiled with zero TypeScript errors\n✅ Passed bun run build\n❌ Had ZERO actual functionality\n❌ All data was mocked or hardcoded\n❌ Every button was a no-op\n\nSelf-grade: 5/10 — A prototype, not a product.\n\nThe Core Lesson\n\nSingle agent with full context > Many agents with partial context\n\n29 parallel agents wrote 50K lines of code that didn't compile. Why?\n\nNo schema coordination → duplicate table definitions\nNo type contracts → frontend expected user.role, backend returned profile.plan\nNo initialization → npx convex dev never ran, no generated types\nNo integration checkpoints → errors discovered only at the end\n\nThe fix: One agent with full context rewrote the entire Convex backend in 11 minutes.\n\nWhen to Use Multi-Agent\n\n✅ Good for parallel work:\n\nMarketing pages (after design system exists)\nDocumentation files (independent)\nIsolated features with clear contracts\n\n❌ Bad for parallel work:\n\nSchema design (needs single owner)\nCore type definitions (must be shared)\nInterconnected backend functions\nComponent library (needs consistency)\nThe Workflow\nPhase 0: Bootstrap (SEQUENTIAL — One Agent)\n\nMust complete before spawning ANY other agents.\n\nInitialize project structure\nInitialize Convex: npx convex dev --once\nCreate complete schema.ts (ALL tables)\nRun npx convex dev to generate types\nCreate CONTRACTS.md (all data shapes)\nCreate shared types in lib/types.ts\nVerify: bun run build passes\n\nDeliverables:\n\n convex/schema.ts — Complete, no TODOs\n convex/_generated/ — Types generated\n CONTRACTS.md — API shapes documented\n lib/types.ts — Shared frontend types\n bun run build — Passes with 0 errors\nPhase 1: Foundation Documents (CAN BE PARALLEL)\n\nOnly spawn AFTER Phase 0 completes.\n\nAgent\tOutput\tDependencies\nTech Requirements\tTECH-REQ.md\tNone\nCompliance\tCOMPLIANCE.md\tNone\nDesign Principles\tDESIGN.md\tNone\nCoding Standards\tSTANDARDS.md\tNone\n\nRule: These agents READ the schema. They do NOT modify it.\n\nPhase 2: Backend Implementation (SEQUENTIAL or CAREFUL PARALLEL)\n\nOption A: Single Backend Agent (Recommended)\n\nOne agent implements all Convex functions\nConsistent patterns, no conflicts\n\nOption B: Parallel with File Locks\n\nEach agent owns specific files\nNO shared file writes\nMust reference CONTRACTS.md\n\nFunctional Requirements:\n\nTest CRUD operations — Create, read, update, delete\nVerify queries return data — Not empty arrays\nCheck mutations persist — Data survives refresh\nTest auth guards — Protected functions reject unauthorized\nVerify indexes work — Queries return correct filtered data\nPhase 3: Component Library (SEQUENTIAL)\n\nSingle agent builds the component library.\n\nWhy? Components reference each other. Parallel work creates duplicate components with different APIs.\n\nFunctional Requirements:\n\nInteractive states work — Buttons trigger onClick\nForm components submit — Not just styled divs\nLoading/error states exist\nAccessibility basics — Labels, ARIA, keyboard nav\nConsistent API — All components follow same patterns\nPhase 4: Features & Pages (CAN BE PARALLEL)\n\nNow safe to parallelize because schema is locked, types exist, components exist.\n\nAgent\tScope\tCan Modify\nAdmin Suite\t/app/(admin)/**\tOwn files only\nSupport Portal\t/app/(support)/**\tOwn files only\nMarketing Pages\t/app/(marketing)/**\tOwn files only\nUser Flows\t/app/(app)/**\tOwn files only\n\nRules:\n\nRead schema, types, contracts — don't modify\nUse existing components — don't recreate\nWrite to assigned directories only\n\nFunctional Requirements:\n\n Page loads without console errors\n Data appears (not mock/placeholder)\n Forms submit and persist data\n Can complete full user flow (create → view → edit → delete)\n Refresh preserves state\n\nRed flags (NOT complete):\n\n// TODO comments in business logic\nHardcoded arrays instead of useQuery\nonClick handlers that console.log instead of mutate\n\"Coming soon\" placeholders in core features\nPhase 5: Integration & QA (SEQUENTIAL)\nbun run build (must pass)\nnpx convex dev --once (must pass)\nGenerate sitemap from routes\nRoute crawl & 404 check\nBrowser smoke test (all routes return 200)\nEnd-to-end flow verification\n\nE2E Verification Checklist:\n\nAuth Flow:\n\n Sign up creates user in database\n Sign in authenticates and redirects\n Protected routes redirect to sign-in\n\nCore CRUD Flow:\n\n Create: Form submits → record appears\n Read: List shows real data\n Update: Edit form saves → changes persist\n Delete: Remove action → record gone\nDirectory Structure\nproject/\n├── convex/\n│   ├── schema.ts            # 🔒 Phase 0 only\n│   ├── _generated/          # 🔒 Auto-generated\n│   └── [domain].ts\n├── lib/\n│   ├── types.ts             # 🔒 Phase 0 only\n│   └── utils.ts\n├── components/\n│   ├── ui/                  # Component library agent\n│   └── [domain]/            # Feature agents\n├── app/\n│   ├── (admin)/             # Admin agent\n│   ├── (app)/               # App agent\n│   └── (marketing)/         # Marketing agents\n└── CONTRACTS.md             # 🔒 Phase 0 only\n\n\n🔒 = Locked after Phase 0. Agents read, don't modify.\n\nAgent Spawn Order\n1. Bootstrap Agent (MUST COMPLETE FIRST)\n   └── schema.ts, types, contracts\n   \n2. Doc Agents (parallel)\n   ├── TECH-REQ.md\n   ├── COMPLIANCE.md\n   └── DESIGN.md\n   \n3. Backend Agent (single)\n   └── All convex/*.ts functions\n   \n4. Component Agent (single)\n   └── All components/ui/*\n   \n5. Feature Agents (parallel, isolated directories)\n   ├── Admin Suite\n   ├── Support Portal\n   ├── Marketing Pages\n   └── User Flows\n   \n6. Integration Agent (single)\n   └── Final build, fixes, QA\n\nAnti-Patterns\n\n❌ Spawn all agents at once — No coordination, duplicate work\n\n❌ Let agents invent types — Use CONTRACTS.md, not imagination\n\n❌ Skip Phase 0 — \"We'll figure out the schema later\" = disaster\n\n❌ Parallel schema writes — One owner only\n\n❌ Frontend before backend types — Generates type mismatches\n\n❌ No build checkpoints — Errors compound\n\nRelated Files\nTECH-REQ.md — Full stack specification\nCODING-STANDARDS.md — TypeScript/React/Convex patterns\nCONTRACTS-TEMPLATE.md — API contracts template"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/michaelmonetized/web-architecture",
    "publisherUrl": "https://clawhub.ai/michaelmonetized/web-architecture",
    "owner": "michaelmonetized",
    "version": "0.1.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/web-architecture",
    "downloadUrl": "https://openagent3.xyz/downloads/web-architecture",
    "agentUrl": "https://openagent3.xyz/skills/web-architecture/agent",
    "manifestUrl": "https://openagent3.xyz/skills/web-architecture/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/web-architecture/agent.md"
  }
}