A high-performance multi-agent orchestration playbook for building TypeScript, Next.js, and Convex applications without architectural chaos.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install web-architecture
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install web-architecture using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Web Architecture?
The Web Architecture skill provides a battle-tested framework for managing complex AI-driven development. Born from the lessons of high-volume agent deployments, this skill enforces a phased approach to building full-stack applications. It prioritizes schema stability and functional verification over simple code generation, ensuring that Openclaw Skills produce working products rather than just syntactically correct code.
By implementing strict sub-agent policies and a sequential-to-parallel workflow, developers can leverage multiple AI agents to scale productivity without running into common pitfalls like context fragmentation or duplicate definitions. This skill transforms individual agent outputs into a cohesive system by locking core architectural foundations before parallelizing feature work.
Web Architecture Use Cases
- Building complex full-stack applications using Next.js, TypeScript, and Convex.
- Orchestrating multiple AI agents to work on parallel features without conflicting code.
- Bootstrapping a project with a robust schema and type-safe contracts.
- Implementing isolated feature development for admin suites, marketing pages, or user portals.
- Performing rigorous end-to-end functional verification and integration testing.
How Web Architecture Works
- The workflow begins with a sequential Bootstrap phase where a single agent defines the project structure, database schema, and type contracts.
- Foundation documents are generated in parallel to establish technical requirements, compliance, and design principles.
- The backend is implemented, ideally by a single agent, to maintain consistent patterns and data integrity within Convex.
- A shared component library is built sequentially to prevent duplicate UI elements and ensure a unified design system.
- Parallel feature agents are spawned to build specific pages or modules within isolated directories, referencing locked schema and types.
- The final Integration phase involves build checks, route crawling, and comprehensive smoke tests to verify the full user flow.
Web Architecture Setup
Initialize your project by ensuring the Bootstrap phase is completed by a single agent before spawning parallel tasks. Use the following commands to initialize the environment:
npx convex dev --once
bun run build
You must create the essential configuration files including convex/schema.ts, CONTRACTS.md, and lib/types.ts to lock the architectural foundation for subsequent Openclaw Skills operations.
Web Architecture Data Schema & Taxonomy
The skill organizes data through a strict directory locking system and metadata files that serve as single sources of truth for the entire development lifecycle.
| Directory/File | Access Policy | Description |
|---|---|---|
convex/schema.ts |
Locked after Phase 0 | The definitive source for database tables and relations. |
CONTRACTS.md |
Locked after Phase 0 | Documentation of all API shapes and data contracts. |
lib/types.ts |
Locked after Phase 0 | Shared frontend TypeScript definitions. |
app/ |
Directory Isolation | Agents write only to their assigned feature or route directories. |
components/ui/ |
Sequential Owner | Centralized component library to ensure UI consistency. |
Web Architecture Advanced Features
- Sub-agent policy enforcement to prevent implementation timeouts and partial code commits.
- Functional verification protocols that go beyond "build passes" to check actual data flow and UI rendering.
- Directory-level access control and file locking for parallel feature agents.
- Integrated QA and end-to-end verification checklists for auth and CRUD flows.
- Standardized template support for tech requirements and coding standards to maintain Openclaw Skills quality.
SKILL.md
Loading
Related Openclaw Skills
Sr. Next.js & Clerk Auth Expert
A senior-level engineering skill for implementing flawless Clerk authentication and route protection in Next.js 15/16+ applications.
Senior Dev
A production-grade development workflow for AI agents that manages tasks, stacked PRs, and deployment verification.
Frontend Design
A high-performance skill for AI agents to generate production-ready, visually stunning frontend interfaces that break away from generic AI design patterns.
Delegation
An architecture-first development workflow that ensures every line of code justifies its existence within a system's strict design principles.
SwiftFindRefs
A specialized CLI tool that queries Xcode IndexStoreDB to find every Swift file referencing a specific symbol.
Repo Kanban PM System
A lightweight, decentralized product management framework designed to synchronize humans and AI agents within a code repository.
Featured*
