site-export-to-react

site-export-to-react is a skill for Claude Code from matteotitta/genesys-skills. It costs 206 tokens per session (2,615 once invoked), scanned A, original, MIT.

A migration guide for turning a Webflow or Framer site export into a React application whose code the team owns. React is a JavaScript interface library; server-side rendering means some pages are prepared on the server before reaching the browser.

In plain words
What is it for?
It helps convert Webflow HTML, CSS, JavaScript, images, and fonts, or coordinate a Framer project, into a React app with server-side rendering, Storybook components, and Netlify deployment.
Why use it?
It helps preserve the existing site's appearance while moving away from a no-code project or export. It also provides a structure for maintaining the converted site and deploying it.

Skill for Claude Code

Written for Claude Code: paths in frontmatter. Also seen: reads .claude/ paths.

Good fit It helps convert Webflow HTML, CSS, JavaScript, images, and fonts, or coordinate a Framer project, into a React app with server-side rendering, Storybook components, and Netlify deployment.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/matteotitta/genesys-skills/site-export-to-react
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add matteotitta/genesys-skills --skill site-export-to-react
Clone the repo
git clone --depth 1 https://github.com/matteotitta/genesys-skills

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for site-export-to-react

README.md
[![agentmods](https://agentmods.dev/badge/skills/matteotitta/genesys-skills/site-export-to-react/github.svg)](https://agentmods.dev/skills/matteotitta/genesys-skills/site-export-to-react)
Your own site
<a href="https://agentmods.dev/skills/matteotitta/genesys-skills/site-export-to-react"><img src="https://agentmods.dev/badge/skills/matteotitta/genesys-skills/site-export-to-react/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for site-export-to-react

Your own site · 80×15
<a href="https://agentmods.dev/skills/matteotitta/genesys-skills/site-export-to-react"><img src="https://agentmods.dev/badge/skills/matteotitta/genesys-skills/site-export-to-react.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 206 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,615 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00206 $0.02615
Opus 5 $0.00103 $0.01307
Sonnet 5 $0.00041 $0.00523
Haiku 4.5 $0.00021 $0.00262

Measured 9d ago against content hash ca76f3d1a1a3, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

site-export-to-react scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/primitives/website/execution/site-export-to-react/SKILL.md · 189 lines

How it starts

The opening of the file, as written. The whole thing — 189 lines — stays where its author put it; the contents beside it link to each section on GitHub.

/site-export-to-react — no-code export → code-owned React

Migrate a Webflow or Framer no-code site into a maintainable, code-owned React app on TanStack Start (SSR) + Netlify. Two front-end adapters feed one shared backbone. The design already exists — the job is fidelity: keep the source's compiled CSS + class names verbatim so the site is pixel-parity and shippable at every intermediate commit.

Adapted from dmenchaca/webflow-to-react (MIT © 2026 Diego Menchaca) per /steal analysis (.claude/discovery/0726-webflow-to-react-steal-analysis.md). The Framer adapter orchestrates the live unframer MCP — never vendoring its source. See NOTICE.md.

Deploy discipline lives in .claude/rules/tanstack-netlify-deploy.md (auto-loads on this stack).


Triggers

Invoke when user says:

  • /site-export-to-react <export-path | framer-project>
  • "migrate this Webflow site to React" / "own the code for my no-code site"
  • "convert this Framer project to code"
  • The repo already contains a Webflow export (index.html + css/ + js/ + images/ + fonts/) at its root

Do NOT invoke when:

  • User only has a live URL, not the export → use /website-clone (DOM-scrape path)
  • Source is Figma → use /figma-prototype
  • Fresh site from positioning + messaging → use /website-build
  • Webflow CMS dynamic collections are the ask — static export only; CMS is out of scope

Inputs

Input Required? Source
source_export required A Webflow static-export folder/ZIP or a Framer project ID (with the "React Export" plugin enabled)
brand-kit recommended DESIGN.md tokens — applied to net-new components added after parity (not to the preserved vendor CSS)
target_netlify_site recommended Existing Netlify site to deploy into

If neither a Webflow export nor a Framer project is present, name what's missing and stop — don't guess.

Read the full file on GitHub · 189 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 9d ago First seen · 189 lines · 204 tokens per session scan A ca76f3d1a1a3

Subscribe to this mod's changes

site-export-to-react is a skill published in the GitHub repository matteotitta/genesys-skills (36 stars, last pushed 1mo ago), licensed MIT. It adds 206 tokens to every session and 2,615 once invoked, about $0.0010 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

gingiris-b2b-growth

🇺🇸 B2B SaaS Growth — PLG vs SLG Playbook — Diagnose whether your problem is distribution, pricing, or PMF. PLG/SLG selection by ACV and sales cycle, the 5-stage path from $0 to $10M ARR, NRR discipline, affiliate & channel motion, enterprise tiering. Built from HeyGen, Deel, Vercel, Supabase, Snowflake patterns.…

Gingiris-1031/gingiris-skills · 484 tokens

gr-b2b-growth

A guide to growing a business-to-business software product from early user research to large-scale sales. B2B software is sold to companies rather than individual consumers.

Gingiris-1031/gingiris-skills · 83 tokens

go-to-market-playbook

A reusable Go-to-Market strategy template for both B2B and B2C launches. Covers positioning, messaging, ICP definition, channel selection, and competitive analysis frameworks. By @WeiYipei.

Gingiris-1031/gingiris-skills · 48 tokens

v0-lander

Step-by-step guide to building GTM landing pages with v0 by Vercel — the AI generative UI platform. Covers prompt engineering for v0, iterating on generated UI, exporting to Next.js, deploying on Vercel, and connecting forms/analytics. Use when building a landing page, pricing page, waitlist page, event page, or…

LeadMagic/gtm-skills · 125 tokens

vibe-coding

AI-powered development for GTM — vibe coding workflows using v0, Jesse, Claude Code, Lovable, Bolt.new, Replit Agent, and Tempo Labs for rapidly building landing pages, marketing sites, tools, dashboards, and prototypes. Based on Andrej Karpathy's "vibe coding" philosophy. Use when building GTM assets with AI…

LeadMagic/gtm-skills · 132 tokens

ui-ux-gtm

Design GTM UI/UX patterns — landing pages (hero, proof, CTA), forms (progressive disclosure, inline validation), signup flows (activation, time-to-value), dashboards (KPI hierarchy, trend indicators), and accessibility (WCAG 2.2 AA). Use when designing or auditing GTM tool interfaces, landing pages, conversion flows…

LeadMagic/gtm-skills · 96 tokens