skills.rest
TylerSimons1127
TylerSimons1127COMMUNITY
Explore all skills by this author →
GitHub

reverse-nextjs-to-editable

Clone a live Next.js site into an editable local App Router project.

Updated Aug 21, 2026
Search Tags:#Vercel#Next.js#web scraping#tailwind#reverse engineering#React Server Components#clone website
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill reverse-nextjs-to-editable-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reverse-nextjs-to-editable
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/software-development/reverse-nextjs-to-editable
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill reverse-nextjs-to-editable-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating a live Next.js site as editable source code is error-prone: RSC payloads are double-encoded, fixture data gets mistranscribed, and dev-mode builds hide rendering differences. This Skill provides a deterministic workflow to reverse-engineer a deployed Next.js app into a 1:1 local project you can run and modify. ## Core Features & Use Cases - Stack Detection: Identify Next.js App Router, Turbopack builds, and Tailwind v3 vs v4 from raw HTML via curl. - RSC Payload Extraction: Decode self.__next_f.push double-encoded UTF-8 JSON to recover the real component tree, props, and inline data. - 1:1 Verification: Compare production-build output token-by-token against the live site, with fixes for common traps like escaped $$, pluralization, and stale Windows next-server processes. - Use Case: A user pastes a Vercel URL and wants the code locally. The Skill extracts the RSC tree and assets, generates a Next.js 15 + React 19 + Tailwind v4 project with typed data in lib/data.ts, and verifies every route matches the live site. ## Quick Start Clone this live Next.js site at the given Vercel URL into an editable local project that matches it exactly.

Frequently Asked Questions about reverse-nextjs-to-editable

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

FAQPage Schema
How do I clone a live Next.js site into editable code?▼

Curl the raw HTML, extract the self.__next_f.push RSC payload to recover the component tree and data, download the JS/CSS chunks, then rebuild a Next.js App Router project with typed data in lib/data.ts. Verify with npm run start against the live routes.

How to extract the RSC payload from Next.js HTML?▼

Scan each self.__next_f.push([1, occurrence for the string literal whose closing quote is followed by ]), then concatenate the bodies. Avoid greedy regex, and only reverse double-encoded UTF-8 with latin1-to-utf-8 decoding if characters appear mojibake.

How can I tell if a site uses Tailwind v4 or v3?▼

Check the compiled CSS: Tailwind v4 shows @layer properties with --tw-* variables and no @tailwind directive, while v3 contains @tailwind base and related directives. The HTML also reveals Next.js App Router via /_next/static/chunks/ paths.

Why does my cloned Next.js site not match the live version?▼

Common causes include verifying against npm run dev instead of production npm run start, escaped $$ rendering as single $, literal pluralization like lead s, and stale next-server processes on Windows holding port 3000 after killing the parent npm process.

Should I hand-write fixture data when recreating a Next.js app?▼

No. Hand-transcribing records flips buckets and breaks computed statistics. Regenerate lib/data.ts programmatically from the extracted JSON payload, keep field names identical to the RSC data, and re-verify derived counts against the live text.

Related Skills

Explore More Software Engineering Skills→
EmasoftEmasoft

amvcp-share-pages

Deploy a self-contained HTML page to Vercel and return a public live URL.

Community
Intermediate
Eng0AIEng0AI
15

nextjs-supabase

Scaffold a Next.js and Supabase project with environment configuration.

Official
Intermediate
idealjsidealjs
5

create-component-nextjs-page

Create Next.js MDX/TSX component demo pages with variants and visual regression tests.

Official
Intermediate
langgeniuslanggenius

web-clone

Clone websites by mirroring real source code and verifying against browser evidence.

Official
Advanced