scaffold-react-vite

Converts refined React TSX artifacts into buildable Vite 8 + React 19 + TypeScript projects.

Updated Feb 16, 2026
One-click install
npx skills add https://github.com/GQAdonis/artifact-refiner-skill --skill scaffold-react-vite-gqadonis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scaffold-react-vite
Source: https://github.com/GQAdonis/artifact-refiner-skill/tree/main/skills/scaffold-react-vite
Command: npx skills add https://github.com/GQAdonis/artifact-refiner-skill --skill scaffold-react-vite-gqadonis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Turning a single refined React TSX artifact into a fully buildable, convention-compliant project requires tedious manual setup of Vite, Tailwind, shadcn components, directory structure, and build verification. This Skill automates that entire scaffolding pipeline. ## Core Features & Use Cases - Automated Project Scaffolding: Runs shadcn init with the Vite template, applies brand-token CSS, and reorganizes the tree into a feature-based clean architecture (src/{app,features,shared}/). - Intelligent TSX Patching: Routes default exports to components, useXxx hooks to hooks directories, and useXxxStore to zustand stores, with kebab-case file renaming and automatic shadcn add for detected UI imports. - Optional Rust + Axum Wrapper: Generates a self-contained single-binary server that embeds the built SPA via rust-embed for distribution without a Node.js runtime. - Use Case: After refining a dashboard component with refine-ui, scaffold it into a buildable project with your brand tokens applied, verified via pnpm build, and optionally ship it as one Rust executable. ## Quick Start Ask the AI to scaffold your refined TSX artifact into a Vite project by providing the artifact name, source TSX path, brand name, and target output directory.

Frequently Asked Questions about scaffold-react-vite

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

FAQPage Schema
How do I scaffold a React Vite project from a single TSX file?▼

Provide the artifact name, source TSX path, brand TOML name, and target directory. The orchestration script runs shadcn init with the Vite template, patches your TSX into a feature folder, and verifies the result with pnpm install and pnpm build.

How to convert a React component into clean architecture structure?▼

The scaffolder routes exports automatically: default-exported components go to src/features/<name>/components/, useXxx hooks go to hooks/, and useXxxStore functions go to stores/. File names are kebab-cased while component identifiers stay PascalCase.

Can I serve a Vite React SPA from a single Rust binary?▼

Yes, pass the --with-axum-wrapper flag to generate a server/ directory containing a Rust + Axum binary that embeds the built dist via rust-embed and serves the SPA from one executable, with room to add API routes.

Does the scaffolder support overwriting an existing target directory?▼

No, the target directory must not exist before scaffolding. Version 1 has no overwrite support, so choose a fresh output path for each scaffold run.

When should I not use the Axum wrapper for my React app?▼

Skip the wrapper when deploying to static-only hosts like Vercel, Netlify, or S3, or when you need hot-reload during frontend development. The binary is intended for production single-executable distribution.