skills.rest
matteotitta
matteotittaCOMMUNITY
Explore all skills by this author →
Website𝕏@matteo_tittaGitHub

site-export-to-react

Migrate Webflow or Framer exports into a TanStack Start React codebase.

29|12|Updated Mar 30, 2026
Search Tags:#react#tanstack#migration#netlify#ssr#framer#webflow
One-click install
npx skills add https://github.com/matteotitta/genesys-skills --skill site-export-to-react
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: site-export-to-react
Source: https://github.com/matteotitta/genesys-skills/tree/main/skills/primitives/website/execution/site-export-to-react
Command: npx skills add https://github.com/matteotitta/genesys-skills --skill site-export-to-react

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the technical debt and lack of ownership associated with no-code platforms by migrating Webflow or Framer exports into a clean, code-owned TanStack Start React application.

Core Features & Use Cases

  • Pixel-Parity Migration: Preserves vendor CSS and class names to ensure the React output matches the original design exactly.
  • Storybook-First Architecture: Builds a maintainable component library as the source of truth for all UI elements.
  • Use Case: A founder needs to move their Webflow marketing site to a high-performance, SSR-enabled React stack on Netlify without losing the existing design fidelity or spending weeks on manual re-coding.

Quick Start

Invoke the site-export-to-react skill by providing the path to your Webflow static export folder or your Framer project ID to begin the migration process.

Frequently Asked Questions about site-export-to-react

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

FAQPage Schema
How do I migrate a Webflow export to a React codebase?▼

Migrate a Webflow export to React by providing the static export folder path to trigger automated asset extraction, CSS parity preservation, and TanStack Start codebase scaffolding.

Can I convert a Framer project to a production React app?▼

Convert a Framer project to a production React app by supplying the project ID to generate a code-owned, SSR-enabled TanStack Start application.

Does migrating no-code sites to React preserve the original CSS design?▼

Migrating no-code sites to React preserves vendor CSS and class names during conversion, ensuring pixel-parity so the React output matches your original Webflow or Framer design exactly.

What is the best way to build a Storybook component library from a Webflow export?▼

Building a Storybook component library from a Webflow export is best handled by migrating static files into a TanStack Start React app, which automatically scaffolds maintainable UI components as the source of truth.

Do I need a valid no-code source export to use a React migration tool?▼

Yes, you need a valid no-code source export like a Webflow static folder or Framer project ID to successfully extract assets and map CSS classes during the React migration process.

Related Skills

Explore More Software Engineering Skills→
cpfcoachingcpfcoaching

openai-netlify-deploy

Automate web project deployment to Netlify preview or production environments.

Community
Advanced
GoosLabGoosLab

moai-library-shadcn

Integrate shadcn/ui components into React applications with theming and accessibility.

Community
Advanced
tenequmtenequm
32

tanstack

Build type-safe React applications with TanStack Query, Router, and Start.

Community
Advanced
hasnahasna

codegen

Generate framework-specific code from json-render UI specification trees.

Official
Intermediate