# Web3 Dapp Playbook

> Playbook for building full-stack Web3 applications (Next.js, Solidity, Kubernetes).

- Skill: `j4flmao/web3-dapp-playbook` (Agent Skill)
- Install (CLI): `npx skillmds@latest add j4flmao/web3-dapp-playbook`
- Raw SKILL.md: https://api.skillmd.com/api/skills/j4flmao/web3-dapp-playbook/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: j4flmao (https://skillmd.com/u/j4flmao)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/j4flmao/web3-dapp-playbook

---


# Web3 DApp Playbook

**MẠNH. CONCISE. AUTHORITATIVE.**

## 1. Architecture Map

```mermaid
%%{init: {"theme": "default", "flowchart": {"useMaxWidth": true}}}%%
flowchart TD
    A["Next.js Frontend"] -->|RPC Call| B["Smart Contract (Solidity)"]
    B -->|Emits Events| C["Indexer (The Graph/Squid)"]
    C -->|GraphQL Query| A
    D["Kubernetes"] -->|Deploys| A
    D -->|Deploys| C
```

## 2. Core Directives

1. **Frontend**: Next.js (App Router). Strict typing. Server components where possible.
2. **Contracts**: Solidity. Foundry for testing. CI/CD requires 100% test coverage.
3. **Deployment**: Kubernetes. Helm charts for deterministic state.
4. **Integration**: No direct DB writes from frontend for on-chain state. Always read from indexer.

## 3. Unified Scaffold (Makefile)

```makefile
.PHONY: build deploy-contracts deploy-k8s

# Build all layers
build:
	cd frontend && npm install && npm run build
	cd contracts && forge build
	cd indexer && npm install && npm run build

# Deploy contracts to testnet/mainnet
deploy-contracts:
	cd contracts && forge script script/Deploy.s.sol --rpc-url $(RPC_URL) --broadcast

# Deploy infrastructure via kubectl
deploy-k8s:
	kubectl apply -f k8s/namespace.yaml
	kubectl apply -f k8s/frontend-deployment.yaml
	kubectl apply -f k8s/indexer-deployment.yaml
	kubectl rollout status deployment/frontend -n web3
```

Execute with precision. No deviations.