skills.rest
m-faran
m-faranCOMMUNITY
Explore all skills by this author →
GitHub

frontend-playbook

Deploys Ethereum dApp frontends to IPFS, Vercel, and ENS with fork-mode testing.

Updated Sep 9, 2026
Search Tags:#deployment#vercel#ethereum#dapp#ens#scaffold-eth#ipfs
One-click install
npx skills add https://github.com/m-faran/genie-markets --skill frontend-playbook-m-faran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-playbook
Source: https://github.com/m-faran/genie-markets/tree/main/.agent/skills/ethskills/frontend-playbook
Command: npx skills add https://github.com/m-faran/genie-markets --skill frontend-playbook-m-faran

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Deploying an Ethereum dApp frontend involves many failure-prone steps: fork-mode chain ID mismatches, broken IPFS routes, stale builds, Vercel monorepo misconfiguration, and ENS content hash setup. This Skill provides the complete build-to-production pipeline so nothing gets missed. ## Core Features & Use Cases - Fork Mode Setup: Configures Scaffold-ETH 2 projects to fork real mainnets (e.g., Base) with correct chain ID 31337 targeting and block mining enabled for time-dependent contract logic. - IPFS Deployment: Handles static export builds with trailingSlash routing, Node 25+ localStorage polyfills, stale build detection, and CID verification. - Vercel & ENS Configuration: Sets monorepo root directory and install commands for Vercel, and walks through ENS subdomain creation plus IPFS content hash transactions. - Use Case: After finishing a Scaffold-ETH 2 prediction market dApp, use this Skill to run the full production checklist: clean build, IPFS upload, ENS subdomain pointing, and route/OG metadata verification. ## Quick Start Ask the AI to deploy your Scaffold-ETH 2 dApp to production on IPFS with an ENS subdomain using the frontend playbook.

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 Scaffold-ETH 2 dApp to IPFS?▼

Run a clean static export build with NEXT_PUBLIC_IPFS_BUILD=true, output export, and trailingSlash true in next.config, then upload the out directory with yarn bgipfs upload. Verify each route has an index.html and that the CID changed from the previous deploy.

Should I use yarn chain or yarn fork for local Ethereum development?▼

Use yarn fork --network base instead of yarn chain. Fork mode gives you a local copy of real mainnet state with protocols like Uniswap and Aave plus real token balances, while yarn chain starts an empty chain with nothing deployed.

Why do my IPFS routes return 404 after deployment?▼

IPFS gateways resolve directories to index.html but not bare filenames, so without trailingSlash: true in next.config, routes like /debug return 404. Enable trailingSlash so Next.js generates debug/index.html instead of debug.html.

How do I fix localStorage.getItem is not a function in Next.js builds?▼

Node 25+ ships a built-in localStorage missing standard WebStorage methods, breaking prerendering. Create a polyfill-localstorage.cjs file and inject it with NODE_OPTIONS="--require ./polyfill-localstorage.cjs" so it loads in every build worker process.

How do I point an ENS subdomain at an IPFS deployment?▼

Create the subdomain in the ENS app under your name's Subnames tab, then edit its records and set the Content Hash field to ipfs://YOUR_CID. Verify resolution with cast contenthash calls and check the .eth.link gateway responds with 200.

Why does Vercel fail to build my Scaffold-ETH 2 monorepo?▼

Vercel needs the Root Directory set to packages/nextjs and the Install Command set to cd ../.. && yarn install for the monorepo layout. Large projects may also hit the 8GB memory limit, in which case use IPFS deployment or vercel --prebuilt instead.

Related Skills

Explore More Software Engineering Skills→
involvexinvolvex

erc-20

Add an ERC-20 token contract with deployment scripts and a frontend UI to Scaffold-ETH 2 projects.

Community
Intermediate
tawf-labstawf-labs
1

indexing

Select indexing strategies for querying historical Ethereum event data.

Official
Intermediate
mashharukimashharuki

testing

Validate smart contracts with Foundry fuzz, fork, and invariant testing.

Community
Advanced
ccashwellccashwell
120

ipfs-deployment

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

Community
Intermediate