Webflow to React

Converts a Webflow HTML export into a maintainable React app with TanStack Start (SSR, TanStack Router conventions) using an idiomatic React-first approach. Sets up Storybook early, builds UI primitive + page-section SOT components with variant stories before composing routes. Use when the user has a Webflow export (index.html + css/ + js/ + images/ + fonts/) and wants to migrate to React, when they mention TanStack Start, TanStack Router, SSR, Storybook, SOT components, "convert Webflow to React", or when a repo already contains a Webflow export at its root. Works in Cursor, Claude Code, GitH

28 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add dmenchaca/webflow-to-react --skill webflow-to-react

Manual install

git clone --depth 1 https://github.com/dmenchaca/webflow-to-react.git /tmp/webflow-to-react
mkdir -p ~/.claude/skills
cp -r /tmp/webflow-to-react/. ~/.claude/skills/webflow-to-react

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Webflow → TanStack Start (React) migration (idiomatic-first)

Turns a Webflow HTML export into a **TanStack Start** app (SSR + file-based routing via TanStack Router) using an **idiomatic React-first** strategy.

**Default posture (mission critical):**

- Prefer **JSX components** over importing/exporting raw HTML.
- Prefer Webflow export as **reference + CSS/class heritage**, not the page runtime.
- Avoid `dangerouslySetInnerHTML` for page layout. Only allow it for **small, sanitized, content-shaped** fragments (e.g. CMS body HTML) when explicitly chosen.
- Avoid re-executing `<script>` tags from injected HTML. Re-implement behavior as hooks/components instead.

> If you want “pixel parity fast” by embedding exported Webflow body HTML and replaying scripts, this skill should not do that unless the user explicitly opts into a parity-first mode.

### Coding agents and IDEs

This skill is **not tied to a single product**. The workflow, `playbook.md`, `gotchas.md`, and `templates/` apply in **Cursor, Claude Code, GitHub Copilot, Gemini, Codex**, and similar tools, as long as the assistant can read this repo (or a copy of `SKILL.md` plus linked files). Install the skill where your environment expects skills or long-lived instructions (for example user or project skill directories per that tool’s docs).

Read the full skill on GitHub

Details

Skill name: webflow-to-react
Repository: dmenchaca/webflow-to-react
License: MIT
Repo updated: 25 June 2026

FAQ

What does the Webflow to React skill do?

How do I install the Webflow to React skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add dmenchaca/webflow-to-react --skill webflow-to-react. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Webflow to React popular?

It lives in dmenchaca/webflow-to-react, which has 28 GitHub stars and 0 forks.

Related skills

UX Audit

EliaAlberti/ux-audit-skill

Run a heuristic UX audit of a customer journey from screenshots. Use when the user asks for a UX audit, heuristic evaluation, usability review, design teardown, or expert review of screens, mockups, or a flow, whether your own product or a competitor's. Evaluates against named frameworks (Nielsen, Shneiderman, Gerhardt-Powals, Bastien & Scapin, Hick/Fitts/Miller/Jakob/Peak-End, Fogg, Cialdini, Gestalt, Norman, Tognazzini, WCAG 2.1, content design heuristics) and produces severity-rated findings with heuristic citations, annotated screenshots, and a structured markdown report. Do not use for ge

Frontend & Design

Theme Factory Addon

patrickkrebs/theme-factory-addon

Expansion pack of 100 curated color and font themes for the theme-factory skill, organized into 14 categories spanning seven aesthetic families (Earthy, Feminine, Coastal, Bold, Boho, Vintage, Luxury), Iconic Brands (Facebook, Instagram, Tesla, Nike, McDonald's, Spotify, Google, Netflix, Coca-Cola), developer/editor/terminal themes (Dracula, Nord, Gruvbox, Tokyo Night, Catppuccin, Solarized, Monokai, One Dark, Synthwave 84), Master Painters (Rothko, Pollock, Picasso, Rembrandt, Van Gogh, Monet, Klimt, Vermeer, Hokusai, Matisse, Frida Kahlo, Mondrian), and Directors & Cinematographers (Spielber

Frontend & Design

Build Startup Brand

Kappaemme-git/build-startup-brand

Turn a startup idea, product, URL, pitch, or existing visual identity into a distinctive startup brand system and a polished standalone HTML report. Use when Codex needs to create or refine startup positioning, a salient brand idea, brand promise, tagline, messaging, voice, creative territories, logo or symbol directions, color palette, typography, visual language, brand applications, or compact brand guidelines. Also use for startup rebrands and brand audits that should end with an actionable, openable brand identity report.

Frontend & Design

Scroll Painting Animation

xiwan/scroll-painting-animation

把一幅长卷名画（或任何"沿一条路看过去"的全景题材）做成横向卷轴、等距游戏画风的动画短片：读原作排时间轴与功能团、用 ComfyUI 统一风格地生产建筑/人物/船/贴图精灵、用 Python（numpy + Pillow）搭等距场景并逐帧渲染、做疏密与聚团布局、行人车马船的运动、昼夜晨昏与万家灯火、题诗逐字晕墨显现、用 MMAudio 按画面生成环境声与场景音效，最后用统计、抽帧、跳帧检查、响度测量验收。附可复用库 scrollkit、可运行骨架 scroll_demo 和一套工具脚本。来源项目：《清明上河图》180 秒 1080p 等距动画（《烽火与炊烟》画风）。触发词：清明上河图动画、名画动起来、长卷动画、卷轴动画、千里江山图、姑苏繁华图、等距卷轴、isometric scroll、 panoramic pan animation、2.5D 全景动画、横向平移长卷、ComfyUI 精灵、批量生成建筑素材、功能团布局、万家灯火夜景、题诗渐显、MMAudio 音效、按画面配音效。

Frontend & Design

Dsh Plugin Dev

realchendahuang/dsh-skill

DeepSeek Harness (DSH) 插件、扩展与技能开发权威规范。当需要为 DSH 编写自定义工具 (Tool)、拦截钩子 (Hook)、UI 扩展、服务提供方或打包发布 DSH 插件时使用。提供官方 Cordis 微内核架构契约、执行流水线、隔离调试与质量校验 SOP。

Frontend & Design

Dejank

gbasin/dejank

Detect and diagnose visual jank in React UIs. Covers two modes -- static analysis of code patterns that cause flicker, layout shift, and flash of intermediate state (for pre-merge review or preventive sweeps), and runtime investigation of specific visual symptoms (flicker, blink, jump, stutter, remount churn, scroll reset, post-paint correction). Use when the user mentions jank, something feeling off, flashing, blinking, layout shifting, full repaints, or wants a render stability audit.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.