skills.rest
Zodomo
ZodomoCOMMUNITY
Explore all skills by this author →
𝕏@ZodomoGitHub

frontend-playbook

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

7|Updated Apr 4, 2026
Search Tags:#nextjs#ethereum#scaffold-eth#production checklist#ipfs deployment#fork mode#ens subdomain
One-click install
npx skills add https://github.com/Zodomo/DrandVerifier --skill frontend-playbook-zodomo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-playbook
Source: https://github.com/Zodomo/DrandVerifier/tree/main/.opencode/skills/ethskills/frontend-playbook
Command: npx skills add https://github.com/Zodomo/DrandVerifier --skill frontend-playbook-zodomo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the confusion and recurring breakages that happen when moving an Ethereum dApp frontend from local dev into production, especially around fork-mode correctness, static export, IPFS routing, and deployment configuration.

Core Features & Use Cases

  • Fork-mode setup that matches real chain conditions: Use a fork instead of an empty local chain so contracts, tokens, and protocol state behave like production.
  • IPFS-first production build workflow: Build, clean stale artifacts, verify route outputs, and upload a fresh static site to IPFS to avoid CID staleness.
  • Next.js static export pitfalls guide for dApps: Fix issues like missing localStorage APIs during prerender, ensure correct trailingSlash, and validate OG metadata and ENS content routing.
  • Vercel production deployment configuration: Configure a monorepo-friendly Vercel build without common root directory and install command mistakes.

Use case: You have an Ethereum frontend that works on your machine but returns 404s on IPFS after deploy; this Skill helps you rebuild correctly and verify that the exported routes, metadata, and domain/ENS links behave as users expect.

Quick Start

Follow the fork-mode setup steps, then run a clean IPFS production build and deployment checklist for your Next.js dApp in a Scaffold-ETH 2 style monorepo.

Frequently Asked Questions about frontend-playbook

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

FAQPage Schema
Why does my Next.js dApp return 404s after deploying to IPFS?▼

To deploy a Next.js dApp to IPFS, configure static export settings like trailingSlash, clean stale build artifacts to prevent CID staleness, and upload a fresh static site to verify correct route outputs and metadata behavior.

How do I test Ethereum dApp frontends with realistic onchain state?▼

Testing Ethereum dApp frontends with realistic onchain state requires fork-mode development. Forking a mainnet chain ensures contracts, tokens, and protocol state behave like production instead of using an empty local chain.

How do I fix missing localStorage errors during Next.js static export?▼

Missing localStorage errors during Next.js static export occur because prerendering happens in a Node environment lacking browser APIs. Correcting prerender behavior ensures stable static generation for your dApp without runtime crashes.

Does Vercel deployment support Scaffold-ETH 2 monorepos?▼

Vercel deployment supports Scaffold-ETH 2 monorepos by configuring the root directory and install commands correctly. Proper monorepo configuration prevents common build mistakes when shipping Ethereum dApp frontends to production.

Can I configure ENS subdomains for my IPFS deployed dApp?▼

You can configure ENS subdomains for IPFS deployed dApps by validating route outputs and OG image metadata readiness. Correct ENS content routing ensures public links behave as users expect after deployment.

Related Skills

Explore More Software Engineering Skills→
austintgriffithaustintgriffith
45

ethereum-wingman

Guide AI agents through Scaffold-ETH 2 project initialization and fork-mode testing.

Community
Advanced
mashharukimashharuki

frontend-playbook

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

Community
Advanced
RitenoobRitenoob

vercel-deployment

Manage Vercel deployments for Next.js apps in a monorepo.

Community
Intermediate
ccashwellccashwell
120

ipfs-deployment

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

Community
Intermediate