skills.rest
tawf-labs
tawf-labsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-playbook

Guide Ethereum dApp frontend deployments with fork-mode validation and IPFS readiness.

1|Updated Jan 24, 2026
Search Tags:#next.js#production checklist#fork testing#ethereum dapp#ipfs deployment#ens setup#vercel configuration
One-click install
npx skills add https://github.com/tawf-labs/zkt-hackathon --skill frontend-playbook-tawf-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-playbook
Source: https://github.com/tawf-labs/zkt-hackathon/tree/main/.agents/skills/ethskills/frontend-playbook
Command: npx skills add https://github.com/tawf-labs/zkt-hackathon --skill frontend-playbook-tawf-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents common, production-breaking mistakes when deploying Ethereum dApp frontends by guiding you through the full build and release pipeline with correct fork-mode testing, static export rules for IPFS, and production-ready configuration.

Core Features & Use Cases

  • Fork-mode setup for realistic testing: Uses yarn fork --network <chain> to test against real protocol addresses and live state instead of an empty local chain, reducing “works on local” surprises.
  • IPFS deployment checklist that avoids 404s and stale releases: Ensures correct static export settings (like output: "export" and trailingSlash: true), clean rebuilds, correct OG metadata URLs, and verification of route outputs and CIDs.
  • Vercel + ENS production readiness: Covers Vercel monorepo configuration and the two-step ENS subdomain workflow that maps an ENS record to the deployed IPFS content hash.

Quick Start

Use the frontend-playbook to go from “local development” to a verified production IPFS + ENS deployment by forking, deploying on the fork, building with a production URL and localStorage polyfill, uploading to IPFS, and validating that generated routes and OG metadata are correct.

Frequently Asked Questions about frontend-playbook

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I deploy a Next.js dApp to IPFS without getting 404 errors?▼

Deploying a Next.js dApp to IPFS without 404 errors requires enabling `output: "export"` and `trailingSlash: true` for correct static routing. You must also perform clean rebuilds and verify generated route outputs alongside content CIDs post-deploy.

What's the best way to test Ethereum dApp frontends against live protocol state?▼

Testing Ethereum dApp frontends against live protocol state is best achieved using fork-mode validation. Running `yarn fork --network <chain>` tests against real protocol addresses and live state instead of an empty local chain, reducing local-only surprises.

How do I map an ENS subdomain to an IPFS content hash for my web3 application?▼

Mapping an ENS subdomain to an IPFS content hash involves a two-step ENS subdomain workflow. After uploading your build to IPFS, you configure the ENS record to point to the deployed IPFS content hash for web3 UX readiness.

Does IPFS static generation require localStorage compatibility for Next.js monorepos?▼

Yes, IPFS static generation for Next.js monorepos requires enforced localStorage compatibility during static generation. You must use a localStorage polyfill during the build step to prevent production-breaking errors when generating static pages.

Why does my Vercel monorepo configuration break when building an Ethereum dApp?▼

Vercel monorepo configurations break when building an Ethereum dApp due to incorrect static export settings or stale build artifacts. Fix this by ensuring clean rebuilds, verifying Vercel configuration, and checking post-deploy routes and metadata.

When do I need fork network configuration using chains.foundry for dApp testing?▼

You need fork network configuration using chains.foundry for dApp testing when you want realistic validation. It allows your local fork to interact with real protocol addresses and live state rather than an empty local chain.

Related Skills

Explore More Software Engineering Skills→
collat-labscollat-labs
1

frontend-playbook

Guide Ethereum dApp frontend teams through Next.js/Scaffold-ETH2 production deployment.

Official
Advanced
ZodomoZodomo
7

frontend-playbook

Build and deploy Ethereum dApp frontends with Next.js static export to IPFS or Vercel.

Community
Advanced
mashharukimashharuki

frontend-playbook

Automate Ethereum dApp frontend deployment to IPFS or Vercel with ENS content-hash updates.

Community
Advanced
ccashwellccashwell
120

ipfs-deployment

Automate dApp frontend deployment to IPFS with pinning and ENS content hashes.

Community
Intermediate