skills.rest
MattSenter
MattSenterCOMMUNITY
Explore all skills by this author →
Website𝕏@MattSenterGitHub

senternet-site-design

Convert Claude Design HTML exports into React components and a design system.

Updated May 8, 2026
Search Tags:#typescript#react#design system#next.js#vite#css variables#html conversion
One-click install
npx skills add https://github.com/MattSenter/senternet-site-skills --skill senternet-site-design-mattsenter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senternet-site-design
Source: https://github.com/MattSenter/senternet-site-skills/tree/main/.claude/skills/senternet-site-design
Command: npx skills add https://github.com/MattSenter/senternet-site-skills --skill senternet-site-design-mattsenter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning a Claude Design HTML export into a maintainable codebase requires manually extracting CSS variables, splitting markup into components, and wiring up routing, fonts, and images. This Skill automates that conversion into a Vite + React + TypeScript (or Next.js) project. ## Core Features & Use Cases - Design System Extraction: Pulls CSS custom properties, typography, and brand colors from the export into a dedicated design-system.css file, with self-hosted font setup via @fontsource. - Component Conversion: Maps each HTML section to typed React components, converts HTML syntax to JSX, and implements scroll-reveal hooks and smooth-scroll navigation. - Use Case: You exported a landing page from Claude Design as a zip. Provide the path, and the Skill extracts it, builds the component tree, copies images, wires routing in App.tsx, and starts the dev server for visual verification. ## Quick Start Convert my Claude Design export at /path/to/design-export.zip into React components and start the dev server.

Frequently Asked Questions about senternet-site-design

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

FAQPage Schema
How do I convert a Claude Design HTML export to React components?▼

Provide the zip, directory, or HTML file path. The Skill extracts CSS custom properties into a design-system.css file, maps each HTML section to a typed React component, converts HTML syntax to JSX, and wires up routing in App.tsx.

How do I self-host Google Fonts in a Vite React project?▼

Install the matching @fontsource or @fontsource-variable package via npm, then import it at the top of src/index.css. Remove the Google Fonts link tags from index.html to eliminate the render-blocking external request Lighthouse flags.

Does this conversion work with Next.js instead of Vite?▼

Yes, the extraction work is identical. Output lands in app/globals.css and app/page.tsx instead of src/pages, uses next/link and next/image, and converted pages stay server components with 'use client' only on interactive leaves.

Why do images 404 after converting a design export?▼

Claude Design places images in an images/ folder at the export root, but Vite serves static assets from public/. Copy the files into public/images/ and reference them with absolute paths like /images/foo.jpg.

Why don't scroll reveal animations trigger in my React app?▼

The IntersectionObserver hook must run after the DOM paints. Place useScrollReveal() in the top-level HomePage or a layout that always mounts, not in a conditionally rendered component that may miss early elements.

Related Skills

Explore More Software Engineering Skills→
vaniachowvaniachow

frontend-design

Generate consistent HTML dashboards using the Anthropic/Claude brand design system.

Community
Advanced
Celia-12Celia-12

repl-seo-optimizer

Review and fix SEO issues in Replit-built website code before deployment.

Community
Intermediate
get-convexget-convex
9

adapt

Plan responsive layouts across mobile, tablet, and desktop breakpoints.

Official
Advanced
IDEA-on-ActionIDEA-on-Action

Minu Portal Skill

Generate static landing pages for Next.js 15 App Router sites with SEO metadata.

Official
Intermediate