# Send Web Architecture to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - 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. ## Suggested prompts ### New install ```text 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. ``` ### Upgrade existing ```text 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. ``` ## Machine-readable fields ```json { "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": { "downloadUrl": "/downloads/web-architecture", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-architecture", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "CODING-STANDARDS.md", "CONTRACTS-TEMPLATE.md", "SKILL.md", "TECH-REQ.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "web-architecture", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-04T11:41:40.177Z", "expiresAt": "2026-05-11T11:41:40.177Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-architecture", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=web-architecture", "contentDisposition": "attachment; filename=\"web-architecture-0.1.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "web-architecture" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "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." ] } }, "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" } } ``` ## Documentation ### Web Architecture Multi-agent development workflow for TypeScript/Next.js/Convex projects. Born from: 29 agents, 50K lines, 212 errors, 1 hard lesson ### No Timeouts 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. ### Completion Means Working, Not Compiling "Build passes" is necessary but NOT sufficient. Before marking ANY phase complete, verify: Functions actually work — Call them, verify data flows UI actually renders data — Not just loading spinners forever User flows complete end-to-end — Click through, verify state changes persist Error states are handled — Not just happy path ### The Lesson An agent produced 15K lines of "working" code that: ✅ Compiled with zero TypeScript errors ✅ Passed bun run build ❌ Had ZERO actual functionality ❌ All data was mocked or hardcoded ❌ Every button was a no-op Self-grade: 5/10 — A prototype, not a product. ### The Core Lesson Single agent with full context > Many agents with partial context 29 parallel agents wrote 50K lines of code that didn't compile. Why? No schema coordination → duplicate table definitions No type contracts → frontend expected user.role, backend returned profile.plan No initialization → npx convex dev never ran, no generated types No integration checkpoints → errors discovered only at the end The fix: One agent with full context rewrote the entire Convex backend in 11 minutes. ### When to Use Multi-Agent ✅ Good for parallel work: Marketing pages (after design system exists) Documentation files (independent) Isolated features with clear contracts ❌ Bad for parallel work: Schema design (needs single owner) Core type definitions (must be shared) Interconnected backend functions Component library (needs consistency) ### Phase 0: Bootstrap (SEQUENTIAL — One Agent) Must complete before spawning ANY other agents. Initialize project structure Initialize Convex: npx convex dev --once Create complete schema.ts (ALL tables) Run npx convex dev to generate types Create CONTRACTS.md (all data shapes) Create shared types in lib/types.ts Verify: bun run build passes Deliverables: convex/schema.ts — Complete, no TODOs convex/_generated/ — Types generated CONTRACTS.md — API shapes documented lib/types.ts — Shared frontend types bun run build — Passes with 0 errors ### Phase 1: Foundation Documents (CAN BE PARALLEL) Only spawn AFTER Phase 0 completes. AgentOutputDependenciesTech RequirementsTECH-REQ.mdNoneComplianceCOMPLIANCE.mdNoneDesign PrinciplesDESIGN.mdNoneCoding StandardsSTANDARDS.mdNone Rule: These agents READ the schema. They do NOT modify it. ### Phase 2: Backend Implementation (SEQUENTIAL or CAREFUL PARALLEL) Option A: Single Backend Agent (Recommended) One agent implements all Convex functions Consistent patterns, no conflicts Option B: Parallel with File Locks Each agent owns specific files NO shared file writes Must reference CONTRACTS.md Functional Requirements: Test CRUD operations — Create, read, update, delete Verify queries return data — Not empty arrays Check mutations persist — Data survives refresh Test auth guards — Protected functions reject unauthorized Verify indexes work — Queries return correct filtered data ### Phase 3: Component Library (SEQUENTIAL) Single agent builds the component library. Why? Components reference each other. Parallel work creates duplicate components with different APIs. Functional Requirements: Interactive states work — Buttons trigger onClick Form components submit — Not just styled divs Loading/error states exist Accessibility basics — Labels, ARIA, keyboard nav Consistent API — All components follow same patterns ### Phase 4: Features & Pages (CAN BE PARALLEL) Now safe to parallelize because schema is locked, types exist, components exist. AgentScopeCan 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 Rules: Read schema, types, contracts — don't modify Use existing components — don't recreate Write to assigned directories only Functional Requirements: Page loads without console errors Data appears (not mock/placeholder) Forms submit and persist data Can complete full user flow (create → view → edit → delete) Refresh preserves state Red flags (NOT complete): // TODO comments in business logic Hardcoded arrays instead of useQuery onClick handlers that console.log instead of mutate "Coming soon" placeholders in core features ### Phase 5: Integration & QA (SEQUENTIAL) bun run build (must pass) npx convex dev --once (must pass) Generate sitemap from routes Route crawl & 404 check Browser smoke test (all routes return 200) End-to-end flow verification E2E Verification Checklist: Auth Flow: Sign up creates user in database Sign in authenticates and redirects Protected routes redirect to sign-in Core CRUD Flow: Create: Form submits → record appears Read: List shows real data Update: Edit form saves → changes persist Delete: Remove action → record gone ### Directory Structure project/ ├── convex/ │ ├── schema.ts # 🔒 Phase 0 only │ ├── _generated/ # 🔒 Auto-generated │ └── [domain].ts ├── lib/ │ ├── types.ts # 🔒 Phase 0 only │ └── utils.ts ├── components/ │ ├── ui/ # Component library agent │ └── [domain]/ # Feature agents ├── app/ │ ├── (admin)/ # Admin agent │ ├── (app)/ # App agent │ └── (marketing)/ # Marketing agents └── CONTRACTS.md # 🔒 Phase 0 only 🔒 = Locked after Phase 0. Agents read, don't modify. ### Agent Spawn Order 1. Bootstrap Agent (MUST COMPLETE FIRST) └── schema.ts, types, contracts 2. Doc Agents (parallel) ├── TECH-REQ.md ├── COMPLIANCE.md └── DESIGN.md 3. Backend Agent (single) └── All convex/*.ts functions 4. Component Agent (single) └── All components/ui/* 5. Feature Agents (parallel, isolated directories) ├── Admin Suite ├── Support Portal ├── Marketing Pages └── User Flows 6. Integration Agent (single) └── Final build, fixes, QA ### Anti-Patterns ❌ Spawn all agents at once — No coordination, duplicate work ❌ Let agents invent types — Use CONTRACTS.md, not imagination ❌ Skip Phase 0 — "We'll figure out the schema later" = disaster ❌ Parallel schema writes — One owner only ❌ Frontend before backend types — Generates type mismatches ❌ No build checkpoints — Errors compound ### Related Files TECH-REQ.md — Full stack specification CODING-STANDARDS.md — TypeScript/React/Convex patterns CONTRACTS-TEMPLATE.md — API contracts template ## Trust - Source: tencent - Verification: Indexed source record - Publisher: michaelmonetized - Version: 0.1.0 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-05-04T11:41:40.177Z - Expires at: 2026-05-11T11:41:40.177Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/web-architecture) - [Send to Agent page](https://openagent3.xyz/skills/web-architecture/agent) - [JSON manifest](https://openagent3.xyz/skills/web-architecture/agent.json) - [Markdown brief](https://openagent3.xyz/skills/web-architecture/agent.md) - [Download page](https://openagent3.xyz/downloads/web-architecture)